Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create react-select package #20944

Merged
merged 12 commits into from
Feb 10, 2022
Merged

Create react-select package #20944

merged 12 commits into from
Feb 10, 2022

Conversation

smhigley
Copy link
Contributor

@smhigley smhigley commented Dec 7, 2021

Pull request checklist

Description of changes

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

@smhigley smhigley requested a review from a team December 7, 2021 00:29
@smhigley smhigley requested review from jurokapsiar, JustSlone and a team as code owners December 7, 2021 00:29
@smhigley smhigley mentioned this pull request Dec 7, 2021
Merged
1 task
@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 7, 2021 •
edited
Loading

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
Copy link
Collaborator

fabricteam commented Dec 7, 2021 •
edited
Loading

📊 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
Copy link
Collaborator

fabricteam commented Dec 7, 2021 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
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
JustSlone approved these changes Dec 7, 2021
View reviewed changes
Copy link
Collaborator

@JustSlone JustSlone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving codeowners change

@smhigley smhigley mentioned this pull request Dec 10, 2021
Merged
2 tasks
@smhigley smhigley mentioned this pull request Dec 15, 2021
Merged
@smhigley smhigley mentioned this pull request Jan 3, 2022
Closed
4 tasks
layershifter
layershifter reviewed Jan 27, 2022
View reviewed changes
Copy link
Member

@layershifter layershifter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

packages/react-select/.babelrc.json Outdated Show resolved Hide resolved
packages/react-select/.storybook/tsconfig.json Outdated Show resolved Hide resolved
packages/react-select/jest.config.js Outdated Show resolved Hide resolved
packages/react-select/package.json Outdated Show resolved Hide resolved
packages/react-select/package.json Outdated Show resolved Hide resolved
packages/react-select/src/components/Select/renderSelect.tsx Outdated Show resolved Hide resolved
packages/react-select/src/components/Select/useSelect.ts Outdated Show resolved Hide resolved
packages/react-select/src/components/Select/useSelectStyles.ts Outdated Show resolved Hide resolved
packages/react-select/tsconfig.lib.json Outdated Show resolved Hide resolved
packages/react-select/tsconfig.spec.json Outdated Show resolved Hide resolved
@smhigley smhigley requested a review from layershifter February 9, 2022 07:09
@smhigley
Copy link
Contributor Author

smhigley commented Feb 9, 2022

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

@smhigley smhigley requested review from a team February 9, 2022 07:10
layershifter
layershifter approved these changes Feb 9, 2022
View reviewed changes
Copy link
Member

@layershifter layershifter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

packages/react-select/.babelrc.json Show resolved Hide resolved
@smhigley @layershifter
Update babelrc to use griffel
a0230d9 
Co-authored-by: Oleksandr Fediashov <[email protected]>
micahgodbolt
micahgodbolt reviewed Feb 9, 2022
View reviewed changes
packages/react-select/src/components/Select/Select.types.ts
* Controls the colors and borders of the Select.
* @default 'outline'
*/
appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
micahgodbolt reviewed Feb 9, 2022
View reviewed changes
Copy link
Member

@micahgodbolt micahgodbolt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few prop related questions, but everything else looks good

@smhigley
Copy link
Contributor Author

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@smhigley smhigley closed this Feb 10, 2022
@smhigley smhigley reopened this Feb 10, 2022
@smhigley smhigley merged commit 25540dd into microsoft:master Feb 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@micahgodbolt micahgodbolt micahgodbolt left review comments

@JustSlone JustSlone JustSlone approved these changes

@ling1726 ling1726 ling1726 approved these changes

@layershifter layershifter layershifter approved these changes

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar jurokapsiar is a code owner

Assignees

@layershifter layershifter

Labels
Component: Dropdown Fluent UI react-components (v9)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@smhigley @fabricteam @micahgodbolt @layershifter @ling1726 @JustSlone