People picker prototype #30306

ling1726 · 2024-01-12T18:03:45Z

Prototypes #26652

codesandbox-ci · 2024-01-15T09:04:56Z

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.

fabricteam · 2024-01-31T20:19:12Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `328 B`
`global-context` createContextSelector	`537 B` `339 B`
`keyboard-key` keyboard-key package	`3.746 kB` `1.928 kB`
`priority-overflow` createOverflowManager	`4.447 kB` `1.853 kB`
`react-accordion` Accordion (including children components)	`100.12 kB` `30.422 kB`
`react-alert` Alert	`83.737 kB` `23.474 kB`
`react-avatar` Avatar	`50.175 kB` `15.944 kB`
`react-avatar` AvatarGroup	`19.704 kB` `7.796 kB`
`react-avatar` AvatarGroupItem	`64.831 kB` `20.274 kB`
`react-badge` Badge	`26.905 kB` `8.729 kB`
`react-badge` CounterBadge	`27.806 kB` `9.024 kB`
`react-badge` PresenceBadge	`25.311 kB` `9.306 kB`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`115.465 kB` `31.832 kB`
`react-button` Button	`39.513 kB` `11.169 kB`
`react-button` CompoundButton	`46.874 kB` `12.661 kB`
`react-button` MenuButton	`44.292 kB` `12.542 kB`
`react-button` SplitButton	`52.306 kB` `14.134 kB`
`react-button` ToggleButton	`56.559 kB` `13.068 kB`
`react-calendar-compat` Calendar Compat	`152.067 kB` `39.826 kB`
`react-card` Card - All	`101.55 kB` `28.92 kB`
`react-card` Card	`96.373 kB` `27.403 kB`
`react-card` CardFooter	`13.064 kB` `5.385 kB`
`react-card` CardHeader	`15.307 kB` `6.143 kB`
`react-card` CardPreview	`14.015 kB` `5.752 kB`
`react-checkbox` Checkbox	`35.65 kB` `12.076 kB`
`react-combobox` Combobox (including child components)	`102.446 kB` `33.094 kB`
`react-combobox` Dropdown (including child components)	`103.825 kB` `33.037 kB`
`react-datepicker-compat` DatePicker Compat	`224.513 kB` `62.955 kB`
`react-dialog` Dialog (including children components)	`100.923 kB` `29.928 kB`
`react-divider` Divider	`20.82 kB` `7.763 kB`
`react-field` Field	`22.544 kB` `8.61 kB`
`react-image` Image	`15.745 kB` `6.23 kB`
`react-infobutton` InfoButton	`138.69 kB` `43.394 kB`
`react-infobutton` InfoLabel	`142.491 kB` `44.625 kB`
`react-input` Input	`26.887 kB` `9.118 kB`
`react-jsx-runtime` Classic Pragma	`1.057 kB` `530 B`
`react-jsx-runtime` JSX Dev Runtime	`3.783 kB` `1.648 kB`
`react-jsx-runtime` JSX Runtime	`4.377 kB` `1.881 kB`
`react-label` Label	`14.266 kB` `5.828 kB`
`react-link` Link	`17.082 kB` `6.911 kB`
`react-menu` Menu (including children components)	`149.422 kB` `45.506 kB`
`react-menu` Menu (including selectable components)	`152.108 kB` `46.016 kB`
`react-message-bar` MessageBar (all components)	`25.566 kB` `9.131 kB`
`react-overflow` hooks only	`12.862 kB` `4.827 kB`
`react-persona` Persona	`57.066 kB` `17.821 kB`
`react-popover` Popover	`126.88 kB` `39.806 kB`
`react-portal` Portal	`13.629 kB` `4.875 kB`
`react-positioning` usePositioning	`26.398 kB` `9.539 kB`
`react-progress` ProgressBar	`17.428 kB` `6.898 kB`
`react-provider` FluentProvider	`23.751 kB` `8.66 kB`
`react-radio` Radio	`32.946 kB` `10.252 kB`
`react-radio` RadioGroup	`15.354 kB` `6.265 kB`
`react-select` Select	`28.609 kB` `10.205 kB`
`react-slider` Slider	`39.943 kB` `12.969 kB`
`react-spinbutton` SpinButton	`36.774 kB` `11.788 kB`
`react-spinner` Spinner	`23.517 kB` `8.512 kB`
`react-switch` Switch	`35.134 kB` `11.198 kB`
`react-tags` InteractionTag	`15.259 kB` `6.058 kB`
`react-tags` Tag	`29.982 kB` `9.439 kB`
`react-tags` TagGroup	`80.55 kB` `24.027 kB`
`react-text` Text - Default	`16.705 kB` `6.569 kB`
`react-text` Text - Wrappers	`19.878 kB` `6.896 kB`
`react-textarea` Textarea	`30.947 kB` `10.476 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`34.616 kB` `7.317 kB`
`react-theme` Teams: Light theme	`19.287 kB` `5.498 kB`
`react-timepicker-compat` TimePicker	`104.476 kB` `34.491 kB`
`react-toast` Toast (including Toaster)	`100.192 kB` `29.763 kB`
`react-tooltip` Tooltip	`54.576 kB` `19.192 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against 1d236248a86181bdcb3a8bbbf60949b02f923d03}

