BREAKING: Remove context exports from react-components by ling1726 · Pull Request #23085 · microsoft/fluentui

ling1726 · 2022-05-19T16:02:07Z

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

Current Behavior

Some contexts are exported from react-components

import { MenuContext } from '@fluentui/react-components`

<MenuContext value={...}</MenuContext />
React.useContext(MenuContext);

New Behavior

Only context providers and hooks are exported in place of contexts

import { MenunProvider, useMenuContext_unstable } from '@fluentui/react-components`

<MenuContext value={...}</MenuContext />
useMenuContext_unstable()

Related Issue(s)

Addresses partially #22300

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

codesandbox-ci · 2022-05-19T16:11:42Z

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 3271b86:

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

fabricteam · 2022-05-19T16:13:41Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`73.734 kB` `22.498 kB`	`73.759 kB` `22.51 kB`	`25 B` `12 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`180.24 kB` `50.256 kB`	`180.313 kB` `50.28 kB`	`73 B` `24 B`
`react-menu` Menu (including children components)	`110.243 kB` `33.543 kB`	`110.277 kB` `33.559 kB`	`34 B` `16 B`
`react-menu` Menu (including selectable components)	`113.418 kB` `34.011 kB`	`113.452 kB` `34.028 kB`	`34 B` `17 B`
`react-popover` Popover	`101.158 kB` `30.817 kB`	`101.172 kB` `30.82 kB`	`14 B` `3 B`
`react-radio` Radio	`29.468 kB` `10.091 kB`	`29.482 kB` `10.097 kB`	`14 B` `6 B`
`react-radio` RadioGroup	`13.651 kB` `5.484 kB`	`13.664 kB` `5.486 kB`	`13 B` `2 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-avatar` Avatar	`45.608 kB` `13.312 kB`
`react-components` react-components: FluentProvider & webLightTheme	`34.078 kB` `11.098 kB`

_{🤖 This report was generated against 51777323141411ce197a6314e211c326af180c60}

size-auditor · 2022-05-19T16:16:59Z

Asset size changes

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

Baseline commit: aaaf6d769e834645418a1144b109c679317fe393 (build)

fabricteam · 2022-05-19T16:17:32Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1249	1287	5000
Button	mount	799	780	5000
FluentProvider	mount	2330	2411	5000
FluentProviderWithTheme	mount	389	404	10
FluentProviderWithTheme	virtual-rerender	353	350	10
FluentProviderWithTheme	virtual-rerender-with-unmount	431	439	10
MakeStyles	mount	2053	2050	50000

miroslavstastny · 2022-05-19T16:39:05Z

@@ -1,10 +1,11 @@
 export {
  Accordion,
-  AccordionContext,


The context is still used internally in the component package, it is just not exported by the index.
Have you thought about how to prevent us from eventually exporting it accidentally? Lint?

yes, conformance tests, we can use typescript parser to do something along the lines of what @layershifter did for event callbacks

spmonahan

Just putting a block on this so we can coordinate breaking merges

…ext-export

GeoffCoxMSFT · 2022-05-20T17:25:55Z

@ling1726 react-tabs exports TabListContextValues and TabListContextValue (I think I followed what Menu was doing at the time). Do those also need to be updated?

spmonahan · 2022-05-20T18:54:12Z

@ling1726 react-tabs exports TabListContextValues and TabListContextValue (I think I followed what Menu was doing at the time). Do those also need to be updated?

@GeoffCoxMSFT Yes it should be updated. Can you make a separate PR with that change?

ling1726 · 2022-05-20T20:38:53Z

@ling1726 react-tabs exports TabListContextValues and TabListContextValue (I think I followed what Menu was doing at the time). Do those also need to be updated?

@GeoffCoxMSFT I will work on some automation to ban that, so it will need to be done sooner or later, current PR objective is to remove them from react-components export since that is our public API surface

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

ling1726 requested review from a team, behowell and spmonahan as code owners May 19, 2022 16:02

msft-fluent-ui-bot assigned smhigley May 19, 2022

changefile

9c86e74

miroslavstastny reviewed May 19, 2022

View reviewed changes

spmonahan requested changes May 19, 2022

View reviewed changes

msft-fluent-ui-bot added Needs: Author Feedback and removed Needs: Author Feedback labels May 19, 2022

ling1726 added 2 commits May 19, 2022 19:56

stop exporting menu contexts

b6ed180

changefile

db367ce

spmonahan mentioned this pull request May 19, 2022

Coordinate Breaking RC Changes #22130

Closed

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

layershifter approved these changes May 20, 2022

View reviewed changes

Merge remote-tracking branch 'origin/master' into feat/stop-menu-cont…

ae4e8f1

…ext-export

ling1726 requested review from a team and khmakoto as code owners May 20, 2022 07:21

ling1726 changed the base branch from 9.0-breaking-changes to master May 20, 2022 07:24

update md

b943ed0

behowell approved these changes May 20, 2022

View reviewed changes

GeoffCoxMSFT approved these changes May 20, 2022

View reviewed changes

spmonahan changed the base branch from master to 9.0-breaking-changes May 20, 2022 18:44

Merge branch '9.0-breaking-changes' into feat/stop-menu-context-export

3271b86

spmonahan merged commit 80479ba into microsoft:9.0-breaking-changes May 20, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

BREAKING: Remove context exports from react-components#23085

BREAKING: Remove context exports from react-components#23085
spmonahan merged 7 commits into
microsoft:9.0-breaking-changesfrom
ling1726:feat/stop-menu-context-export

ling1726 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!

size-auditor Bot commented May 19, 2022 •

edited

Loading

Uh oh!

fabricteam commented May 19, 2022 •

edited

Loading

Uh oh!

miroslavstastny May 19, 2022

Uh oh!

ling1726 May 19, 2022

Uh oh!

spmonahan left a comment

Uh oh!

GeoffCoxMSFT commented May 20, 2022 •

edited

Loading

Uh oh!

spmonahan commented May 20, 2022

Uh oh!

ling1726 commented May 20, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

Uh oh!

Conversation

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

Uh oh!

Current Behavior

New Behavior

Related Issue(s)

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!

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!

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!

miroslavstastny May 19, 2022

Choose a reason for hiding this comment

Uh oh!

ling1726 May 19, 2022

Choose a reason for hiding this comment

Uh oh!

spmonahan left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

spmonahan commented May 20, 2022

Uh oh!

ling1726 commented May 20, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

ling1726 commented May 19, 2022 •

edited

Loading

codesandbox-ci Bot commented May 19, 2022 •

edited

Loading

fabricteam commented May 19, 2022 •

edited

Loading

size-auditor Bot commented May 19, 2022 •

edited

Loading

fabricteam commented May 19, 2022 •

edited

Loading

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

GeoffCoxMSFT commented May 20, 2022 •

edited

Loading