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

feat: adds select and related styles #16021

Merged
merged 18 commits into from
Nov 21, 2020
Merged

feat: adds select and related styles #16021

merged 18 commits into from
Nov 21, 2020

Conversation

eljefe223
Copy link
Contributor

@eljefe223 eljefe223 commented Nov 20, 2020 •
edited
Loading

Pull request checklist

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

image

Description of changes

Adds fluent-select fluent-listbox and fluent-option

Focus areas to test

(optional)

eljefe223 and others added 10 commits September 17, 2020 15:03
@msft-github-bot
Copy link
Contributor

msft-github-bot commented Nov 20, 2020 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 929 932 5000
BaseButtonCompat mount 980 951 5000
Breadcrumb mount 45835 45275 5000
Checkbox mount 1653 1649 5000
CheckboxBase mount 1406 1394 5000
ChoiceGroup mount 5143 5247 5000
ComboBox mount 1045 1047 1000
CommandBar mount 10905 10747 1000
ContextualMenu mount 6800 6805 1000
DefaultButtonCompat mount 1234 1237 5000
DetailsRow mount 4081 3890 5000
DetailsRowFast mount 4007 4066 5000
DetailsRowNoStyles mount 3939 3852 5000
Dialog mount 1585 1630 1000
DocumentCardTitle mount 1953 1888 1000
Dropdown mount 3653 3618 5000
FocusTrapZone mount 1919 1900 5000
FocusZone mount 1980 1976 5000
IconButtonCompat mount 2014 2010 5000
Label mount 357 379 5000
Layer mount 1957 2006 5000
Link mount 521 502 5000
MenuButtonCompat mount 1650 1701 5000
MessageBar mount 2168 2197 5000
Nav mount 3605 3578 1000
OverflowSet mount 1113 1117 5000
Panel mount 1592 1563 1000
Persona mount 957 950 1000
Pivot mount 1530 1510 1000
PrimaryButtonCompat mount 1426 1457 5000
Rating mount 8557 8490 5000
SearchBox mount 1523 1496 5000
Shimmer mount 2827 2832 5000
Slider mount 2115 2080 5000
SpinButton mount 5538 5697 5000
Spinner mount 463 459 5000
SplitButtonCompat mount 3579 3531 5000
Stack mount 555 532 5000
StackWithIntrinsicChildren mount 1755 1756 5000
StackWithTextChildren mount 5137 5097 5000
SwatchColorPicker mount 11295 11355 5000
Tabs mount 1551 1577 1000
TagPicker mount 3067 3110 5000
TeachingBubble mount 12366 12339 5000
Text mount 470 473 5000
TextField mount 1539 1580 5000
ThemeProvider mount 2144 2149 5000
ThemeProvider virtual-rerender 685 687 5000
Toggle mount 871 900 5000
button mount 712 722 5000
buttonNative mount 122 117 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.49 0.54 0.91:1 2000 978
🦄 Button.Fluent 0.13 0.26 0.5:1 5000 669
🔧 Checkbox.Fluent 0.71 0.37 1.92:1 1000 713
🎯 Dialog.Fluent 0.18 0.23 0.78:1 5000 899
🔧 Dropdown.Fluent 3.16 0.44 7.18:1 1000 3159
🔧 Icon.Fluent 0.18 0.07 2.57:1 5000 875
🎯 Image.Fluent 0.1 0.14 0.71:1 5000 476
🔧 Slider.Fluent 1.69 0.48 3.52:1 1000 1694
🔧 Text.Fluent 0.08 0.04 2:1 5000 399
🦄 Tooltip.Fluent 0.12 0.95 0.13:1 5000 620

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
SkeletonMinimalPerf.default 521 479 1.09:1
LabelMinimalPerf.default 522 485 1.08:1
AvatarMinimalPerf.default 548 511 1.07:1
GridMinimalPerf.default 448 420 1.07:1
ListNestedPerf.default 653 618 1.06:1
AttachmentMinimalPerf.default 183 175 1.05:1
LayoutMinimalPerf.default 484 462 1.05:1
ListMinimalPerf.default 571 545 1.05:1
PortalMinimalPerf.default 176 167 1.05:1
AlertMinimalPerf.default 372 359 1.04:1
ChatDuplicateMessagesPerf.default 465 448 1.04:1
ChatMinimalPerf.default 742 714 1.04:1
CheckboxMinimalPerf.default 3178 3070 1.04:1
ListCommonPerf.default 761 734 1.04:1
SegmentMinimalPerf.default 439 422 1.04:1
TableMinimalPerf.default 499 479 1.04:1
TextAreaMinimalPerf.default 590 570 1.04:1
HeaderMinimalPerf.default 441 429 1.03:1
HeaderSlotsPerf.default 910 884 1.03:1
MenuMinimalPerf.default 988 956 1.03:1
IconMinimalPerf.default 785 763 1.03:1
VideoMinimalPerf.default 739 720 1.03:1
Checkbox.Fluent 713 690 1.03:1
AnimationMinimalPerf.default 492 480 1.02:1
AttachmentSlotsPerf.default 1288 1262 1.02:1
BoxMinimalPerf.default 446 439 1.02:1
ButtonOverridesMissPerf.default 1872 1832 1.02:1
ButtonUseCssPerf.default 939 919 1.02:1
ButtonUseCssNestingPerf.default 1183 1163 1.02:1
CarouselMinimalPerf.default 529 519 1.02:1
ChatWithPopoverPerf.default 542 532 1.02:1
RadioGroupMinimalPerf.default 522 511 1.02:1
ReactionMinimalPerf.default 494 482 1.02:1
RefMinimalPerf.default 257 252 1.02:1
SplitButtonMinimalPerf.default 4208 4129 1.02:1
StatusMinimalPerf.default 859 841 1.02:1
TableManyItemsPerf.default 2563 2504 1.02:1
TooltipMinimalPerf.default 928 911 1.02:1
TreeMinimalPerf.default 1043 1024 1.02:1
Icon.Fluent 875 856 1.02:1
Image.Fluent 476 466 1.02:1
FlexMinimalPerf.default 351 347 1.01:1
MenuButtonMinimalPerf.default 1788 1762 1.01:1
TextMinimalPerf.default 424 419 1.01:1
Slider.Fluent 1694 1669 1.01:1
DialogMinimalPerf.default 907 907 1:1
DividerMinimalPerf.default 437 435 1:1
DropdownMinimalPerf.default 3115 3123 1:1
EmbedMinimalPerf.default 4460 4465 1:1
InputMinimalPerf.default 1395 1400 1:1
ProviderMergeThemesPerf.default 2203 2196 1:1
TreeWith60ListItems.default 230 231 1:1
Button.Fluent 669 670 1:1
Dialog.Fluent 899 901 1:1
Dropdown.Fluent 3159 3169 1:1
AccordionMinimalPerf.default 184 185 0.99:1
DatepickerMinimalPerf.default 51628 52012 0.99:1
FormMinimalPerf.default 504 507 0.99:1
ToolbarMinimalPerf.default 1104 1116 0.99:1
DropdownManyItemsPerf.default 823 837 0.98:1
ImageMinimalPerf.default 453 462 0.98:1
ItemLayoutMinimalPerf.default 1470 1498 0.98:1
ListWith60ListItems.default 1013 1034 0.98:1
LoaderMinimalPerf.default 803 820 0.98:1
ProviderMinimalPerf.default 1115 1132 0.98:1
CustomToolbarPrototype.default 4186 4250 0.98:1
Avatar.Fluent 978 1003 0.98:1
Tooltip.Fluent 620 631 0.98:1
ButtonMinimalPerf.default 207 214 0.97:1
CardMinimalPerf.default 636 658 0.97:1
PopupMinimalPerf.default 743 763 0.97:1
SliderMinimalPerf.default 1647 1703 0.97:1
ButtonSlotsPerf.default 650 680 0.96:1
Text.Fluent 399 427 0.93:1

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 20, 2020 •
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 c03fef7:

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

