chore(react-tags): Scaffold react-tags package by TristanWatanabe · Pull Request #26002 · microsoft/fluentui

TristanWatanabe · 2022-12-14T22:28:45Z

Changes:

react-tags package created using yarn create-package script. Initial Tag component scaffold and Spec PRs will follow.

Related Issue(s)

Part of Tag #26001

fabricteam · 2022-12-14T22:36:29Z

📊 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.294 kB` `24.443 kB`
`react-alert` Alert	`84.15 kB` `21.28 kB`
`react-avatar` Avatar	`51.083 kB` `14.289 kB`
`react-avatar` AvatarGroup	`15.006 kB` `6.009 kB`
`react-avatar` AvatarGroupItem	`67.313 kB` `18.585 kB`
`react-badge` Badge	`23.357 kB` `7.361 kB`
`react-badge` CounterBadge	`24.247 kB` `7.643 kB`
`react-badge` PresenceBadge	`24.001 kB` `7.049 kB`
`react-button` Button	`32.923 kB` `8.61 kB`
`react-button` CompoundButton	`39.953 kB` `9.933 kB`
`react-button` MenuButton	`37.611 kB` `9.942 kB`
`react-button` SplitButton	`45.057 kB` `11.323 kB`
`react-button` ToggleButton	`48.753 kB` `10.715 kB`
`react-card` Card - All	`77.541 kB` `22.325 kB`
`react-card` Card	`72.485 kB` `20.913 kB`
`react-card` CardFooter	`8.617 kB` `3.62 kB`
`react-card` CardHeader	`10.382 kB` `4.258 kB`
`react-card` CardPreview	`9.424 kB` `3.97 kB`
`react-checkbox` Checkbox	`28.65 kB` `9.09 kB`
`react-combobox` Combobox (including child components)	`78.629 kB` `25.167 kB`
`react-combobox` Dropdown (including child components)	`77.876 kB` `25.104 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`59.381 kB` `16.465 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`187.067 kB` `52.466 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.843 kB` `11.129 kB`
`react-dialog` Dialog (including children components)	`83.036 kB` `24.754 kB`
`react-divider` Divider	`16.515 kB` `5.921 kB`
`react-image` Image	`10.836 kB` `4.283 kB`
`react-infobutton` InfoButton	`118.298 kB` `35.438 kB`
`react-input` Input	`24.194 kB` `7.89 kB`
`react-label` Label	`9.394 kB` `3.88 kB`
`react-link` Link	`11.862 kB` `4.885 kB`
`react-menu` Menu (including children components)	`117.794 kB` `36.361 kB`
`react-menu` Menu (including selectable components)	`120.863 kB` `36.895 kB`
`react-overflow` hooks only	`11.004 kB` `4.188 kB`
`react-persona` Persona	`57.12 kB` `15.945 kB`
`react-popover` Popover	`104.042 kB` `32.021 kB`
`react-portal` Portal	`10.495 kB` `3.851 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-positioning` usePositioning	`19.868 kB` `7.432 kB`
`react-progress` ProgressBar	`13.155 kB` `5.048 kB`
`react-provider` FluentProvider	`15.91 kB` `5.931 kB`
`react-radio` Radio	`31.827 kB` `10.316 kB`
`react-radio` RadioGroup	`14.304 kB` `5.72 kB`
`react-select` Select	`23.474 kB` `8.017 kB`
`react-slider` Slider	`32.091 kB` `10.183 kB`
`react-spinbutton` SpinButton	`44.502 kB` `12.812 kB`
`react-spinner` Spinner	`20.013 kB` `6.446 kB`
`react-switch` Switch	`33.427 kB` `10.581 kB`
`react-text` Text - Default	`11.838 kB` `4.625 kB`
`react-text` Text - Wrappers	`15.148 kB` `5.06 kB`
`react-textarea` Textarea	`25.733 kB` `8.328 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`30.908 kB` `6.714 kB`
`react-theme` Teams: Light theme	`17.776 kB` `5.141 kB`
`react-tooltip` Tooltip	`42.074 kB` `14.752 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against f5c7d5e1dc54c7d9eeca66208fbb2d9f617c2a9b}

size-auditor · 2022-12-14T22:41:02Z

Asset size changes

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

Baseline commit: f5c7d5e1dc54c7d9eeca66208fbb2d9f617c2a9b (build)

fabricteam · 2022-12-14T22:43:41Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1279	1295	5000
Button	mount	918	910	5000
FluentProvider	mount	1514	1513	5000
FluentProviderWithTheme	mount	586	576	10
FluentProviderWithTheme	virtual-rerender	539	534	10
FluentProviderWithTheme	virtual-rerender-with-unmount	570	588	10
MakeStyles	mount	1960	1940	50000
Persona	mount	2785	2786	5000
SpinButton	mount	2366	2338	5000

codesandbox-ci · 2022-12-14T22:44:14Z

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 1e5a299:

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

fabricteam · 2022-12-14T22:46:45Z

🕵 fluentuiv8 Open the Visual Regressions report to inspect the 2 screenshots

✅ There was 0 screenshots added, 2 screenshots removed, 1043 screenshots unchanged, 0 screenshots with different dimensions and 0 screenshots with visible difference.

unknown 2 screenshots

Image Name	Diff(in Pixels)	Image Type
Pivot - Overflow.Root.Narrow - Last tab selected.chromium.png	0	Removed
Pivot - Overflow.Root.Narrow - Overflow menu.chromium.png	0	Removed

fabricteam · 2022-12-14T22:50:12Z

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

⚠️ No perf measurements available

fabricteam · 2022-12-14T22:51:36Z

🕵 fluentuiv9 Open the Visual Regressions report to inspect the 1 screenshots

✅ There was 0 screenshots added, 0 screenshots removed, 1759 screenshots unchanged, 0 screenshots with different dimensions and 1 screenshots with visible difference.

unknown 1 screenshots

Image Name	Diff(in Pixels)	Image Type
Avatar Converged.size+inactive+badge.normal.chromium.png	1	Changed

fabricteam · 2022-12-14T22:57:02Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1407	1379	5000
Breadcrumb	mount	3522	3721	1000
Checkbox	mount	3130	3138	5000
CheckboxBase	mount	2840	2833	5000
ChoiceGroup	mount	5244	5311	5000
ComboBox	mount	1536	1504	1000
CommandBar	mount	11485	11429	1000
ContextualMenu	mount	12880	13031	1000
DefaultButton	mount	1644	1623	5000
DetailsRow	mount	4298	4310	5000
DetailsRowFast	mount	4338	4293	5000
DetailsRowNoStyles	mount	4273	4012	5000
Dialog	mount	3656	3671	1000
DocumentCardTitle	mount	691	684	1000
Dropdown	mount	3860	3911	5000
FocusTrapZone	mount	2448	2424	5000
FocusZone	mount	2383	2316	5000
GroupedList	mount	2259	2589	2
GroupedList	virtual-rerender	1349	1361	2
GroupedList	virtual-rerender-with-unmount	1964	2004	2
GroupedListV2	mount	664	685	2
GroupedListV2	virtual-rerender	640	659	2
GroupedListV2	virtual-rerender-with-unmount	667	689	2
IconButton	mount	2311	2344	5000
Label	mount	876	859	5000
Layer	mount	5212	5126	5000
Link	mount	985	993	5000
MenuButton	mount	1958	2014	5000
MessageBar	mount	2792	2686	5000
Nav	mount	4004	3829	1000
OverflowSet	mount	1634	1624	5000
Panel	mount	3002	3017	1000
Persona	mount	1532	1532	1000
Pivot	mount	1927	1918	1000
PrimaryButton	mount	1808	1844	5000
Rating	mount	8147	8366	5000
SearchBox	mount	1797	1808	5000
Shimmer	mount	3425	3405	5000
Slider	mount	2554	2508	5000
SpinButton	mount	5586	5570	5000
Spinner	mount	956	962	5000
SplitButton	mount	3666	3667	5000
Stack	mount	964	980	5000
StackWithIntrinsicChildren	mount	2793	2776	5000
StackWithTextChildren	mount	5846	5699	5000
SwatchColorPicker	mount	12304	12362	5000
TagPicker	mount	3334	3052	5000
TeachingBubble	mount	101766	102539	5000
Text	mount	932	948	5000
TextField	mount	1895	1900	5000
ThemeProvider	mount	1861	1838	5000
ThemeProvider	virtual-rerender	1282	1290	5000
ThemeProvider	virtual-rerender-with-unmount	2484	2580	5000
Toggle	mount	1336	1294	5000
buttonNative	mount	666	658	5000

fabricteam · 2022-12-14T23:00:32Z

🕵 FluentUI-v0 No visual regressions between this PR and main

TristanWatanabe added 2 commits December 14, 2022 16:48

chore: scaffold react-tags package

403b32c

chore: Update API file

08bfb45

TristanWatanabe requested a review from a team as a code owner December 14, 2022 22:28

TristanWatanabe self-assigned this Dec 14, 2022

TristanWatanabe requested review from JustSlone and jurokapsiar as code owners December 14, 2022 22:28

github-actions bot added this to the October Project Cycle Q4 2022 milestone Dec 14, 2022

JustSlone approved these changes Dec 14, 2022

View reviewed changes

TristanWatanabe mentioned this pull request Dec 14, 2022

Tag #26001

Closed

28 tasks

micahgodbolt approved these changes Dec 20, 2022

View reviewed changes

TristanWatanabe added 2 commits December 20, 2022 14:01

Merge branch 'master' into scaffold-react-tags

2bff106

fix: dependency mismatch

1e5a299

khmakoto approved these changes Dec 20, 2022

View reviewed changes

TristanWatanabe merged commit e49b13e into microsoft:master Dec 20, 2022

TristanWatanabe deleted the scaffold-react-tags branch December 20, 2022 20:39

Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023

chore(react-tags): Scaffold react-tags package (microsoft#26002)

cb33d29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(react-tags): Scaffold react-tags package#26002

chore(react-tags): Scaffold react-tags package#26002
TristanWatanabe merged 4 commits intomicrosoft:masterfrom
TristanWatanabe:scaffold-react-tags

TristanWatanabe commented Dec 14, 2022

Uh oh!

fabricteam commented Dec 14, 2022 •

edited

Loading

Uh oh!

size-auditor bot commented Dec 14, 2022 •

edited

Loading

Uh oh!

fabricteam commented Dec 14, 2022 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Dec 14, 2022 •

edited

Loading

Uh oh!

fabricteam commented Dec 14, 2022 •

edited

Loading

Uh oh!

fabricteam commented Dec 14, 2022

Uh oh!

fabricteam commented Dec 14, 2022 •

edited

Loading

Uh oh!

fabricteam commented Dec 14, 2022 •

edited

Loading

Uh oh!

fabricteam commented Dec 14, 2022 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

TristanWatanabe commented Dec 14, 2022

Changes:

Related Issue(s)

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

🕵 fluentuiv8 Open the Visual Regressions report to inspect the 2 screenshots

Uh oh!

fabricteam commented Dec 14, 2022

Perf Analysis (@fluentui/react-northstar)

Uh oh!

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

Uh oh!

🕵 fluentuiv9 Open the Visual Regressions report to inspect the 1 screenshots

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

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

Uh oh!

🕵 FluentUI-v0 No visual regressions between this PR and main

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

fabricteam commented Dec 14, 2022 •

edited

Loading

size-auditor bot commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

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

codesandbox-ci bot commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

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

fabricteam commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Dec 14, 2022 •

edited

Loading