Export react-search to unstable #28467

emmayjiang · 2023-07-07T22:01:33Z

This PR exports react-search to unstable, as part of #26648.

codesandbox-ci · 2023-07-07T22:20:42Z

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

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

fabricteam · 2023-07-07T22:22:06Z

🕵 fluentuiv8 No visual regressions between this PR and main

size-auditor · 2023-07-07T22:24:37Z

Asset size changes

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

Baseline commit: c10400fdaf7ff1beef85051ce38b2c6c52b4e2e2 (build)

fabricteam · 2023-07-07T22:24:49Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`priority-overflow` createOverflowManager	`4.248 kB` `1.671 kB`
`react-accordion` Accordion (including children components)	`88.26 kB` `26.718 kB`
`react-alert` Alert	`82.565 kB` `21.726 kB`
`react-avatar` Avatar	`47.713 kB` `14.513 kB`
`react-avatar` AvatarGroup	`15.695 kB` `6.314 kB`
`react-avatar` AvatarGroupItem	`63.889 kB` `18.993 kB`
`react-badge` Badge	`23.604 kB` `7.272 kB`
`react-badge` CounterBadge	`24.506 kB` `7.574 kB`
`react-badge` PresenceBadge	`22.227 kB` `7.881 kB`
`react-button` Button	`36.792 kB` `9.472 kB`
`react-button` CompoundButton	`43.946 kB` `10.952 kB`
`react-button` MenuButton	`40.978 kB` `10.669 kB`
`react-button` SplitButton	`49.211 kB` `12.232 kB`
`react-button` ToggleButton	`55.074 kB` `11.368 kB`
`react-card` Card - All	`89.33 kB` `25.271 kB`
`react-card` Card	`83.778 kB` `23.685 kB`
`react-card` CardFooter	`9.24 kB` `3.907 kB`
`react-card` CardHeader	`11.622 kB` `4.729 kB`
`react-card` CardPreview	`10.048 kB` `4.254 kB`
`react-checkbox` Checkbox	`33.198 kB` `10.718 kB`
`react-combobox` Combobox (including child components)	`87.173 kB` `28.125 kB`
`react-combobox` Dropdown (including child components)	`85.576 kB` `27.723 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`65.175 kB` `17.915 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`210.68 kB` `58.781 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.409 kB` `12.003 kB`
`react-datepicker-compat` DatePicker Compat	`223.368 kB` `59.265 kB`
`react-dialog` Dialog (including children components)	`92.736 kB` `27.579 kB`
`react-divider` Divider	`17.49 kB` `6.364 kB`
`react-field` Field	`18.148 kB` `6.97 kB`
`react-image` Image	`11.561 kB` `4.637 kB`
`react-infobutton` InfoButton	`131.335 kB` `40.311 kB`
`react-infobutton` InfoLabel	`134.799 kB` `41.376 kB`
`react-input` Input	`24.232 kB` `7.781 kB`
`react-label` Label	`10.186 kB` `4.253 kB`
`react-link` Link	`12.782 kB` `5.247 kB`
`react-menu` Menu (including children components)	`132.673 kB` `40.613 kB`
`react-menu` Menu (including selectable components)	`135.437 kB` `41.106 kB`
`react-overflow` hooks only	`12.505 kB` `4.626 kB`
`react-persona` Persona	`55.267 kB` `16.525 kB`
`react-popover` Popover	`119.925 kB` `36.895 kB`
`react-portal` Portal	`11.935 kB` `4.421 kB`
`react-portal-compat` PortalCompatProvider	`6.473 kB` `2.196 kB`
`react-positioning` usePositioning	`24.272 kB` `8.866 kB`
`react-progress` ProgressBar	`13.941 kB` `5.498 kB`
`react-provider` FluentProvider	`18.129 kB` `6.73 kB`
`react-radio` Radio	`26.991 kB` `8.626 kB`
`react-radio` RadioGroup	`11.376 kB` `4.763 kB`
`react-select` Select	`24.929 kB` `8.713 kB`
`react-slider` Slider	`34.87 kB` `11.178 kB`
`react-spinbutton` SpinButton	`33.73 kB` `10.337 kB`
`react-spinner` Spinner	`21.376 kB` `7.029 kB`
`react-switch` Switch	`29.485 kB` `9.228 kB`
`react-table` DataGrid	`158.282 kB` `43.276 kB`
`react-table` Table (Primitives only)	`44.666 kB` `12.442 kB`
`react-table` Table as DataGrid	`132.365 kB` `33.849 kB`
`react-table` Table (Selection only)	`77.993 kB` `19.245 kB`
`react-table` Table (Sort only)	`76.978 kB` `18.973 kB`
`react-tags` InteractionTag	`33.855 kB` `9.08 kB`
`react-tags` Tag	`25.936 kB` `8.483 kB`
`react-tags` TagGroup	`69.142 kB` `20.294 kB`
`react-text` Text - Default	`12.574 kB` `4.982 kB`
`react-text` Text - Wrappers	`15.726 kB` `5.302 kB`
`react-textarea` Textarea	`27.703 kB` `9.126 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.987 kB` `6.85 kB`
`react-theme` Teams: Light theme	`18.121 kB` `5.194 kB`
`react-toast` Toast (including Toaster)	`78.365 kB` `23.67 kB`
`react-tooltip` Tooltip	`47.463 kB` `16.655 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against c10400fdaf7ff1beef85051ce38b2c6c52b4e2e2}

fabricteam · 2023-07-07T22:28:42Z

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

fabricteam · 2023-07-07T22:30:51Z

🕵 fluentuiv9 No visual regressions between this PR and main

ling1726

Please follow the new release process - i.e. in this case publish a package called react-search-preview https://github.com/microsoft/fluentui/wiki/new-release-process---v9-packages#new-processlife-cycle-flow

FYI @Hotell

fabricteam · 2023-07-10T17:18:38Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	mount	75	78	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	68	67	10	Possible regression
InfoButton	mount	15	12	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	606	582	5000
Button	mount	294	307	5000
Field	mount	1058	1050	5000
FluentProvider	mount	654	635	5000
FluentProviderWithTheme	mount	75	78	10	Possible regression
FluentProviderWithTheme	virtual-rerender	61	68	10
FluentProviderWithTheme	virtual-rerender-with-unmount	68	67	10	Possible regression
InfoButton	mount	15	12	5000	Possible regression
MakeStyles	mount	855	848	50000
Persona	mount	1664	1602	5000
SpinButton	mount	1332	1313	5000

fabricteam · 2023-07-10T17:21:34Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
RefMinimalPerf.default	115	104	1.11:1
ListWith60ListItems.default	396	363	1.09:1
AccordionMinimalPerf.default	83	77	1.08:1
ImageMinimalPerf.default	241	223	1.08:1
PortalMinimalPerf.default	92	85	1.08:1
SplitButtonMinimalPerf.default	2348	2217	1.06:1
ButtonSlotsPerf.default	324	308	1.05:1
LabelMinimalPerf.default	223	213	1.05:1
TextAreaMinimalPerf.default	299	285	1.05:1
AttachmentSlotsPerf.default	662	637	1.04:1
ChatMinimalPerf.default	442	423	1.04:1
FlexMinimalPerf.default	149	143	1.04:1
FormMinimalPerf.default	230	221	1.04:1
HeaderMinimalPerf.default	209	201	1.04:1
HeaderSlotsPerf.default	486	474	1.03:1
SegmentMinimalPerf.default	201	195	1.03:1
SkeletonMinimalPerf.default	214	208	1.03:1
TextMinimalPerf.default	192	187	1.03:1
CustomToolbarPrototype.default	1505	1461	1.03:1
AnimationMinimalPerf.default	295	290	1.02:1
CardMinimalPerf.default	312	306	1.02:1
ChatDuplicateMessagesPerf.default	154	151	1.02:1
CheckboxMinimalPerf.default	1161	1138	1.02:1
ListNestedPerf.default	328	320	1.02:1
RosterPerf.default	1540	1509	1.02:1
TableManyItemsPerf.default	1130	1107	1.02:1
ChatWithPopoverPerf.default	200	198	1.01:1
DropdownManyItemsPerf.default	393	391	1.01:1
ItemLayoutMinimalPerf.default	706	696	1.01:1
MenuButtonMinimalPerf.default	966	953	1.01:1
TooltipMinimalPerf.default	1281	1271	1.01:1
DropdownMinimalPerf.default	1437	1437	1:1
EmbedMinimalPerf.default	1869	1865	1:1
InputMinimalPerf.default	536	535	1:1
LayoutMinimalPerf.default	201	202	1:1
ListMinimalPerf.default	311	311	1:1
ProviderMergeThemesPerf.default	664	664	1:1
IconMinimalPerf.default	377	376	1:1
ToolbarMinimalPerf.default	528	529	1:1
BoxMinimalPerf.default	195	196	0.99:1
ButtonOverridesMissPerf.default	651	658	0.99:1
CarouselMinimalPerf.default	256	259	0.99:1
DatepickerMinimalPerf.default	3631	3667	0.99:1
DividerMinimalPerf.default	212	214	0.99:1
SliderMinimalPerf.default	732	736	0.99:1
StatusMinimalPerf.default	386	388	0.99:1
TreeMinimalPerf.default	476	481	0.99:1
ButtonMinimalPerf.default	90	92	0.98:1
DialogMinimalPerf.default	450	459	0.98:1
GridMinimalPerf.default	187	191	0.98:1
PopupMinimalPerf.default	349	356	0.98:1
RadioGroupMinimalPerf.default	258	262	0.98:1
VideoMinimalPerf.default	426	435	0.98:1
AvatarMinimalPerf.default	104	107	0.97:1
ListCommonPerf.default	375	385	0.97:1
MenuMinimalPerf.default	482	499	0.97:1
ReactionMinimalPerf.default	204	211	0.97:1
TableMinimalPerf.default	226	233	0.97:1
ProviderMinimalPerf.default	203	214	0.95:1
AlertMinimalPerf.default	152	161	0.94:1
TreeWith60ListItems.default	78	83	0.94:1
LoaderMinimalPerf.default	175	190	0.92:1
AttachmentMinimalPerf.default	75	84	0.89:1

fabricteam · 2023-07-10T17:31:47Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	618	634	5000
Breadcrumb	mount	1662	1649	1000
Checkbox	mount	1654	1670	5000
CheckboxBase	mount	1505	1484	5000
ChoiceGroup	mount	2903	2898	5000
ComboBox	mount	642	636	1000
CommandBar	mount	6100	6186	1000
ContextualMenu	mount	11724	11742	1000
DefaultButton	mount	740	728	5000
DetailsRow	mount	2117	2139	5000
DetailsRowFast	mount	2160	2151	5000
DetailsRowNoStyles	mount	2003	1988	5000
Dialog	mount	2715	2739	1000
DocumentCardTitle	mount	223	227	1000
Dropdown	mount	1986	1919	5000
FocusTrapZone	mount	1096	1142	5000
FocusZone	mount	1029	1038	5000
GroupedList	mount	41097	40806	2
GroupedList	virtual-rerender	19836	19615	2
GroupedList	virtual-rerender-with-unmount	49927	50066	2
GroupedListV2	mount	223	223	2
GroupedListV2	virtual-rerender	209	205	2
GroupedListV2	virtual-rerender-with-unmount	218	226	2
IconButton	mount	1111	1062	5000
Label	mount	339	338	5000
Layer	mount	2696	2719	5000
Link	mount	380	384	5000
MenuButton	mount	925	926	5000
MessageBar	mount	21723	21366	5000
Nav	mount	1896	1906	1000
OverflowSet	mount	780	770	5000
Panel	mount	1775	1750	1000
Persona	mount	747	735	1000
Pivot	mount	870	872	1000
PrimaryButton	mount	850	820	5000
Rating	mount	4537	4524	5000
SearchBox	mount	906	880	5000
Shimmer	mount	1852	1838	5000
Slider	mount	1318	1298	5000
SpinButton	mount	2831	2836	5000
Spinner	mount	371	374	5000
SplitButton	mount	1787	1812	5000
Stack	mount	410	410	5000
StackWithIntrinsicChildren	mount	856	859	5000
StackWithTextChildren	mount	2572	2600	5000
SwatchColorPicker	mount	5986	6024	5000
TagPicker	mount	1394	1450	5000
Text	mount	362	366	5000
TextField	mount	963	1160	5000
ThemeProvider	mount	828	824	5000
ThemeProvider	virtual-rerender	583	594	5000
ThemeProvider	virtual-rerender-with-unmount	1291	1274	5000
Toggle	mount	605	607	5000
buttonNative	mount	198	191	5000

emmayjiang · 2023-07-10T20:00:55Z

#28474

GeoffCoxMSFT · 2023-07-10T20:27:02Z

apps/vr-tests-react-components/src/stories/SearchBox.stories.tsx

 import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
-import { SearchBox } from '@fluentui/react-search';
+import { SearchBox } from '@fluentui/react-search-preview';


I didn't think we changed the package name for preview. Rather we export it from the unstable part of react-components.

emmayjiang requested review from a team as code owners July 7, 2023 22:01

msft-fluent-ui-bot assigned behowell Jul 7, 2023

emmayjiang requested a review from a team as a code owner July 7, 2023 22:08

ling1726 suggested changes Jul 10, 2023

View reviewed changes

msft-fluent-ui-bot added the Needs: Author Feedback label Jul 10, 2023

emmayjiang requested review from a team, JustSlone, jurokapsiar and tudorpopams as code owners July 10, 2023 17:07

msft-fluent-ui-bot removed the Needs: Author Feedback label Jul 10, 2023

emmayjiang and others added 5 commits July 10, 2023 10:32

package update

178cb27

move to unstable

56a8743

update package ver

6484143

rename to react-search-preview

a2ed2d0

Update main.js

1d971e9

emmayjiang closed this Jul 10, 2023

GeoffCoxMSFT reviewed Jul 10, 2023

View reviewed changes

Export react-search to unstable #28467

Export react-search to unstable #28467

Uh oh!

Conversation

emmayjiang commented Jul 7, 2023

Uh oh!

codesandbox-ci bot commented Jul 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Jul 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

size-auditor bot commented Jul 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jul 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Jul 7, 2023 • 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!

fabricteam commented Jul 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

ling1726 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fabricteam commented Jul 10, 2023 • 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 Jul 10, 2023 • 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 Jul 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

emmayjiang commented Jul 10, 2023

Uh oh!

GeoffCoxMSFT Jul 10, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

codesandbox-ci bot commented Jul 7, 2023 •

edited

Loading

fabricteam commented Jul 7, 2023 •

edited

Loading

size-auditor bot commented Jul 7, 2023 •

edited

Loading

fabricteam commented Jul 7, 2023 •

edited

Loading

fabricteam commented Jul 7, 2023 •

edited

Loading

fabricteam commented Jul 7, 2023 •

edited

Loading

ling1726 left a comment •

edited

Loading

fabricteam commented Jul 10, 2023 •

edited

Loading

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

fabricteam commented Jul 10, 2023 •

edited

Loading

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

fabricteam commented Jul 10, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)