From 593df3f4e1895b7a149d0667fe7d39a16dd2a64e Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 22 Feb 2019 14:12:21 -0800 Subject: [PATCH] updating step 3 with more info in exercise and info about styles prop --- step2-02/README.md | 20 +++++---- step2-03/README.md | 42 ++++++++++++++++++- step2-03/demo/src/components/TodoHeader.tsx | 17 +++++++- step2-03/exercise/src/components/TodoApp.tsx | 1 + .../exercise/src/components/TodoFooter.tsx | 3 ++ 5 files changed, 73 insertions(+), 10 deletions(-) diff --git a/step2-02/README.md b/step2-02/README.md index 3e1011e..a5cfe10 100644 --- a/step2-02/README.md +++ b/step2-02/README.md @@ -15,10 +15,16 @@ https://developer.microsoft.com/en-us/fabric/#/components # Exercise -- Open up the TSX files inside `components/` -- Replace the DOM tags with Fabric components in those TSX files with these components: - - Stack - - DefaultButton - - Checkbox - - TextField - - Pivot (for the filter) +1. Open up the Documentation for DefaultButton here: +2. Open up the TSX files inside `components/` +3. Replace the DOM tags with Fabric components in those TSX files with these components: + +- Stack +- DefaultButton +- 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. diff --git a/step2-03/README.md b/step2-03/README.md index eb3ec4c..f5bf00d 100644 --- a/step2-03/README.md +++ b/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 `` 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 `
` +- 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 `` 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 diff --git a/step2-03/demo/src/components/TodoHeader.tsx b/step2-03/demo/src/components/TodoHeader.tsx index 7a9cae2..9a56b33 100644 --- a/step2-03/demo/src/components/TodoHeader.tsx +++ b/step2-03/demo/src/components/TodoHeader.tsx @@ -29,9 +29,22 @@ export class TodoHeader extends React.Component - + ({ + ...(props.focused && { + field: { + backgroundColor: 'black' + } + }) + })} + /> - Add + + Add + diff --git a/step2-03/exercise/src/components/TodoApp.tsx b/step2-03/exercise/src/components/TodoApp.tsx index c7e0c35..4d52c64 100644 --- a/step2-03/exercise/src/components/TodoApp.tsx +++ b/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 diff --git a/step2-03/exercise/src/components/TodoFooter.tsx b/step2-03/exercise/src/components/TodoFooter.tsx index 6a44d83..e806563 100644 --- a/step2-03/exercise/src/components/TodoFooter.tsx +++ b/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 (