From bfc545ea5deba89dd447d448f4f21e95e88b862d Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Wed, 27 Feb 2019 21:39:18 -0800 Subject: [PATCH] Step 2-02 updates --- step2-02/README.md | 76 ++++++++++++++++++++++++---------------------- 1 file changed, 39 insertions(+), 37 deletions(-) diff --git a/step2-02/README.md b/step2-02/README.md index 46173fa..fbd87c5 100644 --- a/step2-02/README.md +++ b/step2-02/README.md @@ -2,38 +2,38 @@ [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) -UI Fabric is a Component Library that is developed to reflect the latest Microsoft design language. It is used in many Microsoft web applications and is developed in the open. +[UI Fabric](https://developer.microsoft.com/en-us/fabric) is a component library that reflects the latest Microsoft design language. It is used in many Microsoft web applications and is [developed in the open](https://github.com/OfficeDev/office-ui-fabric-react). We'll talk about: -- What makes it good -- How to find it -- How to use it -- Laying out Apps with Stack +- [What makes it good](#what-makes-it-good) +- [How to find it](#how-to-find-it) +- [How to use it](#how-to-use-it) +- [Laying out apps with Stack](#layout-with-stack) -# What Makes It Good +## What Makes It Good - Fabric has been developed BOTH by developers and design engineers working together as a team - Most notable Microsoft web products use it -- It is documented both from examples and generated from API (TypeScript) itself +- It is documented both with examples and TypeScript API documentation - Components are highly customizable and themeable - Comprehensive library -- Works with (aria) and augments (focus management) web accessibility standards +- Works with assistive technologies and conforms to web accessibility standards for focus management - Fully funded and well managed - shield rotation and lots of automation work -- Engineering is done in the open in github.com +- Engineering is done in the open on GitHub - Engineering system is shared and re-usable by other teams -# How to Find It +## How to Find It -github repo: +GitHub repo: https://github.com/officedev/office-ui-fabric-react -Documentation can be found here: +Documentation: https://developer.microsoft.com/en-us/fabric/#/components -# How to Use It +## How to Use It -## Importing a Component +### Importing a Component ```jsx import { DefaultButton } from 'office-ui-fabric-react'; @@ -47,11 +47,11 @@ const MyComponent = () => { }; ``` -## Customizing Behavior of Individual Component +### Customizing Behavior of Individual Components -Take a look at the documentation: https://developer.microsoft.com/en-us/fabric#/components/button +Take a look at the [Button documentation](https://developer.microsoft.com/en-us/fabric#/components/button). -Let's say we want an Icon to be rendered with the Button Text, we'd use the `iconProps` +From the documentation, we can see that if we want to render an icon along with the button's text, we can pass `iconProps` to the button: ```js import { DefaultButton } from 'office-ui-fabric-react'; @@ -65,9 +65,9 @@ const MyComponent = () => { }; ``` -## Render Props +### Customizing Component Rendering -Some Fabric components take in a render function like the TextField: +Some Fabric components take in a render functions to allow customizing certain parts of the component. An example with TextField: ```js import { TextField } from 'office-ui-fabric-react'; @@ -82,36 +82,36 @@ const MyComponent = () => { }; ``` -# Layout with Stack +## Layout with Stack -Before we start, let's look at flexbox. It is really, really complex to use: +Before we start, let's look at flexbox--a new CSS layout method which is powerful, but really, really complex to use: -- a guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ -- a tool: http://the-echoplex.net/flexyboxes/ -- did you know there were 3 or so flex box standards? i.e. Old links will have non-working code +- A guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ +- A tool: http://the-echoplex.net/flexyboxes/ +- Did you know there were three or so flexbox standards? (this means old articles may have non-working code) -Fabric's answer is: Stack +Fabric's answer is: Stack. -> A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components. +**Stack** is a container-type component that abstracts the usage of flexbox to define the layout of its child components. -The concepts are: +Flexbox uses CSS styles to control: - direction - grow +- shrink - wrap -- shrunk -- justify-content +- justification - alignment -Stack abstracts these CSS and provides a type discoverable. +Stack abstracts these CSS styles and provides typings to make them more discoverable. -Checkout a cookbook of sorts in our documentation: https://developer.microsoft.com/en-us/fabric#/components/stack +Check out a cookbook of sorts in our [documentation](https://developer.microsoft.com/en-us/fabric#/components/stack). # Exercise -1. Open up the [Documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button) -2. Open up the TSX files inside `components/` -3. Replace the DOM tags with Fabric components in those TSX files with these components: +1. Open the [documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button) +2. Open each TSX file inside `exercise/src/components` +3. Replace some of the built-in HTML tags with these Fabric components: - Stack - DefaultButton @@ -119,10 +119,12 @@ Checkout a cookbook of sorts in our documentation: https://developer.microsoft.c - TextField - Pivot (for the filter) -# Bonus Exercise +> Hint: think about how you can use Stacks to make the layout look nicer. -GO WILD! There are so many components from the Fabric library! Try to put some components in the exercise component files. Try out these concepts that we have mentioned above: +## Bonus Exercise + +GO WILD! There are so many components in the Fabric library! Try to put some components in the exercise component files. Try out these concepts mentioned earlier: - Importing components from `office-ui-fabric-react` - Customizing component with props found on the documentation site -- Customize component with render props (these will be called onRender or something like that) +- Customize component with render props (these will be called onRender___ or similar)