Skip to content

proto: use compat layer between makeStyles & Fela#20611

Closed
layershifter wants to merge 8 commits intomasterfrom
proto/fela-reuse
Closed

proto: use compat layer between makeStyles & Fela#20611
layershifter wants to merge 8 commits intomasterfrom
proto/fela-reuse

Conversation

@layershifter
Copy link
Copy Markdown
Member

Pull request checklist

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

Description of changes

(give an overview)

Focus areas to test

(optional)

@DustyTheBot
Copy link
Copy Markdown

DustyTheBot commented Nov 15, 2021

Warnings
⚠️ There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against 7f24406

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Nov 15, 2021

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
57.542 kB
18.215 kB
react-avatar
Avatar
54.097 kB
15.331 kB
react-badge
Badge
22.394 kB
6.707 kB
react-badge
CounterBadge
24.773 kB
7.387 kB
react-badge
PresenceBadge
29.768 kB
8.517 kB
react-button
Button
24.651 kB
7.462 kB
react-button
CompoundButton
29.939 kB
8.418 kB
react-button
MenuButton
27.046 kB
8.227 kB
react-button
SplitButton
33.261 kB
9.328 kB
react-button
ToggleButton
33.78 kB
8.065 kB
react-card
Card - All
50.038 kB
14.803 kB
react-card
Card
45.458 kB
13.574 kB
react-card
CardFooter
7.418 kB
3.182 kB
react-card
CardHeader
8.778 kB
3.64 kB
react-card
CardPreview
7.682 kB
3.341 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
169.29 kB
48.467 kB
react-components
react-components: FluentProvider & webLightTheme
32.669 kB
10.652 kB
react-divider
Divider
14.828 kB
5.375 kB
react-image
Image
9.041 kB
3.734 kB
react-input
Input
13.842 kB
4.965 kB
react-label
Label
8.177 kB
3.445 kB
react-link
Link
10.883 kB
4.449 kB
react-make-styles
makeStaticStyles (runtime)
7.59 kB
3.322 kB
react-make-styles
makeStyles + mergeClasses (runtime)
22.238 kB
8.411 kB
react-make-styles
makeStyles + mergeClasses (build time)
2.561 kB
1.206 kB
react-menu
Menu (including children components)
105.378 kB
32.53 kB
react-menu
Menu (including selectable components)
107.766 kB
32.896 kB
react-popover
Popover
101.092 kB
30.67 kB
react-portal
Portal
6.621 kB
2.226 kB
react-positioning
usePopper
22.808 kB
7.935 kB
react-provider
FluentProvider
14.056 kB
5.267 kB
react-slider
RangedSlider
39.807 kB
11.491 kB
react-slider
Slider
33.196 kB
10.312 kB
react-switch
Switch
25.311 kB
8.143 kB
react-text
Text - Default
10.603 kB
4.172 kB
react-text
Text - Wrappers
13.899 kB
4.513 kB
react-theme
Teams: all themes
29.506 kB
6.526 kB
react-theme
Teams: Light theme
18.517 kB
5.251 kB
react-tooltip
Tooltip
43.871 kB
15.165 kB
react-utilities
SSRProvider
189 B
161 B
🤖 This report was generated against a75c8c07c5296206b998f9500baced6952e3f81b

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci Bot commented Nov 15, 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 7f24406:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor
Copy link
Copy Markdown

size-auditor Bot commented Nov 16, 2021

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-northstar-SvgIcon 37.52 kB 83.401 kB ExceedsTolerance     45.881 kB
office-ui-fabric-react fluentui-react-northstar-Chat 164.66 kB 210.121 kB ExceedsTolerance     45.461 kB
office-ui-fabric-react fluentui-react-northstar-List 100.724 kB 146.123 kB ExceedsTolerance     45.399 kB
office-ui-fabric-react fluentui-react-northstar-Avatar 90.803 kB 136.199 kB ExceedsTolerance     45.396 kB
office-ui-fabric-react fluentui-react-northstar-Grid 81.366 kB 126.736 kB ExceedsTolerance     45.37 kB
office-ui-fabric-react fluentui-react-northstar-Label 89.172 kB 134.538 kB ExceedsTolerance     45.366 kB
office-ui-fabric-react fluentui-react-northstar-Image 84.546 kB 129.911 kB ExceedsTolerance     45.365 kB
office-ui-fabric-react fluentui-react-northstar-Divider 87.81 kB 133.166 kB ExceedsTolerance     45.356 kB
office-ui-fabric-react fluentui-react-northstar-ItemLayout 89.514 kB 134.865 kB ExceedsTolerance     45.351 kB
office-ui-fabric-react fluentui-react-northstar-Box 86.388 kB 131.717 kB ExceedsTolerance     45.329 kB
office-ui-fabric-react fluentui-react-northstar-Attachment 98.594 kB 143.892 kB ExceedsTolerance     45.298 kB
office-ui-fabric-react fluentui-react-northstar-Checkbox 91.471 kB 136.767 kB ExceedsTolerance     45.296 kB
office-ui-fabric-react fluentui-react-northstar-Button 94.732 kB 140.017 kB ExceedsTolerance     45.285 kB
office-ui-fabric-react fluentui-react-northstar-Datepicker 200.39 kB 245.671 kB ExceedsTolerance     45.281 kB
office-ui-fabric-react fluentui-react-northstar-Card 94.112 kB 139.388 kB ExceedsTolerance     45.276 kB
office-ui-fabric-react fluentui-react-northstar-Status 87.564 kB 132.833 kB ExceedsTolerance     45.269 kB
office-ui-fabric-react fluentui-react-northstar-Flex 48.686 kB 93.939 kB ExceedsTolerance     45.253 kB
office-ui-fabric-react fluentui-react-northstar-Skeleton 88.869 kB 134.083 kB ExceedsTolerance     45.214 kB
office-ui-fabric-react fluentui-react-northstar-Loader 89.871 kB 135.063 kB ExceedsTolerance     45.192 kB
office-ui-fabric-react fluentui-react-northstar-Design 36.73 kB 81.921 kB ExceedsTolerance     45.191 kB
office-ui-fabric-react fluentui-react-northstar-Dropdown 210.624 kB 255.814 kB ExceedsTolerance     45.19 kB
office-ui-fabric-react fluentui-react-northstar-Text 85.143 kB 130.329 kB ExceedsTolerance     45.186 kB
office-ui-fabric-react fluentui-react-northstar-TextArea 85.271 kB 130.456 kB ExceedsTolerance     45.185 kB
office-ui-fabric-react fluentui-react-northstar-Popup 145.398 kB 190.583 kB ExceedsTolerance     45.185 kB
office-ui-fabric-react fluentui-react-northstar-Layout 86.508 kB 131.693 kB ExceedsTolerance     45.185 kB
office-ui-fabric-react fluentui-react-northstar-Header 85.818 kB 130.999 kB ExceedsTolerance     45.181 kB
office-ui-fabric-react fluentui-react-northstar-Segment 87.375 kB 132.555 kB ExceedsTolerance     45.18 kB
office-ui-fabric-react fluentui-react-northstar-Alert 99.438 kB 144.617 kB ExceedsTolerance     45.179 kB
office-ui-fabric-react fluentui-react-northstar-Pill 95.032 kB 140.211 kB ExceedsTolerance     45.179 kB
office-ui-fabric-react fluentui-react-northstar-Reaction 88.547 kB 133.726 kB ExceedsTolerance     45.179 kB
office-ui-fabric-react fluentui-react-northstar-Dialog 123.996 kB 169.168 kB ExceedsTolerance     45.172 kB
office-ui-fabric-react fluentui-react-northstar-Table 92.456 kB 137.601 kB ExceedsTolerance     45.145 kB
office-ui-fabric-react fluentui-react-northstar-Animation 53.119 kB 98.263 kB ExceedsTolerance     45.144 kB
office-ui-fabric-react fluentui-react-northstar-Slider 96.067 kB 141.198 kB ExceedsTolerance     45.131 kB
office-ui-fabric-react fluentui-react-northstar-Menu 141.008 kB 186.134 kB ExceedsTolerance     45.126 kB
office-ui-fabric-react fluentui-react-northstar-Tooltip 119.863 kB 164.977 kB ExceedsTolerance     45.114 kB
office-ui-fabric-react fluentui-react-northstar-Breadcrumb 91.303 kB 136.408 kB ExceedsTolerance     45.105 kB
office-ui-fabric-react fluentui-react-northstar-MenuButton 175.347 kB 220.439 kB ExceedsTolerance     45.092 kB
office-ui-fabric-react fluentui-react-northstar-SplitButton 191.499 kB 236.588 kB ExceedsTolerance     45.089 kB
office-ui-fabric-react fluentui-react-northstar-Tree 101.589 kB 146.672 kB ExceedsTolerance     45.083 kB
office-ui-fabric-react fluentui-react-northstar-Toolbar 187.832 kB 232.899 kB ExceedsTolerance     45.067 kB
office-ui-fabric-react fluentui-react-northstar-Carousel 115.886 kB 160.951 kB ExceedsTolerance     45.065 kB
office-ui-fabric-react fluentui-react-northstar-Form 104.44 kB 149.503 kB ExceedsTolerance     45.063 kB
office-ui-fabric-react fluentui-react-northstar-Video 86.496 kB 131.555 kB ExceedsTolerance     45.059 kB
office-ui-fabric-react fluentui-react-northstar-Accordion 97.409 kB 142.464 kB ExceedsTolerance     45.055 kB
office-ui-fabric-react fluentui-react-northstar-RadioGroup 95.089 kB 140.143 kB ExceedsTolerance     45.054 kB
office-ui-fabric-react fluentui-react-northstar-Input 100.069 kB 145.123 kB ExceedsTolerance     45.054 kB
office-ui-fabric-react fluentui-react-northstar-Embed 93.046 kB 138.098 kB ExceedsTolerance     45.052 kB
office-ui-fabric-react fluentui-react-northstar-Portal 58.605 kB 102.978 kB ExceedsTolerance     44.373 kB
office-ui-fabric-react fluentui-react-northstar-Provider 93.156 kB 89.451 kB BelowBaseline     -3.705 kB

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

