Be notified of new releases
Create your free GitHub account today to subscribe to this repository for new releases and build software alongside 50 million developers.Sign up
This release includes the icon changes captured in PR #1195 . While that change is mostly minor additions and changes to the icon font, it removes 4 icons that are no longer supported, so it's technically a breaking change if you were using those icons.
Here're the release notes adapted from that PR.
Update icons to v3.54
This release updates the base Fabric Core icon set to more closely match Fabric React's. The big news here is that this adds 356 new icons to Fabric Core. There may be some additional visual tweaks to existing icons as well, to match the latest design intent in Fabric React.
First, let's review what else has been changed.
No more .woff2 and .ttf support
After the last release of the icons, there were a number of changes to the icon font/production toolchain that resulted in some different outputs. Today, that means that .woff2 and .tt files are not included. These may be restored in a future addition, but for now, .woff is the only format that will be provided.
Two icons have been renamed from their original versions. These include:
|Old name||New name|
The original names have been retained in the definitions, variables, mixins, and classnames to support backwards compatibility.
Removed icons (breaking changes)
Four icons have been removed that are no longer supported for public distribution. These are considered a breaking change as they will affect the build and runtime usage of anyone using Fabric Core <=10 with any of these icons today.
Icons removed include:
356 new icons have been added to Fabric Core. These represent requests from dozens of Microsoft product teams and other developers using Fabric Core.
This release updates Fabric to include a new set of styles that support the Fluent Design System.
What this release includes
The Fluent style updates include new colors, type styles, depths (shadows), and motion helpers. Here are details on some of the style updates:
- Colors are updated to include neutrals that are warmer and more approachable. There are also new color palettes for different types of use cases, like Personas, Communication, and a shared set for common components like personas, sites, and more.
- Typography has been updated to a new common type ramp that is or will be in use across core Microsoft apps, leveraging the latest type weights from Fluent.
- Depth styles now include a common set of shadow levels from Fluent, which can be applied to context menus, dialogs, panels, and other surfaces.
- Motion styles have been updated to match the latest Fluent styles.
Note: this release is also backwards-compatible with 9.x classes, meaning it does not remove any existing class names. We recognize that most Fabric Core users are likely using these classes, so we've retained them in
.MDL2.scss files. We will monitor their usage to see if it makes sense to remove them in the future.
What this release does not include
We aren't including the new Office App Icons in this release (#1162). We're still working on some details to release these soon, but in the meantime, we want to get the base Fluent styles out the door.
What is Fluent?
Fluent is Microsoft's Design System, which includes the following principles:
- Adaptive: Experiences feel natural on each device
- Empathetic: Experiences are intuitive and powerful
- Beautiful: Experiences are engaging and immersive
You can read more about these principles on the Fluent Design System website.
To cleanly support the new Fluent styles, the contents of some .scss files no longer include their MDL2 styles, e.g.
_Animation.scss. Those have been moved to
*.MDL2.scss files, e.g.
_Animation.MDL2.scss. While this is not technically a breaking change if you're using Fabric.css, it will be breaking if you are using any of the MDL2 variables & mixins from the below files in
|9.x filename||10.x filename|
If you are consuming these .scss files directly downstream, you may need to switch to the MDL2 variants to include those classes in your compiled SCSS. To use the MDL2 variables and mixins, consider importing
dist/_References.scss, which imports all Fluent and MDL2 .scss files.
What else is new
- The MDL2 styles are deprecated in the 10.x releases, but for backwards-compatibility will not be removed until a future date.
- #1107 Removes unused files that were remnants from the old Office UI Fabric, before it was split into Core (this project) and the JS components.
- #1106 Changes the primary theme color very slightly from
- #1099 Updates the icon font to version 2.68, adding 27 new icons.
- #1103 Adds mixins and classes for the
- #1098 Cleans up the README.
- #1089 Corrects the font name for three localized fonts to ensure they are loaded as expected.
- #1090 Uses the latest document icons for the BrandIcon component.
#1083 Fixes a bug (introduced in version 9.3.0 by #1070) where animation and transition classes weren't working on many browsers, due to the incorrect usage of a media query that is not yet widely available. This fix restores animation for most users while continuing to remove it for those who prefer reduced motion and are on supported browsers.
- #1069 Adds a new
ms-background-position()mixin, which outputs left-to-right and right-to-left styles for the
- #1071, #1074 Add 26 new icons.
- #1070 Improves accessibility by wrapping animations in the
prefers-reduced-motionmedia query. This allows users to opt-out of animations, which is especially important for those with vestibular disorders. You can read more about the media query on CSS-Tricks.
- #1074 Deprecates the
HumanResourcesicon. This will be removed in an upcoming major release.
- #1065 Updates the NuGet package documentation to comply with Microsoft's new publishing policies.