fix (web components): text-field label hidden styles ordering

[SethDonohue]

Pull request checklist

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

Description of changes

Moves text-field label__hidden styles below main label styles for proper ordering so the styles are applied correctly.

[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 9047ca8:

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	830	837	5000
BaseButtonCompat	mount	905	901	5000
Breadcrumb	mount	43806	44017	5000
Checkbox	mount	1495	1527	5000
CheckboxBase	mount	1264	1274	5000
ChoiceGroup	mount	4854	4735	5000
ComboBox	mount	969	982	1000
CommandBar	mount	10458	10421	1000
ContextualMenu	mount	6297	6352	1000
DefaultButtonCompat	mount	1157	1134	5000
DetailsRow	mount	3680	3653	5000
DetailsRowFast	mount	3626	3669	5000
DetailsRowNoStyles	mount	3468	3554	5000
Dialog	mount	1493	1443	1000
DocumentCardTitle	mount	1834	1828	1000
Dropdown	mount	3406	3404	5000
FocusTrapZone	mount	1830	1846	5000
FocusZone	mount	1901	1914	5000
IconButtonCompat	mount	1785	1803	5000
Label	mount	345	363	5000
Layer	mount	1767	1786	5000
Link	mount	471	492	5000
MakeStyles	mount	1961	1954	50000
MenuButtonCompat	mount	1474	1504	5000
MessageBar	mount	2031	2030	5000
Nav	mount	3279	3313	1000
OverflowSet	mount	1054	1054	5000
Panel	mount	1467	1473	1000
Persona	mount	905	866	1000
Pivot	mount	1416	1429	1000
PrimaryButtonCompat	mount	1250	1275	5000
Rating	mount	7614	7602	5000
SearchBox	mount	1292	1361	5000
Shimmer	mount	2562	2516	5000
Slider	mount	1917	1910	5000
SpinButton	mount	4961	5011	5000
Spinner	mount	423	431	5000
SplitButtonCompat	mount	3191	3105	5000
Stack	mount	513	505	5000
StackWithIntrinsicChildren	mount	1578	1558	5000
StackWithTextChildren	mount	4522	4492	5000
SwatchColorPicker	mount	10317	10248	5000
Tabs	mount	1405	1398	1000
TagPicker	mount	2866	2881	5000
TeachingBubble	mount	11698	11763	5000
Text	mount	408	422	5000
TextField	mount	1356	1395	5000
ThemeProvider	mount	2177	2158	5000
ThemeProvider	virtual-rerender	680	647	5000
Toggle	mount	792	802	5000
button	mount	671	650	5000
buttonNative	mount	101	110	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.45	0.52	0.87:1	2000	900
🦄	Button.Fluent	0.12	0.2	0.6:1	5000	596
🔧	Checkbox.Fluent	0.66	0.36	1.83:1	1000	660
🎯	Dialog.Fluent	0.16	0.22	0.73:1	5000	822
🔧	Dropdown.Fluent	3.06	0.41	7.46:1	1000	3058
🔧	Icon.Fluent	0.15	0.06	2.5:1	5000	756
🦄	Image.Fluent	0.08	0.13	0.62:1	5000	412
🔧	Slider.Fluent	1.65	0.44	3.75:1	1000	1645
🔧	Text.Fluent	0.08	0.03	2.67:1	5000	384
🦄	Tooltip.Fluent	0.12	0.9	0.13:1	5000	602

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
RefMinimalPerf.default	276	243	1.14:1
ButtonMinimalPerf.default	198	180	1.1:1
GridMinimalPerf.default	380	352	1.08:1
AttachmentMinimalPerf.default	172	161	1.07:1
ButtonSlotsPerf.default	625	590	1.06:1
SegmentMinimalPerf.default	384	361	1.06:1
AccordionMinimalPerf.default	169	161	1.05:1
AnimationMinimalPerf.default	433	414	1.05:1
DialogMinimalPerf.default	868	829	1.05:1
DropdownManyItemsPerf.default	790	754	1.05:1
LayoutMinimalPerf.default	450	428	1.05:1
ListMinimalPerf.default	521	494	1.05:1
TreeMinimalPerf.default	830	799	1.04:1
Text.Fluent	384	371	1.04:1
Tooltip.Fluent	602	579	1.04:1
CarouselMinimalPerf.default	461	449	1.03:1
ListCommonPerf.default	661	640	1.03:1
ReactionMinimalPerf.default	428	416	1.03:1
StatusMinimalPerf.default	748	727	1.03:1
VideoMinimalPerf.default	676	655	1.03:1
Button.Fluent	596	579	1.03:1
Image.Fluent	412	400	1.03:1
HeaderMinimalPerf.default	392	384	1.02:1
InputMinimalPerf.default	1361	1330	1.02:1
ListNestedPerf.default	601	588	1.02:1
PopupMinimalPerf.default	737	724	1.02:1
Avatar.Fluent	900	886	1.02:1
Dialog.Fluent	822	804	1.02:1
AvatarMinimalPerf.default	479	473	1.01:1
ButtonUseCssPerf.default	853	842	1.01:1
ChatDuplicateMessagesPerf.default	433	427	1.01:1
ChatMinimalPerf.default	637	628	1.01:1
ChatWithPopoverPerf.default	489	483	1.01:1
EmbedMinimalPerf.default	4302	4254	1.01:1
ItemLayoutMinimalPerf.default	1311	1292	1.01:1
ListWith60ListItems.default	962	952	1.01:1
ProviderMinimalPerf.default	1062	1051	1.01:1
SplitButtonMinimalPerf.default	3841	3807	1.01:1
TableManyItemsPerf.default	2139	2126	1.01:1
TextMinimalPerf.default	374	370	1.01:1
CustomToolbarPrototype.default	4067	4024	1.01:1
TooltipMinimalPerf.default	847	841	1.01:1
Icon.Fluent	756	745	1.01:1
ButtonOverridesMissPerf.default	1768	1763	1:1
CheckboxMinimalPerf.default	2937	2944	1:1
DatepickerMinimalPerf.default	49084	48890	1:1
DropdownMinimalPerf.default	3046	3044	1:1
LabelMinimalPerf.default	443	441	1:1
LoaderMinimalPerf.default	750	750	1:1
MenuMinimalPerf.default	888	890	1:1
TreeWith60ListItems.default	222	221	1:1
Dropdown.Fluent	3058	3065	1:1
Slider.Fluent	1645	1648	1:1
AttachmentSlotsPerf.default	1143	1157	0.99:1
CardMinimalPerf.default	579	583	0.99:1
DividerMinimalPerf.default	398	404	0.99:1
HeaderSlotsPerf.default	790	798	0.99:1
MenuButtonMinimalPerf.default	1592	1607	0.99:1
SliderMinimalPerf.default	1633	1656	0.99:1
IconMinimalPerf.default	694	703	0.99:1
TextAreaMinimalPerf.default	502	505	0.99:1
ToolbarMinimalPerf.default	973	979	0.99:1
BoxMinimalPerf.default	384	390	0.98:1
ButtonUseCssNestingPerf.default	1103	1120	0.98:1
RadioGroupMinimalPerf.default	458	466	0.98:1
Checkbox.Fluent	660	672	0.98:1
FlexMinimalPerf.default	320	330	0.97:1
PortalMinimalPerf.default	169	174	0.97:1
ProviderMergeThemesPerf.default	2143	2208	0.97:1
SkeletonMinimalPerf.default	380	391	0.97:1
TableMinimalPerf.default	424	439	0.97:1
FormMinimalPerf.default	419	437	0.96:1
ImageMinimalPerf.default	395	411	0.96:1
AlertMinimalPerf.default	301	317	0.95: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/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release