Baseline commit: a75c8c07c5296206b998f9500baced6952e3f81b (build)

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Nov 16, 2021

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1060 1052 5000
BaseButton mount 1033 1077 5000
Breadcrumb mount 2835 2798 1000
ButtonNext mount 571 580 5000
Checkbox mount 1711 1719 5000
CheckboxBase mount 1492 1439 5000
ChoiceGroup mount 5230 5286 5000
ComboBox mount 1049 1076 1000
CommandBar mount 10813 11123 1000
ContextualMenu mount 9110 9202 1000
DefaultButton mount 1272 1297 5000
DetailsRow mount 4235 4188 5000
DetailsRowFast mount 4298 4199 5000
DetailsRowNoStyles mount 3749 3997 5000
Dialog mount 2782 2706 1000
DocumentCardTitle mount 160 175 1000
Dropdown mount 3388 3532 5000
FluentProviderNext mount 4098 3920 5000
FluentProviderWithTheme mount 244 244 10
FluentProviderWithTheme virtual-rerender 101 116 10
FluentProviderWithTheme virtual-rerender-with-unmount 269 298 10
FocusTrapZone mount 1964 1988 5000
FocusZone mount 1915 1956 5000
IconButton mount 1973 1969 5000
Label mount 382 386 5000
Layer mount 3281 3301 5000
Link mount 538 537 5000
MakeStyles mount 1893 1953 50000
MenuButton mount 1683 1574 5000
MessageBar mount 2167 2257 5000
Nav mount 3718 3620 1000
OverflowSet mount 1222 1231 5000
Panel mount 2678 2674 1000
Persona mount 925 917 1000
Pivot mount 1560 1583 1000
PrimaryButton mount 1385 1388 5000
Rating mount 8880 8831 5000
SearchBox mount 1492 1514 5000
Shimmer mount 2898 2902 5000
Slider mount 2186 2171 5000
SpinButton mount 5471 5574 5000
Spinner mount 476 460 5000
SplitButton mount 3382 3593 5000
Stack mount 584 552 5000
StackWithIntrinsicChildren mount 1994 1984 5000
StackWithTextChildren mount 5320 5372 5000
SwatchColorPicker mount 11041 11312 5000
TagPicker mount 2913 2892 5000
TeachingBubble mount 13786 14175 5000
Text mount 490 504 5000
TextField mount 1546 1606 5000
ThemeProvider mount 1265 1287 5000
ThemeProvider virtual-rerender 654 678 5000
ThemeProvider virtual-rerender-with-unmount 2131 2137 5000
Toggle mount 910 897 5000
buttonNative mount 145 137 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
DividerMinimalPerf.default 431 394 1.09:1
FlexMinimalPerf.default 331 310 1.07:1
AlertMinimalPerf.default 339 319 1.06:1
ChatDuplicateMessagesPerf.default 349 330 1.06:1
CheckboxMinimalPerf.default 3019 2860 1.06:1
SegmentMinimalPerf.default 409 385 1.06:1
IconMinimalPerf.default 731 687 1.06:1
TextMinimalPerf.default 399 378 1.06:1
TextAreaMinimalPerf.default 582 549 1.06:1
BoxMinimalPerf.default 406 386 1.05:1
ButtonMinimalPerf.default 205 196 1.05:1
HeaderMinimalPerf.default 412 394 1.05:1
AnimationMinimalPerf.default 465 449 1.04:1
AttachmentSlotsPerf.default 1236 1189 1.04:1
AvatarMinimalPerf.default 234 225 1.04:1
ProviderMergeThemesPerf.default 1823 1745 1.04:1
SkeletonMinimalPerf.default 410 395 1.04:1
FormMinimalPerf.default 469 454 1.03:1
ItemLayoutMinimalPerf.default 1402 1363 1.03:1
ListCommonPerf.default 740 718 1.03:1
MenuMinimalPerf.default 953 923 1.03:1
RadioGroupMinimalPerf.default 508 495 1.03:1
SplitButtonMinimalPerf.default 4869 4730 1.03:1
StatusMinimalPerf.default 780 757 1.03:1
TableManyItemsPerf.default 2210 2148 1.03:1
TreeMinimalPerf.default 919 893 1.03:1
ButtonSlotsPerf.default 629 619 1.02:1
CarouselMinimalPerf.default 534 523 1.02:1
EmbedMinimalPerf.default 4765 4675 1.02:1
ReactionMinimalPerf.default 428 421 1.02:1
CustomToolbarPrototype.default 4414 4342 1.02:1
CardMinimalPerf.default 640 636 1.01:1
DatepickerMinimalPerf.default 6167 6128 1.01:1
HeaderSlotsPerf.default 826 819 1.01:1
ImageMinimalPerf.default 439 433 1.01:1
InputMinimalPerf.default 1442 1426 1.01:1
LabelMinimalPerf.default 442 439 1.01:1
MenuButtonMinimalPerf.default 1827 1811 1.01:1
TooltipMinimalPerf.default 1137 1127 1.01:1
ChatMinimalPerf.default 754 756 1:1
DropdownMinimalPerf.default 3412 3408 1:1
ListMinimalPerf.default 585 586 1:1
ListWith60ListItems.default 728 731 1:1
PopupMinimalPerf.default 647 644 1:1
ProviderMinimalPerf.default 1172 1176 1:1
VideoMinimalPerf.default 704 704 1:1
ButtonOverridesMissPerf.default 1942 1959 0.99:1
DialogMinimalPerf.default 831 843 0.99:1
LayoutMinimalPerf.default 408 413 0.99:1
ListNestedPerf.default 613 621 0.99:1
PortalMinimalPerf.default 191 193 0.99:1
SliderMinimalPerf.default 1852 1866 0.99:1
TableMinimalPerf.default 448 454 0.99:1
ChatWithPopoverPerf.default 413 422 0.98:1
DropdownManyItemsPerf.default 787 805 0.98:1
RefMinimalPerf.default 248 253 0.98:1
GridMinimalPerf.default 375 386 0.97:1
LoaderMinimalPerf.default 753 774 0.97:1
ToolbarMinimalPerf.default 1020 1052 0.97:1
TreeWith60ListItems.default 199 205 0.97:1
AttachmentMinimalPerf.default 174 183 0.95:1
RosterPerf.default 1281 1347 0.95:1
AccordionMinimalPerf.default 185 209 0.89:1

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.

4 participants