Skip to content

Button with make stylex#16172

Closed
khmakoto wants to merge 42 commits intomicrosoft:masterfrom
khmakoto:buttonWithMakeStylex
Closed

Button with make stylex#16172
khmakoto wants to merge 42 commits intomicrosoft:masterfrom
khmakoto:buttonWithMakeStylex

Conversation

@khmakoto
Copy link
Member

@khmakoto khmakoto commented Dec 8, 2020

Pull request checklist

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

Description of changes

This PR is a test of using the makeStyles prototype developed in #16082 to power the styling of the Button components under @fluentui/react-button.

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 8, 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 919a1b8:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Dec 8, 2020 •
edited
Loading

Perf Analysis

Scenario Render type Master Ticks PR Ticks Iterations Status
MakeStyles mount 1913 3301 50000 Possible regression
MenuButton mount 52 1560 5000 Possible regression
SplitButton mount 47 3199 5000 Possible regression
ThemeProvider mount 2143 8173 5000 Possible regression
button mount 703 1260 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 843 844 5000
BaseButtonCompat mount 925 927 5000
Breadcrumb mount 42170 41960 5000
Checkbox mount 1619 1617 5000
CheckboxBase mount 1301 1361 5000
ChoiceGroup mount 4884 4912 5000
ComboBox mount 975 987 1000
CommandBar mount 10005 10173 1000
ContextualMenu mount 6083 6030 1000
DefaultButtonCompat mount 1153 1155 5000
DetailsRow mount 3768 3789 5000
DetailsRowFast mount 3639 3722 5000
DetailsRowNoStyles mount 3540 3486 5000
Dialog mount 1477 1523 1000
DocumentCardTitle mount 1765 1765 1000
Dropdown mount 3393 3355 5000
FocusTrapZone mount 1774 1797 5000
FocusZone mount 1836 1820 5000
IconButtonCompat mount 1839 1806 5000
Label mount 343 335 5000
Layer mount 1832 1810 5000
Link mount 458 454 5000
MakeStyles mount 1913 3301 50000 Possible regression
MenuButton mount 52 1560 5000 Possible regression
MenuButtonCompat mount 1511 1496 5000
MessageBar mount 1949 1946 5000
Nav mount 3271 3211 1000
OverflowSet mount 1048 1047 5000
Panel mount 1442 1444 1000
Persona mount 883 866 1000
Pivot mount 1418 1463 1000
PrimaryButtonCompat mount 1294 1324 5000
Rating mount 7822 7920 5000
SearchBox mount 1377 1393 5000
Shimmer mount 2679 2678 5000
Slider mount 1951 1966 5000
SpinButton mount 5109 5212 5000
Spinner mount 428 423 5000
SplitButton mount 47 3199 5000 Possible regression
SplitButtonCompat mount 3211 3225 5000
Stack mount 512 510 5000
StackWithIntrinsicChildren mount 1627 1645 5000
StackWithTextChildren mount 4736 4819 5000
SwatchColorPicker mount 10584 10479 5000
Tabs mount 1442 1425 1000
TagPicker mount 2851 2930 5000
TeachingBubble mount 11774 11693 5000
Text mount 427 418 5000
TextField mount 1407 1426 5000
ThemeProvider mount 2143 8173 5000 Possible regression
ThemeProvider virtual-rerender 645 635 5000
Toggle mount 807 846 5000
button mount 703 1260 5000 Possible regression
buttonNative mount 103 110 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 365
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 643
🔧 Checkbox.Fluent 0.66 0.35 1.89:1 1000 658
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 865
🔧 Dropdown.Fluent 3.03 0.44 6.89:1 1000 3025
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 760
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 433
🔧 Slider.Fluent 1.67 0.48 3.48:1 1000 1668
🔧 Text.Fluent 0.09 0.03 3:1 5000 431
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 580

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 212 187 1.13:1
ButtonMinimalPerf.default 232 207 1.12:1
ChatWithPopoverPerf.default 492 446 1.1:1
Text.Fluent 431 398 1.08:1
ImageMinimalPerf.default 484 453 1.07:1
CarouselMinimalPerf.default 525 496 1.06:1
HeaderMinimalPerf.default 427 403 1.06:1
TextMinimalPerf.default 407 385 1.06:1
AccordionMinimalPerf.default 178 169 1.05:1
FlexMinimalPerf.default 345 330 1.05:1
DropdownManyItemsPerf.default 802 768 1.04:1
ListNestedPerf.default 638 613 1.04:1
TableMinimalPerf.default 477 458 1.04:1
AttachmentSlotsPerf.default 1331 1298 1.03:1
BoxMinimalPerf.default 433 419 1.03:1
ButtonOverridesMissPerf.default 1910 1860 1.03:1
ButtonSlotsPerf.default 646 626 1.03:1
CardMinimalPerf.default 676 654 1.03:1
ListWith60ListItems.default 686 668 1.03:1
MenuMinimalPerf.default 953 929 1.03:1
ToolbarMinimalPerf.default 1041 1015 1.03:1
Button.Fluent 643 625 1.03:1
Icon.Fluent 760 735 1.03:1
ChatMinimalPerf.default 703 688 1.02:1
DropdownMinimalPerf.default 3026 2969 1.02:1
EmbedMinimalPerf.default 4354 4288 1.02:1
LoaderMinimalPerf.default 760 748 1.02:1
PopupMinimalPerf.default 738 721 1.02:1
RadioGroupMinimalPerf.default 513 504 1.02:1
SliderMinimalPerf.default 1657 1625 1.02:1
TableManyItemsPerf.default 2266 2218 1.02:1
VideoMinimalPerf.default 708 694 1.02:1
Dialog.Fluent 865 845 1.02:1
AnimationMinimalPerf.default 454 448 1.01:1
ButtonUseCssPerf.default 878 870 1.01:1
ButtonUseCssNestingPerf.default 1168 1161 1.01:1
ChatDuplicateMessagesPerf.default 406 401 1.01:1
DividerMinimalPerf.default 425 419 1.01:1
HeaderSlotsPerf.default 876 871 1.01:1
InputMinimalPerf.default 1375 1365 1.01:1
ListMinimalPerf.default 537 533 1.01:1
ProviderMinimalPerf.default 1021 1013 1.01:1
StatusMinimalPerf.default 799 791 1.01:1
Checkbox.Fluent 658 649 1.01:1
AvatarMinimalPerf.default 229 228 1:1
GridMinimalPerf.default 404 402 1:1
ItemLayoutMinimalPerf.default 1353 1350 1:1
RefMinimalPerf.default 248 247 1:1
SkeletonMinimalPerf.default 422 421 1:1
SplitButtonMinimalPerf.default 4061 4059 1:1
CustomToolbarPrototype.default 3831 3827 1:1
TooltipMinimalPerf.default 865 864 1:1
TreeMinimalPerf.default 887 885 1:1
AlertMinimalPerf.default 334 339 0.99:1
CheckboxMinimalPerf.default 2892 2928 0.99:1
DatepickerMinimalPerf.default 49235 49527 0.99:1
FormMinimalPerf.default 492 497 0.99:1
LabelMinimalPerf.default 463 470 0.99:1
ReactionMinimalPerf.default 467 470 0.99:1
Dropdown.Fluent 3025 3065 0.99:1
Image.Fluent 433 438 0.99:1
Slider.Fluent 1668 1679 0.99:1
DialogMinimalPerf.default 847 866 0.98:1
ListCommonPerf.default 719 733 0.98:1
ProviderMergeThemesPerf.default 1555 1588 0.98:1
SegmentMinimalPerf.default 412 419 0.98:1
MenuButtonMinimalPerf.default 1671 1727 0.97:1
IconMinimalPerf.default 746 769 0.97:1
TextAreaMinimalPerf.default 540 555 0.97:1
Tooltip.Fluent 580 596 0.97:1
AttachmentMinimalPerf.default 185 193 0.96:1
LayoutMinimalPerf.default 473 493 0.96:1
PortalMinimalPerf.default 163 170 0.96:1
RosterPerf.default 1247 1311 0.95:1
Avatar.Fluent 365 390 0.94:1

