Skip to content

Remove pointer-events: 'none' from BaseButton disabled styles#17737

Merged
msft-fluent-ui-bot merged 2 commits intomicrosoft:masterfrom
benkaiser:bekaise/re-enabled-pointer-events
Apr 7, 2021
Merged

Remove pointer-events: 'none' from BaseButton disabled styles#17737
msft-fluent-ui-bot merged 2 commits intomicrosoft:masterfrom
benkaiser:bekaise/re-enabled-pointer-events

Conversation

@benkaiser
Copy link
Member

Pull request checklist

Description of changes

Removes the pointer-events: 'none' styling that is applied to disabled buttons. This allows disabled buttons to have native title tooltips available (which is how native html buttons work in their disabled state).

Focus areas to test

Buttons

@size-auditor
Copy link

size-auditor bot commented Apr 7, 2021

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-DocumentCard 199.882 kB 199.861 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-ButtonGrid 165.757 kB 165.736 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-TeachingBubble 189.765 kB 189.744 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-Dialog 195.115 kB 195.094 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-SwatchColorPicker 175.257 kB 175.236 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-Breadcrumb 184.325 kB 184.304 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-Button 179.652 kB 179.631 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-MessageBar 173.432 kB 173.411 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-Dropdown 215.916 kB 215.895 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-SpinButton 176.521 kB 176.5 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-Facepile 194.444 kB 194.423 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-FloatingPicker 225.114 kB 225.093 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-SelectedItemsList 214.693 kB 214.672 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-Grid 165.757 kB 165.736 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-SearchBox 172.372 kB 172.351 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-Pivot 173.642 kB 173.621 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-Pickers 268.665 kB 268.644 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-Panel 185.033 kB 185.012 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-CommandBar 185.857 kB 185.836 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-Nav 173.702 kB 173.681 kB BelowBaseline     -21 bytes
office-ui-fabric-react fluentui-react-ComboBox 229.49 kB 229.469 kB BelowBaseline     -21 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: ae21a051f71e7f7f71621f711a1da8dcb9284826 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 7, 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 e467b6f:

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

@khmakoto
Copy link
Member

khmakoto commented Apr 7, 2021

@msft-fluent-ui-bot merge in 1 minute.

@msft-fluent-ui-bot
Copy link
Collaborator

Hello @khmakoto!

Because you've given me some instructions on how to help merge this pull request, I'll be modifying my merge approach. Here's how I understand your requirements for merging this pull request:

  • I won't merge this pull request until after the UTC date Wed, 07 Apr 2021 22:14:50 GMT, which is in 1 minute

If this doesn't seem right to you, you can tell me to cancel these instructions and use the auto-merge policy that has been configured for this repository. Try telling me "forget everything I just told you".

