Skip to content
master
Switch branches/tags
Code

Latest commit

* react-spinbutton: widen `value` type to include `null`

This commit widens the `value` (and `defaultValue`) type from `number`
to `number | null`. This change is based on partner feedback about
wanting a value to represent "no value".

`null` was chosen because Typescript can easily ensure users handle the
null case as opposed to a value like `NaN`. `null` is also obviously a
special case so it's clearer that it should be handled specially.
Because `null` is a special, non-`number` value it can more simply be
handled internally by SpinButton.

`undefined` cannot be used
as React will interpret `value`/`defaultValue` toggling from a number
to undefined as the component switching from controlled to uncontrolled
(which is logged as an error).

Users could choose an "unset" value that
is also a number like `-1` but that only works if the "unset" value is
outside the value SpinButton range (and won't work if there is no
[min, max] range) and requires some special casing logic.

* Update packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx

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

* Update packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.types.ts

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

* react-spinbutton: update `null` onchange behavior

Previous the `onChange` event was special cased for `null`, firing
any time a user attempted to change the value even though SpinButton's
implementation will never change a null value internally (it can only be
changed by setting props).

This change updates the `null` `onChange` behavior to be the same as any
other value. `onChange` no longer fire when a user attempts to change from
this value.

* react-spinbutton: improve onchange test assertions

Updates SpinButton tests to include assertions for the number of times
onChange is called.

* update API snapshot

* react-spinbutton: handle steps from `null`

Based on partner feedback the behavior of setting value/defaultValue to
`null` has been updated.

This updated behavior mirrors native HTML spinbutton (input type="number")
behavior when `value=""`.

Prior to this change if `value={null}` it was not possible for a user to
step SpinButton's value using the step buttons. Further, because onChange
only fires when SpinButton's value changes, and it cannot be changed
when it's null (null + a number doesn't make sense), applications would
have no way to know a user was attempting to change the value.

This commit updates `value/defaultValue={null}` such that when a user
clicks a step button:

1. SpinButton assumes a value of "0" is `min` is undefined, otherwise
   a value of `min` is assumed.
2. Steps from the value selected in step 1
3. Clamps the value
4. Commits the value

An uncontrolled SpinButton will behave like a native HTML spinbutton.
A controlled SpinButton requires the application to take action to
update the value so the application can decide what to do when a
user clicks in this state.

* react-spinbutton: update null handling of aria-valuenow

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

Files

Permalink
Failed to load latest commit information.

Fluent UI Web

Build Status GitHub contributors GitHub top language Twitter Follow

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

See the v8 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
Changelog CHANGELOG.md CHANGELOG.md CHANGELOG.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

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.


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.