Skip to content

Fabric 7

Micah Godbolt edited this page Jul 17, 2019 · 40 revisions

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.3, which includes improved type safety features we need to avoid breaking partners. While 3.3 works, we recommend using at least 3.5 or above.

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.

Migration

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 migration changes that are applied when running this tool, see our @uifabric-migration wiki page.

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:

Variable name Current (pre-Fluent) font size/weight Fluent font size/weight
tiny 10px / semibold 10px / regular
xSmall 11px / regular 10px / regular
small 12px / regular 12px / regular
smallPlus 13px / regular 12px / regular
medium 14px / regular 14px / regular
mediumPlus 15px / regular 16px / regular
large 17px / semilight 18px / regular
xLarge 21px / light 20px / semibold
xLargePlus *new 21px / light (back-ported) 24px / semibold
xxLarge 28px / light 28px / semibold
xxLargePlus *new 28px / light (back-ported) 32px / semibold
superLarge 42px / light 42px / semibold
mega 72px / light 68px / semibold

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)

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

Clone this wiki locally
You can’t perform that action at this time.