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.

Sign up for GitHub

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

Jump to bottom

fix: Fixing SplitButton styles in High Contrast Mode #31253

Merged
merged 5 commits into from
May 4, 2024
Merged

fix: Fixing SplitButton styles in High Contrast Mode #31253

merged 5 commits into from
May 4, 2024

Conversation

khmakoto
Copy link
Member

@khmakoto khmakoto commented May 1, 2024 •
edited

Previous Behavior

SplitButton's styles in High Contrast Mode were inconsistent and wrong when interacting with them.

Before

New Behavior

This PR fixes the SplitButton's styles while in High Contrast Mode. A new example for a primary SplitButton with its main action disabled has been added to the documentation as well.

After

As part of this PR, the usage of the selectors word across styles' files in the Button components has been removed, since it's no longer needed by mergeStyles anymore and could save us some bundle size.

Related Issue(s)

@khmakoto khmakoto requested a review from a team as a code owner May 1, 2024 21:30
@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone May 1, 2024
@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented May 1, 2024 •
edited

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.

@fabricteam
Copy link
Collaborator

fabricteam commented May 1, 2024 •
edited

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react
Breadcrumb		 200.619 kB
60.07 kB		 201.796 kB
60.267 kB		 1.177 kB
197 B
react
Button		 194.573 kB
56.3 kB		 195.26 kB
56.471 kB		 687 B
171 B
react
ButtonGrid		 180.349 kB
54.518 kB		 180.207 kB
54.515 kB		 -142 B
-3 B
react
ComboBox		 250.423 kB
71.926 kB		 251.561 kB
72.081 kB		 1.138 kB
155 B
react
CommandBar		 201.843 kB
59.824 kB		 202.829 kB
59.975 kB		 986 B
151 B
react
Dialog		 209.943 kB
62.812 kB		 211.12 kB
62.982 kB		 1.177 kB
170 B
react
DocumentCard		 215.628 kB
64.085 kB		 216.805 kB
64.269 kB		 1.177 kB
184 B
react
Dropdown		 232.588 kB
68.284 kB		 233.726 kB
68.456 kB		 1.138 kB
172 B
react
Facepile		 210.48 kB
63.032 kB		 210.377 kB
63.035 kB		 -103 B
3 B
react
FloatingPicker		 240.713 kB
68.651 kB		 241.851 kB
68.827 kB		 1.138 kB
176 B
react
Grid		 180.349 kB
54.518 kB		 180.207 kB
54.515 kB		 -142 B
-3 B
react
MessageBar		 189.134 kB
56.778 kB		 190.311 kB
56.941 kB		 1.177 kB
163 B
react
Nav		 187.931 kB
56.384 kB		 187.789 kB
56.378 kB		 -142 B
-6 B
react
Panel		 199.654 kB
59.727 kB		 200.831 kB
59.888 kB		 1.177 kB
161 B
react
Pickers		 292.399 kB
82.007 kB		 293.537 kB
82.173 kB		 1.138 kB
166 B
react
Pivot		 188.845 kB
57.107 kB		 188.703 kB
57.114 kB		 -142 B
7 B
react
Fluent UI React (entire library)		 1.012 MB
281.091 kB		 1.013 MB
281.289 kB		 593 B
198 B
react
SearchBox		 187.409 kB
56.377 kB		 188.586 kB
56.544 kB		 1.177 kB
167 B
react
SelectedItemsList		 231.169 kB
67.62 kB		 232.346 kB
67.779 kB		 1.177 kB
159 B
react
SpinButton		 191.137 kB
57.503 kB		 192.314 kB
57.665 kB		 1.177 kB
162 B
react
SwatchColorPicker		 190.675 kB
57.985 kB		 190.533 kB
57.999 kB		 -142 B
14 B
react
TeachingBubble		 204.685 kB
60.713 kB		 205.586 kB
60.896 kB		 901 B
183 B
react
TimePicker		 240.227 kB
69.693 kB		 241.365 kB
69.856 kB		 1.138 kB
163 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react
ActivityItem		 71.019 kB
23.288 kB
react
Announced		 38.291 kB
13.239 kB
react
Autofill		 15.365 kB
4.743 kB
react
Calendar		 121.542 kB
36.943 kB
react
Callout		 84.108 kB
27.552 kB
react
Check		 52.963 kB
17.773 kB
react
Checkbox		 59.751 kB
19.806 kB
react
ChoiceGroup		 65.276 kB
21.438 kB
react
ChoiceGroupOption		 58.531 kB
19.309 kB
react
Coachmark		 92.937 kB
29.356 kB
react
Color		 7.737 kB
3.106 kB
react
ColorPicker		 132.985 kB
41.502 kB
react
ContextualMenu		 154.789 kB
48.068 kB
react
DatePicker		 183.939 kB
56.079 kB
react
DateTimeUtilities		 5.244 kB
1.849 kB
react
DetailsList		 229.3 kB
65.63 kB
react
Divider		 19.399 kB
6.798 kB
react
DragDrop		 8.343 kB
2.724 kB
react
DraggableZone		 34.109 kB
11.448 kB
react
ExtendedPicker		 96.565 kB
27.809 kB
react
Fabric		 41.537 kB
14.283 kB
react
FocusTrapZone		 16.975 kB
5.917 kB
react
FocusZone		 54.844 kB
17.402 kB
react
GroupedList		 134.634 kB
40.596 kB
react
GroupedListV2		 122.251 kB
37.703 kB
react
HoverCard		 96.969 kB
30.741 kB
react
Icon		 51.644 kB
17.197 kB
react
Icons		 66.305 kB
24.379 kB
react
Image		 46.701 kB
15.646 kB
react
Keytip		 81.482 kB
26.712 kB
react
KeytipData		 13.969 kB
4.57 kB
react
KeytipLayer		 103.278 kB
31.961 kB
react
Keytips		 106.046 kB
32.966 kB
react
Label		 38.134 kB
13.207 kB
react
Layer		 47.887 kB
16.295 kB
react
Link		 39.488 kB
13.614 kB
react
List		 39.176 kB
12.384 kB
react
MarqueeSelection		 74.321 kB
22.385 kB
react
Modal		 93.44 kB
30.18 kB
react
OverflowSet		 33.191 kB
11.252 kB
react
Overlay		 40.694 kB
14.023 kB
react
Persona		 114.617 kB
36.442 kB
react
PersonaCoin		 114.617 kB
36.442 kB
react
PersonaPresence		 57.833 kB
19.303 kB
react
Popup		 12.242 kB
4.181 kB
react
Positioning		 22.608 kB
7.63 kB
react
PositioningContainer		 73.643 kB
23.706 kB
react
ProgressIndicator		 39.286 kB
13.482 kB
react
Rating		 81.762 kB
26.057 kB
react
ResizeGroup		 13.286 kB
4.365 kB
react
ResponsiveMode		 8.078 kB
2.95 kB
react
ScrollablePane		 55.325 kB
17.669 kB
react
SelectableOption		 724 B
413 B
react
Selection		 42.252 kB
12.203 kB
react
Separator		 35.183 kB
12.088 kB
react
Shimmer		 49.049 kB
16.206 kB
react
ShimmeredDetailsList		 240.075 kB
68.397 kB
react
Slider		 57.449 kB
19.143 kB
react
Spinner		 41.481 kB
14.412 kB
react
Stack		 41.547 kB
14.233 kB
react
Sticky		 32.541 kB
10.49 kB
react
Styling		 45.853 kB
15.082 kB
react
Text		 36.723 kB
12.763 kB
react
TextField		 80.555 kB
25.262 kB
react
Theme		 43.321 kB
14.129 kB
react
ThemeGenerator		 12.34 kB
4.106 kB
react
Toggle		 46.02 kB
15.903 kB
react
Tooltip		 87.136 kB
28.164 kB
react
Utilities		 82.495 kB
25.047 kB
react
Viewport		 23.703 kB
7.589 kB
react
WeeklyDayPicker		 101.682 kB
31.738 kB
react
WindowProvider		 1.059 kB
541 B
🤖 This report was generated against e4a3ec9bff2c7a22f6c7659d133c46ae93043fc6

