Fluent UI Web
π π π 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 | |||
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.
Upgrade to ts 4.0
Pull request checklist
$ yarn change
Description of changes
(give an overview)
Focus areas to test
(optional)
fix(eslint-plugin): properly resolve configs for projects that use soβ¦
β¦lution kind of TS config
Pull request checklist
$ yarn change
Description of changes
Before:
/tools
projectfile
property (double slash etc)After:
/tools
project from CLI and EditorFocus areas to test
(optional)
chore: migrate packages to single version policy
Pull request checklist
$ yarn change
Description of changes
(give an overview)
Focus areas to test
(optional)
Enable the exhaustive-deps lint rule for useIsomorphicLayoutEffect
Pull request checklist
$ yarn change
Description of changes
Enable the
react-hooks/exhaustive-deps
lint rule foruseIsomorphicLayoutEffect
. Also disable the rule in the one place that it caused a failure.fix(react-tooltip): use useIsomorphicLayoutEffect to avoid SSR warnings
Pull request checklist
$ yarn change
Description of changes
This PR replaces
React.useLayoutEffect
withuseIsomorphicLayoutEffect
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
Update eslint deps for compatibility with new TS version
Pull request checklist
$ 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
andCustomizer
. Where it made sense and was clearly safe, I went ahead and changed these to useThemeProvider
, 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:
@typescript-eslint/*
v4 release notes@typescript-eslint/*
v3 release notes@fluentui/react-tooltip: warning about useLayoutEffect in SSR
Actual behavior:
Priorities and help requested:
Are you willing to submit a PR to fix? Yes Requested priority: Normal Products/sites affected: (if applicable)
Add and use shared package for website setup
Pull request checklist
$ yarn change
Description of changes
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: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
, and7.0
branches, using the@fluentui/public-docsite-setup
package frommaster
.)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 generatesdist/loadSite.js
(for actual loading) and copies sharedindex.html
to website'sdist
folder | | Release pipelineazure-pipelines.release.yml
|yarn create-site-manifests [main package path] [CDN URL root]
(script is from@fluentui/public-docsite-setup
'sbin
) | Generates "manifest" files (undersite-manifests/v8-prod.js
andv8-df.js
) with:- the URL where files from that build will be uploaded
- the full version of
@fluentui/react
| | Release pipelineazure-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
andapps/public-docsite/dist/loadSite.js
to the internal repoWhat 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 thegetLoadSiteConfig()
helper.)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.
loadSite.js
bundle (it's generated by webpack from@fluentui/public-docsite-setup/src/loadSite.ts
usinggetLoadSiteConfig
)loadSite.js
does the actual loading:location.hostname
to determine which variant of the site this is (localhost, PR deploy, prod, df)@fluentui/react
being demoed fromprocess.env.LOCAL_LIBRARY_VERSION
(set by webpack helper)loadSiteInternal
with that version and using the current URL as the base URL for files from that website build?fabricVer=N
from URL, or default to latestvN-df.js
orvN-prod.js
loadSiteInternal
with the base URL and full library version from the manifestloadSiteInternal
:IContextualMenuItem
s with pre-defined click handlers for reloading with a new version)MonacoConfig
for the example editorapps/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 namefabric-sitev5
. Could let this vary across branches, but it's easiest if we don't. | | Website-related artifacts inazure-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 frommaster
. 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
| |Release version 8
Pull request checklist
$ 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:
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.
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.Bumped to version 8
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.
Cannot use different versions of office-ui-fabric-react together in Rush
Environment Information
Please provide a reproduction of the bug in a codepen:
rush install
.rush build
.Actual behavior:
The build will fail with an error like:
Expected behavior:
The build should succeed. If you open
/rush.json
and comment out one of the projects, eithertest-15
ortest-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.
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
[Bug]: DetailsList Group checkbox is only shown on hover when checked
Library
React / v8 (@fluentui/react)
System Info
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
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.
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)
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 navigationNew 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
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