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: set pointer event to none on children in button component #18473

Conversation

khamudom
Copy link
Contributor

@khamudom khamudom commented Jun 8, 2021

Pull request checklist

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

Description of changes

Added pointer-events: none on content, start and end classes. The contents were triggering focus-visible on the button when clicked.

Focus areas to test

(optional)

@size-auditor
Copy link

size-auditor bot commented Jun 8, 2021

Asset size changes

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

Baseline commit: e81620081c85eaf0224b3bc290bf15f589ca7281 (build)

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 879 889 5000
BaseButton mount 1009 1012 5000
Breadcrumb mount 3005 3036 1000
ButtonNext mount 545 545 5000
Checkbox mount 1714 1783 5000
CheckboxBase mount 1508 1494 5000
ChoiceGroup mount 5346 5341 5000
ComboBox mount 1072 1072 1000
CommandBar mount 11422 11425 1000
ContextualMenu mount 6931 6839 1000
DefaultButton mount 1286 1274 5000
DetailsRow mount 4103 4088 5000
DetailsRowFast mount 4152 4143 5000
DetailsRowNoStyles mount 3920 3877 5000
Dialog mount 2354 2237 1000
DocumentCardTitle mount 165 177 1000
Dropdown mount 3563 3618 5000
FocusTrapZone mount 2005 1907 5000
FocusZone mount 1885 1918 5000
IconButton mount 2017 1969 5000
Label mount 365 386 5000
Layer mount 1970 2009 5000
Link mount 535 527 5000
MakeStyles mount 1958 1899 50000
MenuButton mount 1672 1646 5000
MessageBar mount 2240 2263 5000
Nav mount 3640 3610 1000
OverflowSet mount 1142 1161 5000
Panel mount 2162 2186 1000
Persona mount 928 898 1000
Pivot mount 1568 1547 1000
PrimaryButton mount 1435 1434 5000
Rating mount 8785 8664 5000
SearchBox mount 1522 1520 5000
Shimmer mount 2900 2833 5000
Slider mount 2209 2199 5000
SpinButton mount 5548 5692 5000
Spinner mount 454 452 5000
SplitButton mount 3538 3574 5000
Stack mount 545 552 5000
StackWithIntrinsicChildren mount 1742 1808 5000
StackWithTextChildren mount 5137 5169 5000
SwatchColorPicker mount 11351 11360 5000
Tabs mount 1557 1531 1000
TagPicker mount 2662 2699 5000
TeachingBubble mount 12768 12685 5000
Text mount 460 466 5000
TextField mount 1491 1486 5000
ThemeProvider mount 1287 1280 5000
ThemeProvider virtual-rerender 646 618 5000
ThemeProviderNext mount 7597 7184 5000
Toggle mount 888 908 5000
buttonNative mount 123 120 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TableMinimalPerf.default 491 449 1.09:1
TextAreaMinimalPerf.default 617 567 1.09:1
LabelMinimalPerf.default 453 425 1.07:1
LayoutMinimalPerf.default 423 397 1.07:1
AnimationMinimalPerf.default 483 454 1.06:1
TextMinimalPerf.default 403 381 1.06:1
TreeWith60ListItems.default 208 197 1.06:1
PortalMinimalPerf.default 205 196 1.05:1
AccordionMinimalPerf.default 176 169 1.04:1
AttachmentMinimalPerf.default 184 177 1.04:1
ChatDuplicateMessagesPerf.default 331 319 1.04:1
DropdownManyItemsPerf.default 796 769 1.04:1
FlexMinimalPerf.default 334 322 1.04:1
GridMinimalPerf.default 403 386 1.04:1
MenuButtonMinimalPerf.default 1794 1730 1.04:1
PopupMinimalPerf.default 625 603 1.04:1
RefMinimalPerf.default 259 249 1.04:1
AlertMinimalPerf.default 325 317 1.03:1
CardMinimalPerf.default 654 637 1.03:1
ChatWithPopoverPerf.default 424 413 1.03:1
ListWith60ListItems.default 752 728 1.03:1
SplitButtonMinimalPerf.default 4258 4141 1.03:1
TooltipMinimalPerf.default 1116 1088 1.03:1
CarouselMinimalPerf.default 520 509 1.02:1
DialogMinimalPerf.default 846 833 1.02:1
HeaderSlotsPerf.default 865 847 1.02:1
ListCommonPerf.default 736 719 1.02:1
ProviderMinimalPerf.default 1177 1153 1.02:1
RadioGroupMinimalPerf.default 520 508 1.02:1
ReactionMinimalPerf.default 450 440 1.02:1
StatusMinimalPerf.default 771 758 1.02:1
AttachmentSlotsPerf.default 1286 1274 1.01:1
BoxMinimalPerf.default 407 401 1.01:1
ButtonOverridesMissPerf.default 1912 1898 1.01:1
ButtonSlotsPerf.default 620 615 1.01:1
EmbedMinimalPerf.default 4571 4516 1.01:1
FormMinimalPerf.default 490 483 1.01:1
HeaderMinimalPerf.default 411 406 1.01:1
SliderMinimalPerf.default 1794 1770 1.01:1
TableManyItemsPerf.default 2196 2167 1.01:1
ToolbarMinimalPerf.default 1066 1056 1.01:1
AvatarMinimalPerf.default 218 217 1:1
ChatMinimalPerf.default 715 712 1:1
CheckboxMinimalPerf.default 3029 3021 1:1
DatepickerMinimalPerf.default 6358 6383 1:1
DividerMinimalPerf.default 420 421 1:1
InputMinimalPerf.default 1398 1400 1:1
ListMinimalPerf.default 591 590 1:1
LoaderMinimalPerf.default 742 742 1:1
SegmentMinimalPerf.default 398 400 1:1
CustomToolbarPrototype.default 4202 4199 1:1
DropdownMinimalPerf.default 3391 3435 0.99:1
ImageMinimalPerf.default 437 440 0.99:1
ItemLayoutMinimalPerf.default 1429 1444 0.99:1
ProviderMergeThemesPerf.default 1799 1815 0.99:1
SkeletonMinimalPerf.default 400 403 0.99:1
ListNestedPerf.default 629 642 0.98:1
MenuMinimalPerf.default 957 973 0.98:1
VideoMinimalPerf.default 710 726 0.98:1
TreeMinimalPerf.default 888 914 0.97:1
IconMinimalPerf.default 654 679 0.96:1
ButtonMinimalPerf.default 196 208 0.94:1
RosterPerf.default 1187 1264 0.94:1

@chrisdholt chrisdholt merged commit c270c2c into microsoft:master Jun 8, 2021
@chrisdholt
Copy link
Member

Thanks @khamudom!

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants