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 method for supporting icon only button variations #16112

Merged
merged 2 commits into from
Dec 2, 2020
Merged

Add method for supporting icon only button variations #16112

merged 2 commits into from
Dec 2, 2020

Conversation

chrisdholt
Copy link
Member

Pull request checklist

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

Description of changes

This PR introduces a change that applies an icon-only class to the button within the shadow DOM when only an SVG is passed to the default slot.

Focus areas to test

(optional)

@chrisdholt chrisdholt self-assigned this Dec 2, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 2, 2020 •
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 2edfe83:

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

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Dec 2, 2020 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 865 861 5000
BaseButtonCompat mount 992 917 5000
Breadcrumb mount 41739 41985 5000
Checkbox mount 1590 1552 5000
CheckboxBase mount 1364 1351 5000
ChoiceGroup mount 4955 5027 5000
ComboBox mount 963 1051 1000
CommandBar mount 10091 10169 1000
ContextualMenu mount 6133 6117 1000
DefaultButtonCompat mount 1184 1176 5000
DetailsRow mount 3810 3733 5000
DetailsRowFast mount 3795 3836 5000
DetailsRowNoStyles mount 3584 3677 5000
Dialog mount 1539 1514 1000
DocumentCardTitle mount 1810 1780 1000
Dropdown mount 3471 3493 5000
FocusTrapZone mount 1834 1828 5000
FocusZone mount 1825 1883 5000
IconButtonCompat mount 1846 1876 5000
Label mount 348 342 5000
Layer mount 1869 1849 5000
Link mount 482 486 5000
MenuButtonCompat mount 1552 1560 5000
MessageBar mount 2067 2091 5000
Nav mount 3314 3362 1000
OverflowSet mount 1096 1063 5000
Panel mount 1480 1467 1000
Persona mount 879 888 1000
Pivot mount 1449 1458 1000
PrimaryButtonCompat mount 1349 1334 5000
Rating mount 8001 7956 5000
SearchBox mount 1397 1393 5000
Shimmer mount 2739 2695 5000
Slider mount 2024 2056 5000
SpinButton mount 5095 5132 5000
Spinner mount 431 399 5000
SplitButtonCompat mount 3271 3326 5000
Stack mount 522 518 5000
StackWithIntrinsicChildren mount 1625 1567 5000
StackWithTextChildren mount 4791 4826 5000
SwatchColorPicker mount 10505 10660 5000
Tabs mount 1440 1417 1000
TagPicker mount 2869 3120 5000
TeachingBubble mount 11739 11790 5000
Text mount 434 459 5000
TextField mount 1464 1475 5000
ThemeProvider mount 2149 2179 5000
ThemeProvider virtual-rerender 649 653 5000
Toggle mount 836 836 5000
button mount 706 684 5000
buttonNative mount 117 109 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.48 0.53 0.91:1 2000 958
🦄 Button.Fluent 0.13 0.26 0.5:1 5000 640
🔧 Checkbox.Fluent 0.66 0.37 1.78:1 1000 657
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 862
🔧 Dropdown.Fluent 2.99 0.44 6.8:1 1000 2986
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 821
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 429
🔧 Slider.Fluent 1.62 0.46 3.52:1 1000 1623
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 398
🦄 Tooltip.Fluent 0.12 0.91 0.13:1 5000 588

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 190 170 1.12:1
TreeWith60ListItems.default 238 215 1.11:1
ListMinimalPerf.default 575 524 1.1:1
ButtonSlotsPerf.default 677 630 1.07:1
CarouselMinimalPerf.default 506 473 1.07:1
GridMinimalPerf.default 404 378 1.07:1
TableMinimalPerf.default 477 447 1.07:1
TextMinimalPerf.default 418 390 1.07:1
CardMinimalPerf.default 639 604 1.06:1
PortalMinimalPerf.default 171 162 1.06:1
TextAreaMinimalPerf.default 591 556 1.06:1
Icon.Fluent 821 774 1.06:1
AttachmentSlotsPerf.default 1225 1168 1.05:1
ButtonMinimalPerf.default 203 193 1.05:1
ChatDuplicateMessagesPerf.default 447 425 1.05:1
ToolbarMinimalPerf.default 1062 1014 1.05:1
TreeMinimalPerf.default 899 853 1.05:1
ChatWithPopoverPerf.default 514 496 1.04:1
InputMinimalPerf.default 1383 1332 1.04:1
ListCommonPerf.default 727 702 1.04:1
MenuMinimalPerf.default 976 940 1.04:1
SegmentMinimalPerf.default 412 395 1.04:1
VideoMinimalPerf.default 720 694 1.04:1
Dialog.Fluent 862 828 1.04:1
AnimationMinimalPerf.default 453 438 1.03:1
ButtonOverridesMissPerf.default 1799 1754 1.03:1
ButtonUseCssNestingPerf.default 1147 1109 1.03:1
ChatMinimalPerf.default 691 672 1.03:1
HeaderSlotsPerf.default 883 857 1.03:1
ItemLayoutMinimalPerf.default 1433 1393 1.03:1
LabelMinimalPerf.default 472 458 1.03:1
LayoutMinimalPerf.default 465 452 1.03:1
ListNestedPerf.default 642 623 1.03:1
SplitButtonMinimalPerf.default 4044 3914 1.03:1
BoxMinimalPerf.default 412 405 1.02:1
ButtonUseCssPerf.default 887 866 1.02:1
DialogMinimalPerf.default 855 837 1.02:1
LoaderMinimalPerf.default 796 781 1.02:1
PopupMinimalPerf.default 753 735 1.02:1
SkeletonMinimalPerf.default 478 467 1.02:1
Tooltip.Fluent 588 577 1.02:1
AvatarMinimalPerf.default 521 515 1.01:1
DropdownMinimalPerf.default 3017 2988 1.01:1
EmbedMinimalPerf.default 4336 4276 1.01:1
MenuButtonMinimalPerf.default 1704 1688 1.01:1
ProviderMinimalPerf.default 1034 1026 1.01:1
RadioGroupMinimalPerf.default 517 511 1.01:1
RefMinimalPerf.default 250 248 1.01:1
StatusMinimalPerf.default 804 798 1.01:1
CustomToolbarPrototype.default 3930 3907 1.01:1
TooltipMinimalPerf.default 854 847 1.01:1
Avatar.Fluent 958 947 1.01:1
Button.Fluent 640 634 1.01:1
Image.Fluent 429 423 1.01:1
Slider.Fluent 1623 1605 1.01:1
CheckboxMinimalPerf.default 2965 2969 1:1
DatepickerMinimalPerf.default 48458 48530 1:1
DividerMinimalPerf.default 424 424 1:1
HeaderMinimalPerf.default 435 433 1:1
ListWith60ListItems.default 977 979 1:1
ProviderMergeThemesPerf.default 2040 2034 1:1
SliderMinimalPerf.default 1613 1605 1:1
Checkbox.Fluent 657 658 1:1
TableManyItemsPerf.default 2364 2394 0.99:1
DropdownManyItemsPerf.default 806 824 0.98:1
ImageMinimalPerf.default 418 428 0.98:1
AlertMinimalPerf.default 335 345 0.97:1
FormMinimalPerf.default 484 499 0.97:1
ReactionMinimalPerf.default 458 472 0.97:1
IconMinimalPerf.default 725 751 0.97:1
Dropdown.Fluent 2986 3070 0.97:1
FlexMinimalPerf.default 319 333 0.96:1
Text.Fluent 398 417 0.95:1
AccordionMinimalPerf.default 170 183 0.93:1

