Skip to content

Create react-migration-v8-v9 with shims and stories#25121

Merged
GeoffCoxMSFT merged 22 commits intomicrosoft:masterfrom
GeoffCoxMSFT:add-shim-stories-1
Oct 7, 2022
Merged

Create react-migration-v8-v9 with shims and stories#25121
GeoffCoxMSFT merged 22 commits intomicrosoft:masterfrom
GeoffCoxMSFT:add-shim-stories-1

Conversation

@GeoffCoxMSFT
Copy link
Member

@GeoffCoxMSFT GeoffCoxMSFT commented Oct 6, 2022 •
edited
Loading

Changes

  • created react-migration-v8-v9 package
  • moved Button shims and stories into react-migration-v8-v9
  • moved Stack shims stories into react-migration-v8-v9
  • copied Theme shims into react-migration-v8-v9
  • updated storybook to find migration stories

Note: Theme shim documentation and stories to move in future PR.

Issues

Updates #25120

@GeoffCoxMSFT GeoffCoxMSFT self-assigned this Oct 6, 2022
@GeoffCoxMSFT GeoffCoxMSFT requested review from a team, JustSlone and jurokapsiar as code owners October 6, 2022 17:04
@github-actions github-actions bot added this to the October Project Cycle Q4 2022 milestone Oct 6, 2022
@GeoffCoxMSFT GeoffCoxMSFT changed the title Move button and stack stories into migration shim component Create react-migration-v8-v9 with shims and stories Oct 6, 2022
@size-auditor
Copy link

size-auditor bot commented Oct 6, 2022 •
edited
Loading

Asset size changes

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

Baseline commit: c78ae4c551ef8dd8109fc339047cfdfd1c1b9948 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 6, 2022 •
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 4b39910:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 6, 2022 •
edited
Loading

📊 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		 3.153 kB
1.299 kB
react-accordion
Accordion (including children components)		 79.037 kB
24.059 kB
react-alert
Alert		 84.529 kB
21.171 kB
react-avatar
Avatar		 48.828 kB
13.842 kB
react-avatar
AvatarGroup		 14.95 kB
5.989 kB
react-avatar
AvatarGroupItem		 68.796 kB
19.182 kB
react-badge
Badge		 22.6 kB
7.205 kB
react-badge
CounterBadge		 23.49 kB
7.489 kB
react-badge
PresenceBadge		 24.05 kB
7.067 kB
react-button
Button		 36.69 kB
9.818 kB
react-button
CompoundButton		 43.715 kB
11.036 kB
react-button
MenuButton		 39.384 kB
10.72 kB
react-button
SplitButton		 46.83 kB
12.102 kB
react-button
ToggleButton		 52.557 kB
11.29 kB
react-card
Card - All		 67.17 kB
19.281 kB
react-card
Card		 62.852 kB
18.198 kB
react-card
CardFooter		 8.561 kB
3.601 kB
react-card
CardHeader		 9.604 kB
3.94 kB
react-card
CardPreview		 8.662 kB
3.656 kB
react-combobox
Combobox (including child components)		 75.071 kB
24.394 kB
react-combobox
Dropdown (including child components)		 74.799 kB
24.352 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 62.781 kB
17.574 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 189.227 kB
52.474 kB
react-components
react-components: FluentProvider & webLightTheme		 33.4 kB
11.008 kB
react-dialog
Dialog (including children components)		 82.465 kB
24.447 kB
react-divider
Divider		 16.459 kB
5.902 kB
react-image
Image		 10.78 kB
4.264 kB
react-infobutton
InfoButton		 7.696 kB
3.241 kB
react-input
Input		 23.762 kB
7.706 kB
react-label
Label		 9.338 kB
3.86 kB
react-link
Link		 11.806 kB
4.868 kB
react-menu
Menu (including children components)		 116.558 kB
35.725 kB
react-menu
Menu (including selectable components)		 119.627 kB
36.246 kB
react-overflow
hooks only		 11.004 kB
4.188 kB
react-persona
Persona		 53.946 kB
15.225 kB
react-popover
Popover		 102.756 kB
31.5 kB
react-portal
Portal		 10.582 kB
3.875 kB
react-portal-compat
PortalCompatProvider		 5.857 kB
1.978 kB
react-positioning
usePositioning		 19.7 kB
7.404 kB
react-progress
Progress		 11.302 kB
4.549 kB
react-provider
FluentProvider		 15.761 kB
5.885 kB
react-radio
Radio		 36.39 kB
12.103 kB
react-radio
RadioGroup		 14.248 kB
5.7 kB
react-select
Select		 20.846 kB
7.346 kB
react-slider
Slider		 31.759 kB
10.064 kB
react-spinbutton
SpinButton		 44.102 kB
12.425 kB
react-spinner
Spinner		 19.977 kB
6.438 kB
react-switch
Switch		 33.342 kB
10.557 kB
react-text
Text - Default		 11.782 kB
4.605 kB
react-text
Text - Wrappers		 15.092 kB
5.044 kB
react-textarea
Textarea		 25.018 kB
8.133 kB
react-theme
Single theme token import		 69 B
89 B
react-theme
Teams: all themes		 29.65 kB
6.444 kB
react-theme
Teams: Light theme		 17.486 kB
5.057 kB
react-tooltip
Tooltip		 41.566 kB
14.644 kB
react-utilities
SSRProvider		 180 B
159 B
🤖 This report was generated against c78ae4c551ef8dd8109fc339047cfdfd1c1b9948

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 6, 2022 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1663 1696 5000
Button mount 1167 1180 5000
FluentProvider mount 1977 1987 5000
FluentProviderWithTheme mount 753 744 10
FluentProviderWithTheme virtual-rerender 684 679 10
FluentProviderWithTheme virtual-rerender-with-unmount 737 745 10
MakeStyles mount 2321 2326 50000
SpinButton mount 3319 3306 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 6, 2022 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 195 173 1.13:1
RefMinimalPerf.default 234 207 1.13:1
PortalMinimalPerf.default 183 163 1.12:1
IconMinimalPerf.default 776 704 1.1:1
ButtonSlotsPerf.default 603 571 1.06:1
TextMinimalPerf.default 394 373 1.06:1
AlertMinimalPerf.default 314 300 1.05:1
StatusMinimalPerf.default 797 762 1.05:1
TableMinimalPerf.default 466 442 1.05:1
TreeMinimalPerf.default 911 866 1.05:1
AnimationMinimalPerf.default 590 565 1.04:1
LayoutMinimalPerf.default 412 398 1.04:1
ReactionMinimalPerf.default 439 422 1.04:1
CarouselMinimalPerf.default 511 496 1.03:1
CheckboxMinimalPerf.default 2324 2264 1.03:1
DividerMinimalPerf.default 411 400 1.03:1
FormMinimalPerf.default 439 428 1.03:1
HeaderMinimalPerf.default 408 397 1.03:1
ListNestedPerf.default 659 638 1.03:1
ProviderMinimalPerf.default 431 420 1.03:1
TooltipMinimalPerf.default 2584 2519 1.03:1
BoxMinimalPerf.default 380 371 1.02:1
ButtonOverridesMissPerf.default 1478 1450 1.02:1
ChatWithPopoverPerf.default 411 404 1.02:1
FlexMinimalPerf.default 310 305 1.02:1
RosterPerf.default 2362 2321 1.02:1
RadioGroupMinimalPerf.default 504 492 1.02:1
SliderMinimalPerf.default 1755 1729 1.02:1
ToolbarMinimalPerf.default 1048 1031 1.02:1
AttachmentMinimalPerf.default 165 164 1.01:1
AttachmentSlotsPerf.default 1232 1215 1.01:1
AvatarMinimalPerf.default 210 208 1.01:1
CardMinimalPerf.default 611 602 1.01:1
DropdownManyItemsPerf.default 750 739 1.01:1
ItemLayoutMinimalPerf.default 1310 1303 1.01:1
SplitButtonMinimalPerf.default 4856 4816 1.01:1
DatepickerMinimalPerf.default 6217 6225 1:1
DropdownMinimalPerf.default 2825 2834 1:1
EmbedMinimalPerf.default 4026 4020 1:1
ImageMinimalPerf.default 456 455 1:1
ListCommonPerf.default 739 742 1:1
CustomToolbarPrototype.default 2808 2818 1:1
ChatDuplicateMessagesPerf.default 295 298 0.99:1
HeaderSlotsPerf.default 869 875 0.99:1
ListMinimalPerf.default 590 594 0.99:1
LoaderMinimalPerf.default 704 711 0.99:1
MenuMinimalPerf.default 930 936 0.99:1
PopupMinimalPerf.default 661 665 0.99:1
ProviderMergeThemesPerf.default 1290 1302 0.99:1
SkeletonMinimalPerf.default 381 384 0.99:1
TableManyItemsPerf.default 2165 2192 0.99:1
TreeWith60ListItems.default 174 176 0.99:1
ChatMinimalPerf.default 777 791 0.98:1
DialogMinimalPerf.default 825 838 0.98:1
InputMinimalPerf.default 1221 1245 0.98:1
MenuButtonMinimalPerf.default 1843 1877 0.98:1
VideoMinimalPerf.default 781 799 0.98:1
SegmentMinimalPerf.default 374 385 0.97:1
TextAreaMinimalPerf.default 561 576 0.97:1
LabelMinimalPerf.default 410 428 0.96:1
ListWith60ListItems.default 687 712 0.96:1
GridMinimalPerf.default 351 376 0.93:1
AccordionMinimalPerf.default 159 175 0.91:1

