Fix(react-theme): remove webHighContrastTheme by miroslavstastny · Pull Request #23083 · microsoft/fluentui

miroslavstastny · 2022-05-19T15:10:50Z

Applications are not supposed to use hardcoded high contrast theme, they should use just light and dark themes which support Windows High Contrast mode automatically. The only exception are Teams-like application, but those use teamsHighContrastTheme

This PR removes webHightContrastTheme to reduce any confusion.

BREAKING CHANGE

webHighContrastTheme has been removed. No application should be using that.
If there is a need for that theme, application engineers should talk to us to describe their use case.
They can also create the theme on their side by calling createHighContrastTheme().

codesandbox-ci · 2022-05-19T15:18:55Z

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 17327cd:

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

fabricteam · 2022-05-19T15:22:25Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`73.734 kB` `22.498 kB`
`react-avatar` Avatar	`45.608 kB` `13.312 kB`
`react-badge` Badge	`21.002 kB` `6.628 kB`
`react-badge` CounterBadge	`21.915 kB` `6.933 kB`
`react-badge` PresenceBadge	`22.246 kB` `6.672 kB`
`react-button` Button	`32.487 kB` `9.024 kB`
`react-button` CompoundButton	`38.736 kB` `10.178 kB`
`react-button` MenuButton	`34.281 kB` `9.614 kB`
`react-button` SplitButton	`41.562 kB` `10.917 kB`
`react-button` ToggleButton	`43.418 kB` `9.953 kB`
`react-card` Card - All	`59.002 kB` `16.923 kB`
`react-card` Card	`54.287 kB` `15.672 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-combobox` Combobox	`60.792 kB` `20.778 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`179.667 kB` `50.151 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-input` Input	`22.174 kB` `7.304 kB`
`react-label` Label	`8.546 kB` `3.574 kB`
`react-link` Link	`11.422 kB` `4.648 kB`
`react-menu` Menu (including children components)	`110.243 kB` `33.543 kB`
`react-menu` Menu (including selectable components)	`113.418 kB` `34.011 kB`
`react-overflow` hooks only	`10.792 kB` `4.124 kB`
`react-popover` Popover	`101.158 kB` `30.817 kB`
`react-portal` Portal	`6.272 kB` `2.17 kB`
`react-positioning` usePopper	`23.21 kB` `8.084 kB`
`react-provider` FluentProvider	`14.127 kB` `5.299 kB`
`react-radio` Radio	`29.468 kB` `10.091 kB`
`react-radio` RadioGroup	`13.651 kB` `5.484 kB`
`react-select` Select	`17.132 kB` `6.365 kB`
`react-slider` Slider	`25.557 kB` `8.266 kB`
`react-spinbutton` SpinButton	`41.865 kB` `11.861 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-text` Text - Wrappers	`14.224 kB` `4.719 kB`
`react-textarea` Textarea	`21.218 kB` `7.176 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`
`react-tooltip` Tooltip	`42.939 kB` `14.782 kB`

_{🤖 This report was generated against 60804cec07a495b8a5d1fc66338bf0443b212144}

fabricteam · 2022-05-19T15:24:29Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1232	1298	5000
Button	mount	791	810	5000
FluentProvider	mount	2272	2324	5000
FluentProviderWithTheme	mount	394	415	10
FluentProviderWithTheme	virtual-rerender	372	381	10
FluentProviderWithTheme	virtual-rerender-with-unmount	426	478	10
MakeStyles	mount	2019	2006	50000

size-auditor · 2022-05-19T15:25:22Z

Asset size changes

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

Baseline commit: 60804cec07a495b8a5d1fc66338bf0443b212144 (build)

spmonahan

Just putting a block so we can coordinate the merge with other breaking changes.

theerebuss

We should also make it clear to the users why we only have a teamsHighContrastTheme, somewhere in our docs.

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

…ft#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

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

* 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

behowell

Approving, but we should consider entirely removing the stories that use high contrast theme. If not in this PR, then perhaps log an issue for the component owners to remove those stories.

behowell · 2022-05-20T16:25:49Z

+      <FluentProvider style={rightSectionStyle} theme={teamsHighContrastTheme}>
        <Switch checked={false} label="Unchecked and enabled" />
        <Switch checked={false} disabled label="Unchecked and disabled" />
      </FluentProvider>


Presumably since we're not recommending using a high contrast theme in web, we should entirely remove any stories that use it, right?

Let's do that separately. In regular component stories there should not be multiple themes at all. Already discussed Card with @andrefcdias, Switch is probably the only other one which does that. I will take care of those.

Addressed in #23082

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

…/remove-web-hc-theme

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

miroslavstastny added 2 commits May 19, 2022 16:58

fix(react-theme): Remove webHighContrast theme

dd86813

change file

ee98467

miroslavstastny requested review from a team, behowell and khmakoto as code owners May 19, 2022 15:10

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

miroslavstastny mentioned this pull request May 19, 2022

Coordinate Breaking RC Changes #22130

Closed

spmonahan requested changes May 19, 2022

View reviewed changes

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

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

miroslavstastny unassigned smhigley May 20, 2022

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

miroslavstastny self-assigned this May 20, 2022

layershifter mentioned this pull request May 20, 2022

docs(react-components): Add theming docs #23080

Merged

layershifter approved these changes May 20, 2022

View reviewed changes

theerebuss approved these changes May 20, 2022

View reviewed changes

khmakoto and others added 7 commits May 20, 2022 08:37

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

98ef426

…ts (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: missing inputClassName in merge conflict resolution

9bc8312

react-select: update api snapshot

aa2bc5f

react-alert: update conformance tests

5d0c5bf

behowell approved these changes May 20, 2022

View reviewed changes

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

GeoffCoxMSFT approved these changes May 20, 2022

View reviewed changes

spmonahan and others added 2 commits May 20, 2022 10:38

fix: update react-components api snapshot

ca223ba

khmakoto approved these changes May 20, 2022

View reviewed changes

Merge branch '9.0-breaking-changes' into fix/remove-web-hc-theme

3f9b4cb

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

miroslavstastny requested review from a team, micahgodbolt, smhigley and sopranopillow as code owners May 21, 2022 03:12

Merge remote-tracking branch 'upstream/9.0-breaking-changes' into fix…

17327cd

…/remove-web-hc-theme

miroslavstastny merged commit 724c2a3 into microsoft:9.0-breaking-changes May 23, 2022

miroslavstastny deleted the fix/remove-web-hc-theme branch May 23, 2022 10:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix(react-theme): remove webHighContrastTheme#23083

Fix(react-theme): remove webHighContrastTheme#23083
miroslavstastny merged 13 commits into
microsoft:9.0-breaking-changesfrom
miroslavstastny:fix/remove-web-hc-theme

miroslavstastny commented May 19, 2022

Uh oh!

codesandbox-ci Bot commented May 19, 2022 •

edited

Loading

Uh oh!

fabricteam commented May 19, 2022

Uh oh!

fabricteam commented May 19, 2022

Uh oh!

size-auditor Bot commented May 19, 2022

Uh oh!

spmonahan left a comment

Uh oh!

theerebuss left a comment

Uh oh!

behowell left a comment

Uh oh!

behowell May 20, 2022

Uh oh!

miroslavstastny May 20, 2022

Uh oh!

theerebuss May 20, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

12 participants

Uh oh!

Conversation

miroslavstastny commented May 19, 2022

BREAKING CHANGE

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

📊 Bundle size report

Uh oh!

fabricteam commented May 19, 2022

Perf Analysis (@fluentui/react-components)

Uh oh!

size-auditor Bot commented May 19, 2022

Asset size changes

Uh oh!

spmonahan left a comment

Choose a reason for hiding this comment

Uh oh!

theerebuss left a comment

Choose a reason for hiding this comment

Uh oh!

behowell left a comment

Choose a reason for hiding this comment

Uh oh!

behowell May 20, 2022

Choose a reason for hiding this comment

Uh oh!

miroslavstastny May 20, 2022

Choose a reason for hiding this comment

Uh oh!

theerebuss May 20, 2022

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

12 participants

codesandbox-ci Bot commented May 19, 2022 •

edited

Loading

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