fix: Fixing `SplitButton` styles in High Contrast Mode by khmakoto · Pull Request #31253 · microsoft/fluentui

khmakoto · 2024-05-01T21:30:13Z

Previous Behavior

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

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.

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)

Fixes [Bug]: React fluentui Split button in high contrast mode (windows) border color dissappears on hover #29323

codesandbox-ci · 2024-05-01T21:41:58Z

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 · 2024-05-01T21:46:19Z

📊 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

Yay selector formatting cleanup! :D

fabricteam · 2024-05-01T21:55:29Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
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

Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>

khmakoto added 2 commits May 1, 2024 14:26

fix: Fixing SplitButton styles in High Contrast Mode.

8a52ad0

Adding change file.

2722c2b

khmakoto requested a review from a team as a code owner May 1, 2024 21:30

github-actions Bot added this to the April Project Cycle Q1 2024 milestone May 1, 2024

microsoft-github-policy-service Bot added Area: Accessibility Component: SplitButton labels May 1, 2024

khmakoto commented May 1, 2024

View reviewed changes

Comment thread packages/react/src/components/Button/SplitButton/SplitButton.styles.ts

fabricteam reviewed May 1, 2024

View reviewed changes

Comment thread change/@fluentui-react-d832d1e9-a199-4dfc-a381-b0d33d1c2d16.json

smhigley reviewed May 1, 2024

View reviewed changes

Addressing PR feedback.

4ee9c48

smhigley approved these changes May 2, 2024

View reviewed changes

Updating snapshots.

c9bcd64

khmakoto requested a review from behowell as a code owner May 4, 2024 00:04

Merge branch 'master' into v8/SplitButton/highContrastStyles

67bf7f3

khmakoto enabled auto-merge (squash) May 4, 2024 00:14

khmakoto disabled auto-merge May 4, 2024 00:14

khmakoto enabled auto-merge (squash) May 4, 2024 00:14

khmakoto merged commit 15c3f52 into microsoft:master May 4, 2024

khmakoto deleted the v8/SplitButton/highContrastStyles branch May 4, 2024 01:25

miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024

fix: Fixing SplitButton styles in High Contrast Mode (microsoft#31253)

0ecb4c1

Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>

khmakoto mentioned this pull request Jun 24, 2024

fix(merge-styles): Correctly processing selectors when value is a class name and they are not wrapped in selectors wrapper #31798

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: Fixing `SplitButton` styles in High Contrast Mode#31253

fix: Fixing `SplitButton` styles in High Contrast Mode#31253
khmakoto merged 5 commits into
microsoft:masterfrom
khmakoto:v8/SplitButton/highContrastStyles

khmakoto commented May 1, 2024 •

edited

Loading

Uh oh!

Uh oh!

codesandbox-ci Bot commented May 1, 2024 •

edited

Loading

Uh oh!

Uh oh!

fabricteam commented May 1, 2024 •

edited

Loading

Uh oh!

smhigley left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fabricteam commented May 1, 2024 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

khmakoto commented May 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

Uh oh!

codesandbox-ci Bot commented May 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

fabricteam commented May 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

smhigley left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fabricteam commented May 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

khmakoto commented May 1, 2024 •

edited

Loading

codesandbox-ci Bot commented May 1, 2024 •

edited

Loading

fabricteam commented May 1, 2024 •

edited

Loading

fabricteam commented May 1, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)