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

fix (web components): add missing css selector for select indicator styles #16349

Conversation

SethDonohue
Copy link
Contributor

@SethDonohue SethDonohue commented Jan 4, 2021

Pull request checklist

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

Description of changes

Fix Select glyph sizing, missing css selector

@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 760 832 5000
BaseButtonCompat mount 894 858 5000
Breadcrumb mount 42529 42569 5000
Checkbox mount 1442 1483 5000
CheckboxBase mount 1211 1220 5000
ChoiceGroup mount 4641 4594 5000
ComboBox mount 919 916 1000
CommandBar mount 9702 9782 1000
ContextualMenu mount 5910 5893 1000
DefaultButtonCompat mount 1065 1086 5000
DetailsRow mount 3483 3597 5000
DetailsRowFast mount 3481 3471 5000
DetailsRowNoStyles mount 3327 3315 5000
Dialog mount 1400 1393 1000
DocumentCardTitle mount 1772 1733 1000
Dropdown mount 3198 3261 5000
FocusTrapZone mount 1733 1723 5000
FocusZone mount 1776 1814 5000
IconButtonCompat mount 1822 1682 5000
Label mount 330 333 5000
Layer mount 1705 1707 5000
Link mount 453 433 5000
MakeStyles mount 1935 1925 50000
MenuButtonCompat mount 1434 1473 5000
MessageBar mount 1938 1959 5000
Nav mount 3111 3167 1000
OverflowSet mount 1021 1026 5000
Panel mount 1410 1384 1000
Persona mount 823 808 1000
Pivot mount 1352 1346 1000
PrimaryButtonCompat mount 1233 1232 5000
Rating mount 7269 7272 5000
SearchBox mount 1247 1267 5000
Shimmer mount 2437 2545 5000
Slider mount 1827 1841 5000
SpinButton mount 4807 4867 5000
Spinner mount 396 414 5000
SplitButtonCompat mount 3065 3047 5000
Stack mount 478 484 5000
StackWithIntrinsicChildren mount 1480 1480 5000
StackWithTextChildren mount 4323 4346 5000
SwatchColorPicker mount 9936 9928 5000
Tabs mount 1363 1365 1000
TagPicker mount 2794 2740 5000
TeachingBubble mount 11446 11408 5000
Text mount 400 400 5000
TextField mount 1333 1348 5000
ThemeProvider mount 2084 2092 5000
ThemeProvider virtual-rerender 640 626 5000
Toggle mount 800 762 5000
button mount 642 618 5000
buttonNative mount 113 112 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.43 0.49 0.88:1 2000 867
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 549
🔧 Checkbox.Fluent 0.65 0.33 1.97:1 1000 653
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 794
🔧 Dropdown.Fluent 2.97 0.39 7.62:1 1000 2968
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 700
🦄 Image.Fluent 0.07 0.13 0.54:1 5000 373
🔧 Slider.Fluent 1.53 0.42 3.64:1 1000 1532
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 360
🦄 Tooltip.Fluent 0.11 0.87 0.13:1 5000 572

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 216 193 1.12:1
CardMinimalPerf.default 602 553 1.09:1
TextMinimalPerf.default 377 350 1.08:1
PortalMinimalPerf.default 176 164 1.07:1
AnimationMinimalPerf.default 416 394 1.06:1
ChatDuplicateMessagesPerf.default 434 408 1.06:1
FlexMinimalPerf.default 309 292 1.06:1
LabelMinimalPerf.default 430 405 1.06:1
ReactionMinimalPerf.default 419 397 1.06:1
AttachmentMinimalPerf.default 167 159 1.05:1
SegmentMinimalPerf.default 370 352 1.05:1
SkeletonMinimalPerf.default 389 371 1.05:1
Tooltip.Fluent 572 545 1.05:1
FormMinimalPerf.default 411 395 1.04:1
MenuButtonMinimalPerf.default 1567 1506 1.04:1
RefMinimalPerf.default 244 234 1.04:1
TextAreaMinimalPerf.default 492 475 1.04:1
ChatMinimalPerf.default 632 613 1.03:1
IconMinimalPerf.default 677 658 1.03:1
CheckboxMinimalPerf.default 2895 2845 1.02:1
DialogMinimalPerf.default 802 784 1.02:1
GridMinimalPerf.default 347 340 1.02:1
HeaderMinimalPerf.default 385 379 1.02:1
ItemLayoutMinimalPerf.default 1256 1231 1.02:1
MenuMinimalPerf.default 863 842 1.02:1
RadioGroupMinimalPerf.default 447 439 1.02:1
TableManyItemsPerf.default 2106 2059 1.02:1
Dropdown.Fluent 2968 2912 1.02:1
Icon.Fluent 700 687 1.02:1
AvatarMinimalPerf.default 468 463 1.01:1
ButtonOverridesMissPerf.default 1694 1682 1.01:1
ButtonSlotsPerf.default 607 600 1.01:1
ButtonUseCssPerf.default 824 819 1.01:1
ChatWithPopoverPerf.default 474 468 1.01:1
DividerMinimalPerf.default 368 366 1.01:1
DropdownManyItemsPerf.default 731 727 1.01:1
EmbedMinimalPerf.default 4094 4056 1.01:1
LayoutMinimalPerf.default 416 411 1.01:1
ListWith60ListItems.default 942 932 1.01:1
LoaderMinimalPerf.default 722 716 1.01:1
PopupMinimalPerf.default 715 711 1.01:1
SplitButtonMinimalPerf.default 3658 3631 1.01:1
StatusMinimalPerf.default 708 704 1.01:1
CustomToolbarPrototype.default 3886 3863 1.01:1
TooltipMinimalPerf.default 820 811 1.01:1
Button.Fluent 549 545 1.01:1
Checkbox.Fluent 653 647 1.01:1
Dialog.Fluent 794 785 1.01:1
ButtonMinimalPerf.default 176 176 1:1
ButtonUseCssNestingPerf.default 1086 1084 1:1
DatepickerMinimalPerf.default 45206 45058 1:1
DropdownMinimalPerf.default 2940 2953 1:1
SliderMinimalPerf.default 1584 1590 1:1
ToolbarMinimalPerf.default 942 939 1:1
VideoMinimalPerf.default 616 614 1:1
Slider.Fluent 1532 1525 1:1
AccordionMinimalPerf.default 160 162 0.99:1
BoxMinimalPerf.default 372 377 0.99:1
CarouselMinimalPerf.default 455 458 0.99:1
ListCommonPerf.default 625 632 0.99:1
ListNestedPerf.default 568 572 0.99:1
ProviderMinimalPerf.default 1015 1022 0.99:1
TreeMinimalPerf.default 770 775 0.99:1
Avatar.Fluent 867 872 0.99:1
AlertMinimalPerf.default 304 311 0.98:1
HeaderSlotsPerf.default 765 778 0.98:1
ImageMinimalPerf.default 381 389 0.98:1
InputMinimalPerf.default 1287 1309 0.98:1
ListMinimalPerf.default 476 487 0.98:1
ProviderMergeThemesPerf.default 2050 2093 0.98:1
Text.Fluent 360 368 0.98:1
AttachmentSlotsPerf.default 1094 1123 0.97:1
TableMinimalPerf.default 410 426 0.96:1
Image.Fluent 373 389 0.96:1

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 4, 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 6bf9f23:

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

@size-auditor
Copy link

size-auditor bot commented Jan 4, 2021

Asset size changes

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

Baseline commit: 5902550fbcf3c281d9ab6e01f3002dc85b710531 (build)

@SethDonohue SethDonohue changed the title fix (web components): add fix for select indicator styles fix (web components): add missing css selector for select indicator styles Jan 4, 2021
@chrisdholt chrisdholt merged commit 57787b1 into microsoft:master Jan 4, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@SethDonohue SethDonohue deleted the users/v-sedono/fix-select-indicator-styles branch January 5, 2021 17:59
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