6.0.0

Breaking Changes

• #868
  • The sass folder has been reorganized, so any references you have will likely need to updated. Variables and mixins are now in their own folders.
  • The mixin file _Fabric.i18n.scss has been removed. This file was an unintentional duplicate. If you have a reference to it in your project, you should instead use mixins/_Directionality.Mixins.scss.
  • Mixins that existed solely to generate browser prefixes have been removed. We recommend you use a build tool like Autoprefixer that can be configured to your project's unique browser support requirements.
  • The ms-Fabric wrapper component is now defined in _Wrapper.scss instead of _Fabric.Base.scss.
  • The ms-Fabric wrapper component is now required on all pages using Fabric, as it applies the font family that is inherited by all other components and styles. You can include this class directly on the body element, or on any element that wraps your application.
  • _Fabric.Common.scss has been renamed to _References.scss. Importing this file in your project provides access to all of Fabric's variables and mixins, without outputting any CSS.
• #888 Component-specific z-indexes have been removed. These should be defined within component libraries like Fabric React.
• #887 Many mixins and variables have been renamed for consistency. See the PR for full details on these changes.
• #902 The utility prefix is no longer in use:
  • You will need to find all instances of ms-u- and replace with ms-.
  • Examples:
    • ms-u-sm12 is now ms-sm12
    • ms-u-slideRightIn10 is now ms-slideRightIn10
• #910 The AlchemyLogo and CollabsDBLogo icons have been removed without deprecation by special request.

New

• #854
  • The focusBorder() mixin has been added from Fabric React. This removes the browser's default keyboard focus style and uses a pseudoelement to create a consistent focus style. It works in conjunction with the ms-Fabric wrapper's is-focusVisible state, so that focus rectangles are only visible during keyboard interactions.
  • A new mixin, ms-animation-keyframes(), has been added to output all of the @keyframes required by the animation classes.
• #877
  • Fabric now support version scoping, so that multiple versions of Fabric can be used on a single page without conflicting. See the PR for details on how to use this feature.
• #899
  • Localized font families are now supported by default, without requiring a custom bundle.
  • Added support for Selawik as an open source alternative to Segoe UI.
• #910
  • New icons:
    • Snowflake (there were previously two icons named Snow by mistake)
    • SingleColumn
    • DoubleColumn
    • TripleColumn
    • ColumnLeftTwoThirds
    • ColumnRightTwoThirds
• #913 Set '-ms-high-contrast-adjust' to 'none', preventing Edge from overriding the high-contrast mode styles that have been designed for the components.
• #914 Added a ms-focus-outline() mixin, which overrides the browser's default outline styles. This is useful for inline elements (such as links) that may span multiple lines and can't use ms-focus-border().

Fixed

• #868
  • The ms-Grid-col class now styles child ms-Grid classes, so that grids nest correctly.
  • Animations now work correctly in right-to-left (RTL) layouts.
  • Brand icons are now included in fabric.rtl.css.

Changed

• #862 The build now uses gulp-sass 3.1.0.
• #911 The color of "theme light" has been updated very slightly.

Deprecations

• #910
  • The Planner icon has been renamed to PlannerLogo
  • The AppsForOfficeLogo icon has been renamed to OfficeAddinsLogo
  • Two previously-deprecated icons have been removed:
    • DynamicsCRMLogo
    • CarotRightSolid8

Documentation updates

• #899
  • Added an example of the ms-Fabric--selawik modifier class, which applies a font-family that loads the Selawik web font if Segoe UI is not available locally.
  • Shows how to write a custom class that will set the base font family for the application, if another font is preferred to Segoe UI and Selawik. Fixes #871.
  • Updated the font weight model to correctly render the table (name and class were reversed).
  • Updated the localization table with the correct lang attributes, font families, and new samples of text in each language.