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

fix (web components): height clamp box sizing select #16347

Merged
merged 2 commits into from
Jan 4, 2021
Merged

fix (web components): height clamp box sizing select #16347

merged 2 commits into from
Jan 4, 2021

Conversation

SethDonohue
Copy link
Contributor

@SethDonohue SethDonohue commented Jan 4, 2021 •
edited
Loading

Pull request checklist

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

Description of changes

Add Select height clamp and box sizing

chrisdholt
chrisdholt approved these changes Jan 4, 2021
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 @SethDonohue!

@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 828737d:

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

@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 866 877 5000
BaseButtonCompat mount 982 994 5000
Breadcrumb mount 45148 44531 5000
Checkbox mount 1689 1697 5000
CheckboxBase mount 1450 1446 5000
ChoiceGroup mount 5219 5295 5000
ComboBox mount 1036 1032 1000
CommandBar mount 10824 10770 1000
ContextualMenu mount 6538 6577 1000
DefaultButtonCompat mount 1238 1251 5000
DetailsRow mount 3978 3992 5000
DetailsRowFast mount 3970 4039 5000
DetailsRowNoStyles mount 3813 3772 5000
Dialog mount 1600 1557 1000
DocumentCardTitle mount 1880 1928 1000
Dropdown mount 3571 3626 5000
FocusTrapZone mount 1897 1898 5000
FocusZone mount 1963 1932 5000
IconButtonCompat mount 1945 1902 5000
Label mount 347 366 5000
Layer mount 1956 1883 5000
Link mount 486 470 5000
MakeStyles mount 2065 2079 50000
MenuButtonCompat mount 1593 1586 5000
MessageBar mount 2083 2129 5000
Nav mount 3437 3482 1000
OverflowSet mount 1085 1111 5000
Panel mount 1550 1528 1000
Persona mount 876 898 1000
Pivot mount 1462 1538 1000
PrimaryButtonCompat mount 1385 1366 5000
Rating mount 8256 8142 5000
SearchBox mount 1412 1443 5000
Shimmer mount 2800 2754 5000
Slider mount 2083 1996 5000
SpinButton mount 5374 5283 5000
Spinner mount 431 442 5000
SplitButtonCompat mount 3385 3411 5000
Stack mount 536 537 5000
StackWithIntrinsicChildren mount 1682 1667 5000
StackWithTextChildren mount 4975 4992 5000
SwatchColorPicker mount 10918 11162 5000
Tabs mount 1488 1428 1000
TagPicker mount 3000 3057 5000
TeachingBubble mount 12180 12372 5000
Text mount 461 459 5000
TextField mount 1468 1464 5000
ThemeProvider mount 2255 2261 5000
ThemeProvider virtual-rerender 666 665 5000
Toggle mount 857 849 5000
button mount 743 742 5000
buttonNative mount 122 124 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.5 0.54 0.93:1 2000 995
🦄 Button.Fluent 0.14 0.22 0.64:1 5000 681
🔧 Checkbox.Fluent 0.69 0.39 1.77:1 1000 690
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 894
🔧 Dropdown.Fluent 3.16 0.44 7.18:1 1000 3159
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 817
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 454
🔧 Slider.Fluent 1.69 0.49 3.45:1 1000 1688
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 424
🦄 Tooltip.Fluent 0.13 0.95 0.14:1 5000 643

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 182 160 1.14:1
DividerMinimalPerf.default 462 421 1.1:1
TreeWith60ListItems.default 246 226 1.09:1
AnimationMinimalPerf.default 501 464 1.08:1
HeaderMinimalPerf.default 451 418 1.08:1
SegmentMinimalPerf.default 445 412 1.08:1
TableMinimalPerf.default 501 466 1.08:1
RadioGroupMinimalPerf.default 548 511 1.07:1
ButtonMinimalPerf.default 206 195 1.06:1
ButtonSlotsPerf.default 670 634 1.06:1
FlexMinimalPerf.default 351 331 1.06:1
LoaderMinimalPerf.default 807 764 1.06:1
AttachmentMinimalPerf.default 209 200 1.05:1
LayoutMinimalPerf.default 491 469 1.05:1
StatusMinimalPerf.default 855 811 1.05:1
Tooltip.Fluent 643 615 1.05:1
ListCommonPerf.default 745 719 1.04:1
TooltipMinimalPerf.default 921 888 1.04:1
VideoMinimalPerf.default 765 738 1.04:1
AttachmentSlotsPerf.default 1304 1272 1.03:1
BoxMinimalPerf.default 417 403 1.03:1
CardMinimalPerf.default 655 635 1.03:1
HeaderSlotsPerf.default 930 900 1.03:1
InputMinimalPerf.default 1448 1404 1.03:1
ProviderMinimalPerf.default 1141 1109 1.03:1
SliderMinimalPerf.default 1793 1733 1.03:1
SplitButtonMinimalPerf.default 4261 4143 1.03:1
ButtonOverridesMissPerf.default 1886 1843 1.02:1
ChatWithPopoverPerf.default 524 513 1.02:1
DialogMinimalPerf.default 905 888 1.02:1
DropdownManyItemsPerf.default 852 839 1.02:1
EmbedMinimalPerf.default 4573 4472 1.02:1
MenuMinimalPerf.default 976 956 1.02:1
IconMinimalPerf.default 759 745 1.02:1
ToolbarMinimalPerf.default 1091 1069 1.02:1
Button.Fluent 681 669 1.02:1
Icon.Fluent 817 799 1.02:1
AlertMinimalPerf.default 348 343 1.01:1
ButtonUseCssPerf.default 927 915 1.01:1
ChatDuplicateMessagesPerf.default 453 447 1.01:1
CheckboxMinimalPerf.default 3082 3064 1.01:1
DatepickerMinimalPerf.default 51133 50448 1.01:1
FormMinimalPerf.default 507 501 1.01:1
GridMinimalPerf.default 418 414 1.01:1
ImageMinimalPerf.default 469 466 1.01:1
ListMinimalPerf.default 559 551 1.01:1
TableManyItemsPerf.default 2428 2394 1.01:1
TextMinimalPerf.default 417 413 1.01:1
CustomToolbarPrototype.default 4173 4121 1.01:1
TreeMinimalPerf.default 896 884 1.01:1
ButtonUseCssNestingPerf.default 1167 1171 1:1
ChatMinimalPerf.default 699 702 1:1
DropdownMinimalPerf.default 3137 3146 1:1
ListWith60ListItems.default 1031 1033 1:1
MenuButtonMinimalPerf.default 1779 1779 1:1
ReactionMinimalPerf.default 485 483 1:1
SkeletonMinimalPerf.default 447 448 1:1
TextAreaMinimalPerf.default 594 596 1:1
Image.Fluent 454 452 1:1
Text.Fluent 424 426 1:1
AccordionMinimalPerf.default 183 185 0.99:1
ItemLayoutMinimalPerf.default 1427 1439 0.99:1
PopupMinimalPerf.default 752 763 0.99:1
AvatarMinimalPerf.default 528 540 0.98:1
Avatar.Fluent 995 1011 0.98:1
Checkbox.Fluent 690 701 0.98:1
Dialog.Fluent 894 915 0.98:1
Dropdown.Fluent 3159 3235 0.98:1
CarouselMinimalPerf.default 482 498 0.97:1
LabelMinimalPerf.default 487 500 0.97:1
ListNestedPerf.default 631 648 0.97:1
ProviderMergeThemesPerf.default 2098 2185 0.96:1
RefMinimalPerf.default 247 260 0.95:1
Slider.Fluent 1688 1772 0.95:1

@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)

@chrisdholt chrisdholt assigned chrisdholt and unassigned layershifter Jan 4, 2021
@chrisdholt chrisdholt merged commit 981bbd2 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-height-clamp-box-sizing-select branch January 5, 2021 17:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chrisdholt chrisdholt chrisdholt 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.
5 participants
@SethDonohue @fabricteam @msft-fluent-ui-bot @chrisdholt @layershifter