Add shims to migration #25024

GeoffCoxMSFT · 2022-09-29T22:19:34Z

Changes

moved shims into their migration packages
updated public-docsite-v9 to use migration packages

PR Notes

This is a big PR, but is almost all mechanical file moves with the rest being created through create-component.

Issues

Updates #24957

fabricteam · 2022-09-29T22:27:54Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-divider` Divider	`16.459 kB` `5.902 kB`
`react-image` Image	`10.78 kB` `4.264 kB`
`react-label` Label	`9.338 kB` `3.86 kB`
`react-positioning` usePositioning	`19.7 kB` `7.404 kB`
`react-progress` Progress	`13.44 kB` `5.247 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-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against cbf3f6457b933224b76fc281cfa9e827085055d1}

codesandbox-ci · 2022-09-29T22:31:15Z

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

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

size-auditor · 2022-09-29T22:32:11Z

Asset size changes

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

Baseline commit: cbf3f6457b933224b76fc281cfa9e827085055d1 (build)

fabricteam · 2022-09-29T22:34:42Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1314	1315	5000
Button	mount	936	944	5000
FluentProvider	mount	1584	1558	5000
FluentProviderWithTheme	mount	631	631	10
FluentProviderWithTheme	virtual-rerender	591	599	10
FluentProviderWithTheme	virtual-rerender-with-unmount	624	629	10
MakeStyles	mount	1913	1877	50000
SpinButton	mount	2516	2526	5000

fabricteam · 2022-09-29T22:40:48Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AlertMinimalPerf.default	299	252	1.19:1
FlexMinimalPerf.default	298	263	1.13:1
LabelMinimalPerf.default	395	360	1.1:1
PortalMinimalPerf.default	176	160	1.1:1
RefMinimalPerf.default	225	207	1.09:1
ImageMinimalPerf.default	404	373	1.08:1
TextMinimalPerf.default	355	329	1.08:1
ChatMinimalPerf.default	759	707	1.07:1
RadioGroupMinimalPerf.default	445	416	1.07:1
SkeletonMinimalPerf.default	340	321	1.06:1
TreeMinimalPerf.default	836	785	1.06:1
GridMinimalPerf.default	335	318	1.05:1
ItemLayoutMinimalPerf.default	1193	1139	1.05:1
LayoutMinimalPerf.default	357	340	1.05:1
AccordionMinimalPerf.default	139	134	1.04:1
DropdownManyItemsPerf.default	657	629	1.04:1
ProviderMinimalPerf.default	408	392	1.04:1
SliderMinimalPerf.default	1623	1556	1.04:1
TextAreaMinimalPerf.default	466	449	1.04:1
AvatarMinimalPerf.default	189	183	1.03:1
BoxMinimalPerf.default	355	345	1.03:1
DialogMinimalPerf.default	767	748	1.03:1
EmbedMinimalPerf.default	3725	3621	1.03:1
FormMinimalPerf.default	361	351	1.03:1
ListMinimalPerf.default	516	499	1.03:1
ReactionMinimalPerf.default	375	365	1.03:1
SplitButtonMinimalPerf.default	4430	4289	1.03:1
AnimationMinimalPerf.default	546	537	1.02:1
AttachmentSlotsPerf.default	1078	1062	1.02:1
ButtonMinimalPerf.default	159	156	1.02:1
ButtonOverridesMissPerf.default	1326	1298	1.02:1
CheckboxMinimalPerf.default	2097	2055	1.02:1
DropdownMinimalPerf.default	2687	2673	1.01:1
InputMinimalPerf.default	1121	1114	1.01:1
PopupMinimalPerf.default	654	645	1.01:1
TooltipMinimalPerf.default	2405	2391	1.01:1
TreeWith60ListItems.default	161	159	1.01:1
VideoMinimalPerf.default	698	689	1.01:1
ProviderMergeThemesPerf.default	1277	1283	1:1
TableManyItemsPerf.default	1908	1900	1:1
DatepickerMinimalPerf.default	5789	5831	0.99:1
TableMinimalPerf.default	379	381	0.99:1
HeaderMinimalPerf.default	332	338	0.98:1
ListNestedPerf.default	529	539	0.98:1
MenuButtonMinimalPerf.default	1709	1745	0.98:1
AttachmentMinimalPerf.default	143	147	0.97:1
ButtonSlotsPerf.default	563	581	0.97:1
ChatWithPopoverPerf.default	343	353	0.97:1
RosterPerf.default	2110	2167	0.97:1
DividerMinimalPerf.default	352	369	0.95:1
HeaderSlotsPerf.default	717	752	0.95:1
ChatDuplicateMessagesPerf.default	259	277	0.94:1
CustomToolbarPrototype.default	2701	2868	0.94:1
ListCommonPerf.default	602	646	0.93:1
ListWith60ListItems.default	597	645	0.93:1
MenuMinimalPerf.default	817	875	0.93:1
IconMinimalPerf.default	629	675	0.93:1
ToolbarMinimalPerf.default	877	943	0.93:1
CardMinimalPerf.default	500	543	0.92:1
SegmentMinimalPerf.default	325	359	0.91:1
StatusMinimalPerf.default	651	717	0.91:1
LoaderMinimalPerf.default	649	722	0.9:1
CarouselMinimalPerf.default	444	500	0.89:1

fabricteam · 2022-09-29T23:05:17Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1179	1200	5000
Breadcrumb	mount	2803	2786	1000
Checkbox	mount	2620	2648	5000
CheckboxBase	mount	2360	2361	5000
ChoiceGroup	mount	4221	4265	5000
ComboBox	mount	1166	1168	1000
CommandBar	mount	9147	9227	1000
ContextualMenu	mount	10313	10299	1000
DefaultButton	mount	1356	1364	5000
DetailsRow	mount	3364	3359	5000
DetailsRowFast	mount	3370	3375	5000
DetailsRowNoStyles	mount	3213	3254	5000
Dialog	mount	2954	2959	1000
DocumentCardTitle	mount	582	588	1000
Dropdown	mount	3137	3171	5000
FocusTrapZone	mount	1972	1942	5000
FocusZone	mount	1939	1966	5000
GroupedList	mount	48158	53144	2
GroupedList	virtual-rerender	22846	23142	2
GroupedList	virtual-rerender-with-unmount	82475	81453	2
GroupedListV2	mount	561	559	2
GroupedListV2	virtual-rerender	528	531	2
GroupedListV2	virtual-rerender-with-unmount	569	566	2
IconButton	mount	1793	1804	5000
Label	mount	749	757	5000
Layer	mount	4124	4103	5000
Link	mount	850	856	5000
MenuButton	mount	1601	1616	5000
MessageBar	mount	2354	2344	5000
Nav	mount	3098	3345	1000
OverflowSet	mount	1394	1432	5000
Panel	mount	2501	2476	1000
Persona	mount	1244	1217	1000
Pivot	mount	1539	1520	1000
PrimaryButton	mount	1490	1494	5000
Rating	mount	6990	6979	5000
SearchBox	mount	1523	1483	5000
Shimmer	mount	2875	2892	5000
Slider	mount	2131	2129	5000
SpinButton	mount	4221	4335	5000
Spinner	mount	817	828	5000
SplitButton	mount	2843	2842	5000
Stack	mount	892	905	5000
StackWithIntrinsicChildren	mount	2255	2255	5000
StackWithTextChildren	mount	4889	4924	5000
SwatchColorPicker	mount	9448	9488	5000
TagPicker	mount	2355	2331	5000
TeachingBubble	mount	81908	79211	5000
Text	mount	836	812	5000
TextField	mount	1569	1565	5000
ThemeProvider	mount	1429	1457	5000
ThemeProvider	virtual-rerender	1143	1131	5000
ThemeProvider	virtual-rerender-with-unmount	1998	2008	5000
Toggle	mount	1143	1117	5000
buttonNative	mount	535	543	5000

