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.

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

CompoundButton: Re-introducing CompoundButton using latest version of makeStyles #17534

Merged
merged 4 commits into from
Mar 24, 2021

Conversation

khmakoto
Copy link
Member

@khmakoto khmakoto commented Mar 23, 2021

Pull request checklist

Description of changes

This PR re-introduces the CompoundButton component with the latest makeStyles changes under @fluentui/react-button after having been removed for the initial release of @fluentui/react-components.

PRs reintroducing MenuButton, SplitButton and ToggleButton will follow.

PRs reintroducing the block, subtle and transparent props will follow.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 23, 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 7065a11:

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

@size-auditor
Copy link

size-auditor bot commented Mar 23, 2021

Asset size changes

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

Baseline commit: a8767b680206226010a1a3e6cf9b426ed66612b1 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 23, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1023 1024 5000
BaseButton mount 985 1035 5000
Breadcrumb mount 45088 45325 5000
ButtonNext mount 1389 1427 5000
Checkbox mount 1707 1714 5000
CheckboxBase mount 1432 1443 5000
ChoiceGroup mount 5215 5108 5000
ComboBox mount 1021 1024 1000
CommandBar mount 10443 10778 1000
ContextualMenu mount 6637 6599 1000
DefaultButton mount 1238 1238 5000
DetailsRow mount 4091 4021 5000
DetailsRowFast mount 4086 4104 5000
DetailsRowNoStyles mount 3824 3816 5000
Dialog mount 1607 1598 1000
DocumentCardTitle mount 1940 1949 1000
Dropdown mount 3700 3762 5000
FocusTrapZone mount 1932 2017 5000
FocusZone mount 2008 2025 5000
IconButton mount 1983 1957 5000
Label mount 350 358 5000
Layer mount 1931 1914 5000
Link mount 531 527 5000
MakeStyles mount 2056 2065 50000
MenuButton mount 1605 1691 5000
MessageBar mount 2193 2152 5000
Nav mount 3547 3623 1000
OverflowSet mount 1109 1124 5000
Panel mount 1530 1511 1000
Persona mount 876 906 1000
Pivot mount 1504 1522 1000
PrimaryButton mount 1404 1429 5000
Rating mount 8617 8723 5000
SearchBox mount 1466 1486 5000
Shimmer mount 2913 2795 5000
Slider mount 2224 2181 5000
SpinButton mount 5398 5398 5000
Spinner mount 446 428 5000
SplitButton mount 3501 3536 5000
Stack mount 558 539 5000
StackWithIntrinsicChildren mount 1751 1753 5000
StackWithTextChildren mount 5142 5187 5000
SwatchColorPicker mount 11051 11232 5000
Tabs mount 1534 1535 1000
TagPicker mount 3084 3133 5000
TeachingBubble mount 12536 12415 5000
Text mount 472 466 5000
TextField mount 1523 1544 5000
ThemeProvider mount 1258 1245 5000
ThemeProvider virtual-rerender 623 616 5000
ThemeProviderNext mount 15817 16036 5000
Toggle mount 902 869 5000
buttonNative mount 122 118 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.2 0.51 0.39:1 2000 406
🦄 Button.Fluent 0.14 0.22 0.64:1 5000 675
🔧 Checkbox.Fluent 0.69 0.37 1.86:1 1000 690
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 870
🔧 Dropdown.Fluent 3.31 0.44 7.52:1 1000 3306
🔧 Icon.Fluent 0.15 0.07 2.14:1 5000 770
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 445
🔧 Slider.Fluent 1.71 0.48 3.56:1 1000 1711
🔧 Text.Fluent 0.08 0.04 2:1 5000 418
🦄 Tooltip.Fluent 0.16 0.94 0.17:1 5000 787

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 233 201 1.16:1
Avatar.Fluent 406 369 1.1:1
RefMinimalPerf.default 282 262 1.08:1
DividerMinimalPerf.default 467 435 1.07:1
AvatarMinimalPerf.default 236 223 1.06:1
LayoutMinimalPerf.default 499 470 1.06:1
BoxMinimalPerf.default 448 426 1.05:1
ButtonMinimalPerf.default 217 207 1.05:1
HeaderMinimalPerf.default 460 440 1.05:1
ListNestedPerf.default 699 668 1.05:1
PortalMinimalPerf.default 195 186 1.05:1
TreeMinimalPerf.default 920 878 1.05:1
VideoMinimalPerf.default 734 700 1.05:1
AccordionMinimalPerf.default 199 191 1.04:1
CardMinimalPerf.default 679 650 1.04:1
DialogMinimalPerf.default 910 878 1.04:1
SkeletonMinimalPerf.default 449 433 1.04:1
StatusMinimalPerf.default 886 849 1.04:1
ChatDuplicateMessagesPerf.default 331 321 1.03:1
ListCommonPerf.default 795 772 1.03:1
ProviderMinimalPerf.default 1108 1071 1.03:1
SplitButtonMinimalPerf.default 4277 4167 1.03:1
AlertMinimalPerf.default 353 346 1.02:1
AttachmentSlotsPerf.default 1383 1353 1.02:1
CheckboxMinimalPerf.default 3142 3087 1.02:1
DropdownManyItemsPerf.default 852 839 1.02:1
FlexMinimalPerf.default 360 352 1.02:1
ListWith60ListItems.default 720 706 1.02:1
ProviderMergeThemesPerf.default 1744 1703 1.02:1
TextAreaMinimalPerf.default 600 587 1.02:1
CustomToolbarPrototype.default 4152 4081 1.02:1
Checkbox.Fluent 690 674 1.02:1
DatepickerMinimalPerf.default 51849 51344 1.01:1
GridMinimalPerf.default 404 401 1.01:1
HeaderSlotsPerf.default 929 924 1.01:1
ItemLayoutMinimalPerf.default 1403 1392 1.01:1
ListMinimalPerf.default 599 593 1.01:1
IconMinimalPerf.default 789 780 1.01:1
TableManyItemsPerf.default 2401 2369 1.01:1
TooltipMinimalPerf.default 1069 1059 1.01:1
Button.Fluent 675 669 1.01:1
Dropdown.Fluent 3306 3277 1.01:1
Image.Fluent 445 441 1.01:1
Text.Fluent 418 412 1.01:1
AttachmentMinimalPerf.default 203 202 1:1
ButtonUseCssPerf.default 945 944 1:1
ImageMinimalPerf.default 486 485 1:1
InputMinimalPerf.default 1445 1452 1:1
LabelMinimalPerf.default 490 488 1:1
MenuButtonMinimalPerf.default 1800 1803 1:1
RosterPerf.default 1314 1313 1:1
PopupMinimalPerf.default 786 785 1:1
ReactionMinimalPerf.default 484 485 1:1
SliderMinimalPerf.default 1738 1746 1:1
TableMinimalPerf.default 489 489 1:1
ToolbarMinimalPerf.default 1112 1115 1:1
Dialog.Fluent 870 873 1:1
Icon.Fluent 770 768 1:1
Slider.Fluent 1711 1709 1:1
Tooltip.Fluent 787 788 1:1
ButtonUseCssNestingPerf.default 1233 1244 0.99:1
EmbedMinimalPerf.default 4754 4811 0.99:1
FormMinimalPerf.default 510 514 0.99:1
RadioGroupMinimalPerf.default 527 534 0.99:1
TextMinimalPerf.default 411 416 0.99:1
AnimationMinimalPerf.default 451 462 0.98:1
ChatMinimalPerf.default 711 726 0.98:1
DropdownMinimalPerf.default 3331 3393 0.98:1
MenuMinimalPerf.default 1026 1042 0.98:1
SegmentMinimalPerf.default 420 429 0.98:1
ButtonOverridesMissPerf.default 1884 1936 0.97:1
ButtonSlotsPerf.default 645 672 0.96:1
CarouselMinimalPerf.default 548 570 0.96:1
LoaderMinimalPerf.default 794 835 0.95:1
ChatWithPopoverPerf.default 414 444 0.93:1

} = state;
state.className = undefined;
if (state.children) {
state.children.className = undefined;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is state.children? is this guaranteed to be a props object, or can it be jsx or a string?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is treated as a slot so it can be any of those.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In here it is guaranteed to be an object after going through useCompoundButton though.

selectors.size === 'large' && styles.secondaryContentLarge,
selectors.primary && styles.secondaryContentPrimary,
selectors.disabled && styles.secondaryContentDisabled,
state.secondaryContent.className,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm don't know the internals of what ax does, but I see some inconsistencies in the ordering of the input. In the root, I see that state.className (the user's input) comes as the first param. Same with icon. But with secondaryContent, the user's input comes last.

