react-button: Removing deprecated block prop from all button components by khmakoto · Pull Request #23071 · microsoft/fluentui

khmakoto · 2022-05-18T20:36:55Z

Current Behavior

Button components have a deprecated block prop that came from early iterations of the design spec.

New Behavior

Button components do not have the deprecated block prop anymore.

Related Issue(s)

Fixes #22149

codesandbox-ci · 2022-05-18T20:44:20Z

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 5240ee2:

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

fabricteam · 2022-05-18T20:45:40Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-button` Button	`32.591 kB` `9.056 kB`	`32.458 kB` `8.999 kB`	`-133 B` `-57 B`
`react-button` CompoundButton	`38.836 kB` `10.221 kB`	`38.703 kB` `10.138 kB`	`-133 B` `-83 B`
`react-button` MenuButton	`34.381 kB` `9.645 kB`	`34.248 kB` `9.584 kB`	`-133 B` `-61 B`
`react-button` SplitButton	`41.662 kB` `10.95 kB`	`41.434 kB` `10.871 kB`	`-228 B` `-79 B`
`react-button` ToggleButton	`43.518 kB` `9.984 kB`	`43.385 kB` `9.923 kB`	`-133 B` `-61 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`179.767 kB` `50.177 kB`	`179.634 kB` `50.137 kB`	`-133 B` `-40 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-avatar` Avatar	`45.708 kB` `13.347 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: FluentProvider & webLightTheme	`34.178 kB` `11.138 kB`

_{🤖 This report was generated against ac42b59c728d923fc87cd11b3e99774933912d98}

fabricteam · 2022-05-18T20:48:44Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1107	1134	5000
Button	mount	709	702	5000
FluentProvider	mount	2360	2304	5000
FluentProviderWithTheme	mount	327	356	10
FluentProviderWithTheme	virtual-rerender	298	299	10
FluentProviderWithTheme	virtual-rerender-with-unmount	370	373	10
MakeStyles	mount	1990	2054	50000

size-auditor · 2022-05-18T20:49:23Z

Asset size changes

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

Baseline commit: ac42b59c728d923fc87cd11b3e99774933912d98 (build)

spmonahan

Just putting a block on this so we can coordinate merging

…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.

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

khmakoto added 2 commits May 18, 2022 13:30

react-button: Removing deprecated block prop from all button components.

23725db

Removing block stories.

34a4216

khmakoto added Component: Button Fluent UI react-components (v9) Component: ToggleButton Component: SplitButton Component: CompoundButton Component: MenuButton labels May 18, 2022

khmakoto self-assigned this May 18, 2022

khmakoto requested a review from a team as a code owner May 18, 2022 20:36

Adding changefile.

f24b7de

spmonahan mentioned this pull request May 18, 2022

Coordinate Breaking RC Changes #22130

Closed

spmonahan requested changes May 18, 2022

View reviewed changes

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

spmonahan requested a review from a team May 18, 2022 22:22

Removing block prop from migration guide and vr tests.

5240ee2

khmakoto requested a review from a team as a code owner May 18, 2022 23:45

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

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

spmonahan approved these changes May 19, 2022

View reviewed changes

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

khmakoto deleted the removeBlockFromButton branch May 19, 2022 23:50

khmakoto mentioned this pull request Jun 3, 2022

Remove deprecated block prop from Button components #22149

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

react-button: Removing deprecated block prop from all button components#23071

react-button: Removing deprecated block prop from all button components#23071
spmonahan merged 4 commits into
microsoft:9.0-breaking-changesfrom
khmakoto:removeBlockFromButton

khmakoto commented May 18, 2022

Uh oh!

codesandbox-ci Bot commented May 18, 2022 •

edited

Loading

Uh oh!

fabricteam commented May 18, 2022 •

edited

Loading

Uh oh!

fabricteam commented May 18, 2022 •

edited

Loading

Uh oh!

size-auditor Bot commented May 18, 2022 •

edited

Loading

Uh oh!

spmonahan left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

khmakoto commented May 18, 2022

Current Behavior

New Behavior

Related Issue(s)

Uh oh!

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

Uh oh!

Uh oh!

fabricteam commented May 18, 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 18, 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 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

spmonahan left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codesandbox-ci Bot commented May 18, 2022 •

edited

Loading

fabricteam commented May 18, 2022 •

edited

Loading

fabricteam commented May 18, 2022 •

edited

Loading

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

size-auditor Bot commented May 18, 2022 •

edited

Loading