Fabric 7
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.
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.
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.
To learn more about Microsoft's Fluent design language, visit our Fluent design website.
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 |
- ComboBox: Breaking Change deprecated props
value
andonChanged
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.
- 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
)
- Remove
Shimmer
control. (615c8a6
)
- 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
)
- Changes to support slots API refactoring (
14b1d77
)
- Update file type icons to use new Fluent assets by default (
5e46b40
)n/a
- 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
)
- Changin borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius and borderTopRightRadius to be of type ICSSPixelUnitRule, like borderRadius, instead of type string. (
2faffcc
)
- Non-destructive run by default, show affected files. (
9dd16b5
)
- Card: Improving CardItem and adding CardSection to allow Card children to fill the Card's margins. (
77a9195
)
- Extend
getFocusStyle
to include named parameters. (73f2ff2
) - Remap existing font variables and add new ones. (
31d3fd9
)
- Remove deprecated
autobind
decorator. (d7dd099
) migration provided - createRef: removed (use React.createRef instead) (
d7dff28
) migration provided
- FAQ - Fabric and Stardust to Fluent UI
-
@fluentui/react
Version 9 -
@fluentui/react
Version 8 - Contributing to the
7.0
branch - How to apply themes (version 7/8)
- Planning and development process (for work by the core team)
- Conducting meetings Style guide
- Keeping up with review requests
- RFC review process
- Setup (configuring your environment)
- Fluent UI React version 7/8
- CLA
- Overview
- Repo structure
- Development process
- Contributing to previous versions
- API Extractor
- Build command changes made in early 2020
- Component implementation guide
- Creating a component
- Implementation Best Practices
- Theming
- Documenting
- Styling (old approach)
- Overview
- Testing with Jest
- E2E testing (Cypress)
- Visual testing (Screener)
- Accessibility review checklist