Is that intended? Does it matter, is there an ordering here to ensure user overrides are more important?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is intended, it should normally come in the end but it's coming here first because that's actually the result of the useButtonStyles call before that. If you take a closer look I actually get the classnames that are applied at the end at the beginning of the function.

Copy link
Member

@dzearing dzearing left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please investigate perf and vr tests.

@msft-fluent-ui-bot
Copy link
Collaborator

Hello @khmakoto!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-fluent-ui-bot) and give me an instruction to get started! Learn more here.

@msft-fluent-ui-bot msft-fluent-ui-bot merged commit 28d34d2 into microsoft:master Mar 24, 2021
@khmakoto khmakoto deleted the compoundButton branch March 24, 2021 17:29
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-button@v9.0.0-alpha.15 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
… makeStyles (microsoft#17534)

#### Pull request checklist

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

#### Description of changes

This PR re-introduces the `CompoundButton` component with the latest `makeStyles` changes under `@fluentui/react-button` after having been removed for the initial release of `@fluentui/react-components`.

PRs reintroducing `MenuButton`, `SplitButton` and `ToggleButton` will follow.

PRs reintroducing the `block`, `subtle` and `transparent` props will follow.
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
… makeStyles (microsoft#17534)

#### Pull request checklist

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

#### Description of changes

This PR re-introduces the `CompoundButton` component with the latest `makeStyles` changes under `@fluentui/react-button` after having been removed for the initial release of `@fluentui/react-components`.

PRs reintroducing `MenuButton`, `SplitButton` and `ToggleButton` will follow.

PRs reintroducing the `block`, `subtle` and `transparent` props will follow.
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.

4 participants