khmakoto
khmakoto reviewed Oct 6, 2022
View reviewed changes
@fabricteam
Copy link
Collaborator

fabricteam commented Oct 6, 2022 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1498 1547 5000
Breadcrumb mount 3719 3624 1000
Checkbox mount 3359 3426 5000
CheckboxBase mount 3011 2953 5000
ChoiceGroup mount 5713 5722 5000
ComboBox mount 1561 1565 1000
CommandBar mount 11757 11693 1000
ContextualMenu mount 13314 13255 1000
DefaultButton mount 1733 1875 5000
DetailsRow mount 4643 4548 5000
DetailsRowFast mount 4592 4608 5000
DetailsRowNoStyles mount 4442 4449 5000
Dialog mount 3894 3804 1000
DocumentCardTitle mount 706 715 1000
Dropdown mount 4127 4127 5000
FocusTrapZone mount 2472 2500 5000
FocusZone mount 2454 2396 5000
GroupedList mount 68945 79054 2
GroupedList virtual-rerender 32623 33265 2
GroupedList virtual-rerender-with-unmount 108600 110005 2
GroupedListV2 mount 675 704 2
GroupedListV2 virtual-rerender 651 663 2
GroupedListV2 virtual-rerender-with-unmount 705 706 2
IconButton mount 2477 2447 5000
Label mount 897 902 5000
Layer mount 5339 5393 5000
Link mount 1057 1051 5000
MenuButton mount 2174 2153 5000
MessageBar mount 2870 2816 5000
Nav mount 4210 4267 1000
OverflowSet mount 1713 1698 5000
Panel mount 3045 3093 1000
Persona mount 1588 1613 1000
Pivot mount 2052 2088 1000
PrimaryButton mount 1935 1933 5000
Rating mount 9194 9292 5000
SearchBox mount 1941 1967 5000
Shimmer mount 3728 3745 5000
Slider mount 2682 2670 5000
SpinButton mount 6348 6326 5000
Spinner mount 975 986 5000
SplitButton mount 3943 3969 5000
Stack mount 1092 1082 5000
StackWithIntrinsicChildren mount 3164 3195 5000
StackWithTextChildren mount 6456 6444 5000
SwatchColorPicker mount 13412 13478 5000
TagPicker mount 3311 3483 5000
TeachingBubble mount 105577 106607 5000
Text mount 1000 1000 5000
TextField mount 2028 2124 5000
ThemeProvider mount 1853 1888 5000
ThemeProvider virtual-rerender 1342 1311 5000
ThemeProvider virtual-rerender-with-unmount 2656 2672 5000
Toggle mount 1395 1394 5000
buttonNative mount 671 654 5000

