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.

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

[web-components] add combobox as a new component, add filled style for select #17307

Conversation

chrisdholt
Copy link
Member

@chrisdholt chrisdholt commented Mar 6, 2021

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

This PR adds a new component for "combobox". This change required including filled appearances for select as well in order to implement the appearance as well for combobox.

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 6, 2021

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 f4f8b4c:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@size-auditor
Copy link

size-auditor bot commented Mar 6, 2021

Asset size changes

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

Baseline commit: a8552af0ad666f77e2ba8a3aa3768611d6fed3a5 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 6, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1179 1193 5000
BaseButton mount 946 979 5000
Breadcrumb mount 41091 41148 5000
ButtonNext mount 1283 1321 5000
Checkbox mount 1530 1534 5000
CheckboxBase mount 1307 1314 5000
ChoiceGroup mount 4854 4897 5000
ComboBox mount 967 954 1000
CommandBar mount 9910 9982 1000
ContextualMenu mount 5952 5892 1000
DefaultButton mount 1164 1180 5000
DetailsRow mount 3661 3689 5000
DetailsRowFast mount 3668 3722 5000
DetailsRowNoStyles mount 3492 3470 5000
Dialog mount 1481 1503 1000
DocumentCardTitle mount 1756 1750 1000
Dropdown mount 3365 3337 5000
FocusTrapZone mount 1775 1782 5000
FocusZone mount 1793 1744 5000
IconButton mount 1823 1816 5000
Label mount 342 312 5000
Layer mount 1787 1787 5000
Link mount 477 475 5000
MakeStyles mount 1943 1920 50000
MenuButton mount 1525 1544 5000
MessageBar mount 2038 1946 5000
Nav mount 3366 3256 1000
OverflowSet mount 1031 1009 5000
Panel mount 1393 1445 1000
Persona mount 834 811 1000
Pivot mount 1454 1418 1000
PrimaryButton mount 1292 1298 5000
Rating mount 7780 7751 5000
SearchBox mount 1316 1390 5000
Shimmer mount 2654 2676 5000
Slider mount 1962 1969 5000
SpinButton mount 5064 5034 5000
Spinner mount 424 406 5000
SplitButton mount 3196 3206 5000
Stack mount 513 518 5000
StackWithIntrinsicChildren mount 1524 1554 5000
StackWithTextChildren mount 4737 4610 5000
SwatchColorPicker mount 10617 10579 5000
Tabs mount 1459 1444 1000
TagPicker mount 2956 2936 5000
TeachingBubble mount 11879 11823 5000
Text mount 445 422 5000
TextField mount 1444 1437 5000
ThemeProvider mount 1206 1201 5000
ThemeProvider virtual-rerender 582 602 5000
ThemeProviderNext mount 15647 15524 5000
Toggle mount 857 845 5000
buttonNative mount 113 105 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.48 0.38:1 2000 361
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 634
🔧 Checkbox.Fluent 0.66 0.34 1.94:1 1000 661
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 828
🔧 Dropdown.Fluent 3.05 0.4 7.62:1 1000 3046
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 698
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 452
🔧 Slider.Fluent 1.54 0.47 3.28:1 1000 1544
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 398
🦄 Tooltip.Fluent 0.11 0.9 0.12:1 5000 574

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 177 162 1.09:1
AttachmentMinimalPerf.default 184 170 1.08:1
Image.Fluent 452 422 1.07:1
CardMinimalPerf.default 649 614 1.06:1
HeaderMinimalPerf.default 428 405 1.06:1
StatusMinimalPerf.default 815 768 1.06:1
FormMinimalPerf.default 480 457 1.05:1
ListCommonPerf.default 719 684 1.05:1
SkeletonMinimalPerf.default 428 408 1.05:1
Avatar.Fluent 361 344 1.05:1
AvatarMinimalPerf.default 225 216 1.04:1
HeaderSlotsPerf.default 899 865 1.04:1
IconMinimalPerf.default 742 711 1.04:1
VideoMinimalPerf.default 684 656 1.04:1
ItemLayoutMinimalPerf.default 1343 1304 1.03:1
ListMinimalPerf.default 557 540 1.03:1
MenuMinimalPerf.default 959 932 1.03:1
PopupMinimalPerf.default 739 717 1.03:1
TextMinimalPerf.default 401 389 1.03:1
TreeWith60ListItems.default 193 187 1.03:1
Checkbox.Fluent 661 641 1.03:1
Tooltip.Fluent 574 557 1.03:1
ButtonUseCssPerf.default 856 842 1.02:1
CarouselMinimalPerf.default 540 528 1.02:1
ImageMinimalPerf.default 447 439 1.02:1
SegmentMinimalPerf.default 410 401 1.02:1
TableMinimalPerf.default 458 450 1.02:1
TextAreaMinimalPerf.default 562 550 1.02:1
ToolbarMinimalPerf.default 1041 1021 1.02:1
TooltipMinimalPerf.default 852 833 1.02:1
Dropdown.Fluent 3046 3000 1.02:1
AttachmentSlotsPerf.default 1278 1269 1.01:1
ButtonSlotsPerf.default 613 608 1.01:1
ChatMinimalPerf.default 672 664 1.01:1
GridMinimalPerf.default 391 389 1.01:1
ReactionMinimalPerf.default 436 433 1.01:1
TableManyItemsPerf.default 2220 2192 1.01:1
CustomToolbarPrototype.default 3681 3658 1.01:1
AnimationMinimalPerf.default 437 439 1:1
ButtonMinimalPerf.default 200 201 1:1
ButtonUseCssNestingPerf.default 1110 1111 1:1
DatepickerMinimalPerf.default 47609 47683 1:1
DialogMinimalPerf.default 831 830 1:1
DropdownMinimalPerf.default 3030 3034 1:1
EmbedMinimalPerf.default 4338 4335 1:1
LabelMinimalPerf.default 469 471 1:1
LoaderMinimalPerf.default 737 737 1:1
MenuButtonMinimalPerf.default 1681 1677 1:1
RadioGroupMinimalPerf.default 490 492 1:1
SplitButtonMinimalPerf.default 3930 3941 1:1
Button.Fluent 634 637 1:1
BoxMinimalPerf.default 409 413 0.99:1
ChatWithPopoverPerf.default 461 465 0.99:1
CheckboxMinimalPerf.default 2886 2906 0.99:1
DropdownManyItemsPerf.default 761 768 0.99:1
FlexMinimalPerf.default 329 334 0.99:1
InputMinimalPerf.default 1310 1317 0.99:1
ProviderMergeThemesPerf.default 1572 1588 0.99:1
ProviderMinimalPerf.default 926 935 0.99:1
Icon.Fluent 698 707 0.99:1
Slider.Fluent 1544 1565 0.99:1
AlertMinimalPerf.default 325 333 0.98:1
ButtonOverridesMissPerf.default 1665 1695 0.98:1
ChatDuplicateMessagesPerf.default 383 391 0.98:1
DividerMinimalPerf.default 411 418 0.98:1
ListNestedPerf.default 623 634 0.98:1
RefMinimalPerf.default 229 233 0.98:1
SliderMinimalPerf.default 1537 1572 0.98:1
TreeMinimalPerf.default 830 851 0.98:1
Text.Fluent 398 407 0.98:1
AccordionMinimalPerf.default 172 178 0.97:1
ListWith60ListItems.default 654 676 0.97:1
Dialog.Fluent 828 850 0.97:1
RosterPerf.default 1224 1292 0.95:1
LayoutMinimalPerf.default 441 474 0.93:1

@chrisdholt chrisdholt changed the title [web-components] add combobox as a new component [web-components] add combobox as a new component, add filled style for select Mar 6, 2021
@chrisdholt chrisdholt force-pushed the users/chhol/add-combobox-as-new-web-component branch from 08faa12 to 5028146 Compare March 6, 2021 23:03
Copy link

@scomea scomea left a comment

Choose a reason for hiding this comment

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

Smoked, looks good.

@chrisdholt chrisdholt merged commit 7e0fcf3 into microsoft:master Mar 7, 2021
@chrisdholt chrisdholt deleted the users/chhol/add-combobox-as-new-web-component branch March 7, 2021 20:31
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/web-components@v0.15.0 has been released which incorporates this pull request.:tada:

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
…r select (microsoft#17307)

* add combobox as a new web component

* Change files

* add filled apeparance

* update api report and export combobox from root
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
…r select (microsoft#17307)

* add combobox as a new web component

* Change files

* add filled apeparance

* update api report and export combobox from root
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants