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

chore(ButtonGroup): add Button Group Behavior #12916

Merged

Conversation

assuncaocharles
Copy link
Contributor

@assuncaocharles assuncaocharles commented Apr 29, 2020

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

Currently we have no behavior for ButtonGroup. This PR adds the behavior and add aria-role=group to the group.

Focus areas to test

(optional)

Microsoft Reviewers: Open in CodeFlow

@size-auditor
Copy link

size-auditor bot commented Apr 29, 2020

Asset size changes

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

Baseline commit: 41a20a00826b63bed8fab41116cb88eabf3722ff (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Apr 29, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 818 840 5000
Checkbox 1579 1596 5000
CheckboxBase 1363 1337 5000
ChoiceGroup 4998 5070 5000
ComboBox 882 902 1000
CommandBar 7038 7307 1000
ContextualMenu 12871 13251 1000
DefaultButton 1004 1017 5000
DetailsRow 3341 3247 5000
DetailsRow (fast icons) 3203 3353 5000
DetailsRow without styles 3162 3125 5000
Dialog 1299 1435 1000
DocumentCardTitle with truncation 1510 1439 1000
Dropdown 2311 2221 5000
FocusZone 1521 1545 5000
IconButton 1627 1654 5000
Label 295 319 5000
Link 459 458 5000
MenuButton 1445 1435 5000
Nav 2998 3132 1000
Panel 1419 1442 1000
Persona 829 805 1000
Pivot 1319 1310 1000
PrimaryButton 1153 1234 5000
SearchBox 1236 1252 5000
Slider 1450 1444 5000
Spinner 378 349 5000
SplitButton 3002 3005 5000
Stack 486 460 5000
Stack with Intrinsic children 1097 1140 5000
Stack with Text children 4152 4217 5000
TagPicker 2623 2489 5000
Text 326 366 5000
TextField 1261 1313 5000
Toggle 868 804 5000
button 60 57 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.48 0.47 1.02:1 2000 967
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 550
🔧 Checkbox.Fluent 0.69 0.35 1.97:1 1000 686
🔧 Dialog.Fluent 0.35 0.21 1.67:1 5000 1748
🔧 Dropdown.Fluent 3.09 0.43 7.19:1 1000 3092
🔧 Icon.Fluent 0.15 0.05 3:1 5000 731
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 365
🔧 Slider.Fluent 1.33 0.34 3.91:1 1000 1334
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 354
🦄 Tooltip.Fluent 0.09 17.11 0.01:1 5000 449

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
HeaderMinimalPerf.default 549 440 1.25:1
PopupMinimalPerf.default 271 234 1.16:1
ChatMinimalPerf.default 658 591 1.11:1
ChatDuplicateMessagesPerf.default 422 384 1.1:1
TreeMinimalPerf.default 1311 1197 1.1:1
TableMinimalPerf.default 432 397 1.09:1
FormMinimalPerf.default 821 761 1.08:1
EmbedMinimalPerf.default 2007 1876 1.07:1
GridMinimalPerf.default 716 671 1.07:1
ButtonMinimalPerf.default 174 164 1.06:1
IconMinimalPerf.default 717 679 1.06:1
AttachmentMinimalPerf.default 141 134 1.05:1
ChatWithPopoverPerf.default 585 556 1.05:1
DialogMinimalPerf.default 1761 1679 1.05:1
RefMinimalPerf.default 210 200 1.05:1
HeaderSlotsPerf.default 1554 1495 1.04:1
ListMinimalPerf.default 490 470 1.04:1
ProviderMergeThemesPerf.default 1548 1486 1.04:1
SplitButtonMinimalPerf.default 3499 3367 1.04:1
ItemLayoutMinimalPerf.default 1763 1706 1.03:1
AttachmentSlotsPerf.default 1115 1094 1.02:1
ButtonSlotsPerf.default 630 617 1.02:1
DividerMinimalPerf.default 699 685 1.02:1
FlexMinimalPerf.default 279 274 1.02:1
Checkbox.Fluent 686 672 1.02:1
Slider.Fluent 1334 1309 1.02:1
ListNestedPerf.default 927 919 1.01:1
ListWith60ListItems.default 1181 1169 1.01:1
SegmentMinimalPerf.default 972 967 1.01:1
ToolbarMinimalPerf.default 1107 1095 1.01:1
Tooltip.Fluent 449 446 1.01:1
DropdownManyItemsPerf.default 1291 1291 1:1
HierarchicalTreeMinimalPerf.default 970 972 1:1
ListCommonPerf.default 1023 1018 1:1
ReactionMinimalPerf.default 1910 1908 1:1
StatusMinimalPerf.default 716 716 1:1
TreeWith60ListItems.default 230 230 1:1
VideoMinimalPerf.default 662 661 1:1
Icon.Fluent 731 729 1:1
AnimationMinimalPerf.default 638 647 0.99:1
CardMinimalPerf.default 571 576 0.99:1
CarouselMinimalPerf.default 576 584 0.99:1
InputMinimalPerf.default 992 998 0.99:1
LabelMinimalPerf.default 421 427 0.99:1
LoaderMinimalPerf.default 766 776 0.99:1
RadioGroupMinimalPerf.default 612 620 0.99:1
TextMinimalPerf.default 367 369 0.99:1
AvatarMinimalPerf.default 509 520 0.98:1
ImageMinimalPerf.default 391 401 0.98:1
LayoutMinimalPerf.default 584 598 0.98:1
MenuMinimalPerf.default 1849 1888 0.98:1
MenuButtonMinimalPerf.default 1587 1617 0.98:1
SliderMinimalPerf.default 1348 1376 0.98:1
CustomToolbarPrototype.default 3566 3635 0.98:1
TooltipMinimalPerf.default 739 753 0.98:1
Button.Fluent 550 561 0.98:1
Dropdown.Fluent 3092 3157 0.98:1
Avatar.Fluent 967 999 0.97:1
Text.Fluent 354 364 0.97:1
Dialog.Fluent 1748 1813 0.96:1
AccordionMinimalPerf.default 192 203 0.95:1
BoxMinimalPerf.default 316 332 0.95:1
CheckboxMinimalPerf.default 2770 2909 0.95:1
DropdownMinimalPerf.default 3077 3228 0.95:1
PortalMinimalPerf.default 309 331 0.93:1
ProviderMinimalPerf.default 605 656 0.92:1
TextAreaMinimalPerf.default 506 552 0.92:1
AlertMinimalPerf.default 281 321 0.88:1
Image.Fluent 365 426 0.86:1

Copy link
Contributor

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

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

Add changelog entry before merging

@assuncaocharles assuncaocharles merged commit fa15478 into microsoft:master Apr 30, 2020
@assuncaocharles assuncaocharles deleted the chore/button-group-aria-role branch April 30, 2020 14:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants