Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: High contrast mode hover style icon fixes in react-button components #28156

Merged
merged 7 commits into from
Jul 20, 2023
Merged

fix: High contrast mode hover style icon fixes in react-button components #28156

merged 7 commits into from
Jul 20, 2023

Conversation

emmayjiang
Copy link
Contributor

@emmayjiang emmayjiang commented Jun 6, 2023

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

Before:
image
image

After:
image
image

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

After:
image

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

After:
image

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

After:
image

@emmayjiang emmayjiang marked this pull request as ready for review June 6, 2023 18:01
@emmayjiang emmayjiang requested review from a team and khmakoto as code owners June 6, 2023 18:01
@size-auditor
Copy link

size-auditor bot commented Jun 6, 2023

Asset size changes

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

Baseline commit: 14804fe31e9f34d3f21998dcb386fdddd23f9839 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 6, 2023

📊 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
Copy link
Collaborator

fabricteam commented Jun 6, 2023

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
Copy link

codesandbox-ci bot commented Jun 6, 2023

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
Copy link
Collaborator

fabricteam commented Jun 6, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@khmakoto 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
Copy link
Member

khmakoto commented Jun 6, 2023

/azp run Fluent UI React - PR and CI

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@Hotell Hotell removed their assignment Jun 7, 2023
@Hotell
Copy link
Contributor

Hotell commented Jun 7, 2023

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.

@smhigley
Copy link
Contributor

smhigley commented Jun 7, 2023

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 4 pipeline(s).

1 similar comment
@azure-pipelines
Copy link

Azure Pipelines successfully started running 4 pipeline(s).

@emmayjiang emmayjiang enabled auto-merge (squash) July 6, 2023 21:27
@smhigley
Copy link
Contributor

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 4 pipeline(s).

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@emmayjiang emmayjiang merged commit 638b05a into microsoft:master Jul 20, 2023
19 checks passed
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jul 25, 2023
* 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)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants