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

revert(react-storybook-addon): Remove addon and reintroduce withFluentProvider #20475

Merged
merged 3 commits into from
Nov 3, 2021

Conversation

ling1726
Copy link
Member

@ling1726 ling1726 commented Nov 3, 2021

Pull request checklist

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

Description of changes

The addon breaks the no build DX for storybook as described in #18357. This PR reverts the register of that
addon and only applying this addon to react-components breaks theming
for all other packages

Focus areas to test

(optional)

`withFluentProvider`

no build DX for storybook microsoft#18357. This PR reverts the register of that
addon and only applying this addon to react-components breaks theming
for all other packages
@ling1726 ling1726 marked this pull request as ready for review November 3, 2021 12:57
@ling1726 ling1726 requested review from a team as code owners November 3, 2021 12:57
@ling1726 ling1726 changed the title revert(react-storybook-addon): Remove addon and reintroduce revert(react-storybook-addon): Remove addon and reintroduce withFluentProvider Nov 3, 2021
@fabricteam
Copy link
Collaborator

fabricteam commented Nov 3, 2021

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
57.995 kB
18.181 kB
react-avatar
Avatar
55.013 kB
15.693 kB
react-badge
Badge
23.207 kB
6.998 kB
react-badge
CounterBadge
25.686 kB
7.698 kB
react-badge
PresenceBadge
30.706 kB
8.831 kB
react-button
Button
25.608 kB
7.771 kB
react-button
CompoundButton
30.96 kB
8.74 kB
react-button
MenuButton
27.688 kB
8.453 kB
react-button
SplitButton
33.975 kB
9.65 kB
react-button
ToggleButton
34.853 kB
8.425 kB
react-card
Card - All
49.008 kB
14.564 kB
react-card
Card
44.495 kB
13.343 kB
react-card
CardFooter
8.141 kB
3.43 kB
react-card
CardHeader
9.461 kB
3.883 kB
react-card
CardPreview
8.434 kB
3.604 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
169.727 kB
48.148 kB
react-components
react-components: FluentProvider & webLightTheme
32.208 kB
10.672 kB
react-divider
Divider
15.624 kB
5.652 kB
react-image
Image
9.784 kB
3.982 kB
react-input
Input
14.78 kB
5.286 kB
react-label
Label
8.977 kB
3.719 kB
react-link
Link
11.67 kB
4.709 kB
react-make-styles
makeStaticStyles (runtime)
7.59 kB
3.321 kB
react-make-styles
makeStyles + mergeClasses (runtime)
22.235 kB
8.408 kB
react-make-styles
makeStyles + mergeClasses (build time)
2.558 kB
1.204 kB
react-menu
Menu (including children components)
105.85 kB
32.225 kB
react-menu
Menu (including selectable components)
108.245 kB
32.616 kB
react-popover
Popover
101.187 kB
30.384 kB
react-portal
Portal
6.725 kB
2.237 kB
react-positioning
usePopper
23.145 kB
7.942 kB
react-provider
FluentProvider
15.167 kB
5.584 kB
react-slider
RangedSlider
41.432 kB
11.976 kB
react-slider
Slider
34.81 kB
10.862 kB
react-switch
Switch
26.624 kB
8.569 kB
react-text
Text - Default
11.351 kB
4.424 kB
react-text
Text - Wrappers
14.42 kB
4.729 kB
react-theme
Teams: all themes
25.712 kB
6.17 kB
react-theme
Teams: Light theme
17.215 kB
5.116 kB
react-tooltip
Tooltip
45.556 kB
15.549 kB
react-utilities
SSRProvider
213 B
170 B
🤖 This report was generated against 9186578324773f95f4d61be3d70e67752159d843

@size-auditor
Copy link

size-auditor bot commented Nov 3, 2021

Asset size changes

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

Baseline commit: 9186578324773f95f4d61be3d70e67752159d843 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 3, 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 229d799:

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

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1040 1028 5000
BaseButton mount 1041 1048 5000
Breadcrumb mount 2850 2812 1000
ButtonNext mount 567 581 5000
Checkbox mount 1769 1766 5000
CheckboxBase mount 1531 1465 5000
ChoiceGroup mount 5447 5322 5000
ComboBox mount 1055 1071 1000
CommandBar mount 11103 11162 1000
ContextualMenu mount 6954 7114 1000
DefaultButton mount 1310 1261 5000
DetailsRow mount 4138 4287 5000
DetailsRowFast mount 4167 4361 5000
DetailsRowNoStyles mount 4003 3946 5000
Dialog mount 2778 2769 1000
DocumentCardTitle mount 175 190 1000
Dropdown mount 3690 3671 5000
FluentProviderNext mount 3546 3520 5000
FluentProviderWithTheme mount 215 218 10
FluentProviderWithTheme virtual-rerender 116 112 10
FluentProviderWithTheme virtual-rerender-with-unmount 280 250 10
FocusTrapZone mount 2014 1983 5000
FocusZone mount 2007 1955 5000
IconButton mount 1994 2034 5000
Label mount 401 386 5000
Layer mount 3364 3352 5000
Link mount 540 559 5000
MakeStyles mount 1956 1931 50000
MenuButton mount 1664 1696 5000
MessageBar mount 2171 2262 5000
Nav mount 3766 3678 1000
OverflowSet mount 1250 1206 5000
Panel mount 2746 2655 1000
Persona mount 949 956 1000
Pivot mount 1571 1649 1000
PrimaryButton mount 1426 1447 5000
Rating mount 8832 8887 5000
SearchBox mount 1544 1534 5000
Shimmer mount 2965 2881 5000
Slider mount 2243 2155 5000
SpinButton mount 5548 5646 5000
Spinner mount 491 488 5000
SplitButton mount 3600 3553 5000
Stack mount 584 596 5000
StackWithIntrinsicChildren mount 1957 2038 5000
StackWithTextChildren mount 5338 5357 5000
SwatchColorPicker mount 11689 11671 5000
TagPicker mount 2924 2961 5000
TeachingBubble mount 14213 14140 5000
Text mount 495 489 5000
TextField mount 1588 1620 5000
ThemeProvider mount 1341 1321 5000
ThemeProvider virtual-rerender 683 675 5000
ThemeProvider virtual-rerender-with-unmount 2169 2096 5000
Toggle mount 924 940 5000
buttonNative mount 141 151 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 225 196 1.15:1
ButtonMinimalPerf.default 215 198 1.09:1
ChatDuplicateMessagesPerf.default 368 340 1.08:1
FormMinimalPerf.default 496 459 1.08:1
RadioGroupMinimalPerf.default 541 503 1.08:1
BoxMinimalPerf.default 411 385 1.07:1
CardMinimalPerf.default 666 624 1.07:1
CarouselMinimalPerf.default 554 517 1.07:1
FlexMinimalPerf.default 354 331 1.07:1
ReactionMinimalPerf.default 437 407 1.07:1
HeaderSlotsPerf.default 901 853 1.06:1
TableMinimalPerf.default 487 460 1.06:1
ImageMinimalPerf.default 442 422 1.05:1
ToolbarMinimalPerf.default 1099 1050 1.05:1
GridMinimalPerf.default 397 380 1.04:1
PortalMinimalPerf.default 201 194 1.04:1
IconMinimalPerf.default 720 691 1.04:1
TreeMinimalPerf.default 928 889 1.04:1
CheckboxMinimalPerf.default 3051 2973 1.03:1
InputMinimalPerf.default 1490 1450 1.03:1
LayoutMinimalPerf.default 433 421 1.03:1
ListNestedPerf.default 644 628 1.03:1
RefMinimalPerf.default 269 260 1.03:1
TextAreaMinimalPerf.default 595 580 1.03:1
AlertMinimalPerf.default 313 308 1.02:1
AttachmentMinimalPerf.default 188 185 1.02:1
ButtonSlotsPerf.default 660 645 1.02:1
ItemLayoutMinimalPerf.default 1405 1380 1.02:1
LoaderMinimalPerf.default 786 771 1.02:1
SegmentMinimalPerf.default 395 388 1.02:1
VideoMinimalPerf.default 733 721 1.02:1
AttachmentSlotsPerf.default 1213 1201 1.01:1
HeaderMinimalPerf.default 417 411 1.01:1
ProviderMergeThemesPerf.default 1875 1860 1.01:1
SkeletonMinimalPerf.default 426 420 1.01:1
SliderMinimalPerf.default 1875 1857 1.01:1
SplitButtonMinimalPerf.default 4817 4788 1.01:1
AvatarMinimalPerf.default 229 229 1:1
ChatMinimalPerf.default 768 769 1:1
DropdownMinimalPerf.default 3434 3430 1:1
EmbedMinimalPerf.default 4749 4762 1:1
StatusMinimalPerf.default 768 770 1:1
TableManyItemsPerf.default 2168 2164 1:1
TextMinimalPerf.default 397 397 1:1
CustomToolbarPrototype.default 4524 4522 1:1
TooltipMinimalPerf.default 1188 1187 1:1
AccordionMinimalPerf.default 171 173 0.99:1
ButtonOverridesMissPerf.default 1983 1994 0.99:1
DatepickerMinimalPerf.default 6069 6109 0.99:1
DialogMinimalPerf.default 839 846 0.99:1
DividerMinimalPerf.default 412 416 0.99:1
LabelMinimalPerf.default 442 446 0.99:1
ListMinimalPerf.default 574 579 0.99:1
MenuMinimalPerf.default 952 960 0.99:1
MenuButtonMinimalPerf.default 1841 1856 0.99:1
ProviderMinimalPerf.default 1254 1264 0.99:1
ChatWithPopoverPerf.default 432 440 0.98:1
DropdownManyItemsPerf.default 779 796 0.98:1
AnimationMinimalPerf.default 456 468 0.97:1
ListCommonPerf.default 705 728 0.97:1
RosterPerf.default 1377 1423 0.97:1
PopupMinimalPerf.default 627 660 0.95:1
ListWith60ListItems.default 717 765 0.94:1

Copy link
Contributor

@Hotell Hotell left a comment

Choose a reason for hiding this comment

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

would be nice to do actual github revert next time if possible so we dont have to process "actual" changes. ty

@Hotell Hotell removed their assignment Nov 3, 2021
@Hotell Hotell added this to the November Project Cycle Q4 2021 milestone Nov 3, 2021
@ling1726 ling1726 merged commit 9a2b143 into microsoft:master Nov 3, 2021
mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
…ntProvider` (microsoft#20475)

* revert(react-storybook-addon): Remove addon and reintroduce
`withFluentProvider`

no build DX for storybook microsoft#18357. This PR reverts the register of that
addon and only applying this addon to react-components breaks theming
for all other packages

* Change files

* update md
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.

6 participants