Fabric 7 introduces Microsoft's new Fluent design language by default. There are a variety of adjustments, described below. We've also taken a dependency on React 16.8.1, which will allow for future bundle size improvements as we can move much of our redundant state management over to hooks.

We've also taken a minbar dependency on TypeScript 3.5, which includes improved type safety features we need to avoid breaking partners.

What about Fabric 6? (or 5?)

We will continue to support both Fabric 5 and 6. These versions will live within the 5.0 and 6.0 branches respectively. Please make sure to target the appropriate branch if make PRs for those versions.

We do not plan on cherrypicking all Fabric 7 fixes into 6.0. We will certainly cherrypick any severe bugs or impactful low-risk performance improvements. The same release pipeline running for 6.0 today (releasing each day if changes have been made) will still continue.

Upgrade Path (Migrations and Breaking Changes)

Fabric 7 is shipping the package @uifabric/migration which will ease the transition from Fabric 6 to Fabric 7.

Before upgrading to Fabric 7 run the command below in your source code directory to identify changes that need to be made before upgrading. Run the command with the -w option to have the script automatically update your code with these suggestions. Beware that the -w option will modify files in-place, so ensure that files are committed to source control beforehand.

# note to use 7.0.0, not the current release number
npx @uifabric/migration 7.0.0

For a complete list of breaking changes, see @uifabric-migration.

Changes related to the Fluent theme

To learn more about Microsoft's Fluent design language, visit our Fluent design website.

Font size and weight changes

As part of the Fluent by default strategy, we have a new type ramp. The change will affect text content on a page that was styled using FontSizes from @uifabric.styling package or theme.fonts object provided by the default theme. All font sizes except the largest one will shift by at most a single pixel. Many font weights change as well, with the most significant changes in the larger half of the ramp, changing from light to semibold. These changes are backwards compatible.

Below is a comparison table between Fabric 6 and 7:

Changelog

office-ui-fabric-react

Breaking changes

• ComboBox: Breaking Change deprecated props value and onChanged removed (ff16255) migration provided
• DetailsList, DetailsRow, DetailsRowFields: remove deprecated props, logic and styles related to Shimmer. (e3080da)
• Dropdown: className should be applied to the root
• Rating: Breaking change is rating prop is passed, control will reflect value always. (2ffdd29)
• Remove use of deprecated @autobind decorator (d7dd099) migration provided
• SearchBox: pass event to onChange (a41bd00) migration provided
• ShimmerDetailsList: remove deprecated props and style props. (baa1060)
• TextField: Strict controlled/uncontrolled behavior (04983f3)
• Moved Router utility to @uifabric/example-app-base. Please consider a different routing solution for production applications.

Minor changes

• Changes to support slots API refactoring. (14b1d77)
• Do not export Foundation package. (5cfbccb)
• Stack: Adding relevant Stack and StackItem tokens. (77a9195)
• Support slots API changes. (37a5246)

@uifabric/experiments

Breaking changes

• Remove Shimmer control. (615c8a6)

Minor changes

• Add FloatingSuggestions (FloatingPeoplePicker without inheritence) (4717372)
• Button: Adding allowDisabledFocus prop and adding @docCategory tags on exports. (44be390)
• Button: Adding keytips to new Button. (c4507e4)
• Button: Adding toggle/checked functionality to Button. (65d3dec)
• Button: Adding uniqueId prop. (8815262)
• Button: Changing style of all variants to be Fluent by default and removing use of palette in favor of semantic slots. (2faffcc)
• Button: Making all MenuButton props optional. (8d6c7c4)
• Changes to support slots API refactoring. (14b1d77)
• Convert foundation components that have state to hooks. (5f4051f)
• SelectedItemsList: Add reworked Selected Items (no inheritence + hooks) (69ea4ba)
• SplitButton: Adding ability to use Alt+Down key combination from first focus stop and cleaning up API. (3e3bc89)
• SplitButton: Improving screenreader narration for secondary action and fixing styling in fabric 7 branch. (f815723)
• Support slots API changes. (37a5246)

@uifabric/fabric-website

Minor changes

• Changes to support slots API refactoring (14b1d77)

@uifabric/file-type-icons

Breaking changes

• Update file type icons to use new Fluent assets by default (5e46b40)n/a

@uifabric/foundation

Minor changes

• Enable API verification and export legacy styled. (5cfbccb)
• Evolve create component API to separate out view and make options bag optional. (20b09cc)
• Foundation: Convert state components to hooks. (5f4051f)
• Slots: Move slot options from individual props to new slots prop object. (37a5246)
• Slots: Refactor API and add slot options object. (14b1d77)
• Updating IComponent typings for ease of use in tests. (f97b56f)

@uifabric/merge-styles

Minor changes

• Changin borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius and borderTopRightRadius to be of type ICSSPixelUnitRule, like borderRadius, instead of type string. (2faffcc)

@uifabric/migration

Minor changes

• Non-destructive run by default, show affected files. (9dd16b5)

@uifabric/react-cards

Minor changes

• Card: Improving CardItem and adding CardSection to allow Card children to fill the Card's margins. (77a9195)

@uifabric/styling

Minor changes

• Extend getFocusStyle to include named parameters. (73f2ff2)
• Remap existing font variables and add new ones. (31d3fd9)

@uifabric/utilities

Breaking changes

• Remove deprecated autobind decorator. (d7dd099) migration provided
• createRef: removed (use React.createRef instead) (d7dff28) migration provided