Skip to content

microsoft/fluentui

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

* fix: avoid infinite loop of setStates in Sticky/ScrollablePane

Background: #16654

The root of this issue is that certain measurement APIs return fractional
values and these values seems to jitter for display settings where the
multiples of system display scaling and browser zoom levels don't lend
themselves to returning interger values.

In this case querying `scrollTop`
would return different fractional values within a pixel of one another but
above and below an interger (e.g., 4.99 and 5.6). Critically, applying
Math.ceil(), Math.floor() or Math.round() cannot correct for this situation
in all cases. For example 4.99 becomes 5, 4 and 5, respectively while 5.6 becomes
6, 5 and 6 respectively :(

The solution is to add a wrapper for querying `scrollTop` that will treat values
within a certain range as the same. So we can get `getScrollTop(element, 1)` and
so long as the values are within a pixel of each other we will return the same
value, stabilizing the value within a small range.

* add Math.round()

* add range comparison

Because some measurement APIs return rounded values
and some require decimal values and display scaling can
affect these things we need a more permissive comparison
function.

* Apply suggestions from code review

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

---------

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
2eedc2e

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
September 21, 2023 12:52

Fluent UI Web

Build Status GitHub contributors GitHub top language Twitter Follow

Fluent UI React is shipping its v9 final stable release. Visit the Fluent UI React v9 Release page on the wiki to learn more about the upcoming release schedule.

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. Combining Fluent UI React v9 components with Fluent UI React v8 or v0 components is possible and allows gradual migration to Fluent UI v9.

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

React Components (v9) React (v8) Web Components
Overview New, future-proof and forward looking Mature Web Component implementation of Fluent UI.
Used By Microsoft 365 Office Edge
Read Me README.md README.md README.md
Changelog CHANGELOG.md CHANGELOG.md CHANGELOG.md
Repo packages/react-components ./packages/react ./packages/web-components
Quick Start Quick Start Quick Start See README.md
Docs https://react.fluentui.dev/ aka.ms/fluentui-react aka.ms/fluentui-web-components
NPM @fluentui/react-components @fluentui/react @fluentui/web-components
Version npm version npm version npm version
Issues Fluent UI React Components GitHub Issues Fluent UI React GitHub Issues Fluent UI Web Components GitHub Issues

Why are there two React versions? Fluent UI v8 is still widely used. We encourage you to migrate to Fluent UI v9. See the Migration overview.

FluentUI Insights

Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system.

EP01: Positioning EP02: Styling EP03: Griffel
Watch EP01: Positioning Watch EP02: Styling Watch EP03: Griffel
EP04: Foundational APIs EP05: Theming EP06: Accessible by default
Watch EP04: Foundational APIs Watch EP05: Theming Watch EP06: Accessible by default

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

You can view the complete list of additions, fixes, and changes in the CHANGELOG.md file for each package.

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.

Looking for Fluent UI React Northstar?

Fluent UI React Northstar has been superseded by Fluent UI React Components v9. For more details about Fluent UI React Northstar, see its README.md.


This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.