updating step 3 with more info in exercise and info about styles prop

step2-02/README.md

@@ -15,10 +15,16 @@ https://developer.microsoft.com/en-us/fabric/#/components
 
 # Exercise
 
-- Open up the TSX files inside `components/`
+1. Open up the Documentation for DefaultButton here:
-- Replace the DOM tags with Fabric components in those TSX files with these components:
+2. Open up the TSX files inside `components/`
-  - Stack
+3. Replace the DOM tags with Fabric components in those TSX files with these components:
-  - DefaultButton
+
-  - Checkbox
+- Stack
-  - TextField
+- DefaultButton
-  - Pivot (for the filter)
+- Checkbox
+- TextField
+- Pivot (for the filter)
+
+# Bonus Exercise
+
+GO WILD! There are so many components from the Fabric library! Try to put some components in the exercise component files.

step2-03/README.md

@@ -2,6 +2,36 @@
 
 Theming and Styling with UI Fabric. In this section, we will illustrate how to utilize some of the built-in theming and styling features right inside UI Fabric component library. UI Fabric exposes its own css-in-js library called `mergeStyles` that is very performant compared with other similar libraries.
 
+A CodePen that illustrates what `mergeStyles` does: https://codepen.io/dzearing/pen/jGdgrE?editors=1011
+
+There are three areas that we should focus on in this step:
+
+1. Theming with Fabric
+2. CSS-in-JS with mergeStyles
+3. Customizing Fabric Components `styles` prop
+
+## 1. Theming with Fabric
+
+- Fabric applies themes by propagating the theme down the children through the React Context mechanism
+- It is applied with the `<Customizer>` component
+- There are some predefined themes within Fabric already, like Fluent (which will become the default in the next major), MDL2, Azure, and some other sample themes like Teams.
+- Take a look at `demo/src/components/TodoApp.tsx`
+
+## 2. CSS-in-JS with mergeStyles
+
+- `mergeStyles` is a styling library that creates CSS class from styles that are expressed in JS
+- These classes can be passed into `className` prop of any component like `<div>`
+- This library replaces the need to import CSS stylesheets because they are bundled as normal JS code
+- Take a look at `demo/src/components/TodoApp.tsx`
+
+## 3. Customizing Fabric Controls
+
+- calling `mergeStyles` is time consuming and very static
+- Fabric components expose a `styles` prop (not to be confused with the React built-in one called `style`)
+- You can use intellisense to discover which parts of the component you can to customize
+- You can even use a style function to change the style based on some style prop
+- Take a look at these customizations in `demo/src/components/TodoHeader.tsx`
+
 # Exercises
 
 ## Themes - Using Predefined Theme
@@ -63,7 +93,7 @@ loadTheme({
 
 The styling library name is glamorous nor does it bring about emotion, but it is very quick and lightweight. `MergeStyles` turns CSS Rules into CSS class names to be applied to the components.
 
-1. Try applying a merged style `className` as a prop inside any component that you would find.
+1. Try applying a merged style `className` as a prop inside `TodoApp`
 
 ```tsx
 import { mergeStyles } from 'office-ui-fabric-react';
@@ -79,3 +109,13 @@ const className = mergeStyles({
 ```
 
 2. Try to give a few components extra padding
+
+## Customize the Fabric Components
+
+1. Open `exercise/src/components/TodoFooter.tsx`
+
+2. Find the `<DefaultButton>` and insert a `styles` prop
+
+3. Try to customize this with a styles object (let the Intellisense of VS Code guide you on what you can use to customize)
+
+4. Try to customize this with a styles function

step2-03/demo/src/components/TodoHeader.tsx

@@ -29,9 +29,22 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
 
         <Stack horizontal gap={10}>
           <Stack.Item grow>
-            <TextField placeholder="What needs to be done?" value={this.state.labelInput} onChange={this.onChange} />
+            <TextField
+              placeholder="What needs to be done?"
+              value={this.state.labelInput}
+              onChange={this.onChange}
+              styles={props => ({
+                ...(props.focused && {
+                  field: {
+                    backgroundColor: 'black'
+                  }
+                })
+              })}
+            />
           </Stack.Item>
-          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>
+          <PrimaryButton onClick={this.onAdd} styles={{ root: { backgroundColor: 'maroon' }, rootHovered: { background: 'green' } }}>
+            Add
+          </PrimaryButton>
         </Stack>
 
         <Pivot onLinkClick={this.onFilter}>

step2-03/exercise/src/components/TodoApp.tsx

@@ -10,6 +10,7 @@ import { TeamsCustomizations } from '@uifabric/theme-samples';
 
 let index = 0;
 
+// TODO: Change this to add other CSS styles like backgroundColor, fontSize, etc
 const className = mergeStyles({
   padding: 25,
   ...getTheme().effects.elevation4

step2-03/exercise/src/components/TodoFooter.tsx

@@ -12,6 +12,9 @@ interface TodoFooterProps {
 export const TodoFooter = (props: TodoFooterProps) => {
   const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
 
+  // TODO: play around with the DefaultButton component below with a "styles" prop
+  // - try it with an object: styles={{ ... }}
+  // - try it with a function: styles={props => ({ ... })}
   return (
     <Stack horizontal horizontalAlign="space-between">
       <Text>