fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

Published 20 hours ago • verified publisher icon microsoft

chore: make v9 packages setup up to date

Open Hotell opened this issue 3 years ago • 7 comments

NOTE: all changes have been created by running yarn nx workspace-generate migrate-converged-pkg --all

Current Behavior

  • some v9 packages setup is out of date/doesn't work as expected
  • storybook alias executes custom node runner

New Behavior

  • all v9 packages setup is up to date
  • storybook alias executes start-storybook binary directly

Related Issue(s)

Fixes partially https://github.com/microsoft/fluentui/issues/24169

Hotell avatar Aug 09 '22 14:08 Hotell

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 dc8ea7e3d48dba381f1ee53a4a65f6446ce2ac06:

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

codesandbox-ci[bot] avatar Aug 09 '22 14:08 codesandbox-ci[bot]

Asset size changes

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

Baseline commit: 84017b6464e13c46a7ae8c61875ead2ff4b6965b (build)

size-auditor[bot] avatar Aug 09 '22 14:08 size-auditor[bot]

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 533 B
341 B
global-context
createContextSelector		 554 B
348 B
priority-overflow
createOverflowManager		 2.936 kB
1.212 kB
react-accordion
Accordion (including children components)		 79.485 kB
24.082 kB
react-alert
Alert		 82.763 kB
20.582 kB
react-avatar
Avatar		 48.172 kB
13.615 kB
react-avatar
AvatarGroup		 13.43 kB
5.382 kB
react-avatar
AvatarGroupItem		 64.878 kB
18.284 kB
react-badge
Badge		 22.494 kB
7.157 kB
react-badge
CounterBadge		 23.397 kB
7.449 kB
react-badge
PresenceBadge		 23.947 kB
7.022 kB
react-button
Button		 36.396 kB
9.575 kB
react-button
CompoundButton		 43.469 kB
10.812 kB
react-button
MenuButton		 39.014 kB
10.456 kB
react-button
SplitButton		 46.506 kB
11.827 kB
react-button
ToggleButton		 51.91 kB
11.003 kB
react-card
Card - All		 67.42 kB
19.249 kB
react-card
Card		 63.102 kB
18.167 kB
react-card
CardFooter		 8.461 kB
3.555 kB
react-card
CardHeader		 9.504 kB
3.896 kB
react-card
CardPreview		 8.562 kB
3.61 kB
react-combobox
Combobox (including child components)		 71.331 kB
23.323 kB
react-combobox
Dropdown (including child components)		 70.459 kB
23.182 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 188.604 kB
51.784 kB
react-components
react-components: FluentProvider & webLightTheme		 32.688 kB
10.736 kB
react-dialog
Dialog (including children components)		 85.064 kB
25.293 kB
react-divider
Divider		 16.321 kB
5.837 kB
react-image
Image		 10.68 kB
4.215 kB
react-input
Input		 23.554 kB
7.644 kB
react-label
Label		 9.238 kB
3.815 kB
react-link
Link		 12.197 kB
4.912 kB
react-menu
Menu (including children components)		 114.702 kB
35.037 kB
react-menu
Menu (including selectable components)		 117.901 kB
35.533 kB
react-overflow
hooks only		 10.839 kB
4.146 kB
react-popover
Popover		 102.042 kB
31.308 kB
react-portal
Portal		 10.49 kB
3.845 kB
react-positioning
usePositioning		 19.656 kB
7.388 kB
react-provider
FluentProvider		 15.565 kB
5.818 kB
react-radio
Radio		 36.13 kB
11.947 kB
react-radio
RadioGroup		 14.319 kB
5.711 kB
react-select
Select		 20.746 kB
7.299 kB
react-slider
Slider		 31.988 kB
10.019 kB
react-spinbutton
SpinButton		 43.899 kB
12.362 kB
react-spinner
Spinner		 19.932 kB
6.363 kB
react-switch
Switch		 32.438 kB
10.218 kB
react-text
Text - Default		 11.572 kB
4.537 kB
react-text
Text - Wrappers		 14.882 kB
4.977 kB
react-textarea
Textarea		 23.674 kB
7.83 kB
react-theme
Single theme token import		 69 B
89 B
react-theme
Teams: all themes		 28.995 kB
6.215 kB
react-theme
Teams: Light theme		 16.973 kB
4.86 kB
react-tooltip
Tooltip		 41.307 kB
14.586 kB
react-utilities
SSRProvider		 189 B
161 B
🤖 This report was generated against 84017b6464e13c46a7ae8c61875ead2ff4b6965b

fabricteam avatar Aug 09 '22 14:08 fabricteam

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1525 1480 5000
Button mount 1140 1145 5000
FluentProvider mount 1871 1876 5000
FluentProviderWithTheme mount 744 748 10
FluentProviderWithTheme virtual-rerender 700 685 10
FluentProviderWithTheme virtual-rerender-with-unmount 748 762 10
MakeStyles mount 2279 2291 50000
SpinButton mount 2950 2964 5000