@size-auditor
Copy link

size-auditor bot commented Nov 20, 2020 •
edited
Loading

Asset size changes

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

Baseline commit: b3be4d7dfb1392d5b315bb728bb24df8fb500271 (build)

@chrisdholt chrisdholt assigned chrisdholt and unassigned behowell Nov 20, 2020
chrisdholt
chrisdholt reviewed Nov 20, 2020
View reviewed changes
Copy link
Member

@chrisdholt chrisdholt left a comment

Choose a reason for hiding this comment

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

Thanks @eljefe223! It looks like a couple things are missing here:

  1. We need to export these from the root of the package
  2. We need to run the API report

Can you make those changes?

@scomea
Copy link

scomea commented Nov 20, 2020

Did a smoke. Saw some issues in high-contrast with no visible focus while tabbing through the trigger elements and options grayed out in the menu:
image

@eljefe223
Copy link
Contributor Author

Did a smoke. Saw some issues in high-contrast with no visible focus while tabbing through the trigger elements and options grayed out in the menu:
image

Got it, no way for me to test HC, maybe @khamudom can make a suggestion here?

@scomea
Copy link

scomea commented Nov 21, 2020

smoked again, looks good.

@chrisdholt chrisdholt merged commit 66916ee into microsoft:master Nov 21, 2020
@msft-github-bot
Copy link
Contributor

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

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@khamudom khamudom khamudom approved these changes

@chrisdholt chrisdholt chrisdholt approved these changes

@scomea scomea scomea approved these changes

@radium-v radium-v radium-v approved these changes

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
7 participants
@eljefe223 @msft-github-bot @scomea @radium-v @chrisdholt @khamudom @behowell