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: SplitButton menuButton is at least 24px wide #32309

Merged
merged 3 commits into from
Aug 26, 2024

Conversation

smhigley
Copy link
Contributor

@smhigley smhigley commented Aug 14, 2024

Previous Behavior

The menuButton was 23px wide by default, failing the new WCAG 2.2 minimum target size requirement by 1px.
Screenshot of the splitbutton appearance story, with the menubutton being inspected in devtools, showing a 23px width

New Behavior

The min-width of the menubutton is set to 24px for all sizes of splitbuttons. Toshie already got sign-off on the change (including for small splitbuttons) from partners, so we should be good to change the visuals.

Screenshot of the same splitbuttons, with devtools showing the menubutton at 24px Screenshot of small-size splitbuttons, with the menubuttons also at 24px wide

@smhigley smhigley requested review from khmakoto and a team as code owners August 14, 2024 22:44
@github-actions github-actions bot added this to the August Project Cycle Q3 2024 milestone Aug 14, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 14, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-button
SplitButton
49.93 kB
13.696 kB
49.933 kB
13.693 kB
3 B
-3 B
react-components
react-components: entire library
1.097 MB
270.919 kB
1.097 MB
270.917 kB
3 B
-2 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-breadcrumb
@fluentui/react-breadcrumb - package
113.699 kB
31.498 kB
react-button
Button
37.104 kB
10.766 kB
react-button
CompoundButton
43.518 kB
12.068 kB
react-button
MenuButton
41.916 kB
12.119 kB
react-button
ToggleButton
53.037 kB
12.528 kB
react-card
Card - All
101.238 kB
28.624 kB
react-card
Card
94.022 kB
26.806 kB
react-card
CardFooter
14.355 kB
5.79 kB
react-card
CardHeader
16.878 kB
6.666 kB
react-card
CardPreview
14.42 kB
5.922 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.14 kB
20.137 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
218 kB
63.151 kB
react-components
react-components: FluentProvider & webLightTheme
44.447 kB
14.59 kB
react-dialog
Dialog (including children components)
99.541 kB
29.849 kB
react-message-bar
MessageBar (all components)
24.722 kB
9.205 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-tag-picker
@fluentui/react-tag-picker - package
182.176 kB
54.779 kB
react-timepicker-compat
TimePicker
107.387 kB
35.758 kB
🤖 This report was generated against 8492a7ebd12270b49dd3083671a859ada31b395b

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 14, 2024

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 644 611 5000
Button mount 305 311 5000
Field mount 1110 1148 5000
FluentProvider mount 707 721 5000
FluentProviderWithTheme mount 85 98 10
FluentProviderWithTheme virtual-rerender 37 30 10
FluentProviderWithTheme virtual-rerender-with-unmount 76 69 10
MakeStyles mount 880 866 50000
Persona mount 1764 1676 5000
SpinButton mount 1397 1358 5000
SwatchPicker mount 1647 1620 5000

@smhigley smhigley changed the title fix: medium and large SplitButton menuButton is at least 24px wide fix: SplitButton menuButton is at least 24px wide Aug 16, 2024
@smhigley smhigley merged commit 99348c8 into microsoft:master Aug 26, 2024
19 checks passed
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.

3 participants