fabricteam avatar Aug 09 '22 14:08 fabricteam

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 162 135 1.2:1
AlertMinimalPerf.default 215 186 1.16:1
ListWith60ListItems.default 509 443 1.15:1
SegmentMinimalPerf.default 290 256 1.13:1
HeaderSlotsPerf.default 626 564 1.11:1
ChatDuplicateMessagesPerf.default 241 222 1.09:1
FormMinimalPerf.default 326 298 1.09:1
ItemLayoutMinimalPerf.default 979 908 1.08:1
ListNestedPerf.default 454 422 1.08:1
TableManyItemsPerf.default 1560 1457 1.07:1
CustomToolbarPrototype.default 2210 2073 1.07:1
ImageMinimalPerf.default 322 303 1.06:1
ProviderMergeThemesPerf.default 1045 983 1.06:1
TableMinimalPerf.default 341 322 1.06:1
ListMinimalPerf.default 431 410 1.05:1
CardMinimalPerf.default 449 437 1.03:1
DropdownManyItemsPerf.default 568 554 1.03:1
IconMinimalPerf.default 506 490 1.03:1
AccordionMinimalPerf.default 123 120 1.02:1
AttachmentSlotsPerf.default 903 882 1.02:1
CarouselMinimalPerf.default 392 384 1.02:1
DividerMinimalPerf.default 291 284 1.02:1
PortalMinimalPerf.default 140 137 1.02:1
ReactionMinimalPerf.default 315 309 1.02:1
RefMinimalPerf.default 182 178 1.02:1
TextMinimalPerf.default 278 272 1.02:1
ButtonOverridesMissPerf.default 1245 1232 1.01:1
ChatMinimalPerf.default 615 610 1.01:1
ChatWithPopoverPerf.default 309 305 1.01:1
EmbedMinimalPerf.default 3497 3478 1.01:1
LayoutMinimalPerf.default 292 289 1.01:1
SplitButtonMinimalPerf.default 3656 3620 1.01:1
StatusMinimalPerf.default 563 558 1.01:1
ToolbarMinimalPerf.default 687 682 1.01:1
ButtonSlotsPerf.default 454 453 1:1
CheckboxMinimalPerf.default 2239 2235 1:1
DialogMinimalPerf.default 639 637 1:1
HeaderMinimalPerf.default 288 288 1:1
LabelMinimalPerf.default 300 301 1:1
MenuMinimalPerf.default 711 714 1:1
MenuButtonMinimalPerf.default 1389 1389 1:1
SliderMinimalPerf.default 1403 1401 1:1
ListCommonPerf.default 532 535 0.99:1
RosterPerf.default 919 928 0.99:1
PopupMinimalPerf.default 509 514 0.99:1
VideoMinimalPerf.default 532 538 0.99:1
AttachmentMinimalPerf.default 116 118 0.98:1
ButtonMinimalPerf.default 132 135 0.98:1
DropdownMinimalPerf.default 2521 2564 0.98:1
TextAreaMinimalPerf.default 393 399 0.98:1
AnimationMinimalPerf.default 423 439 0.96:1
DatepickerMinimalPerf.default 4571 4752 0.96:1
InputMinimalPerf.default 1040 1080 0.96:1
FlexMinimalPerf.default 210 222 0.95:1
RadioGroupMinimalPerf.default 352 370 0.95:1
TreeMinimalPerf.default 641 674 0.95:1
TreeWith60ListItems.default 124 130 0.95:1
TooltipMinimalPerf.default 874 929 0.94:1
SkeletonMinimalPerf.default 253 273 0.93:1
LoaderMinimalPerf.default 518 565 0.92:1
BoxMinimalPerf.default 246 273 0.9:1
ProviderMinimalPerf.default 289 332 0.87:1
GridMinimalPerf.default 239 278 0.86:1

fabricteam avatar Aug 09 '22 14:08 fabricteam

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 805 767 5000
Breadcrumb mount 2273 2265 1000
Checkbox mount 2242 2274 5000
CheckboxBase mount 1984 1976 5000
ChoiceGroup mount 3923 3948 5000
ComboBox mount 778 778 1000
CommandBar mount 8820 8777 1000
ContextualMenu mount 9343 9385 1000
DefaultButton mount 974 946 5000
DetailsRow mount 2993 3007 5000
DetailsRowFast mount 2985 3021 5000
DetailsRowNoStyles mount 2847 2852 5000
Dialog mount 2307 2275 1000
DocumentCardTitle mount 151 159 1000
Dropdown mount 2799 2799 5000
FocusTrapZone mount 1568 1534 5000
FocusZone mount 1488 1529 5000
IconButton mount 1403 1399 5000
Label mount 316 322 5000
Layer mount 2685 2696 5000
Link mount 439 435 5000
MenuButton mount 1235 1218 5000
MessageBar mount 1899 1869 5000
Nav mount 2878 2640 1000
OverflowSet mount 1006 968 5000
Panel mount 1841 1818 1000
Persona mount 820 834 1000
Pivot mount 1130 1143 1000
PrimaryButton mount 1106 1080 5000
Rating mount 6590 6606 5000
SearchBox mount 1123 1114 5000
Shimmer mount 2225 2238 5000
Slider mount 1678 1658 5000
SpinButton mount 3942 3917 5000
Spinner mount 391 407 5000
SplitButton mount 2474 2479 5000
Stack mount 484 476 5000
StackWithIntrinsicChildren mount 1891 1867 5000
StackWithTextChildren mount 4687 4623 5000
SwatchColorPicker mount 9005 9037 5000
TagPicker mount 2025 1972 5000
TeachingBubble mount 70693 70445 5000
Text mount 405 404 5000
TextField mount 1160 1142 5000
ThemeProvider mount 968 966 5000
ThemeProvider virtual-rerender 633 641 5000
ThemeProvider virtual-rerender-with-unmount 1394 1399 5000
Toggle mount 735 742 5000
buttonNative mount 100 95 5000

fabricteam avatar Aug 09 '22 14:08 fabricteam

It looks like the RadioGroup stories were moved from src/stories/RadioGroup to src/stories/Radio. Same for the TabList stories, getting moved from src/stories/TabList to src/stories/Tabs. Were those moves intentional? It seems like the folder name should match the component name.

@behowell Martin chatted with me about this and can confirm that it was intentional :)

TristanWatanabe avatar Aug 10 '22 16:08 TristanWatanabe