* add ID to calendar types and pass to root div * change file * api update * Update change/@fluentui-react-170d6594-4aee-4504-8885-b70ae2901269.json Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]>

…t also the label (microsoft#25025) * fix: Making the hidden input on Radio only cover the indicator and not also the label. * Updating to latest patterns. * Adding change file. * Addressing PR feedback * Addressing PR feedback. Co-authored-by: KHMakoto <[email protected]>

…crosoft#24979) * feat(react-dialog): `as="div"` by default * feat: completely remove native dialog support

…icrosoft#25018) * Use the default cursor (not pointer) on the label when the checkbox is disabled * Simplify the styles controlling the padding between the checkbox and label

* Added top-level export of IconNamesInput to match v7 * yarn change

…crosoft#25026) * Use the default cursor (not pointer) on the label when the Switch is disabled * Simplify the styles controlling the padding between the Switch and label

* Progress scaffold & implementation * Update state styling and stories * update dependencies * remove dup script from package.json * Add appearance props and update styling * api update * add test to disabled conformance test array * Add testOptions * Add size styling and stories * api update * Apply suggestions from code review Co-authored-by: Esteban Munoz Facusse <[email protected]> * react-label version update * Update styling and package.json * api update * fix dependency mismatch * Apply suggestions from code review Co-authored-by: Makoto Morimoto <[email protected]> * Remove progressState file * remove random spinbutton change * fix dependency mismatch * Add slots and update styling * Update styling and add new slots * add specificity to determinate style * fix positioning * remove unused file * api update * Apply suggestions from code review Co-authored-by: Ben Howell <[email protected]> * Apply changes from code review * Clean up stories * Update snapshot * api update * Apply suggestions from code review Co-authored-by: Ben Howell <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> * Remove animation from examples and cleanup * cleanup * revert README.md * update snapshot * revert README.md * Fix stories * api update Co-authored-by: Esteban Munoz Facusse <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Ben Howell <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]>