smhigley
smhigley reviewed May 1, 2024
View reviewed changes
Copy link
Contributor

@smhigley smhigley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yay selector formatting cleanup! :D

packages/react/src/components/Button/SplitButton/SplitButton.styles.ts Outdated Show resolved Hide resolved
packages/react/src/components/Button/SplitButton/SplitButton.styles.ts Show resolved Hide resolved
packages/react/src/components/Button/SplitButton/SplitButton.styles.ts Show resolved Hide resolved
packages/react/src/components/Button/SplitButton/SplitButton.styles.ts Outdated Show resolved Hide resolved
packages/react/src/components/Button/SplitButton/SplitButton.styles.ts Outdated Show resolved Hide resolved
packages/react/src/components/Button/SplitButton/SplitButton.styles.ts Outdated Show resolved Hide resolved
packages/react/src/components/Button/SplitButton/SplitButton.styles.ts Outdated Show resolved Hide resolved
@fabricteam
Copy link
Collaborator

fabricteam commented May 1, 2024 •
edited

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 632 626 5000
Breadcrumb mount 1676 1660 1000
Checkbox mount 1716 1695 5000
CheckboxBase mount 1490 1502 5000
ChoiceGroup mount 2942 2929 5000
ComboBox mount 670 662 1000
CommandBar mount 6480 6406 1000
ContextualMenu mount 12080 12082 1000
DefaultButton mount 798 793 5000
DetailsRow mount 2173 2204 5000
DetailsRowFast mount 2186 2224 5000
DetailsRowNoStyles mount 2014 2047 5000
Dialog mount 2805 2799 1000
DocumentCardTitle mount 218 228 1000
Dropdown mount 1971 1989 5000
FocusTrapZone mount 1157 1168 5000
FocusZone mount 1079 1063 5000
GroupedList mount 37557 41738 2
GroupedList virtual-rerender 20038 20140 2
GroupedList virtual-rerender-with-unmount 51574 50822 2
GroupedListV2 mount 222 234 2
GroupedListV2 virtual-rerender 216 215 2
GroupedListV2 virtual-rerender-with-unmount 217 221 2
IconButton mount 1126 1129 5000
Label mount 328 344 5000
Layer mount 2745 2685 5000
Link mount 396 410 5000
MenuButton mount 1008 1005 5000
MessageBar mount 21296 21365 5000
Nav mount 2006 2012 1000
OverflowSet mount 795 787 5000
Panel mount 1819 1814 1000
Persona mount 743 744 1000
Pivot mount 917 883 1000
PrimaryButton mount 945 919 5000
Rating mount 4642 4565 5000
SearchBox mount 908 948 5000
Shimmer mount 1852 1861 5000
Slider mount 1318 1312 5000
SpinButton mount 2968 2871 5000
Spinner mount 396 407 5000
SplitButton mount 1889 1891 5000
Stack mount 401 406 5000
StackWithIntrinsicChildren mount 872 869 5000
StackWithTextChildren mount 2646 2642 5000
SwatchColorPicker mount 6270 6303 5000
TagPicker mount 1448 1450 5000
Text mount 369 375 5000
TextField mount 915 919 5000
ThemeProvider mount 840 855 5000
ThemeProvider virtual-rerender 589 587 5000
ThemeProvider virtual-rerender-with-unmount 1279 1324 5000
Toggle mount 621 599 5000
buttonNative mount 187 186 5000

@khmakoto khmakoto requested a review from behowell as a code owner May 4, 2024 00:04
@khmakoto khmakoto enabled auto-merge (squash) May 4, 2024 00:14
@khmakoto khmakoto disabled auto-merge May 4, 2024 00:14
@khmakoto khmakoto enabled auto-merge (squash) May 4, 2024 00:14
@khmakoto khmakoto merged commit 15c3f52 into microsoft:master May 4, 2024
19 checks passed
@khmakoto khmakoto deleted the v8/SplitButton/highContrastStyles branch May 4, 2024 01:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fabricteam fabricteam fabricteam left review comments

@smhigley smhigley smhigley approved these changes

@behowell behowell Awaiting requested review from behowell behowell is a code owner

Assignees
No one assigned
Labels
Area: Accessibility Component: SplitButton
Projects
None yet
Milestone
April Project Cycle Q1 2024
Development

Successfully merging this pull request may close these issues.

[Bug]: React fluentui Split button in high contrast mode (windows) border color dissappears on hover
3 participants
@khmakoto @fabricteam @smhigley