BREAKING: Removing deprecated `<componentName>ClassName` exports from v9 packages by sopranopillow · Pull Request #23026 · microsoft/fluentui

sopranopillow · 2022-05-17T02:57:34Z

BREAKING

Current behavior

Most packages export a static class name, which is now deprecated behavior. Currently all packages export a class name object as described in #21206.

New behavior

Deprecated <componentName>ClassName exports have been removed.

Related PRs

#22130

Fixes #22132

…ingle-static-classname

codesandbox-ci · 2022-05-17T03:04:25Z

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 3594cb0:

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

fabricteam · 2022-05-17T03:06:44Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-tooltip` Tooltip	`43.039 kB` `14.819 kB`	`43.025 kB` `14.817 kB`	`-14 B` `-2 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`73.834 kB` `22.533 kB`
`react-avatar` Avatar	`45.708 kB` `13.347 kB`
`react-badge` Badge	`21.1 kB` `6.671 kB`
`react-badge` CounterBadge	`22.015 kB` `6.976 kB`
`react-badge` PresenceBadge	`22.346 kB` `6.715 kB`
`react-button` Button	`32.591 kB` `9.056 kB`
`react-button` CompoundButton	`38.836 kB` `10.221 kB`
`react-button` MenuButton	`34.381 kB` `9.645 kB`
`react-button` SplitButton	`41.662 kB` `10.95 kB`
`react-button` ToggleButton	`43.518 kB` `9.984 kB`
`react-card` Card - All	`59.102 kB` `16.957 kB`
`react-card` Card	`54.387 kB` `15.706 kB`
`react-card` CardFooter	`7.891 kB` `3.363 kB`
`react-card` CardHeader	`9.463 kB` `3.881 kB`
`react-card` CardPreview	`7.863 kB` `3.391 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`179.767 kB` `50.177 kB`
`react-components` react-components: FluentProvider & webLightTheme	`34.178 kB` `11.138 kB`
`react-divider` Divider	`15.65 kB` `5.636 kB`
`react-image` Image	`10.333 kB` `4.08 kB`
`react-input` Input	`22.274 kB` `7.336 kB`
`react-label` Label	`8.644 kB` `3.614 kB`
`react-link` Link	`11.52 kB` `4.69 kB`
`react-menu` Menu (including children components)	`110.343 kB` `33.582 kB`
`react-menu` Menu (including selectable components)	`113.518 kB` `34.05 kB`
`react-popover` Popover	`101.258 kB` `30.847 kB`
`react-provider` FluentProvider	`14.227 kB` `5.336 kB`
`react-radio` Radio	`29.568 kB` `10.122 kB`
`react-radio` RadioGroup	`13.751 kB` `5.515 kB`
`react-select` Select	`17.232 kB` `6.408 kB`
`react-slider` Slider	`25.657 kB` `8.302 kB`
`react-spinbutton` SpinButton	`41.965 kB` `11.89 kB`
`react-spinner` Spinner	`17.895 kB` `5.988 kB`
`react-switch` Switch	`25.539 kB` `8.286 kB`

_{🤖 This report was generated against ac42b59c728d923fc87cd11b3e99774933912d98}

size-auditor · 2022-05-17T03:09:38Z

Asset size changes

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

Baseline commit: ac42b59c728d923fc87cd11b3e99774933912d98 (build)

fabricteam · 2022-05-17T03:11:27Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1117	1088	5000
Button	mount	690	707	5000
FluentProvider	mount	2265	2287	5000
FluentProviderWithTheme	mount	337	341	10
FluentProviderWithTheme	virtual-rerender	317	302	10
FluentProviderWithTheme	virtual-rerender-with-unmount	368	400	10
MakeStyles	mount	1921	1929	50000

spmonahan

Just blocking this so it isn't merged ahead of schedule

sopranopillow · 2022-05-17T16:49:19Z

/azp run

sopranopillow · 2022-05-17T22:13:29Z

/azp run

azure-pipelines · 2022-05-17T22:13:49Z

Azure Pipelines successfully started running 3 pipeline(s).

theerebuss

LGTM for Card and Image. Please revert Text changes as I already address these in #22934 as asked by @spmonahan.
Also, let's split up these migrations next time and leverage nx generators to simplify PR reviews, please.

…ingle-static-classname

spmonahan · 2022-05-19T19:27:17Z

/azp run

azure-pipelines · 2022-05-19T19:27:24Z

Azure Pipelines could not run because the pipeline triggers exclude this branch/path.

… 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-button: Removing deprecated block prop from all button components (#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 (#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 (#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` (#23001) * 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 * 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 (#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 (#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 #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 (#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]>

* 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]>