@size-auditor
Copy link

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

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-Theme 48.798 kB 68.54 kB ExceedsTolerance     19.742 kB

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 7f97bbcf2e7650b8a92ecf386ef15421b3270536 (build)

layershifter and others added 18 commits December 8, 2020 10:45
@layershifter
backport latest changes of makeStyles
044d616
@layershifter
use static styles
defffb7
@layershifter
backport latest changes
bfb8224
@khmakoto
Cleaning up Button files.
a136e00
@khmakoto
Fixing merge conflict
a23edfe
@khmakoto
Integrating latest changes to allow for global selectors.
31cf41a
@khmakoto
Small changes so Button works with stylex again.
3a77d92
@khmakoto
Updating snapshots.
294002f
@khmakoto
Updating API.
51594f2
@khmakoto
Fixing build, test and lint errors.
e2a0b39
@khmakoto
Fixing token customizability issues discovered by screener errors.
64ad302
@khmakoto
Updating to meet new makeStyles declaration.
04f45f2
@khmakoto
Updating makeStyles to support variants.
cfdf8ac
@khmakoto
Addressing change of 'root' variant in makeStyles.
df1b50f
@khmakoto
Merge branch 'master' of https://github.com/microsoft/fluentui into b…
4251b66 
…uttonWithMakeStylex
@khmakoto
Merge branch 'master' of https://github.com/microsoft/fluentui into b…
9e598ab 
…uttonWithMakeStylex
@khmakoto
Adjusting to move of makeStyles into its own package.
bded628
@khmakoto
Merge branch 'master' of https://github.com/microsoft/fluentui into b…
373bfb1 
…uttonWithMakeStylex
@miroslavstastny miroslavstastny mentioned this pull request Jan 7, 2021
Closed
11 tasks
@microsoft microsoft deleted a comment from azure-pipelines bot Jan 13, 2021
@khmakoto khmakoto closed this Jan 13, 2021
@khmakoto khmakoto reopened this Jan 13, 2021
@khmakoto khmakoto closed this Mar 2, 2021
@khmakoto khmakoto deleted the buttonWithMakeStylex branch March 2, 2021 22:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@xugao xugao Awaiting requested review from xugao

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny

@layershifter layershifter Awaiting requested review from layershifter

Assignees

@ecraig12345 ecraig12345

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@khmakoto @fabricteam @ecraig12345 @layershifter