Create react-select package by smhigley · Pull Request #20944 · microsoft/fluentui

smhigley · 2021-12-07T00:29:26Z

Pull request checklist

Addresses an existing issue: Project pitch: Select vNext component #20935
~~Include a change request file using $ yarn change~~ (not included, private package)

Description of changes

Adds a react-select package and basic component structure and stories. Does not include styles.

codesandbox-ci · 2021-12-07T00:36:59Z

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 9223b9d:

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

fabricteam · 2021-12-07T00:37:41Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-select` Select	`0 B` `0 B`	`7.716 kB` `3.24 kB`	🆕 New entry

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`54.905 kB` `17.567 kB`
`react-avatar` Avatar	`44.89 kB` `13.02 kB`
`react-badge` Badge	`20.831 kB` `6.533 kB`
`react-badge` CounterBadge	`21.699 kB` `6.827 kB`
`react-badge` PresenceBadge	`21.785 kB` `6.507 kB`
`react-button` Button	`27.932 kB` `8.025 kB`
`react-button` CompoundButton	`33.196 kB` `8.987 kB`
`react-button` MenuButton	`29.584 kB` `8.598 kB`
`react-button` SplitButton	`35.729 kB` `9.676 kB`
`react-button` ToggleButton	`37.209 kB` `8.627 kB`
`react-card` Card - All	`47.867 kB` `14.195 kB`
`react-card` Card	`43.56 kB` `13.004 kB`
`react-card` CardFooter	`7.615 kB` `3.23 kB`
`react-card` CardHeader	`8.893 kB` `3.675 kB`
`react-card` CardPreview	`7.588 kB` `3.255 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`165.744 kB` `46.848 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.479 kB` `10.625 kB`
`react-divider` Divider	`15.256 kB` `5.511 kB`
`react-image` Image	`10.067 kB` `3.934 kB`
`react-input` Input	`21.5 kB` `7.116 kB`
`react-label` Label	`8.303 kB` `3.472 kB`
`react-link` Link	`11.064 kB` `4.487 kB`
`react-menu` Menu (including children components)	`102.914 kB` `31.69 kB`
`react-menu` Menu (including selectable components)	`105.269 kB` `32.056 kB`
`react-popover` Popover	`95.841 kB` `29.229 kB`
`react-portal` Portal	`6.249 kB` `2.163 kB`
`react-positioning` usePopper	`22.828 kB` `7.951 kB`
`react-provider` FluentProvider	`13.962 kB` `5.231 kB`
`react-slider` Slider	`22.928 kB` `7.747 kB`
`react-spinner` Spinner	`6.773 kB` `2.879 kB`
`react-switch` Switch	`25.387 kB` `8.204 kB`
`react-text` Text - Default	`10.755 kB` `4.212 kB`
`react-text` Text - Wrappers	`14.067 kB` `4.558 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.426 kB` `6.551 kB`
`react-theme` Teams: Light theme	`18.42 kB` `5.27 kB`
`react-tooltip` Tooltip	`42.479 kB` `14.593 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 99a30a94f7c44064de9a20e26650aa609f4dc78d}

fabricteam · 2021-12-07T01:00:49Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	910	877	5000
BaseButton	mount	929	944	5000
Breadcrumb	mount	2681	2685	1000
ButtonNext	mount	480	489	5000
Checkbox	mount	1551	1588	5000
CheckboxBase	mount	1327	1308	5000
ChoiceGroup	mount	4988	4901	5000
ComboBox	mount	1064	1044	1000
CommandBar	mount	10504	10523	1000
ContextualMenu	mount	8741	8727	1000
DefaultButton	mount	1170	1177	5000
DetailsRow	mount	3913	3714	5000
DetailsRowFast	mount	3921	3822	5000
DetailsRowNoStyles	mount	3650	3671	5000
Dialog	mount	2306	2248	1000
DocumentCardTitle	mount	188	186	1000
Dropdown	mount	3243	3236	5000
FluentProviderNext	mount	1894	1889	5000
FluentProviderWithTheme	mount	174	168	10
FluentProviderWithTheme	virtual-rerender	115	121	10
FluentProviderWithTheme	virtual-rerender-with-unmount	220	212	10
FocusTrapZone	mount	1829	1901	5000
FocusZone	mount	1843	1857	5000
IconButton	mount	1813	1811	5000
Label	mount	377	393	5000
Layer	mount	3076	3089	5000
Link	mount	498	523	5000
MakeStyles	mount	1795	1713	50000
MenuButton	mount	1494	1510	5000
MessageBar	mount	2114	2103	5000
Nav	mount	3373	3358	1000
OverflowSet	mount	1191	1163	5000
Panel	mount	2181	2230	1000
Persona	mount	880	887	1000
Pivot	mount	1457	1492	1000
PrimaryButton	mount	1350	1339	5000
Rating	mount	7741	7780	5000
SearchBox	mount	1352	1378	5000
Shimmer	mount	2738	2599	5000
Slider	mount	2048	2036	5000
SpinButton	mount	5132	5040	5000
Spinner	mount	469	461	5000
SplitButton	mount	3206	3211	5000
Stack	mount	550	558	5000
StackWithIntrinsicChildren	mount	2350	2345	5000
StackWithTextChildren	mount	5382	5445	5000
SwatchColorPicker	mount	11582	11453	5000
TagPicker	mount	2655	2650	5000
TeachingBubble	mount	13417	13410	5000
Text	mount	457	484	5000
TextField	mount	1439	1448	5000
ThemeProvider	mount	1205	1220	5000
ThemeProvider	virtual-rerender	656	635	5000
ThemeProvider	virtual-rerender-with-unmount	1939	1934	5000
Toggle	mount	860	866	5000
buttonNative	mount	153	156	5000

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

⚠️ No perf measurements available

JustSlone

Approving codeowners change

layershifter

Please merge master, I also dropped comments, this should help to pass CI on this branch 🐱

smhigley · 2022-02-09T07:09:41Z

@layershifter thanks for the review! Everything you mentioned should be updated now -- I pulled in the latest master, and updated the outdated patterns :)

layershifter

One minor change, other than that we are good to go 👍

Co-authored-by: Oleksandr Fediashov <[email protected]>

micahgodbolt · 2022-02-09T18:14:17Z

+   * Controls the colors and borders of the Select.
+   * @default 'outline'
+   */
+  appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';


how does darker and lighter work with high contrast or dark themes? Is there a need for color specific appearances?

They don't affect high contrast, but there are designs in the Figma spec for them in dark theme :). The appearance prop and what it controls is pretty much the exact same as for Input.

just worried about a future where the design changes a bit and 'darker' is no longer 'darker'. Curious if there was a discussion on how we named those variants in our system? Obviously it seems that it's used a bunch across different components, so would want to ensure consistency across all of them.

micahgodbolt

Few prop related questions, but everything else looks good

smhigley · 2022-02-10T18:25:02Z

/azp run

azure-pipelines · 2022-02-10T18:25:28Z

Azure Pipelines successfully started running 3 pipeline(s).

smhigley added Component: Dropdown Fluent UI react-components (v9) labels Dec 7, 2021

smhigley requested a review from a team December 7, 2021 00:29

smhigley requested review from a team, JustSlone and jurokapsiar as code owners December 7, 2021 00:29

msft-fluent-ui-bot assigned layershifter Dec 7, 2021

smhigley mentioned this pull request Dec 7, 2021

Select spec #20564

Merged

1 task