sopranopillow added 4 commits May 16, 2022 19:23

removing single static classnames

249e8aa

Merge branch 'master' of https://github.com/microsoft/fluentui into s…

9011467

…ingle-static-classname

api files

3b101e9

change files

9a8a3dd

sopranopillow added the Fluent UI react-components (v9) label May 17, 2022

sopranopillow added this to the May Project Cycle Q2 2022 milestone May 17, 2022

sopranopillow self-assigned this May 17, 2022

sopranopillow requested review from a team, behowell, khmakoto, micahgodbolt and spmonahan as code owners May 17, 2022 02:57

msft-fluent-ui-bot added the Area: Deprecation label May 17, 2022

sopranopillow added the Status: Do Not Merge 🚫 label May 17, 2022

ling1726 approved these changes May 17, 2022

View reviewed changes

theerebuss self-requested a review May 17, 2022 12:19

spmonahan requested changes May 17, 2022

View reviewed changes

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

disabling component-has-static-classname-exported test in react-image

79b7f85

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

sopranopillow removed the Status: Do Not Merge 🚫 label May 17, 2022

theerebuss mentioned this pull request May 18, 2022

fix(react-text): Update typography wrappers to latest naming #22934

Merged

theerebuss approved these changes May 18, 2022

View reviewed changes

sopranopillow added 2 commits May 18, 2022 11:11

preparing to merge master

d779dee

Merge branch 'master' of https://github.com/microsoft/fluentui into s…

8357929

…ingle-static-classname

behowell approved these changes May 18, 2022

View reviewed changes

disabling export tests

e2360bd

sopranopillow requested review from GeoffCoxMSFT and smhigley as code owners May 18, 2022 18:59

sopranopillow added 4 commits May 18, 2022 13:02

removing change file for text

999cdfa

change file

96d06f2

disabling test in Dialog

0ac52cb

disabling more tests

20757fd

spmonahan changed the base branch from master to 9.0-breaking-changes May 19, 2022 19:24

sopranopillow closed this May 19, 2022

sopranopillow reopened this May 19, 2022

spmonahan added 2 commits May 19, 2022 15:18

Merge branch '9.0-breaking-changes' into single-static-classname

624afd2

remove react-text class names

3594cb0

spmonahan approved these changes May 19, 2022

View reviewed changes

spmonahan merged commit 06e414c into microsoft:9.0-breaking-changes May 19, 2022

sopranopillow deleted the single-static-classname branch May 19, 2022 22:56

behowell mentioned this pull request Jul 22, 2022

Component Template: Remove className export #24045

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

BREAKING: Removing deprecated `<componentName>ClassName` exports from v9 packages#23026

BREAKING: Removing deprecated `<componentName>ClassName` exports from v9 packages#23026
spmonahan merged 14 commits into
microsoft:9.0-breaking-changesfrom
sopranopillow:single-static-classname

sopranopillow commented May 17, 2022

Uh oh!

codesandbox-ci Bot commented May 17, 2022 •

edited

Loading

Uh oh!

fabricteam commented May 17, 2022 •

edited

Loading

Uh oh!

size-auditor Bot commented May 17, 2022 •

edited

Loading

Uh oh!

fabricteam commented May 17, 2022 •

edited

Loading

Uh oh!

spmonahan left a comment

Uh oh!

sopranopillow commented May 17, 2022

Uh oh!

sopranopillow commented May 17, 2022

Uh oh!

azure-pipelines Bot commented May 17, 2022

Uh oh!

theerebuss left a comment

Uh oh!

spmonahan commented May 19, 2022

Uh oh!

azure-pipelines Bot commented May 19, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Uh oh!

Conversation

sopranopillow commented May 17, 2022

Current behavior

New behavior

Related PRs

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

spmonahan left a comment

Choose a reason for hiding this comment

Uh oh!

sopranopillow commented May 17, 2022

Uh oh!

sopranopillow commented May 17, 2022

Uh oh!

azure-pipelines Bot commented May 17, 2022

Uh oh!

theerebuss left a comment

Choose a reason for hiding this comment

Uh oh!

spmonahan commented May 19, 2022

Uh oh!

azure-pipelines Bot commented May 19, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

codesandbox-ci Bot commented May 17, 2022 •

edited

Loading

fabricteam commented May 17, 2022 •

edited

Loading

size-auditor Bot commented May 17, 2022 •

edited

Loading

fabricteam commented May 17, 2022 •

edited

Loading

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