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): start end fixed width height #16359

Merged
merged 2 commits into from
Jan 5, 2021
Merged

fix (web components): start end fixed width height #16359

merged 2 commits into from
Jan 5, 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

Fixes start and end slot fixed heights to relieve issue where elements larger than 16px become clipped. See related FAST PR
This also fixes an issue where Hypertext styles need min-width reset. See related FAST PR

@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 9784839:

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

@chrisdholt chrisdholt assigned chrisdholt and unassigned layershifter Jan 4, 2021
@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 887 899 5000
BaseButtonCompat mount 955 988 5000
Breadcrumb mount 42854 41892 5000
Checkbox mount 1650 1577 5000
CheckboxBase mount 1371 1344 5000
ChoiceGroup mount 4968 4967 5000
ComboBox mount 994 994 1000
CommandBar mount 10017 10018 1000
ContextualMenu mount 6084 6055 1000
DefaultButtonCompat mount 1204 1159 5000
DetailsRow mount 3649 3789 5000
DetailsRowFast mount 3802 3832 5000
DetailsRowNoStyles mount 3518 3468 5000
Dialog mount 1517 1508 1000
DocumentCardTitle mount 1781 1762 1000
Dropdown mount 3457 3434 5000
FocusTrapZone mount 1801 1758 5000
FocusZone mount 1796 1819 5000
IconButtonCompat mount 1878 1876 5000
Label mount 359 347 5000
Layer mount 1823 1807 5000
Link mount 475 460 5000
MakeStyles mount 1983 1996 50000
MenuButtonCompat mount 1500 1502 5000
MessageBar mount 1991 2052 5000
Nav mount 3352 3396 1000
OverflowSet mount 1044 1041 5000
Panel mount 1482 1473 1000
Persona mount 855 899 1000
Pivot mount 1467 1451 1000
PrimaryButtonCompat mount 1311 1302 5000
Rating mount 7881 8045 5000
SearchBox mount 1408 1366 5000
Shimmer mount 2619 2690 5000
Slider mount 1979 1943 5000
SpinButton mount 5278 5099 5000
Spinner mount 416 413 5000
SplitButtonCompat mount 3287 3198 5000
Stack mount 547 502 5000
StackWithIntrinsicChildren mount 1587 1576 5000
StackWithTextChildren mount 4818 4760 5000
SwatchColorPicker mount 10314 10443 5000
Tabs mount 1410 1400 1000
TagPicker mount 2933 2933 5000
TeachingBubble mount 11499 11795 5000
Text mount 424 444 5000
TextField mount 1470 1506 5000
ThemeProvider mount 2251 2251 5000
ThemeProvider virtual-rerender 663 657 5000
Toggle mount 875 827 5000
button mount 664 736 5000
buttonNative mount 97 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 989
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 654
🔧 Checkbox.Fluent 0.67 0.38 1.76:1 1000 666
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 892
🔧 Dropdown.Fluent 3.14 0.44 7.14:1 1000 3139
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 810
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 445
🔧 Slider.Fluent 1.68 0.48 3.5:1 1000 1675
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 406
🦄 Tooltip.Fluent 0.12 0.91 0.13:1 5000 594

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 231 189 1.22:1
PortalMinimalPerf.default 188 161 1.17:1
ImageMinimalPerf.default 487 427 1.14:1
SkeletonMinimalPerf.default 451 403 1.12:1
TextAreaMinimalPerf.default 609 545 1.12:1
AnimationMinimalPerf.default 448 411 1.09:1
AvatarMinimalPerf.default 536 502 1.07:1
FlexMinimalPerf.default 346 322 1.07:1
SegmentMinimalPerf.default 434 405 1.07:1
ButtonSlotsPerf.default 666 631 1.06:1
RefMinimalPerf.default 264 250 1.06:1
TreeWith60ListItems.default 246 232 1.06:1
GridMinimalPerf.default 413 395 1.05:1
HeaderSlotsPerf.default 954 912 1.05:1
TooltipMinimalPerf.default 883 842 1.05:1
Text.Fluent 406 385 1.05:1
ButtonOverridesMissPerf.default 1800 1739 1.04:1
ButtonUseCssPerf.default 886 856 1.04:1
InputMinimalPerf.default 1443 1382 1.04:1
LabelMinimalPerf.default 491 470 1.04:1
LoaderMinimalPerf.default 816 781 1.04:1
RadioGroupMinimalPerf.default 515 494 1.04:1
ChatDuplicateMessagesPerf.default 464 450 1.03:1
HeaderMinimalPerf.default 434 420 1.03:1
ListCommonPerf.default 781 761 1.03:1
MenuMinimalPerf.default 960 934 1.03:1
Icon.Fluent 810 784 1.03:1
Tooltip.Fluent 594 579 1.03:1
AttachmentSlotsPerf.default 1242 1213 1.02:1
ChatWithPopoverPerf.default 488 480 1.02:1
DividerMinimalPerf.default 426 418 1.02:1
ListWith60ListItems.default 1013 989 1.02:1
TableMinimalPerf.default 457 450 1.02:1
Avatar.Fluent 989 969 1.02:1
AccordionMinimalPerf.default 168 167 1.01:1
ButtonUseCssNestingPerf.default 1151 1139 1.01:1
CardMinimalPerf.default 618 611 1.01:1
ChatMinimalPerf.default 678 674 1.01:1
DialogMinimalPerf.default 880 869 1.01:1
ItemLayoutMinimalPerf.default 1453 1439 1.01:1
PopupMinimalPerf.default 754 743 1.01:1
ReactionMinimalPerf.default 479 475 1.01:1
SliderMinimalPerf.default 1659 1639 1.01:1
CustomToolbarPrototype.default 4033 3976 1.01:1
ToolbarMinimalPerf.default 1039 1028 1.01:1
VideoMinimalPerf.default 734 727 1.01:1
Dialog.Fluent 892 884 1.01:1
Dropdown.Fluent 3139 3120 1.01:1
Slider.Fluent 1675 1660 1.01:1
CheckboxMinimalPerf.default 2941 2930 1:1
ListNestedPerf.default 657 655 1:1
ProviderMergeThemesPerf.default 2066 2076 1:1
DatepickerMinimalPerf.default 47446 47694 0.99:1
SplitButtonMinimalPerf.default 4021 4070 0.99:1
IconMinimalPerf.default 772 778 0.99:1
TableManyItemsPerf.default 2350 2368 0.99:1
TextMinimalPerf.default 411 416 0.99:1
Checkbox.Fluent 666 674 0.99:1
BoxMinimalPerf.default 407 417 0.98:1
DropdownManyItemsPerf.default 809 828 0.98:1
EmbedMinimalPerf.default 4355 4454 0.98:1
MenuButtonMinimalPerf.default 1710 1750 0.98:1
Image.Fluent 445 453 0.98:1
LayoutMinimalPerf.default 461 477 0.97:1
ListMinimalPerf.default 544 563 0.97:1
ProviderMinimalPerf.default 1016 1050 0.97:1
StatusMinimalPerf.default 818 839 0.97:1
TreeMinimalPerf.default 824 847 0.97:1
FormMinimalPerf.default 478 498 0.96:1
AlertMinimalPerf.default 323 339 0.95:1
CarouselMinimalPerf.default 475 498 0.95:1
DropdownMinimalPerf.default 3056 3214 0.95:1
Button.Fluent 654 691 0.95:1
AttachmentMinimalPerf.default 170 182 0.93: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: 6d4e38765cd0fd80feb2c8487ba7a60e37653ef6 (build)

@chrisdholt chrisdholt merged commit da37d8e into microsoft:master Jan 5, 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-start-end-fixed-width-height 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