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.

Sign up for GitHub

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

Jump to bottom

Add pointer-events none for slotted svgs in button and anchors to prevent focus rect on click #17750

Merged
merged 2 commits into from
Apr 20, 2021
Merged

Add pointer-events none for slotted svgs in button and anchors to prevent focus rect on click #17750

merged 2 commits into from
Apr 20, 2021

Conversation

chrisdholt
Copy link
Member

@chrisdholt chrisdholt commented Apr 9, 2021 •
edited
Loading

Pull request checklist

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

Description of changes

Add pointer-events none for slotted svgs in button and anchors to prevent focus rect on click

Focus areas to test

Boot the test environment - click the icon button. No more focus rect!

@chrisdholt chrisdholt self-assigned this Apr 9, 2021
@size-auditor
Copy link

size-auditor bot commented Apr 9, 2021

Asset size changes

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

Baseline commit: cf84d4e58d74579592bff492fd63bdef6e45ea27 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 9, 2021

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.

Latest deployment of this branch, based on commit 49d2365:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1022 1035 5000
BaseButton mount 1016 990 5000
Breadcrumb mount 45046 45244 5000
ButtonNext mount 631 633 5000
Checkbox mount 1694 1726 5000
CheckboxBase mount 1486 1485 5000
ChoiceGroup mount 5241 5234 5000
ComboBox mount 996 1033 1000
CommandBar mount 10671 10472 1000
ContextualMenu mount 6770 6670 1000
DefaultButton mount 1275 1255 5000
DetailsRow mount 3967 3938 5000
DetailsRowFast mount 3929 3989 5000
DetailsRowNoStyles mount 3757 3747 5000
Dialog mount 1631 1596 1000
DocumentCardTitle mount 1877 1873 1000
Dropdown mount 3509 3469 5000
FocusTrapZone mount 1876 1910 5000
FocusZone mount 1889 1989 5000
IconButton mount 1955 2032 5000
Label mount 371 369 5000
Layer mount 2056 2043 5000
Link mount 514 520 5000
MakeStyles mount 1869 1928 50000
MenuButton mount 1607 1613 5000
MessageBar mount 2139 2124 5000
Nav mount 3559 3649 1000
OverflowSet mount 1073 1072 5000
Panel mount 1468 1549 1000
Persona mount 897 882 1000
Pivot mount 1477 1559 1000
PrimaryButton mount 1363 1360 5000
Rating mount 8379 8493 5000
SearchBox mount 1478 1497 5000
Shimmer mount 2786 2916 5000
Slider mount 2108 2100 5000
SpinButton mount 5311 5303 5000
Spinner mount 441 452 5000
SplitButton mount 3444 3416 5000
Stack mount 551 544 5000
StackWithIntrinsicChildren mount 1687 1708 5000
StackWithTextChildren mount 5156 5061 5000
SwatchColorPicker mount 10966 11002 5000
Tabs mount 1505 1472 1000
TagPicker mount 3119 2978 5000
TeachingBubble mount 12304 12365 5000
Text mount 460 465 5000
TextField mount 1487 1489 5000
ThemeProvider mount 1238 1246 5000
ThemeProvider virtual-rerender 615 619 5000
ThemeProviderNext mount 16275 16152 5000
Toggle mount 899 866 5000
buttonNative mount 118 110 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.2 0.52 0.38:1 2000 401
🦄 Button.Fluent 0.12 0.22 0.55:1 5000 605
🔧 Checkbox.Fluent 0.67 0.39 1.72:1 1000 671
🦄 Dialog.Fluent 0.16 0.24 0.67:1 5000 813
🔧 Dropdown.Fluent 3.27 0.43 7.6:1 1000 3272
🔧 Icon.Fluent 0.14 0.07 2:1 5000 680
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 452
🔧 Slider.Fluent 1.7 0.51 3.33:1 1000 1697
🔧 Text.Fluent 0.08 0.04 2:1 5000 416
🦄 Tooltip.Fluent 0.16 0.95 0.17:1 5000 783

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AnimationMinimalPerf.default 489 440 1.11:1
ButtonMinimalPerf.default 225 207 1.09:1
ChatMinimalPerf.default 734 677 1.08:1
SegmentMinimalPerf.default 410 382 1.07:1
Image.Fluent 452 422 1.07:1
TableMinimalPerf.default 471 446 1.06:1
CarouselMinimalPerf.default 562 535 1.05:1
FlexMinimalPerf.default 341 325 1.05:1
ItemLayoutMinimalPerf.default 1458 1389 1.05:1
MenuMinimalPerf.default 1022 972 1.05:1
ReactionMinimalPerf.default 449 426 1.05:1
StatusMinimalPerf.default 802 761 1.05:1
Avatar.Fluent 401 383 1.05:1
Tooltip.Fluent 783 744 1.05:1
AlertMinimalPerf.default 320 308 1.04:1
TextMinimalPerf.default 410 395 1.04:1
TooltipMinimalPerf.default 1076 1034 1.04:1
DialogMinimalPerf.default 821 798 1.03:1
GridMinimalPerf.default 400 388 1.03:1
ImageMinimalPerf.default 447 434 1.03:1
InputMinimalPerf.default 1388 1352 1.03:1
ProviderMergeThemesPerf.default 1731 1681 1.03:1
ProviderMinimalPerf.default 1066 1035 1.03:1
Text.Fluent 416 402 1.03:1
AttachmentMinimalPerf.default 198 194 1.02:1
AttachmentSlotsPerf.default 1266 1241 1.02:1
DropdownManyItemsPerf.default 787 775 1.02:1
ListWith60ListItems.default 705 692 1.02:1
LoaderMinimalPerf.default 769 756 1.02:1
PortalMinimalPerf.default 186 182 1.02:1
RefMinimalPerf.default 258 252 1.02:1
SplitButtonMinimalPerf.default 4100 4012 1.02:1
TableManyItemsPerf.default 2145 2095 1.02:1
ToolbarMinimalPerf.default 1057 1041 1.02:1
TreeMinimalPerf.default 860 845 1.02:1
Slider.Fluent 1697 1657 1.02:1
ButtonOverridesMissPerf.default 1833 1817 1.01:1
DropdownMinimalPerf.default 3250 3229 1.01:1
SliderMinimalPerf.default 1645 1629 1.01:1
VideoMinimalPerf.default 713 704 1.01:1
Checkbox.Fluent 671 663 1.01:1
Dropdown.Fluent 3272 3237 1.01:1
ButtonUseCssNestingPerf.default 1176 1177 1:1
ChatDuplicateMessagesPerf.default 328 329 1:1
CheckboxMinimalPerf.default 3003 3015 1:1
DatepickerMinimalPerf.default 50453 50468 1:1
DividerMinimalPerf.default 414 412 1:1
HeaderMinimalPerf.default 415 414 1:1
LabelMinimalPerf.default 433 431 1:1
ListCommonPerf.default 714 712 1:1
MenuButtonMinimalPerf.default 1712 1708 1:1
CustomToolbarPrototype.default 3995 3996 1:1
AccordionMinimalPerf.default 185 186 0.99:1
CardMinimalPerf.default 653 657 0.99:1
EmbedMinimalPerf.default 4402 4426 0.99:1
FormMinimalPerf.default 462 469 0.99:1
HeaderSlotsPerf.default 864 874 0.99:1
SkeletonMinimalPerf.default 405 408 0.99:1
Button.Fluent 605 613 0.99:1
Icon.Fluent 680 687 0.99:1
AvatarMinimalPerf.default 223 228 0.98:1
BoxMinimalPerf.default 399 408 0.98:1
LayoutMinimalPerf.default 420 430 0.98:1
ListMinimalPerf.default 555 565 0.98:1
RosterPerf.default 1305 1333 0.98:1
PopupMinimalPerf.default 789 802 0.98:1
RadioGroupMinimalPerf.default 505 513 0.98:1
TextAreaMinimalPerf.default 566 576 0.98:1
Dialog.Fluent 813 826 0.98:1
IconMinimalPerf.default 680 705 0.96:1
ButtonSlotsPerf.default 625 655 0.95:1
ButtonUseCssPerf.default 860 901 0.95:1
ChatWithPopoverPerf.default 401 422 0.95:1
ListNestedPerf.default 620 677 0.92:1
TreeWith60ListItems.default 193 210 0.92:1

@chrisdholt chrisdholt merged commit 2883835 into microsoft:master Apr 20, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/web-components@v0.20.3 has been released which incorporates this pull request.:tada:

Handy links:

miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@chrisdholt @miroslavstastny
Add pointer-events none for slotted svgs in button and anchors to pre…
d34d868 
…vent focus rect on click (microsoft#17750)

* add pointer-events none for slotted svgs in buttons and anchors to prevent focus rect on click

* Change files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@EisenbergEffect EisenbergEffect Awaiting requested review from EisenbergEffect

@nicholasrice nicholasrice Awaiting requested review from nicholasrice

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@chrisdholt @fabricteam @msft-fluent-ui-bot