frontend-bootcamp/step2-02

Step 2.2: UI Fabric Component Library

Lessons | Exercise | Demo

UI 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.

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

• 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

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.

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:

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:

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.

Exercise

1. Open the documentation for DefaultButton
2. Open each TSX file inside exercise/src/components
3. Replace some of the built-in HTML tags with these Fabric components:

• Stack
• DefaultButton
• Checkbox
• TextField
• Pivot (for the filter)

Hint: think about how you can use Stacks to make the layout look nicer.

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)