Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

  • By Microsoft
  • Last update: Jan 3, 2023
  • Comments: 16

Fluent UI Web

Build Status GitHub contributors GitHub top language Twitter Follow

πŸŽ‰ πŸŽ‰ πŸŽ‰ Version 8 of @fluentui/react is now available on npm! πŸŽ‰ πŸŽ‰ πŸŽ‰

See the release notes for more info, and please file an issue if you have any problems.

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

This repo is home to 3 separate projects today. Mixing components between projects is not currently supported. The goal of these projects is to dedupe functionality and enable interoperability over time. For now, choose the project that best suits your needs.

The following table will help you navigate the 3 projects and understand their differences.

React React Northstar Web Components
Overview Mature, refreshing with new concepts from react-northstar. Newer, has concepts we're iterating on. Web Component implementation of Fluent UI.
Used By Office Teams Edge
Read Me README.md README.md README.md
Repo ./packages/react ./packages/fluentui/react-northstar ./packages/web-components
Quick Start Quick Start Quick Start See README.md
Docs aka.ms/fluentui-react aka.ms/fluentui-react-northstar aka.ms/fluentui-web-components
NPM @fluentui/react @fluentui/react-northstar @fluentui/web-components
Version npm version npm version npm version
Issues Fluent UI React GitHub Issues Fluent UI React Northstar GitHub Issues Fluent UI Web Components GitHub Issues

Why are there two React versions? See the FAQ on Fabric and Stardust.

Licenses

All files on the Fluent UI React GitHub repository are subject to the MIT license. Please read the License file at the root of the project.

Usage of the fonts and icons referenced in Fluent UI React is subject to the terms of the assets license agreement.

Changelog

We use GitHub Releases to manage our releases, including the changelog between every release. View a complete list of additions, fixes, and changes on the releases page.

Looking for Office UI Fabric React?

The Office UI Fabric React project has evolved to Fluent UI.

The office-ui-fabric-react repo is now this repo (fluentui in the Microsoft organization)! The name change should not disrupt any current Fabric usage, repo clones, pull requests or issue reporting. Links should redirect to the new location. The library formerly known as office-ui-fabric-react is now available as @fluentui/react (see above table for more information).

We have a lot in store for Fluent UI - Read our announcement here.


This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Github

https://github.com/microsoft/fluentui