@msft-fluent-ui-bot msft-fluent-ui-bot merged commit 5514e58 into microsoft:master Apr 7, 2021
@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 994 948 5000
BaseButton mount 952 945 5000
Breadcrumb mount 42666 42807 5000
ButtonNext mount 600 616 5000
Checkbox mount 1604 1640 5000
CheckboxBase mount 1455 1363 5000
ChoiceGroup mount 5025 5090 5000
ComboBox mount 1012 1010 1000
CommandBar mount 10342 10321 1000
ContextualMenu mount 6314 6503 1000
DefaultButton mount 1201 1216 5000
DetailsRow mount 3849 3873 5000
DetailsRowFast mount 3846 3788 5000
DetailsRowNoStyles mount 3661 3672 5000
Dialog mount 1535 1575 1000
DocumentCardTitle mount 1825 1848 1000
Dropdown mount 3436 3470 5000
FocusTrapZone mount 1867 1816 5000
FocusZone mount 1794 1777 5000
IconButton mount 1870 1877 5000
Label mount 337 339 5000
Layer mount 1866 1849 5000
Link mount 489 484 5000
MakeStyles mount 1789 1887 50000
MenuButton mount 1548 1545 5000
MessageBar mount 2004 2018 5000
Nav mount 3425 3413 1000
OverflowSet mount 1056 1081 5000
Panel mount 1489 1440 1000
Persona mount 864 835 1000
Pivot mount 1483 1461 1000
PrimaryButton mount 1393 1349 5000
Rating mount 8035 8319 5000
SearchBox mount 1394 1374 5000
Shimmer mount 2627 2732 5000
Slider mount 2045 2051 5000
SpinButton mount 5192 5181 5000
Spinner mount 425 396 5000
SplitButton mount 3297 3281 5000
Stack mount 532 538 5000
StackWithIntrinsicChildren mount 1656 1685 5000
StackWithTextChildren mount 4914 5006 5000
SwatchColorPicker mount 10897 10711 5000
Tabs mount 1477 1444 1000
TagPicker mount 2918 2949 5000
TeachingBubble mount 12106 12064 5000
Text mount 443 444 5000
TextField mount 1451 1431 5000
ThemeProvider mount 1206 1231 5000
ThemeProvider virtual-rerender 600 603 5000
ThemeProviderNext mount 15764 15794 5000
Toggle mount 822 832 5000
buttonNative mount 123 108 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.5 0.36:1 2000 352
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 609
🔧 Checkbox.Fluent 0.68 0.39 1.74:1 1000 680
🎯 Dialog.Fluent 0.16 0.23 0.7:1 5000 794
🔧 Dropdown.Fluent 3.19 0.42 7.6:1 1000 3193
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 709
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 433
🔧 Slider.Fluent 1.68 0.49 3.43:1 1000 1675
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 419
🦄 Tooltip.Fluent 0.15 0.92 0.16:1 5000 766

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ReactionMinimalPerf.default 446 407 1.1:1
RefMinimalPerf.default 268 244 1.1:1
ListNestedPerf.default 657 605 1.09:1
Text.Fluent 419 383 1.09:1
ChatDuplicateMessagesPerf.default 336 312 1.08:1
BoxMinimalPerf.default 398 373 1.07:1
SkeletonMinimalPerf.default 421 395 1.07:1
IconMinimalPerf.default 698 653 1.07:1
TreeWith60ListItems.default 218 203 1.07:1
AvatarMinimalPerf.default 223 211 1.06:1
HeaderSlotsPerf.default 884 837 1.06:1
RadioGroupMinimalPerf.default 509 481 1.06:1
Icon.Fluent 709 670 1.06:1
ButtonSlotsPerf.default 630 598 1.05:1
TableMinimalPerf.default 466 444 1.05:1
TextAreaMinimalPerf.default 572 543 1.05:1
ToolbarMinimalPerf.default 1088 1033 1.05:1
AccordionMinimalPerf.default 178 171 1.04:1
GridMinimalPerf.default 404 390 1.04:1
PortalMinimalPerf.default 182 175 1.04:1
SegmentMinimalPerf.default 409 393 1.04:1
Button.Fluent 609 583 1.04:1
Checkbox.Fluent 680 655 1.04:1
AnimationMinimalPerf.default 457 443 1.03:1
ButtonUseCssNestingPerf.default 1149 1111 1.03:1
CardMinimalPerf.default 629 612 1.03:1
MenuButtonMinimalPerf.default 1703 1656 1.03:1
TooltipMinimalPerf.default 1053 1022 1.03:1
Tooltip.Fluent 766 743 1.03:1
ButtonOverridesMissPerf.default 1801 1761 1.02:1
CarouselMinimalPerf.default 495 485 1.02:1
FlexMinimalPerf.default 331 325 1.02:1
CustomToolbarPrototype.default 3978 3916 1.02:1
AttachmentMinimalPerf.default 190 188 1.01:1
ButtonUseCssPerf.default 856 849 1.01:1
FormMinimalPerf.default 490 486 1.01:1
LabelMinimalPerf.default 442 436 1.01:1
LoaderMinimalPerf.default 748 744 1.01:1
ProviderMergeThemesPerf.default 1689 1673 1.01:1
Dropdown.Fluent 3193 3156 1.01:1
Image.Fluent 433 430 1.01:1
Slider.Fluent 1675 1652 1.01:1
ChatMinimalPerf.default 658 659 1:1
DatepickerMinimalPerf.default 47033 46839 1:1
DropdownMinimalPerf.default 3161 3152 1:1
InputMinimalPerf.default 1317 1318 1:1
ItemLayoutMinimalPerf.default 1425 1421 1:1
ListCommonPerf.default 694 696 1:1
ListMinimalPerf.default 560 560 1:1
RosterPerf.default 1318 1315 1:1
PopupMinimalPerf.default 749 749 1:1
SplitButtonMinimalPerf.default 4032 4019 1:1
TableManyItemsPerf.default 2093 2092 1:1
TextMinimalPerf.default 376 377 1:1
TreeMinimalPerf.default 863 862 1:1
AlertMinimalPerf.default 299 301 0.99:1
AttachmentSlotsPerf.default 1203 1218 0.99:1
ChatWithPopoverPerf.default 414 417 0.99:1
DialogMinimalPerf.default 778 783 0.99:1
EmbedMinimalPerf.default 4274 4304 0.99:1
MenuMinimalPerf.default 967 977 0.99:1
SliderMinimalPerf.default 1614 1630 0.99:1
Dialog.Fluent 794 800 0.99:1
DividerMinimalPerf.default 416 424 0.98:1
VideoMinimalPerf.default 682 698 0.98:1
CheckboxMinimalPerf.default 2825 2922 0.97:1
HeaderMinimalPerf.default 400 412 0.97:1
ListWith60ListItems.default 687 711 0.97:1
ProviderMinimalPerf.default 1039 1073 0.97:1
StatusMinimalPerf.default 764 790 0.97:1
ImageMinimalPerf.default 428 448 0.96:1
LayoutMinimalPerf.default 408 426 0.96:1
ButtonMinimalPerf.default 189 200 0.95:1
DropdownManyItemsPerf.default 743 780 0.95:1
Avatar.Fluent 352 369 0.95:1

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react@v8.9.2 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-experiments@v8.0.24 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-examples@v8.14.1 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
…oft#17737)

#### Pull request checklist

- [x] Addresses an existing issue: Fixes microsoft#17606
- [x] Include a change request file using `$ yarn change`

#### Description of changes

Removes the `pointer-events: 'none'` styling that is applied to disabled buttons. This allows disabled buttons to have native `title` tooltips available (which is how native html buttons work in their disabled state).

#### Focus areas to test

Buttons
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.

Button component does not display tooltip when disabled

5 participants