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): add switch label margin and cursor pointer #16351

Merged
merged 3 commits into from
Jan 4, 2021
Merged

fix (web components): add switch label margin and cursor pointer #16351

merged 3 commits into from
Jan 4, 2021

Conversation

SethDonohue
Copy link
Contributor

@SethDonohue SethDonohue commented Jan 4, 2021 •
edited
Loading

Pull request checklist

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

Description of changes

Add Switch label margin and cursor pointer

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 4, 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 12a0e15:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 4, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 831 835 5000
BaseButtonCompat mount 895 928 5000
Breadcrumb mount 44066 44384 5000
Checkbox mount 1526 1527 5000
CheckboxBase mount 1252 1236 5000
ChoiceGroup mount 4774 4737 5000
ComboBox mount 960 970 1000
CommandBar mount 10226 10242 1000
ContextualMenu mount 6156 6189 1000
DefaultButtonCompat mount 1113 1144 5000
DetailsRow mount 3707 3678 5000
DetailsRowFast mount 3753 3718 5000
DetailsRowNoStyles mount 3496 3460 5000
Dialog mount 1464 1444 1000
DocumentCardTitle mount 1842 1829 1000
Dropdown mount 3299 3362 5000
FocusTrapZone mount 1815 1844 5000
FocusZone mount 1840 1872 5000
IconButtonCompat mount 1731 1761 5000
Label mount 335 344 5000
Layer mount 1797 1772 5000
Link mount 462 468 5000
MakeStyles mount 1999 1996 50000
MenuButtonCompat mount 1469 1470 5000
MessageBar mount 1991 2031 5000
Nav mount 3318 3279 1000
OverflowSet mount 1058 1023 5000
Panel mount 1457 1433 1000
Persona mount 852 866 1000
Pivot mount 1387 1427 1000
PrimaryButtonCompat mount 1290 1284 5000
Rating mount 7609 7650 5000
SearchBox mount 1336 1298 5000
Shimmer mount 2563 2546 5000
Slider mount 1911 1909 5000
SpinButton mount 5056 5370 5000
Spinner mount 424 433 5000
SplitButtonCompat mount 3124 3188 5000
Stack mount 514 496 5000
StackWithIntrinsicChildren mount 1552 1563 5000
StackWithTextChildren mount 4556 4580 5000
SwatchColorPicker mount 10307 10365 5000
Tabs mount 1433 1431 1000
TagPicker mount 2839 2861 5000
TeachingBubble mount 11709 11673 5000
Text mount 429 423 5000
TextField mount 1390 1364 5000
ThemeProvider mount 2181 2194 5000
ThemeProvider virtual-rerender 664 653 5000
Toggle mount 769 826 5000
button mount 675 677 5000
buttonNative mount 110 116 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.51 0.88:1 2000 896
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 579
🔧 Checkbox.Fluent 0.67 0.35 1.91:1 1000 670
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 820
🔧 Dropdown.Fluent 3.07 0.4 7.67:1 1000 3067
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 740
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 425
🔧 Slider.Fluent 1.66 0.44 3.77:1 1000 1659
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 367
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 598

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
Image.Fluent 425 394 1.08:1
AccordionMinimalPerf.default 173 162 1.07:1
AnimationMinimalPerf.default 461 430 1.07:1
FormMinimalPerf.default 461 434 1.06:1
ChatMinimalPerf.default 668 636 1.05:1
LabelMinimalPerf.default 454 431 1.05:1
ReactionMinimalPerf.default 436 414 1.05:1
ChatWithPopoverPerf.default 485 468 1.04:1
RadioGroupMinimalPerf.default 471 453 1.04:1
IconMinimalPerf.default 720 690 1.04:1
TooltipMinimalPerf.default 870 837 1.04:1
InputMinimalPerf.default 1361 1322 1.03:1
ListCommonPerf.default 694 674 1.03:1
SkeletonMinimalPerf.default 397 386 1.03:1
TextMinimalPerf.default 378 367 1.03:1
TextAreaMinimalPerf.default 512 495 1.03:1
TreeMinimalPerf.default 816 795 1.03:1
Checkbox.Fluent 670 648 1.03:1
Slider.Fluent 1659 1614 1.03:1
AttachmentSlotsPerf.default 1154 1134 1.02:1
ButtonOverridesMissPerf.default 1751 1725 1.02:1
ChatDuplicateMessagesPerf.default 439 432 1.02:1
ItemLayoutMinimalPerf.default 1346 1315 1.02:1
LayoutMinimalPerf.default 430 423 1.02:1
PopupMinimalPerf.default 746 734 1.02:1
PortalMinimalPerf.default 176 173 1.02:1
TableManyItemsPerf.default 2149 2114 1.02:1
ToolbarMinimalPerf.default 985 962 1.02:1
Dialog.Fluent 820 807 1.02:1
Tooltip.Fluent 598 584 1.02:1
ButtonMinimalPerf.default 187 185 1.01:1
ButtonSlotsPerf.default 609 604 1.01:1
ButtonUseCssPerf.default 857 850 1.01:1
CarouselMinimalPerf.default 473 468 1.01:1
CheckboxMinimalPerf.default 2915 2895 1.01:1
DialogMinimalPerf.default 831 825 1.01:1
FlexMinimalPerf.default 330 327 1.01:1
GridMinimalPerf.default 373 370 1.01:1
ImageMinimalPerf.default 395 391 1.01:1
ProviderMinimalPerf.default 1082 1074 1.01:1
RefMinimalPerf.default 255 252 1.01:1
SegmentMinimalPerf.default 394 389 1.01:1
SliderMinimalPerf.default 1633 1612 1.01:1
StatusMinimalPerf.default 762 751 1.01:1
CustomToolbarPrototype.default 4039 3998 1.01:1
Icon.Fluent 740 734 1.01:1
AlertMinimalPerf.default 317 316 1:1
ButtonUseCssNestingPerf.default 1110 1108 1:1
CardMinimalPerf.default 578 576 1:1
DatepickerMinimalPerf.default 46481 46314 1:1
DividerMinimalPerf.default 392 391 1:1
HeaderSlotsPerf.default 814 814 1:1
ListMinimalPerf.default 504 505 1:1
ListWith60ListItems.default 959 959 1:1
LoaderMinimalPerf.default 757 755 1:1
ProviderMergeThemesPerf.default 2162 2164 1:1
SplitButtonMinimalPerf.default 3840 3822 1:1
TableMinimalPerf.default 439 437 1:1
VideoMinimalPerf.default 665 665 1:1
Dropdown.Fluent 3067 3055 1:1
AvatarMinimalPerf.default 489 494 0.99:1
DropdownManyItemsPerf.default 748 757 0.99:1
EmbedMinimalPerf.default 4262 4292 0.99:1
HeaderMinimalPerf.default 384 386 0.99:1
MenuButtonMinimalPerf.default 1606 1617 0.99:1
Avatar.Fluent 896 909 0.99:1
AttachmentMinimalPerf.default 168 171 0.98:1
DropdownMinimalPerf.default 3031 3089 0.98:1
ListNestedPerf.default 582 595 0.98:1
MenuMinimalPerf.default 902 925 0.98:1
TreeWith60ListItems.default 212 217 0.98:1
BoxMinimalPerf.default 370 383 0.97:1
Button.Fluent 579 599 0.97:1
Text.Fluent 367 384 0.96:1

@SethDonohue SethDonohue changed the title fix (web components): add switch label padding and cursor pointer fix (web components): add switch label margin and cursor pointer Jan 4, 2021
@size-auditor
Copy link

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

Asset size changes

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

Baseline commit: 57787b1888216856fc7b5a479ccb380012b1bfb8 (build)

@chrisdholt chrisdholt assigned chrisdholt and unassigned layershifter Jan 4, 2021
@SethDonohue
Update change/@fluentui-web-components-2021-01-04-10-57-05-users-v-se…
12a0e15 
…dono-fix-switch-label-padding-cursor-pointer.json
@chrisdholt chrisdholt merged commit 16797f4 into microsoft:master Jan 4, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@SethDonohue SethDonohue deleted the users/v-sedono/fix-switch-label-padding-cursor-pointer branch January 5, 2021 18:00
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.
5 participants
@SethDonohue @fabricteam @msft-fluent-ui-bot @chrisdholt @layershifter