…or (microsoft#25033) * feat(tools): add exports map support to migrate-converged-pkg generator * refactor(react-components): normalize relative import for unstable package.json

* Add custom date time formatter * Add change file

…pdate all actions to use the new action (microsoft#24910) Update .github/actions/build-to/action.yml Co-authored-by: Martin Hochel <[email protected]> Co-authored-by: Martin Hochel <[email protected]>

…SFT/fluentui into add-shims-to-migration

GeoffCoxMSFT · 2022-10-03T17:02:09Z

This branch is fubar due to diverging branches. I have to redo the branch and the PR.

GeoffCoxMSFT added 2 commits September 29, 2022 14:55

Moved shim code to shim packages

9506f4a

Updated docsite with new shim location

265f058

GeoffCoxMSFT self-assigned this Sep 29, 2022

GeoffCoxMSFT requested review from a team as code owners September 29, 2022 22:19

GeoffCoxMSFT requested review from micahgodbolt and spmonahan September 29, 2022 22:19

github-actions bot added this to the September Project Cycle Q1 2022 milestone Sep 29, 2022

khmakoto approved these changes Sep 29, 2022

View reviewed changes

micahgodbolt and others added 2 commits September 29, 2022 16:12

spmonahan approved these changes Sep 30, 2022

View reviewed changes

Fluent UI Build and others added 11 commits September 30, 2022 07:38

applying package updates

36287e1

chore: adds VR tests for Dialog components (microsoft#24978)

5eb849d

feat(react-dialog): removes DialogSurface native dialog support (mi…

da8a1d4

…crosoft#24979) * feat(react-dialog): `as="div"` by default * feat: completely remove native dialog support

react-18-tests-v8: Add type-checking again (microsoft#24856)

d14f81c

fix: Checkbox's label shouldn't have a pointer cursor when disabled (m…

d821905

…icrosoft#25018) * Use the default cursor (not pointer) on the label when the checkbox is disabled * Simplify the styles controlling the padding between the checkbox and label

Fix syncpack issues

d3a524e

Add export icon names input v8 (microsoft#24957)

6112cd7

* Added top-level export of IconNamesInput to match v7 * yarn change

fix: Switch's label shouldn't have a pointer cursor when disabled (mi…

6a60b17

…crosoft#25026) * Use the default cursor (not pointer) on the label when the Switch is disabled * Simplify the styles controlling the padding between the Switch and label

fixing syncpack issue

390d84c

docs(react-persona): Adding migration guide (microsoft#25022)

86b3133

GeoffCoxMSFT requested review from a team, Jacqueline-ms and hyoshis as code owners October 3, 2022 16:40

msft-fluent-ui-bot added the PR: API Modified label Oct 3, 2022

github-actions bot modified the milestones: September Project Cycle Q1 2022, October Project Cycle Q4 2022 Oct 3, 2022

tomi-msft and others added 10 commits October 3, 2022 09:47

docs(react-persona): Adding migration guide (microsoft#25022)

570bccb

applying package updates

007d199

chore: enable object-shorthand in ESLint (microsoft#25031)

3a57a47

feat(tools): add exports map support to migrate-converged-pkg generat…

8d9e7a8

…or (microsoft#25033) * feat(tools): add exports map support to migrate-converged-pkg generator * refactor(react-components): normalize relative import for unstable package.json

Add custom date time formatter for date axis (microsoft#25040)

b7b2f2b

* Add custom date time formatter * Add change file

feat(cicd): add reusable build action, enable remote build caching, u…

9b5d135

…pdate all actions to use the new action (microsoft#24910) Update .github/actions/build-to/action.yml Co-authored-by: Martin Hochel <[email protected]> Co-authored-by: Martin Hochel <[email protected]>

Fixed a prop name in doc (microsoft#25037)

283b052

Fixed a minor typo: immmediately => immediately (microsoft#25036)

2e2c0c0

applying package updates

1c8e5d6

GeoffCoxMSFT requested a review from tomi-msft as a code owner October 3, 2022 16:47

GeoffCoxMSFT and others added 7 commits October 3, 2022 09:52

Moved shim code to shim packages

84976fa

Updated docsite with new shim location

703b0a8

Fix syncpack issues

e8b3f4e

fixing syncpack issue

7a40f7d

applying package updates

5eb057d

applying package updates

2772df8

Merge branch 'add-shims-to-migration' of https://github.com/GeoffCoxM…

d4a0577

…SFT/fluentui into add-shims-to-migration

GeoffCoxMSFT closed this Oct 3, 2022

GeoffCoxMSFT mentioned this pull request Oct 3, 2022

Added shims to shim packages #25048

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add shims to migration #25024

Add shims to migration #25024

Uh oh!

GeoffCoxMSFT commented Sep 29, 2022

Uh oh!

fabricteam commented Sep 29, 2022 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Sep 29, 2022 •

edited

Loading

Uh oh!

size-auditor bot commented Sep 29, 2022 •

edited

Loading

Uh oh!

fabricteam commented Sep 29, 2022 •

edited

Loading

Uh oh!

fabricteam commented Sep 29, 2022 •

edited

Loading

Uh oh!

fabricteam commented Sep 29, 2022 •

edited

Loading

Uh oh!

GeoffCoxMSFT commented Oct 3, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

16 participants

Add shims to migration #25024

Add shims to migration #25024

Uh oh!

Conversation

GeoffCoxMSFT commented Sep 29, 2022

Changes

PR Notes

Issues

Uh oh!

fabricteam commented Sep 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci bot commented Sep 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Sep 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Sep 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Sep 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Sep 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

GeoffCoxMSFT commented Oct 3, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

16 participants

fabricteam commented Sep 29, 2022 •

edited

Loading

codesandbox-ci bot commented Sep 29, 2022 •

edited

Loading

size-auditor bot commented Sep 29, 2022 •

edited

Loading

fabricteam commented Sep 29, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

fabricteam commented Sep 29, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Sep 29, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)