Comments(16)

  • 1

    Upgrade to ts 4.0

    • Update change files for consistency
    • Fix some pr comments
    • fix merge
    • Change files
    • Add change files
    • update api
    • fix api-extractor warnings

    Pull request checklist

    • [ ] Addresses an existing issue: fixes #16101
    • [ ] Include a change request file using $ yarn change

    Description of changes

    (give an overview)

    Focus areas to test

    (optional)

  • 2

    fix(eslint-plugin): properly resolve configs for projects that use so…

    …lution kind of TS config

    Pull request checklist

    • ~[ ] Addresses an existing issue: Fixes #0000~
    • [x] Include a change request file using $ yarn change

    Description of changes

    Before:

    • with current setup linting was not working in editors within /tools project
    • while debugging I found out our dynamic config provided invalid paths for file property (double slash etc)

    After:

    • linting now works consistently within /tools project from CLI and Editor
    • files are properly normalized

    Focus areas to test

    (optional)

  • 3

    chore: migrate packages to single version policy

    Pull request checklist

    • ~[ ] Addresses an existing issue:~
    • [x] Include a change request file using $ yarn change

    Description of changes

    (give an overview)

    Focus areas to test

    (optional)

  • 4

    Enable the exhaustive-deps lint rule for useIsomorphicLayoutEffect

    Pull request checklist

    • [x] Include a change request file using $ yarn change

    Description of changes

    Enable the react-hooks/exhaustive-deps lint rule for useIsomorphicLayoutEffect. Also disable the rule in the one place that it caused a failure.

  • 5

    fix(react-tooltip): use useIsomorphicLayoutEffect to avoid SSR warnings

    Pull request checklist

    • [x] Addresses an existing issue: Fixes #17891
    • [x] Include a change request file using $ yarn change

    Description of changes

    This PR replaces React.useLayoutEffect with useIsomorphicLayoutEffect as it produces warnings during SSR. Also modifies ESLint preset to prevent future usages. Warnings in existing places of v8 code have been suppressed.

    See more details: https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a

  • 6

    Update eslint deps for compatibility with new TS version

    Pull request checklist

    • [x] Addresses an existing issue: part of #18025
    • [x] Include a change request file using $ yarn change

    Description of changes

    Update eslint-related dependencies to be compatible with TS 4.1, including proper parsing for import type/export type.

    After this change, it will probably be necessary for everyone to delete their local eslint caches (yarn rimraf '{apps,packages}/*/.eslintcache' or similar) to avoid some weird false positives.

    Thanks to one or more of the updated deps (hard to say which), usage of React components is now flagged! :tada: However, this meant that a bunch more rule disables had to be added, mainly for usage of Fabric and Customizer. Where it made sense and was clearly safe, I went ahead and changed these to use ThemeProvider, but in other cases I just disabled the rule.

    There are also a few other interesting changes that I'll comment on inline.

    Related references:

  • 7

    @fluentui/react-tooltip: warning about useLayoutEffect in SSR

    Actual behavior:

    Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, u
    seLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
        at TooltipProvider (@fluentui\react-tooltip\lib-commonjs\components\TooltipProvider\TooltipProvider.js:12:38)
        at div
        at ThemeProvider (@fluentui\react-theme-provider\lib-commonjs\components\ThemeProvider\ThemeProvider.js:8:36)
    

    Priorities and help requested:

    Are you willing to submit a PR to fix? Yes Requested priority: Normal Products/sites affected: (if applicable)

  • 8

    Add and use shared package for website setup

    Pull request checklist

    • [x] Addresses an existing issue: Part of #14691
    • [x] Include a change request file using $ yarn change

    Description of changes

    Best viewed with "ignore whitespace changes" (for a couple of the files)

    Previously, several pieces of setup code for the public website (developer.microsoft.com/fluentui) and its local/PR deployed versions had to be duplicated across every major version branch of Fluent/Fabric. This was not ideal since the process of making updates (such as adding a new major version) was very manual and error-prone.

    This PR adds and uses a new package @fluentui/public-docsite-setup (open to naming suggestions) to de-duplicate website setup tasks, including:

    • Loading the real site (developer.microsoft.com/fluentui): get the "manifest" file for the requested (or latest) major version, then load the current website build for that major version
    • Loading the local or PR deploy site
    • Setting up the version switcher definition (also provides related types)

    Build setup

    The build steps/configuration related to this change are as follows. (These build steps will also be added in the 5.0, 6.0, and 7.0 branches, using the @fluentui/public-docsite-setup package from master.)

    Some of this is also explained in the public-docsite-setup readme.

    | File/pipeline | What's called/done | Details | |--|--|--| | apps/public-docsite webpack configs | getLoadSiteConfig() from under @fluentui/public-docsite-setup/scripts/ | Adds a webpack config that generates dist/loadSite.js (for actual loading) and copies shared index.html to website's dist folder | | Release pipeline azure-pipelines.release.yml | yarn create-site-manifests [main package path] [CDN URL root] (script is from @fluentui/public-docsite-setup's bin) | Generates "manifest" files (under site-manifests/v8-prod.js and v8-df.js) with:
    - the URL where files from that build will be uploaded
    - the full version of @fluentui/react | | Release pipeline azure-pipelines.release.yml | "Publish artifact: fabric-website-manifests" task | Uploads the generated manifest files as a build artifact | | Website release pipeline (internal) | Upload manifest files to live location | |

    Additional manual step (as needed): since the live site actually uses bootstrap code stored in an internal repo, manually copy apps/public-docsite/homepage.htm and apps/public-docsite/dist/loadSite.js to the internal repo

    What happens at runtime

    At runtime, we start with the HTML file loading the loadSite.js bundle. (The bundle is generated by webpack from @fluentui/public-docsite-setup/src/loadSite.ts, using the getLoadSiteConfig() helper.)

    image

    The version switcher definition is read from the global by apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx, and various places in the site consume it from there.

    Here's a text version with more detail.
    1. HTML file loads loadSite.js bundle (it's generated by webpack from @fluentui/public-docsite-setup/src/loadSite.ts using getLoadSiteConfig)
    2. loadSite.js does the actual loading:
      1. Check location.hostname to determine which variant of the site this is (localhost, PR deploy, prod, df)
      2. If localhost or PR deploy:
        1. Get the full version of @fluentui/react being demoed from process.env.LOCAL_LIBRARY_VERSION (set by webpack helper)
        2. Call loadSiteInternal with that version and using the current URL as the base URL for files from that website build
      3. If it's the real site (prod/df):
        1. Determine the major version to load: use ?fabricVer=N from URL, or default to latest
        2. Load the "manifest" file for that major version: vN-df.js or vN-prod.js
        3. Call loadSiteInternal with the base URL and full library version from the manifest
      4. In loadSiteInternal:
        1. Set up the version switcher definition global (basically a bunch of IContextualMenuItems with pre-defined click handlers for reloading with a new version)
          • Note: in localhost/PR deploy builds, the click handler just displays an alert saying you can't switch versions. This is to avoid previous issues where the site implicitly loaded the live files for other versions (or even the current version), making it seem like you're testing your changes when in fact you're not.
        2. Set up global MonacoConfig for the example editor
        3. Load the root file of the actual site (minified or unminified as appropriate) from the given base URL
    3. The site is loading!
    4. Actual version switcher setup: apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx gets the version switcher definition from the global, and various places in the site consume it from there.

    Open questions

    As the PR is now, there's quite a mix of "fabric" or not in naming. Open for suggestions for what to do here. (Also okay with just going with it as-is.)

    | Thing | Name | Notes | |--|--|--| | Main website webpack bundle | fabric-site | A slight improvement over previous name fabric-sitev5. Could let this vary across branches, but it's easiest if we don't. | | Website-related artifacts in azure-pipelines.release.yml | fabric-website-whatever | Again easiest if these stay the same across branches. Inclined to leave as-is to reduce work updating the website release pipeline (and slightly reduce churn in old branches). | | Shared setup package | public-docsite-setup | Follows website naming convention from master. Will be used in other branches but that's probably fine. | | Shared bootstrap file | loadSite.ts/.js | | | Types from shared package | SiteConfig, SiteGlobals | | | Manifest creation script | create-site-manifests | | | Generated manifest files | site-manifests/vN-prod.js | | | Global defined by manifest files | __siteConfig | |

  • 9

    Release version 8

    Pull request checklist

    • [x] Addresses an existing issue: Part of #14692
    • [x] Include a change request file using $ yarn change

    Description of changes

    Change all version 8-related packages to non-beta versions as the final step of the major release.

    Change the repo default beachball config back to:

      disallowedChangeTypes: ['major', 'prerelease'],
      tag: 'latest',
    

    As a result of this change, most pre-release package beachball configs must be updated to maintain current versions. (Some of the current versions violate the 9.0.0-alpha convention we discussed last week, but that can be fixed separately.)

    Open questions

    • react-shared-contexts: currently at 1-beta and used by both v8 (ContextualMenu) and react-button--what to do? (PR currently adds special beachball config to keep as-is)

    Deleted package

    Due to changes in plans I don't think we need this. We can bring it back later if needed.

    • ie11-polyfills

    v8-related packages bumped to major < 8

    These packages were previously on N-beta where N > 0 and < 8. To go with prior convention I just removed the -beta suffix and kept the major version.

    • common-styles: 1
    • dom-utilities: 2
    • eslint-plugin: 1
    • monaco-editor: 1
    • react-charting: 5
    • react-icons-mdl2: 1
    • react-icons-mdl2-branded: 1
    • react-icon-provider: 1 (was previously 0.x, agreed to bump to 1)
    • react-monaco-editor: 1
    • react-window-provider: 2
    • theme: 2

    Bumped to version 8

    • api-docs
    • azure-themes
    • codemods (changed from 1 b/c seems like this should match suite version)
    • date-time-utilities
    • example-data
    • font-icons-mdl2
    • foundation-legacy
    • jest-serializer-merge-styles
    • merge-styles
    • public-docsite
    • public-docsite-resources
    • react
    • react-date-time
    • react-docsite-components
    • react-examples
    • react-experiments
    • react-file-type-icons
    • react-focus
    • react-hooks
    • scheme-utilities
    • set-version
    • style-utilities
    • test-utilities
    • theme-samples
    • utilities
    • webpack-utilities

    Everything else

    I updated other packages' beachball configs to keep their current versioning approach, so the only changes should be standard prerelease or patch bumps due to dep version updates.

  • 10

    Cannot use different versions of office-ui-fabric-react together in Rush

    Environment Information

    • Package version(s): ^5.113.1, ^7.6.3, probably 6.x too.
    • Browser and OS versions: Windows

    Please provide a reproduction of the bug in a codepen:

    1. Not a codepen, but a git repo. Check out RushWithMultipleFabricVersions.
    2. Run rush install.
    3. Run rush build.

    Actual behavior:

    The build will fail with an error like:

    ERROR in C:\Users\hegi\source\repos\test-multiple-react\packages\test-15\src\index.tsx
    ./src/index.tsx
    [tsl] ERROR in C:\Users\hegi\source\repos\test-multiple-react\packages\test-15\src\index.tsx(8,5)
          TS2605: JSX element type 'PrimaryButton' is not a constructor function for JSX elements.
      Type 'PrimaryButton' is missing the following properties from type 'ElementClass': setState, forceUpdate, props, state, and 2 more.
    
    ERROR in C:\Users\hegi\source\repos\test-multiple-react\packages\test-15\src\index.tsx
    ./src/index.tsx
    [tsl] ERROR in C:\Users\hegi\source\repos\test-multiple-react\packages\test-15\src\index.tsx(8,5)
          TS2607: JSX element class does not support attributes because it does not have a 'props' property.
    

    Expected behavior:

    The build should succeed. If you open /rush.json and comment out one of the projects, either test-15 or test-16 then the build will succeed on the uncommented project.

    Priorities and help requested:

    I originally opened Issue 1351 on the Rush team, but @octogonz said it was an issue with phantom dependencies.

    Are you willing to submit a PR to fix? No.

    Requested priority: Normal

    Products/sites affected: Internal development is slower since we can't use rush for projects with multiple UI fabric versions.

  • 11

    Web DatePicker: Time selection

    I would like a web implementation of a time picker.

    I believe that this would be an expansion of the current web DatePicker as the iOS and Android controls are DateTimePickers. https://developer.microsoft.com/en-us/fabric#/controls/web/datepicker

    No, I have not discussed this with the team.

    Additional context/screenshots https://developer.microsoft.com/en-us/fabric#/controls/ios/date-time-picker https://developer.microsoft.com/en-us/fabric#/controls/android/date-time-picker

  • 12

    [Bug]: DetailsList Group checkbox is only shown on hover when checked

    Library

    React / v8 (@fluentui/react)

    System Info

    System:
        OS: Windows 10 10.0.19045
        CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
        Memory: 12.40 GB / 31.83 GB
      Browsers:
        Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
        Internet Explorer: 11.0.19041.1566
    

    Are you reporting Accessibility issue?

    None

    Reproduction

    Render any DetailsList with a group and select all items in that group.

    Bug Description

    Actual Behavior

    Checkbox for group is not shown after clicking on it and selecting all items from that group. It is only available on hover. Codepen example: https://codepen.io/mizeljko/pen/oNMYOdo

    Expected Behavior

    Checkbox for group is always shown after clicking on it and selecting all items from that group.

    Logs

    No response

    Requested priority

    Normal

    Products/sites affected

    No response

    Are you willing to submit a PR to fix?

    no

    Validations

    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] The provided reproduction is a minimal reproducible example of the bug.
  • 13

    perf: Don't render Checkbox icon when unchecked

    Previous Behavior

    Checkbox always renders its checkmark icon, even when unchecked. It uses a universal selector in css (> *) to target the checkmark and set its opacity to 0 when unchecked.

    New Behavior

    Don't render the checkmark at all when unchecked, and remove the universal selector rule in CSS.

  • 14

    chore: Simplify Checkbox style selectors using component checked/disabled state

    Previous Behavior

    The styles for Checkbox and Radio use complex state and sibling selectors, which can be tricky to override correctly. See https://github.com/microsoft/fluentui/issues/25483 for more details.

    New Behavior

    Simplify the selectors used for applying colors to the checkbox. The colors are now applied via styles on the root slot, with selectors for :hover and :active. The label's color is applied by inheriting the root's color. The indicator's color is applied by a > .${checkboxClassNames.indicator} selector on the root.

    This makes it simpler to override styles for Checkbox.

    Related Issue(s)

    • https://github.com/microsoft/fluentui/issues/25483
  • 15

    fix: add aria-owns to react-combobox non-inline popups

    Previous Behavior

    No aria-owns, so when the listbox popup is appended at the end of the DOM, it was not really reachable with virtual cursor/scan mode/swipe navigation

    New Behavior

    aria-owns is added to the root node pointing at the listbox when the listbox is not inline (it's not needed with an inline popup, since then the listbox DOM is already adjacent to the trigger).

    This works for every browser but Safari.

    Related Issue(s)

    Part of work in #26069

  • 16

    Ensure that useFocus hooks are properly merged with user provided refs

    #24154 added a polyfill for focus visible and focus within, but on several components the ref returned by the hooks was added to the defaultProps, therefor any ref passed in by the user would override the ref and break focus rectangles.

    This is being fixed in Slider by https://github.com/microsoft/fluentui/pull/26243

    but we'll need to go through the rest of the controls where these hooks were added and make sure they merge with user props properly.

    https://github.com/microsoft/fluentui/issues/26245#tasklist-block-2c5e08b7-eedc-4bdc-b81d-36509958b306