fabricteam · 2024-01-31T20:21:57Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	640	605	5000
Button	mount	299	295	5000
Field	mount	1166	1144	5000
FluentProvider	mount	688	713	5000
FluentProviderWithTheme	mount	82	79	10
FluentProviderWithTheme	virtual-rerender	62	65	10
FluentProviderWithTheme	virtual-rerender-with-unmount	71	78	10
MakeStyles	mount	834	870	50000
Persona	mount	1750	1750	5000
SpinButton	mount	1381	1378	5000

fabricteam · 2024-01-31T20:25:34Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2024-02-19T18:10:04Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
RefMinimalPerf.default	120	107	1.12:1
AccordionMinimalPerf.default	89	80	1.11:1
AttachmentMinimalPerf.default	89	80	1.11:1
HeaderMinimalPerf.default	224	202	1.11:1
TreeWith60ListItems.default	91	82	1.11:1
ChatDuplicateMessagesPerf.default	169	153	1.1:1
AlertMinimalPerf.default	162	152	1.07:1
FlexMinimalPerf.default	162	151	1.07:1
TextAreaMinimalPerf.default	304	284	1.07:1
RadioGroupMinimalPerf.default	261	247	1.06:1
TableMinimalPerf.default	236	222	1.06:1
FormMinimalPerf.default	227	216	1.05:1
GridMinimalPerf.default	195	185	1.05:1
ItemLayoutMinimalPerf.default	739	707	1.05:1
MenuMinimalPerf.default	519	493	1.05:1
AnimationMinimalPerf.default	305	292	1.04:1
ButtonSlotsPerf.default	315	304	1.04:1
DividerMinimalPerf.default	221	213	1.04:1
ListMinimalPerf.default	316	304	1.04:1
ListNestedPerf.default	338	326	1.04:1
BoxMinimalPerf.default	197	191	1.03:1
ChatMinimalPerf.default	442	431	1.03:1
ProviderMinimalPerf.default	202	197	1.03:1
ReactionMinimalPerf.default	209	203	1.03:1
AvatarMinimalPerf.default	111	109	1.02:1
ButtonOverridesMissPerf.default	669	658	1.02:1
CheckboxMinimalPerf.default	1195	1175	1.02:1
DatepickerMinimalPerf.default	3668	3606	1.02:1
DialogMinimalPerf.default	455	448	1.02:1
DropdownMinimalPerf.default	1467	1445	1.02:1
InputMinimalPerf.default	549	539	1.02:1
LabelMinimalPerf.default	223	219	1.02:1
TableManyItemsPerf.default	1138	1116	1.02:1
TextMinimalPerf.default	198	194	1.02:1
ToolbarMinimalPerf.default	540	530	1.02:1
TreeMinimalPerf.default	487	479	1.02:1
ButtonMinimalPerf.default	93	92	1.01:1
EmbedMinimalPerf.default	1919	1905	1.01:1
ImageMinimalPerf.default	225	222	1.01:1
SegmentMinimalPerf.default	195	194	1.01:1
SliderMinimalPerf.default	781	774	1.01:1
CustomToolbarPrototype.default	1494	1476	1.01:1
VideoMinimalPerf.default	436	431	1.01:1
AttachmentSlotsPerf.default	665	667	1:1
DropdownManyItemsPerf.default	392	391	1:1
MenuButtonMinimalPerf.default	950	954	1:1
PortalMinimalPerf.default	86	86	1:1
ProviderMergeThemesPerf.default	630	629	1:1
SkeletonMinimalPerf.default	198	198	1:1
SplitButtonMinimalPerf.default	2273	2274	1:1
StatusMinimalPerf.default	396	397	1:1
IconMinimalPerf.default	398	399	1:1
CardMinimalPerf.default	305	307	0.99:1
RosterPerf.default	1532	1550	0.99:1
TooltipMinimalPerf.default	1273	1281	0.99:1
CarouselMinimalPerf.default	256	262	0.98:1
ListWith60ListItems.default	366	374	0.98:1
LoaderMinimalPerf.default	189	193	0.98:1
PopupMinimalPerf.default	353	360	0.98:1
HeaderSlotsPerf.default	472	488	0.97:1
ChatWithPopoverPerf.default	187	194	0.96:1
ListCommonPerf.default	377	392	0.96:1
LayoutMinimalPerf.default	191	202	0.95:1

fabricteam · 2024-02-19T18:19:26Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2024-02-19T18:20:51Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	632	611	5000
Breadcrumb	mount	1672	1690	1000
Checkbox	mount	1686	1687	5000
CheckboxBase	mount	1472	1463	5000
ChoiceGroup	mount	3010	2987	5000
ComboBox	mount	643	657	1000
CommandBar	mount	6226	6202	1000
ContextualMenu	mount	12026	12049	1000
DefaultButton	mount	758	747	5000
DetailsRow	mount	2192	2180	5000
DetailsRowFast	mount	2173	2141	5000
DetailsRowNoStyles	mount	2058	2011	5000
Dialog	mount	2837	2633	1000
DocumentCardTitle	mount	228	208	1000
Dropdown	mount	1964	1968	5000
FocusTrapZone	mount	1145	1141	5000
FocusZone	mount	1067	1104	5000
GroupedList	mount	41388	41454	2
GroupedList	virtual-rerender	19982	19913	2
GroupedList	virtual-rerender-with-unmount	50567	50540	2
GroupedListV2	mount	234	228	2
GroupedListV2	virtual-rerender	217	195	2
GroupedListV2	virtual-rerender-with-unmount	222	231	2
IconButton	mount	1086	1071	5000
Label	mount	339	332	5000
Layer	mount	2690	2717	5000
Link	mount	388	384	5000
MenuButton	mount	962	939	5000
MessageBar	mount	21510	21692	5000
Nav	mount	1977	1943	1000
OverflowSet	mount	769	772	5000
Panel	mount	2044	1768	1000
Persona	mount	747	765	1000
Pivot	mount	874	850	1000
PrimaryButton	mount	852	856	5000
Rating	mount	4601	4538	5000
SearchBox	mount	911	909	5000
Shimmer	mount	1888	1801	5000
Slider	mount	1299	1300	5000
SpinButton	mount	2812	2908	5000
Spinner	mount	380	385	5000
SplitButton	mount	1823	1845	5000
Stack	mount	421	410	5000
StackWithIntrinsicChildren	mount	840	837	5000
StackWithTextChildren	mount	2576	2566	5000
SwatchColorPicker	mount	6072	6117	5000
TagPicker	mount	1452	1469	5000
Text	mount	388	366	5000
TextField	mount	931	912	5000
ThemeProvider	mount	830	836	5000
ThemeProvider	virtual-rerender	581	568	5000
ThemeProvider	virtual-rerender-with-unmount	1259	1250	5000
Toggle	mount	621	603	5000
buttonNative	mount	198	188	5000

fabricteam · 2024-02-21T10:59:09Z

🕵 FluentUIV0 No visual regressions between this PR and main

layershifter · 2024-08-13T13:57:18Z

Closing for housekeeping 🏡 Feel free to re-open

github-actions bot added this to the January Project Cycle Q1 2024 milestone Jan 12, 2024

feat: activedescendant works with vanilla JS

5d451c9

ling1726 force-pushed the react-combobox/feat/active-descendant-vanilla branch from 680a423 to 5d451c9 Compare January 12, 2024 18:43

ling1726 added 3 commits January 15, 2024 09:51

fix dropdown matching option cycling

46d34c9

change to startFrom

ef847c4

fix focus visible

3d3da7f

ling1726 added 3 commits January 15, 2024 14:23

cleanup keyhandling

8628d94

fully decouple combobox context

d4d975d

merge conflict

3d143d0

ling1726 and others added 2 commits February 1, 2024 10:55

fixup

653ad30

abstract useListboxContext

590b419

github-actions bot modified the milestones: January Project Cycle Q1 2024, February Project Cycle Q1 2024 Feb 10, 2024

ling1726 added 5 commits February 10, 2024 18:36

add export

9aaf03c

update listbox

5d573b1

update dropdown

3956a52

api file changes

c7eeded

picker preview

3257086

ling1726 changed the title ~~feat: activedescendant works with vanilla JS~~ People picker prototype Feb 12, 2024

position icon correctly

0ad8650

gouttierre mentioned this pull request Feb 16, 2024

TagPicker #26652

Closed

46 tasks

ling1726 and others added 3 commits February 16, 2024 18:37

implement button variant

64ff098

prototype for filtering

41d1c2b

merge master

988a6c7

ling1726 added 2 commits February 21, 2024 10:40

merge master

88be662

revert package.json

f4c20ca

This was referenced Feb 29, 2024

feat(react-tag-picker-preview): initial implementation #30659

Merged

feat(react-aria): active descendants imperative handle to toggle attribute visibility #30716

Merged

layershifter closed this Aug 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

People picker prototype #30306

People picker prototype #30306

ling1726 commented Jan 12, 2024 •

edited

Loading

codesandbox-ci bot commented Jan 15, 2024 •

edited

Loading

fabricteam commented Jan 31, 2024 •

edited

Loading

fabricteam commented Jan 31, 2024 •

edited

Loading

fabricteam commented Jan 31, 2024 •

edited

Loading

fabricteam commented Feb 19, 2024 •

edited

Loading

fabricteam commented Feb 19, 2024 •

edited

Loading

fabricteam commented Feb 19, 2024 •

edited

Loading

fabricteam commented Feb 21, 2024

layershifter commented Aug 13, 2024

People picker prototype #30306

People picker prototype #30306

Conversation

ling1726 commented Jan 12, 2024 • edited Loading

codesandbox-ci bot commented Jan 15, 2024 • edited Loading

fabricteam commented Jan 31, 2024 • edited Loading

📊 Bundle size report

fabricteam commented Jan 31, 2024 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Jan 31, 2024 • edited Loading

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam commented Feb 19, 2024 • edited Loading

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Feb 19, 2024 • edited Loading

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam commented Feb 19, 2024 • edited Loading

Perf Analysis (@fluentui/react)

fabricteam commented Feb 21, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

layershifter commented Aug 13, 2024

ling1726 commented Jan 12, 2024 •

edited

Loading

codesandbox-ci bot commented Jan 15, 2024 •

edited

Loading

fabricteam commented Jan 31, 2024 •

edited

Loading

fabricteam commented Jan 31, 2024 •

edited

Loading

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

fabricteam commented Jan 31, 2024 •

edited

Loading

fabricteam commented Feb 19, 2024 •

edited

Loading

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

fabricteam commented Feb 19, 2024 •

edited

Loading

fabricteam commented Feb 19, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)