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

fix (web components): slider disabled and readonly cursor #16374

Merged
merged 1 commit into from
Jan 14, 2021
Merged

fix (web components): slider disabled and readonly cursor #16374

merged 1 commit into from
Jan 14, 2021

Conversation

SethDonohue
Copy link
Contributor

@SethDonohue SethDonohue commented Jan 5, 2021 •
edited by layershifter
Loading

Pull request checklist

Description of changes

Fixes PR #16362 and addresses same issue with readonly Slider

Note: There is no .slider class on this component's template, so the css .slider selector was not targeting anything. The disabled cursor still works on the labels and the forcedColors cursor style can be removed with this change as well.

Before:

After:
Screen Shot 2021-01-05 at 12 11 05 PM
Screen Shot 2021-01-05 at 12 10 53 PM

High Contrast:
Screen Shot 2021-01-05 at 12 26 02 PM

@SethDonohue SethDonohue force-pushed the users/v-sedono/fix-slider-disabled-cursor branch 2 times, most recently from 8ff9b0b to 3444777 Compare January 5, 2021 20:18
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 5, 2021 •
edited
Loading

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 84ff2a9:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 5, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 823 868 5000
BaseButtonCompat mount 905 917 5000
Breadcrumb mount 43754 41716 5000
Checkbox mount 1621 1608 5000
CheckboxBase mount 1374 1419 5000
ChoiceGroup mount 5141 5093 5000
ComboBox mount 970 1017 1000
CommandBar mount 10375 10288 1000
ContextualMenu mount 6243 6325 1000
DefaultButtonCompat mount 1194 1199 5000
DetailsRow mount 3869 3838 5000
DetailsRowFast mount 3851 3801 5000
DetailsRowNoStyles mount 3710 3713 5000
Dialog mount 1543 1554 1000
DocumentCardTitle mount 1810 1813 1000
Dropdown mount 3518 3485 5000
FocusTrapZone mount 1758 1832 5000
FocusZone mount 1850 1899 5000
IconButtonCompat mount 1922 1853 5000
Label mount 350 368 5000
Layer mount 1919 1867 5000
Link mount 498 516 5000
MakeStyles mount 2054 2126 50000
MenuButtonCompat mount 1588 1576 5000
MessageBar mount 2087 2069 5000
Nav mount 3412 3605 1000
OverflowSet mount 1050 1088 5000
Panel mount 1511 1421 1000
Persona mount 882 872 1000
Pivot mount 1467 1479 1000
PrimaryButtonCompat mount 1365 1362 5000
Rating mount 8226 8089 5000
SearchBox mount 1447 1414 5000
Shimmer mount 2722 2719 5000
Slider mount 2023 2020 5000
SpinButton mount 5340 5258 5000
Spinner mount 427 440 5000
SplitButtonCompat mount 3336 3361 5000
Stack mount 544 537 5000
StackWithIntrinsicChildren mount 1692 1638 5000
StackWithTextChildren mount 4925 4913 5000
SwatchColorPicker mount 10706 10757 5000
Tabs mount 1484 1458 1000
TagPicker mount 2988 2981 5000
TeachingBubble mount 12260 12059 5000
Text mount 461 455 5000
TextField mount 1510 1481 5000
ThemeProvider mount 2254 2247 5000
ThemeProvider virtual-rerender 691 663 5000
Toggle mount 842 858 5000
button mount 721 711 5000
buttonNative mount 111 121 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.53 0.34:1 2000 366
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 622
🔧 Checkbox.Fluent 0.65 0.34 1.91:1 1000 654
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 825
🔧 Dropdown.Fluent 2.96 0.43 6.88:1 1000 2957
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 716
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 444
🔧 Slider.Fluent 1.6 0.46 3.48:1 1000 1596
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 389
🦄 Tooltip.Fluent 0.12 0.88 0.14:1 5000 580

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ListNestedPerf.default 656 598 1.1:1
ChatDuplicateMessagesPerf.default 415 385 1.08:1
TextAreaMinimalPerf.default 562 527 1.07:1
ButtonMinimalPerf.default 197 186 1.06:1
ListCommonPerf.default 706 663 1.06:1
RefMinimalPerf.default 243 230 1.06:1
AttachmentMinimalPerf.default 186 177 1.05:1
ButtonUseCssNestingPerf.default 1177 1119 1.05:1
FormMinimalPerf.default 498 476 1.05:1
LayoutMinimalPerf.default 469 447 1.05:1
TextMinimalPerf.default 408 388 1.05:1
ToolbarMinimalPerf.default 1034 987 1.05:1
AnimationMinimalPerf.default 437 422 1.04:1
CarouselMinimalPerf.default 484 467 1.04:1
ChatWithPopoverPerf.default 471 454 1.04:1
HeaderMinimalPerf.default 420 403 1.04:1
ListMinimalPerf.default 545 526 1.04:1
ListWith60ListItems.default 676 647 1.04:1
SegmentMinimalPerf.default 396 382 1.04:1
VideoMinimalPerf.default 742 712 1.04:1
DialogMinimalPerf.default 846 821 1.03:1
ImageMinimalPerf.default 442 431 1.03:1
PortalMinimalPerf.default 164 159 1.03:1
RadioGroupMinimalPerf.default 480 468 1.03:1
SplitButtonMinimalPerf.default 3988 3876 1.03:1
TableMinimalPerf.default 466 452 1.03:1
Checkbox.Fluent 654 632 1.03:1
Image.Fluent 444 429 1.03:1
Text.Fluent 389 378 1.03:1
AlertMinimalPerf.default 329 321 1.02:1
ButtonSlotsPerf.default 622 609 1.02:1
CardMinimalPerf.default 628 614 1.02:1
ChatMinimalPerf.default 672 659 1.02:1
LabelMinimalPerf.default 469 459 1.02:1
MenuMinimalPerf.default 942 920 1.02:1
MenuButtonMinimalPerf.default 1674 1640 1.02:1
ReactionMinimalPerf.default 451 440 1.02:1
SkeletonMinimalPerf.default 415 408 1.02:1
DropdownManyItemsPerf.default 785 775 1.01:1
EmbedMinimalPerf.default 4235 4178 1.01:1
HeaderSlotsPerf.default 857 850 1.01:1
ItemLayoutMinimalPerf.default 1323 1305 1.01:1
ProviderMinimalPerf.default 945 938 1.01:1
IconMinimalPerf.default 727 720 1.01:1
TableManyItemsPerf.default 2259 2236 1.01:1
CustomToolbarPrototype.default 3748 3696 1.01:1
TooltipMinimalPerf.default 831 826 1.01:1
Button.Fluent 622 616 1.01:1
Dropdown.Fluent 2957 2915 1.01:1
Icon.Fluent 716 709 1.01:1
ButtonOverridesMissPerf.default 1737 1735 1:1
ButtonUseCssPerf.default 874 876 1:1
CheckboxMinimalPerf.default 2877 2882 1:1
DatepickerMinimalPerf.default 47753 47734 1:1
DividerMinimalPerf.default 425 425 1:1
DropdownMinimalPerf.default 2953 2954 1:1
InputMinimalPerf.default 1347 1341 1:1
PopupMinimalPerf.default 718 718 1:1
TreeMinimalPerf.default 861 864 1:1
Avatar.Fluent 366 365 1:1
Dialog.Fluent 825 823 1:1
Slider.Fluent 1596 1590 1:1
AccordionMinimalPerf.default 169 170 0.99:1
LoaderMinimalPerf.default 755 762 0.99:1
SliderMinimalPerf.default 1593 1606 0.99:1
TreeWith60ListItems.default 199 201 0.99:1
AvatarMinimalPerf.default 213 218 0.98:1
FlexMinimalPerf.default 327 335 0.98:1
ProviderMergeThemesPerf.default 1557 1583 0.98:1
Tooltip.Fluent 580 590 0.98:1
AttachmentSlotsPerf.default 1238 1279 0.97:1
BoxMinimalPerf.default 397 420 0.95:1
StatusMinimalPerf.default 785 829 0.95:1
GridMinimalPerf.default 383 431 0.89:1

@size-auditor
Copy link

size-auditor bot commented Jan 5, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: 77c4f820c52723e8a8b5d179e1d39871b03dba44 (build)

@SethDonohue SethDonohue force-pushed the users/v-sedono/fix-slider-disabled-cursor branch 4 times, most recently from 2983e28 to 1d89a58 Compare January 5, 2021 21:46
@SethDonohue SethDonohue force-pushed the users/v-sedono/fix-slider-disabled-cursor branch from 1d89a58 to 2264035 Compare January 11, 2021 17:54
@SethDonohue SethDonohue force-pushed the users/v-sedono/fix-slider-disabled-cursor branch from 2264035 to 84ff2a9 Compare January 11, 2021 21:12
@layershifter
Copy link
Member

@chrisdholt can you please check this one?

@chrisdholt chrisdholt merged commit 8883c0c into microsoft:master Jan 14, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot msft-fluent-ui-bot mentioned this pull request Jan 15, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chrisdholt chrisdholt chrisdholt approved these changes

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Slider (web components) shows cursor pointer when disabled
5 participants
@SethDonohue @fabricteam @layershifter @msft-fluent-ui-bot @chrisdholt