@size-auditor
Copy link

size-auditor bot commented Dec 2, 2020 •
edited
Loading

Asset size changes

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

Baseline commit: 5e967ca6a52b0510f3e1c7e76fc0943e469d4f9b (build)

@chrisdholt chrisdholt force-pushed the users/chhol/add-default-slotted-nodes-behavior-for-button branch from d54d5bc to 91ffeca Compare December 2, 2020 03:12
@chrisdholt chrisdholt force-pushed the users/chhol/add-default-slotted-nodes-behavior-for-button branch from 91ffeca to 1f6eaf8 Compare December 2, 2020 04:56
@chrisdholt chrisdholt force-pushed the users/chhol/add-default-slotted-nodes-behavior-for-button branch from 1f6eaf8 to a6444d7 Compare December 2, 2020 05:21
@chrisdholt chrisdholt force-pushed the users/chhol/add-default-slotted-nodes-behavior-for-button branch from a6444d7 to 2edfe83 Compare December 2, 2020 06:29
@chrisdholt chrisdholt merged commit 158a648 into microsoft:master Dec 2, 2020
@chrisdholt chrisdholt deleted the users/chhol/add-default-slotted-nodes-behavior-for-button branch December 2, 2020 07:31
@msft-github-bot
Copy link
Contributor

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

Handy links:

assuncaocharles pushed a commit to assuncaocharles/fluentui that referenced this pull request Dec 2, 2020
@chrisdholt @assuncaocharles
Add method for supporting icon only button variations (microsoft#16112)
484a241 
* add a class to button in shadow DOM when default slotted content is only an svg icon

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

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@chrisdholt @msft-github-bot