fix (web components): start end fixed width height

[SethDonohue]

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]

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

[fabricteam]

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]

Asset size changes

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

Baseline commit: 6d4e38765cd0fd80feb2c8487ba7a60e37653ef6 (build)

[msft-fluent-ui-bot]

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

Handy links:

• Release Notes
• Official NPM Release