fix: High contrast mode hover style icon fixes in react-button components by emmayjiang · Pull Request #28156 · microsoft/fluentui

emmayjiang · 2023-06-06T18:00:40Z

This PR corrects the contrast of the icon on subtle buttons and text on transparent buttons in high contrast mode.

Before:

After:

Also corrects the color of the secondary text for CompoundButton.
Before:

After:

Removes the high contrast MenuButton bug that causes icons to change colors when the menu is open.
Before:

After:

Removes the high contrast ToggleButton bug that caused the Subtle and Transparent variants to have low contrast icons.
Before:

After:

size-auditor · 2023-06-06T18:10:36Z

Asset size changes

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

Baseline commit: 14804fe31e9f34d3f21998dcb386fdddd23f9839 (build)

fabricteam · 2023-06-06T18:11:24Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-alert` Alert	`82.565 kB` `21.726 kB`	`84.966 kB` `22.022 kB`	`2.401 kB` `296 B`
`react-button` Button	`36.792 kB` `9.472 kB`	`39.193 kB` `9.743 kB`	`2.401 kB` `271 B`
`react-button` CompoundButton	`43.946 kB` `10.952 kB`	`46.661 kB` `11.257 kB`	`2.715 kB` `305 B`
`react-button` MenuButton	`40.978 kB` `10.669 kB`	`43.527 kB` `10.967 kB`	`2.549 kB` `298 B`
`react-button` SplitButton	`49.183 kB` `12.231 kB`	`51.732 kB` `12.563 kB`	`2.549 kB` `332 B`
`react-button` ToggleButton	`55.074 kB` `11.368 kB`	`57.629 kB` `11.645 kB`	`2.555 kB` `277 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`65.175 kB` `17.915 kB`	`67.576 kB` `18.225 kB`	`2.401 kB` `310 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`210.68 kB` `58.781 kB`	`213.081 kB` `59.115 kB`	`2.401 kB` `334 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-card` Card - All	`89.36 kB` `25.284 kB`
`react-card` Card	`83.778 kB` `23.685 kB`
`react-card` CardFooter	`9.24 kB` `3.907 kB`
`react-card` CardHeader	`11.652 kB` `4.741 kB`
`react-card` CardPreview	`10.048 kB` `4.254 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.409 kB` `12.003 kB`
`react-portal-compat` PortalCompatProvider	`6.48 kB` `2.203 kB`

_{🤖 This report was generated against 14804fe31e9f34d3f21998dcb386fdddd23f9839}

fabricteam · 2023-06-06T18:11:27Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
InfoButton	mount	10	11	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	590	596	5000
Button	mount	288	290	5000
Field	mount	1027	1054	5000
FluentProvider	mount	638	632	5000
FluentProviderWithTheme	mount	74	78	10
FluentProviderWithTheme	virtual-rerender	68	67	10
FluentProviderWithTheme	virtual-rerender-with-unmount	67	74	10
InfoButton	mount	10	11	5000	Possible regression
MakeStyles	mount	843	849	50000
Persona	mount	1652	1596	5000
SpinButton	mount	1298	1291	5000

codesandbox-ci · 2023-06-06T18:13:11Z

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 e6b36aa:

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

fabricteam · 2023-06-06T18:24:51Z

🕵 fluentuiv9 No visual regressions between this PR and main

packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts

khmakoto · 2023-06-06T23:53:32Z

/azp run Fluent UI React - PR and CI

azure-pipelines · 2023-06-06T23:53:42Z

Azure Pipelines successfully started running 1 pipeline(s).

Hotell · 2023-06-07T11:32:26Z

those bundle size increases are not looking good. can we update this branch with latest master to check if it's only stale data regression or actual size increase ? if it's really a size increase it would be good to investigate first what causes almost 2kb bump - that's quite a lot for this change.

packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts

smhigley · 2023-06-07T18:35:12Z

/azp run

azure-pipelines · 2023-06-07T18:35:25Z

Azure Pipelines successfully started running 4 pipeline(s).

azure-pipelines · 2023-06-07T18:35:31Z

Azure Pipelines successfully started running 4 pipeline(s).

smhigley · 2023-07-20T02:13:54Z

/azp run

azure-pipelines · 2023-07-20T02:14:19Z

Azure Pipelines successfully started running 4 pipeline(s).

fabricteam · 2023-07-20T02:33:27Z

🕵 fluentuiv9 No visual regressions between this PR and main

* master: (32 commits) chore: remove @fluentui/bundle-size (microsoft#28601) Breadcrumb UI adjustments (microsoft#28578) feat(tools): re-generate react-components.api.md when preparing 1st stable release (microsoft#28561) perf(tools): make dependency-mismatch execution 90% faster and ignore */>=9.0.0-alpha versions (microsoft#28597) Table/DataGrid: keyboard resizing improvements (microsoft#28493) docs(react-tooltip): Add info icon + tooltip story to Tooltip stories (microsoft#28611) chore: Updating @fluentui/react-icons to version 2.0.207 (microsoft#28590) feat: allSelectedRows and someSelectedRows should be more reliable (microsoft#28577) add vr test to react-tags (microsoft#28484) applying package updates chore: migrate to monosize (microsoft#26826) fix(react-conformance): add @swc/helpers to deps instead of tslib as we use swc for transpilation (microsoft#28599) fix: MenuItem content should be spaced 12px from the boundary (microsoft#28162) feat: implements selection (microsoft#28497) bugfix: moves handleBackdropClick from defaultProps to an override (microsoft#28579) Fix empty CSS creation (microsoft#28566) chore: replace plop with nx within create-* aliases in root package.json (microsoft#28575) applying package updates fix: High contrast mode hover style icon fixes in react-button components (microsoft#28156) SplitButton: updated border right token for primary variant (microsoft#28555) ...

msft-fluent-ui-bot assigned Hotell Jun 6, 2023

emmayjiang marked this pull request as ready for review June 6, 2023 18:01

emmayjiang requested review from a team and khmakoto as code owners June 6, 2023 18:01

khmakoto changed the title ~~React-button high contrast a11y fixes~~ fix: High contrast mode hover style icon fixes in react-button components Jun 6, 2023

khmakoto approved these changes Jun 6, 2023

View reviewed changes

packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts Outdated Show resolved Hide resolved

Hotell removed their assignment Jun 7, 2023

smhigley reviewed Jun 7, 2023

View reviewed changes

packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts Show resolved Hide resolved

emmayjiang added 7 commits June 13, 2023 09:18

buttons a11y fix: subtle hover icon color and transparent text color

e5c8581

compound button, subtle secondary content color fix

c6b1820

changefile

ac2f864

menubutton high contrast fix

5d16549

fix icon colors in togglebutton, in high contrast

1b9ea72

capitalization

c659469

capitalization

e6b36aa

emmayjiang enabled auto-merge (squash) July 6, 2023 21:27

smhigley approved these changes Jul 20, 2023

View reviewed changes

emmayjiang merged commit 638b05a into microsoft:master Jul 20, 2023

Conversation

emmayjiang commented Jun 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Jun 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jun 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Jun 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

codesandbox-ci bot commented Jun 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Jun 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

Uh oh!

khmakoto commented Jun 6, 2023

Uh oh!

azure-pipelines bot commented Jun 6, 2023

Uh oh!

Hotell commented Jun 7, 2023

Uh oh!

Uh oh!

smhigley commented Jun 7, 2023

Uh oh!

azure-pipelines bot commented Jun 7, 2023

Uh oh!

azure-pipelines bot commented Jun 7, 2023

Uh oh!

smhigley commented Jul 20, 2023

Uh oh!

azure-pipelines bot commented Jul 20, 2023

Uh oh!

fabricteam commented Jul 20, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

emmayjiang commented Jun 6, 2023 •

edited

Loading

size-auditor bot commented Jun 6, 2023 •

edited

Loading

fabricteam commented Jun 6, 2023 •

edited

Loading

fabricteam commented Jun 6, 2023 •

edited

Loading

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

codesandbox-ci bot commented Jun 6, 2023 •

edited

Loading

fabricteam commented Jun 6, 2023 •

edited

Loading