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

ToggleButton: Re-introducing ToggleButton using the latest version of makeStyles #17566

Merged
merged 8 commits into from
Mar 26, 2021

Conversation

khmakoto
Copy link
Member

@khmakoto khmakoto commented Mar 25, 2021

Pull request checklist

Description of changes

This PR follows #17534.

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

PRs re-introducing MenuButton and SplitButton.

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

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 25, 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 02c99b6:

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

@size-auditor
Copy link

size-auditor bot commented Mar 25, 2021

Asset size changes

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

Baseline commit: 0913259cdea5a3d692720299516aec613b7c072a (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 25, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 968 967 5000
BaseButton mount 902 966 5000
Breadcrumb mount 42748 41629 5000
ButtonNext mount 522 502 5000
Checkbox mount 1610 1606 5000
CheckboxBase mount 1322 1338 5000
ChoiceGroup mount 4884 4797 5000
ComboBox mount 947 1000 1000
CommandBar mount 9909 9932 1000
ContextualMenu mount 6108 6051 1000
DefaultButton mount 1229 1175 5000
DetailsRow mount 3667 3676 5000
DetailsRowFast mount 3733 3685 5000
DetailsRowNoStyles mount 3432 3415 5000
Dialog mount 1465 1465 1000
DocumentCardTitle mount 1785 1760 1000
Dropdown mount 3337 3353 5000
FocusTrapZone mount 1828 1790 5000
FocusZone mount 1747 1769 5000
IconButton mount 1803 1785 5000
Label mount 328 328 5000
Layer mount 1836 1788 5000
Link mount 467 470 5000
MakeStyles mount 1635 1607 50000
MenuButton mount 1485 1500 5000
MessageBar mount 2016 1988 5000
Nav mount 3310 3337 1000
OverflowSet mount 1025 1036 5000
Panel mount 1449 1416 1000
Persona mount 844 817 1000
Pivot mount 1418 1405 1000
PrimaryButton mount 1328 1312 5000
Rating mount 7909 7832 5000
SearchBox mount 1369 1328 5000
Shimmer mount 2717 2584 5000
Slider mount 1951 1968 5000
SpinButton mount 5012 5060 5000
Spinner mount 416 411 5000
SplitButton mount 3144 3224 5000
Stack mount 491 508 5000
StackWithIntrinsicChildren mount 1586 1571 5000
StackWithTextChildren mount 4668 4740 5000
SwatchColorPicker mount 10323 10452 5000
Tabs mount 1441 1513 1000
TagPicker mount 2933 2907 5000
TeachingBubble mount 11612 11652 5000
Text mount 431 433 5000
TextField mount 1393 1401 5000
ThemeProvider mount 1150 1168 5000
ThemeProvider virtual-rerender 568 586 5000
ThemeProviderNext mount 15090 14859 5000
Toggle mount 832 812 5000
buttonNative mount 119 119 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.19 0.49 0.39:1 2000 370
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 616
🔧 Checkbox.Fluent 0.65 0.36 1.81:1 1000 650
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 832
🔧 Dropdown.Fluent 3.14 0.42 7.48:1 1000 3138
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 694
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 443
🔧 Slider.Fluent 1.61 0.5 3.22:1 1000 1610
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 400
🦄 Tooltip.Fluent 0.14 0.89 0.16:1 5000 725

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 233 211 1.1:1
RefMinimalPerf.default 257 237 1.08:1
AnimationMinimalPerf.default 445 419 1.06:1
ChatWithPopoverPerf.default 421 397 1.06:1
GridMinimalPerf.default 397 374 1.06:1
AttachmentMinimalPerf.default 194 185 1.05:1
ListMinimalPerf.default 567 538 1.05:1
MenuButtonMinimalPerf.default 1710 1632 1.05:1
SegmentMinimalPerf.default 392 374 1.05:1
VideoMinimalPerf.default 696 661 1.05:1
DividerMinimalPerf.default 423 406 1.04:1
ImageMinimalPerf.default 450 432 1.04:1
ListCommonPerf.default 720 694 1.04:1
PortalMinimalPerf.default 169 163 1.04:1
IconMinimalPerf.default 758 727 1.04:1
TreeMinimalPerf.default 876 842 1.04:1
ButtonSlotsPerf.default 623 606 1.03:1
ChatDuplicateMessagesPerf.default 312 303 1.03:1
ListWith60ListItems.default 685 662 1.03:1
TextAreaMinimalPerf.default 567 548 1.03:1
Text.Fluent 400 389 1.03:1
AccordionMinimalPerf.default 161 158 1.02:1
CarouselMinimalPerf.default 513 501 1.02:1
FormMinimalPerf.default 475 464 1.02:1
HeaderSlotsPerf.default 882 864 1.02:1
LabelMinimalPerf.default 477 468 1.02:1
LayoutMinimalPerf.default 444 437 1.02:1
ListNestedPerf.default 634 623 1.02:1
RadioGroupMinimalPerf.default 496 484 1.02:1
StatusMinimalPerf.default 802 785 1.02:1
TableManyItemsPerf.default 2211 2158 1.02:1
ToolbarMinimalPerf.default 1052 1030 1.02:1
TreeWith60ListItems.default 190 186 1.02:1
Tooltip.Fluent 725 710 1.02:1
AttachmentSlotsPerf.default 1272 1255 1.01:1
BoxMinimalPerf.default 400 397 1.01:1
ButtonOverridesMissPerf.default 1784 1768 1.01:1
DatepickerMinimalPerf.default 46070 45732 1.01:1
DropdownMinimalPerf.default 3130 3112 1.01:1
ProviderMinimalPerf.default 1021 1006 1.01:1
ReactionMinimalPerf.default 453 450 1.01:1
SkeletonMinimalPerf.default 409 404 1.01:1
SplitButtonMinimalPerf.default 3964 3941 1.01:1
TableMinimalPerf.default 456 453 1.01:1
CustomToolbarPrototype.default 3835 3788 1.01:1
Avatar.Fluent 370 365 1.01:1
Dropdown.Fluent 3138 3104 1.01:1
ButtonUseCssPerf.default 871 867 1:1
CheckboxMinimalPerf.default 2886 2900 1:1
DialogMinimalPerf.default 833 832 1:1
FlexMinimalPerf.default 324 325 1:1
ItemLayoutMinimalPerf.default 1325 1325 1:1
LoaderMinimalPerf.default 746 748 1:1
RosterPerf.default 1292 1292 1:1
TextMinimalPerf.default 406 407 1:1
TooltipMinimalPerf.default 997 1001 1:1
Dialog.Fluent 832 832 1:1
Image.Fluent 443 443 1:1
CardMinimalPerf.default 620 627 0.99:1
EmbedMinimalPerf.default 4349 4378 0.99:1
HeaderMinimalPerf.default 417 420 0.99:1
MenuMinimalPerf.default 931 937 0.99:1
PopupMinimalPerf.default 721 729 0.99:1
Checkbox.Fluent 650 657 0.99:1
AlertMinimalPerf.default 315 322 0.98:1
ButtonMinimalPerf.default 196 200 0.98:1
ChatMinimalPerf.default 679 694 0.98:1
InputMinimalPerf.default 1332 1353 0.98:1
ProviderMergeThemesPerf.default 1576 1615 0.98:1
SliderMinimalPerf.default 1586 1615 0.98:1
Button.Fluent 616 630 0.98:1
Slider.Fluent 1610 1643 0.98:1
ButtonUseCssNestingPerf.default 1111 1143 0.97:1
DropdownManyItemsPerf.default 806 844 0.95:1
Icon.Fluent 694 744 0.93:1

@ecraig12345
Copy link
Member

Let me know when this is ready and I'll approve for the package.json changes (not really the right person to look at the rest)

@khmakoto khmakoto enabled auto-merge (squash) March 25, 2021 19:15
@@ -122,17 +129,19 @@ export const makeButtonTokens = (theme: Theme): ButtonVariantTokens => ({
background: theme.alias.color.brand.brandBackgroundHover,
borderColor: 'transparent',
color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,
Copy link
Member

Choose a reason for hiding this comment

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

This in particular seems weird - background is using brand and foreground is using something which doesn't relate to brand. Shouldn't foregrounds and backgrounds use the same color group?

Copy link
Member Author

Choose a reason for hiding this comment

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

@dzearing and I spoke offline about this and it does seem like we are missing some logic in here to add the brand foreground colors. There should also probably be a way to catch that we're not using foreground and background colors from the same alias group on any one variant that we also need to follow up with.

@khmakoto khmakoto merged commit bf3f1e3 into microsoft:master Mar 26, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@khmakoto khmakoto deleted the toggleButton branch April 2, 2021 02:07
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
… makeStyles (microsoft#17566)

* ToggleButton: Re-introducing ToggleButton using the latest version of makeStyles.

* Change files

* Adding checked VR test.

* Renaming draftState to state.

* Updating API.

* Adding primary checked vr tests.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants