v9 Breaking Changes for Final Release Candidate by spmonahan · Pull Request #23092 · microsoft/fluentui

spmonahan · 2022-05-19T23:03:37Z

⚠️ BREAKING CHANGES ⚠️

⚠️ DO NOT MERGE THIS WITHOUT SPEAKING WITH @spmonahan FIRST ⚠️

This PR introduces breaking changes into Fluent UI v9 and should only be merged after we cut our final non-breaking RC release.

This pull request rolls several changes into a single "breaking change" branch. This approach allows us to merge all breaking changes and resolve all merge conflicts off the master branch.

For all the changes contained in this PR see: #22130

Fixes #22130

codesandbox-ci · 2022-05-19T23:10:27Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 724c2a3:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2022-05-19T23:13:31Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`74.226 kB` `22.67 kB`	`74.251 kB` `22.683 kB`	`25 B` `13 B`
`react-avatar` Avatar	`45.608 kB` `13.312 kB`	`45.605 kB` `13.326 kB`	`-3 B` `14 B`
`react-badge` PresenceBadge	`22.246 kB` `6.672 kB`	`22.227 kB` `6.679 kB`	`-19 B` `7 B`
`react-button` Button	`33.06 kB` `9.098 kB`	`32.927 kB` `9.038 kB`	`-133 B` `-60 B`
`react-button` CompoundButton	`39.987 kB` `10.354 kB`	`39.854 kB` `10.261 kB`	`-133 B` `-93 B`
`react-button` MenuButton	`35.243 kB` `9.847 kB`	`35.11 kB` `9.784 kB`	`-133 B` `-63 B`
`react-button` SplitButton	`42.597 kB` `11.169 kB`	`42.369 kB` `11.086 kB`	`-228 B` `-83 B`
`react-button` ToggleButton	`43.991 kB` `10.034 kB`	`43.858 kB` `9.973 kB`	`-133 B` `-61 B`
`react-card` Card - All	`60.742 kB` `17.403 kB`	`60.746 kB` `17.41 kB`	`4 B` `7 B`
`react-card` Card	`56.027 kB` `16.141 kB`	`56.031 kB` `16.147 kB`	`4 B` `6 B`
`react-combobox` Combobox	`60.792 kB` `20.778 kB`	`61.412 kB` `20.982 kB`	`620 B` `204 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`180.81 kB` `50.474 kB`	`181.379 kB` `50.656 kB`	`569 B` `182 B`
`react-input` Input	`22.174 kB` `7.304 kB`	`22.18 kB` `7.305 kB`	`6 B` `1 B`
`react-menu` Menu (including children components)	`111.012 kB` `33.848 kB`	`111.638 kB` `34.054 kB`	`626 B` `206 B`
`react-menu` Menu (including selectable components)	`114.187 kB` `34.314 kB`	`114.813 kB` `34.527 kB`	`626 B` `213 B`
`react-popover` Popover	`103.063 kB` `31.296 kB`	`103.74 kB` `31.544 kB`	`677 B` `248 B`
`react-positioning` usePositioning	`23.21 kB` `8.084 kB`	`23.828 kB` `8.283 kB`	`618 B` `199 B`
`react-radio` Radio	`29.468 kB` `10.091 kB`	`29.483 kB` `10.098 kB`	`15 B` `7 B`
`react-radio` RadioGroup	`13.651 kB` `5.484 kB`	`13.664 kB` `5.486 kB`	`13 B` `2 B`
`react-select` Select	`17.132 kB` `6.365 kB`	`17.138 kB` `6.367 kB`	`6 B` `2 B`
`react-spinbutton` SpinButton	`42.08 kB` `11.908 kB`	`42.098 kB` `11.91 kB`	`18 B` `2 B`
`react-text` Text - Wrappers	`14.224 kB` `4.719 kB`	`14.226 kB` `4.714 kB`	`2 B` `-5 B`
`react-textarea` Textarea	`21.218 kB` `7.176 kB`	`21.224 kB` `7.178 kB`	`6 B` `2 B`
`react-tooltip` Tooltip	`42.939 kB` `14.782 kB`	`43.584 kB` `14.992 kB`	`645 B` `210 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-badge` Badge	`21.002 kB` `6.628 kB`
`react-badge` CounterBadge	`21.915 kB` `6.933 kB`
`react-card` CardFooter	`7.793 kB` `3.327 kB`
`react-card` CardHeader	`9.363 kB` `3.841 kB`
`react-card` CardPreview	`7.765 kB` `3.35 kB`
`react-components` react-components: FluentProvider & webLightTheme	`34.078 kB` `11.098 kB`
`react-divider` Divider	`15.55 kB` `5.595 kB`
`react-image` Image	`10.235 kB` `4.036 kB`
`react-label` Label	`8.546 kB` `3.574 kB`
`react-link` Link	`11.422 kB` `4.648 kB`
`react-overflow` hooks only	`10.792 kB` `4.124 kB`
`react-portal` Portal	`6.272 kB` `2.17 kB`
`react-provider` FluentProvider	`14.127 kB` `5.299 kB`
`react-slider` Slider	`25.557 kB` `8.266 kB`
`react-spinner` Spinner	`17.795 kB` `5.951 kB`
`react-switch` Switch	`25.439 kB` `8.247 kB`
`react-text` Text - Default	`10.904 kB` `4.298 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.363 kB` `7.043 kB`
`react-theme` Teams: Light theme	`19.806 kB` `5.699 kB`

_{🤖 This report was generated against 8d58f08997acf595e3eb7f628123e7fa7830c394}

fabricteam · 2022-05-19T23:17:23Z

Perf Analysis (`@fluentui/react-components`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	mount	344	361	10	Possible regression
FluentProviderWithTheme	virtual-rerender	273	309	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	406	400	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1105	1094	5000
Button	mount	686	692	5000
FluentProvider	mount	2273	2318	5000
FluentProviderWithTheme	mount	344	361	10	Possible regression
FluentProviderWithTheme	virtual-rerender	273	309	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	406	400	10	Possible regression
MakeStyles	mount	1905	1910	50000

size-auditor · 2022-05-19T23:17:50Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 8d58f08997acf595e3eb7f628123e7fa7830c394 (build)

khmakoto

Adding a block so this isn't unintentionally merged before time.

…ts (#23071) * react-button: Removing deprecated block prop from all button components. * Removing block stories. * Adding changefile. * Removing block prop from migration guide and vr tests.

* fix: change Headline to Subtitle1 * fix: change Subheadline to Subtitle2 * fix: change Body to Body1 * fix: change Caption to Caption1 * feat: add Caption2 * chore: use better vr story name * chore: add change files * chore: update api * fix: rename components in missing story * feat: removed unused `caption2ClassName` * chore: disable classname conformance test * chore: remove deprecated className * chore: add conformance test exception

… v9 packages (#23026) * removing single static classnames * api files * change files * disabling component-has-static-classname-exported test in react-image * preparing to merge master * disabling export tests * removing change file for text * change file * disabling test in Dialog * disabling more tests * remove react-text class names Co-authored-by: Sean Monahan <[email protected]>

* react-avatar: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-input: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-radio: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-select: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-spinbutton: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-tabster: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-textarea: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-badge: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-combobox: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * add change files for spinal-case update * react-card: update tabster tab behaviors Updates the `useCard()` implementation after the `react-tabster` spinal-case breaking change. * vr-tests: update types for v9 tests * react-avatar: update badge types in stories Avatar stories were using the old, camelCase PresenceBadge types. * react-badge: fix style that broke with spinal-case change One of the "doNotDisturb" cases was missed due to the non-typesafe way we tested the PresenceBadge status in styles. This test has been changed to a typesafe function call instead. * react-combobox: update props in appearance story Change filledDarker and filledLighter to filled-darker and filled-lighter respectively. * react-badge: update camelCase to spinal-case for strings

* BREAKING CHANGE: Encapsulate Popper API Updates `@fluentui/react-positioning` so that none of the popper API and types leak anymore * changefiles * update test * update stories * positioned to positionedElement * update api * remove getBasePlacement * add tests * virtual element and boundary * fix types * PR fixes * update md * fix type * changefile * Update packages/react-components/react-combobox/src/components/Combobox/useCombobox.ts Co-authored-by: Ben Howell <[email protected]> * Update packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx Co-authored-by: Ben Howell <[email protected]> * rename popperOptions to positioningOptions Co-authored-by: Ben Howell <[email protected]>

* BREAKING: Remove context exports from react-components In order to provider proper encapsulation and allow us to change internals more easily, this PR removes exports of context objects from react-components. In cases where contexts were removed, the export was replaced with a specific provider component and hook to use the context value. Follows from #22300 * changefile * stop exporting menu contexts * changefile * update md Co-authored-by: Sean Monahan <[email protected]>

spmonahan · 2022-05-22T13:37:06Z

/azp run

azure-pipelines · 2022-05-22T13:37:30Z

Azure Pipelines successfully started running 3 pipeline(s).

* fix(react-theme): Remove webHighContrast theme

theerebuss

👍🏻 for Card, Text and Image

TristanWatanabe

Looks good for combobox, divider, select and tabs!

* react-button: Removing deprecated block prop from all button components (microsoft#23071) * react-button: Removing deprecated block prop from all button components. * Removing block stories. * Adding changefile. * Removing block prop from migration guide and vr tests. * fix(react-text): Update typography wrappers to latest naming (microsoft#22934) * fix: change Headline to Subtitle1 * fix: change Subheadline to Subtitle2 * fix: change Body to Body1 * fix: change Caption to Caption1 * feat: add Caption2 * chore: use better vr story name * chore: add change files * chore: update api * fix: rename components in missing story * feat: removed unused `caption2ClassName` * chore: disable classname conformance test * chore: remove deprecated className * chore: add conformance test exception * BREAKING: Removing deprecated `<componentName>ClassName` exports from v9 packages (microsoft#23026) * removing single static classnames * api files * change files * disabling component-has-static-classname-exported test in react-image * preparing to merge master * disabling export tests * removing change file for text * change file * disabling test in Dialog * disabling more tests * remove react-text class names Co-authored-by: Sean Monahan <[email protected]> * BREAKING: Update string unions to `spinal-case` (microsoft#23001) * react-avatar: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-input: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-radio: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-select: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-spinbutton: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-tabster: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-textarea: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-badge: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-combobox: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * add change files for spinal-case update * react-card: update tabster tab behaviors Updates the `useCard()` implementation after the `react-tabster` spinal-case breaking change. * vr-tests: update types for v9 tests * react-avatar: update badge types in stories Avatar stories were using the old, camelCase PresenceBadge types. * react-badge: fix style that broke with spinal-case change One of the "doNotDisturb" cases was missed due to the non-typesafe way we tested the PresenceBadge status in styles. This test has been changed to a typesafe function call instead. * react-combobox: update props in appearance story Change filledDarker and filledLighter to filled-darker and filled-lighter respectively. * react-badge: update camelCase to spinal-case for strings * fix: missing inputClassName in merge conflict resolution * react-select: update api snapshot * react-alert: update conformance tests * fix: update react-components api snapshot * BREAKING CHANGE: Encapsulate Popper API (microsoft#22586) * BREAKING CHANGE: Encapsulate Popper API Updates `@fluentui/react-positioning` so that none of the popper API and types leak anymore * changefiles * update test * update stories * positioned to positionedElement * update api * remove getBasePlacement * add tests * virtual element and boundary * fix types * PR fixes * update md * fix type * changefile * Update packages/react-components/react-combobox/src/components/Combobox/useCombobox.ts Co-authored-by: Ben Howell <[email protected]> * Update packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx Co-authored-by: Ben Howell <[email protected]> * rename popperOptions to positioningOptions Co-authored-by: Ben Howell <[email protected]> * BREAKING: Remove context exports from react-components (microsoft#23085) * BREAKING: Remove context exports from react-components In order to provider proper encapsulation and allow us to change internals more easily, this PR removes exports of context objects from react-components. In cases where contexts were removed, the export was replaced with a specific provider component and hook to use the context value. Follows from microsoft#22300 * changefile * stop exporting menu contexts * changefile * update md Co-authored-by: Sean Monahan <[email protected]> * react-popover: update api snapshot * BREAKING(react-theme): remove webHighContrastTheme (microsoft#23083) * fix(react-theme): Remove webHighContrast theme Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: André Dias (he/him) <[email protected]> Co-authored-by: Esteban Munoz Facusse <[email protected]> Co-authored-by: ling1726 <[email protected]> Co-authored-by: Ben Howell <[email protected]> Co-authored-by: Miroslav Stastny <[email protected]>

spmonahan requested review from a team, GeoffCoxMSFT, behowell, khmakoto, micahgodbolt, smhigley and sopranopillow as code owners May 19, 2022 23:03

msft-fluent-ui-bot added Area: Deprecation Area: Fluent labels May 19, 2022

JustSlone added the Status: Do Not Merge 🚫 label May 19, 2022

khmakoto requested changes May 19, 2022

View reviewed changes

msft-fluent-ui-bot added the Needs: Author Feedback label May 19, 2022

spmonahan force-pushed the 9.0-breaking-changes branch from 0900421 to bf460ad Compare May 20, 2022 14:42

msft-fluent-ui-bot removed the Needs: Author Feedback label May 20, 2022

spmonahan force-pushed the 9.0-breaking-changes branch from 656cfee to 5d0c5bf Compare May 20, 2022 16:31

khmakoto and others added 7 commits May 20, 2022 20:10

react-button: Removing deprecated block prop from all button componen…

5cab036

…ts (#23071) * react-button: Removing deprecated block prop from all button components. * Removing block stories. * Adding changefile. * Removing block prop from migration guide and vr tests.

fix: missing inputClassName in merge conflict resolution

05eaac3

react-select: update api snapshot

aa89fbd

react-alert: update conformance tests

ff7ef7a

spmonahan and others added 4 commits May 20, 2022 20:12

fix: update react-components api snapshot

6fa4e5d

react-popover: update api snapshot

32e7988

spmonahan force-pushed the 9.0-breaking-changes branch from 838c186 to 32e7988 Compare May 21, 2022 03:12

spmonahan requested a review from miroslavstastny May 22, 2022 13:37

BREAKING(react-theme): remove webHighContrastTheme (#23083)

724c2a3

* fix(react-theme): Remove webHighContrast theme

theerebuss approved these changes May 23, 2022

View reviewed changes

ling1726 mentioned this pull request May 23, 2022

chore: new eslint rule ban-context-export #23141

Merged

ling1726 approved these changes May 23, 2022

View reviewed changes

khmakoto approved these changes May 23, 2022

View reviewed changes

TristanWatanabe approved these changes May 23, 2022

View reviewed changes

spmonahan merged commit 5ed2251 into master May 23, 2022

spmonahan deleted the 9.0-breaking-changes branch June 1, 2022 17:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

v9 Breaking Changes for Final Release Candidate#23092

v9 Breaking Changes for Final Release Candidate#23092
spmonahan merged 12 commits into
masterfrom
9.0-breaking-changes

spmonahan commented May 19, 2022 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented May 19, 2022 •

edited

Loading

Uh oh!

fabricteam commented May 19, 2022 •

edited

Loading

Uh oh!

fabricteam commented May 19, 2022 •

edited

Loading

Uh oh!

size-auditor Bot commented May 19, 2022 •

edited

Loading

Uh oh!

khmakoto left a comment

Uh oh!

spmonahan commented May 22, 2022

Uh oh!

azure-pipelines Bot commented May 22, 2022

Uh oh!

theerebuss left a comment

Uh oh!

TristanWatanabe left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

Uh oh!

Conversation

spmonahan commented May 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codesandbox-ci Bot commented May 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented May 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented May 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

size-auditor Bot commented May 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

khmakoto left a comment

Choose a reason for hiding this comment

Uh oh!

spmonahan commented May 22, 2022

Uh oh!

azure-pipelines Bot commented May 22, 2022

Uh oh!

theerebuss left a comment

Choose a reason for hiding this comment

Uh oh!

TristanWatanabe left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

spmonahan commented May 19, 2022 •

edited

Loading

codesandbox-ci Bot commented May 19, 2022 •

edited

Loading

fabricteam commented May 19, 2022 •

edited

Loading

fabricteam commented May 19, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

size-auditor Bot commented May 19, 2022 •

edited

Loading