search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
17.75k stars 2.65k forks source link

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

Closed khmakoto closed 2 weeks ago

khmakoto commented 2 weeks ago

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)

codesandbox-ci[bot] commented 2 weeks ago

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 commented 2 weeks ago

📊 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

fabricteam commented 2 weeks ago

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

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.