# Step 2.2: UI Fabric Component Library

[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)

[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](#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

- 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 with examples and TypeScript API documentation
- Components are highly customizable and themeable
- Comprehensive library
- 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 on GitHub
- Engineering system is shared and re-usable by other teams

## How to Find It

GitHub repo:
https://github.com/officedev/office-ui-fabric-react

Documentation:
https://developer.microsoft.com/en-us/fabric/#/components

## How to Use It

### Importing a Component

```jsx
import { DefaultButton } from 'office-ui-fabric-react';

const MyComponent = () => {
  return (
    <div>
      <DefaultButton>Hello World</DefaultButton>
    </div>
  );
};
```

### Customizing Behavior of Individual Components

Take a look at the [Button documentation](https://developer.microsoft.com/en-us/fabric#/components/button).

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';

const MyComponent = () => {
  return (
    <div>
      <DefaultButton iconProps={{ iconName: 'Mail' }}>Send Mail</DefaultButton>
    </div>
  );
};
```

### Customizing Component Rendering

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';

const MyComponent = () => {
  return (
    <div>
      <TextField onRenderPrefix={() => <Icon iconName="Search" />} />
      <TextField onRenderPrefix={() => 'hello world'} />
    </div>
  );
};
```

## Layout with Stack

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 three or so flexbox standards? (this means old articles may have non-working code)

Fabric's answer is: Stack.

**Stack** is a container-type component that abstracts the usage of flexbox to define the layout of its child components.

Flexbox uses CSS styles to control:

- direction
- grow
- shrink
- wrap
- justification
- alignment

Stack abstracts these CSS styles and provides typings to make them more discoverable.

Check out a cookbook of sorts in our [documentation](https://developer.microsoft.com/en-us/fabric#/components/stack).

# Exercise 1: Getting familiar with the Fabric documentation site:

Open the [documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button)

# Exercise 2: "Fabric"ize the TodoFooter.tsx

1. Open TSX file inside `exercise/src/components/TodoFooter.tsx`
2. Follow the top TODO comment to import Stack, Text and DefaultButton components from Fabric
3. Follow the TODO comment to:

- replace `<footer>` with a `<Stack>`
- replace `<span>` with a `<Text>`
- replace `<button>` with a `<DefaultButton>`

## 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 similar)