GeoffCoxMSFT and others added 12 commits October 6, 2022 13:26
@GeoffCoxMSFT @khmakoto
Update packages/react-migration-v8-v9/src/components/Button/ActionBut…
f376b0d 
…tonShim.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT @khmakoto
Update packages/react-migration-v8-v9/src/components/Button/ButtonShi…
06f5100 
…m.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT @khmakoto
Update packages/react-migration-v8-v9/src/components/Button/CompoundB…
1ec524f 
…uttonShim.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT @khmakoto
Update packages/react-migration-v8-v9/src/components/Button/DefaultBu…
e9afb45 
…ttonShim.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT @khmakoto
Update packages/react-migration-v8-v9/src/stories/ActionButtonShim/in…
d22c8ca 
…dex.stories.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT @khmakoto
Update packages/react-migration-v8-v9/src/stories/CommandButtonShim/i…
7451ec7 
…ndex.stories.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT @khmakoto
Update packages/react-migration-v8-v9/src/stories/MenuButtonShim/inde…
22d6dfc 
…x.stories.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT @khmakoto
Update packages/react-migration-v8-v9/src/stories/ToggleButtonShim/in…
8e440b3 
…dex.stories.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT @khmakoto
Update packages/react-migration-v8-v9/src/stories/Stack/index.stories…
7da6a48 
….tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT
Improved readme
e0db355
@GeoffCoxMSFT @khmakoto
Update packages/react-migration-v8-v9/src/components/Button/MenuButto…
2c0258a 
…nShim.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT @khmakoto
Apply suggestions from code review
cd44785 
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
GeoffCoxMSFT and others added 3 commits October 6, 2022 13:39
@GeoffCoxMSFT @khmakoto
Apply suggestions from code review
0cf3382 
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT @khmakoto
Apply suggestions from code review
2e3bc29 
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT @khmakoto
Update packages/react-migration-v8-v9/src/components/Theme/themeDupli…
8755719 
…cates.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@GeoffCoxMSFT GeoffCoxMSFT enabled auto-merge (squash) October 6, 2022 20:42
@GeoffCoxMSFT GeoffCoxMSFT disabled auto-merge October 7, 2022 16:06
@GeoffCoxMSFT GeoffCoxMSFT enabled auto-merge (squash) October 7, 2022 19:58
@GeoffCoxMSFT GeoffCoxMSFT merged commit 223571d into microsoft:master Oct 7, 2022
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 10, 2022
@marcosmoura
Merge branch 'master' into marcosmoura/feat/selectable-cards
f4485d2 
* master: (23 commits)
  Revert "chore: screener-run workflow should report to PR (microsoft#25144)" (microsoft#25145)
  chore: screener-run workflow should report to PR (microsoft#25144)
  applying package updates
  fix: The Tooltip should not hide if it gets keyboard focus (microsoft#25138)
  fix: Tooltip should not hide if an element inside it gets focused (microsoft#25140)
  Create react-migration-v8-v9 with shims and stories (microsoft#25121)
  fix: CheckboxField to set a generated ID on the input, to match the label's htmlFor (microsoft#25079)
  feat: Overflow menu should be registered in overflowManager (microsoft#25091)
  fix: version-bump generator removes beachball disallowedChangeType config (microsoft#25130)
  fix: new overflow items should only be enqueued while observing (microsoft#25122)
  fix(script): allow runPublished call from CLI (microsoft#25127)
  feat: add vertical variation for toolbar (microsoft#24940)
  ProgressField implementation and stories (microsoft#25103)
  fix: Dropdown icon layout with no placeholder/value (microsoft#25049)
  chore: add a bundle size fixture (Button, Provider & theme) (microsoft#25113)
  feat: Adding subtle transition between states on Button components (microsoft#25106)
  Revert "chore: screener-run workflow should report to PR (microsoft#25096)" (microsoft#25115)
  chore: screener-run workflow should report to PR (microsoft#25096)
  fix(react-dialog): aria-* properties should be reassignable (microsoft#25092)
  fix(scripts): don't run publish if web-components are affected (microsoft#25095)
  ...
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
@GeoffCoxMSFT @khmakoto @NotWoods
Create react-migration-v8-v9 with shims and stories (microsoft#25121)
821f620 
* Move button and stack stories into migration shim component

* Update packages/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-migration-v8-v9/src/components/Button/ButtonShim.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-migration-v8-v9/src/components/Button/CompoundButtonShim.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-migration-v8-v9/src/components/Button/DefaultButtonShim.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-migration-v8-v9/src/stories/ActionButtonShim/index.stories.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-migration-v8-v9/src/stories/CommandButtonShim/index.stories.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-migration-v8-v9/src/stories/MenuButtonShim/index.stories.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-migration-v8-v9/src/stories/ToggleButtonShim/index.stories.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-migration-v8-v9/src/stories/Stack/index.stories.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Improved readme

* Update packages/react-migration-v8-v9/src/components/Button/MenuButtonShim.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Apply suggestions from code review

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Apply suggestions from code review

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Apply suggestions from code review

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-migration-v8-v9/src/components/Theme/themeDuplicates.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Fix typo from committed suggestion

* PR build fixes

* trying to fix in ci build

* Fixing types path for api extraction

* Fixed lint issues with imports

* More lint fixes

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@micahgodbolt micahgodbolt micahgodbolt approved these changes

@khmakoto khmakoto khmakoto approved these changes

@JustSlone JustSlone JustSlone approved these changes

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar jurokapsiar is a code owner

Assignees

@GeoffCoxMSFT GeoffCoxMSFT

Labels

None yet

Projects

None yet

Milestone

October Project Cycle Q4 2022

Development

Successfully merging this pull request may close these issues.

5 participants

@GeoffCoxMSFT @fabricteam @micahgodbolt @khmakoto @JustSlone