Various style fixes

[claviska]

Pull request checklist

• Addresses an existing issue: Fixes [web-components] Various Style Issues #19417
• Include a change request file using $ yarn change

Description of changes

• Adds a consistent border radius to text area
• Fixes the disabled state of Option
• Fixes indeterminate progress bars
• Uses design tokens instead of the corresponding CSS custom properties

Focus areas to test

(optional)

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 5174527e17f974e4accedf55c9a9581a33395498}

[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 8983498:

Sandbox	Source
Fluent UI React Starter	Configuration

[size-auditor]

Asset size changes

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

Baseline commit: 5174527e17f974e4accedf55c9a9581a33395498 (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1015	984	5000
BaseButton	mount	992	986	5000
Breadcrumb	mount	2836	2836	1000
ButtonNext	mount	473	498	5000
Checkbox	mount	1753	1726	5000
CheckboxBase	mount	1416	1446	5000
ChoiceGroup	mount	5214	5199	5000
ComboBox	mount	1053	1105	1000
CommandBar	mount	10479	10657	1000
ContextualMenu	mount	6413	6389	1000
DefaultButton	mount	1204	1220	5000
DetailsRow	mount	4014	3979	5000
DetailsRowFast	mount	3997	3994	5000
DetailsRowNoStyles	mount	3728	3858	5000
Dialog	mount	2233	2220	1000
DocumentCardTitle	mount	161	159	1000
Dropdown	mount	3599	3543	5000
FluentProviderNext	mount	7214	7332	5000
FocusTrapZone	mount	1976	1998	5000
FocusZone	mount	2046	1983	5000
IconButton	mount	1988	1963	5000
Label	mount	371	396	5000
Layer	mount	1999	1973	5000
Link	mount	503	495	5000
MakeStyles	mount	1845	1850	50000
MenuButton	mount	1561	1591	5000
MessageBar	mount	2137	2128	5000
Nav	mount	3601	3670	1000
OverflowSet	mount	1178	1175	5000
Panel	mount	2189	2199	1000
Persona	mount	875	928	1000
Pivot	mount	1485	1504	1000
PrimaryButton	mount	1426	1402	5000
Rating	mount	8653	8735	5000
SearchBox	mount	1505	1533	5000
Shimmer	mount	2816	2712	5000
Slider	mount	2055	2128	5000
SpinButton	mount	5282	5299	5000
Spinner	mount	439	444	5000
SplitButton	mount	3384	3476	5000
Stack	mount	527	530	5000
StackWithIntrinsicChildren	mount	1702	1718	5000
StackWithTextChildren	mount	5194	5123	5000
SwatchColorPicker	mount	11030	10886	5000
Tabs	mount	1509	1479	1000
TagPicker	mount	2828	2827	5000
TeachingBubble	mount	12279	12411	5000
Text	mount	459	458	5000
TextField	mount	1493	1510	5000
ThemeProvider	mount	1227	1246	5000
ThemeProvider	virtual-rerender	627	642	5000
Toggle	mount	893	880	5000
buttonNative	mount	122	127	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
FormMinimalPerf.default	475	420	1.13:1
ListWith60ListItems.default	742	675	1.1:1
AttachmentMinimalPerf.default	185	169	1.09:1
CardMinimalPerf.default	654	600	1.09:1
ChatDuplicateMessagesPerf.default	324	296	1.09:1
CheckboxMinimalPerf.default	3134	2922	1.07:1
ReactionMinimalPerf.default	420	392	1.07:1
ListMinimalPerf.default	592	557	1.06:1
FlexMinimalPerf.default	303	288	1.05:1
GridMinimalPerf.default	367	350	1.05:1
LabelMinimalPerf.default	435	413	1.05:1
IconMinimalPerf.default	714	678	1.05:1
AvatarMinimalPerf.default	218	209	1.04:1
BoxMinimalPerf.default	387	371	1.04:1
ImageMinimalPerf.default	411	396	1.04:1
MenuButtonMinimalPerf.default	1825	1759	1.04:1
PopupMinimalPerf.default	626	601	1.04:1
PortalMinimalPerf.default	186	178	1.04:1
SkeletonMinimalPerf.default	407	393	1.04:1
ChatWithPopoverPerf.default	401	388	1.03:1
DialogMinimalPerf.default	844	823	1.03:1
HeaderMinimalPerf.default	395	383	1.03:1
HeaderSlotsPerf.default	844	816	1.03:1
ItemLayoutMinimalPerf.default	1371	1332	1.03:1
RosterPerf.default	1328	1293	1.03:1
StatusMinimalPerf.default	756	731	1.03:1
TooltipMinimalPerf.default	1129	1093	1.03:1
AttachmentSlotsPerf.default	1165	1140	1.02:1
DividerMinimalPerf.default	402	394	1.02:1
LayoutMinimalPerf.default	408	401	1.02:1
ListCommonPerf.default	715	701	1.02:1
MenuMinimalPerf.default	943	921	1.02:1
RefMinimalPerf.default	238	234	1.02:1
SegmentMinimalPerf.default	392	385	1.02:1
TextAreaMinimalPerf.default	589	578	1.02:1
CustomToolbarPrototype.default	4290	4206	1.02:1
ButtonSlotsPerf.default	603	598	1.01:1
CarouselMinimalPerf.default	496	489	1.01:1
DatepickerMinimalPerf.default	5783	5727	1.01:1
EmbedMinimalPerf.default	4451	4414	1.01:1
ListNestedPerf.default	611	605	1.01:1
LoaderMinimalPerf.default	735	726	1.01:1
SplitButtonMinimalPerf.default	4220	4169	1.01:1
TextMinimalPerf.default	380	377	1.01:1
ButtonMinimalPerf.default	185	185	1:1
DropdownManyItemsPerf.default	734	732	1:1
DropdownMinimalPerf.default	3203	3200	1:1
SliderMinimalPerf.default	1645	1651	1:1
TableManyItemsPerf.default	2113	2123	1:1
TableMinimalPerf.default	439	440	1:1
ToolbarMinimalPerf.default	1039	1036	1:1
VideoMinimalPerf.default	716	715	1:1
AccordionMinimalPerf.default	162	164	0.99:1
AnimationMinimalPerf.default	449	453	0.99:1
ProviderMinimalPerf.default	1087	1098	0.99:1
RadioGroupMinimalPerf.default	477	482	0.99:1
AlertMinimalPerf.default	292	299	0.98:1
ChatMinimalPerf.default	700	713	0.98:1
TreeMinimalPerf.default	877	899	0.98:1
ProviderMergeThemesPerf.default	1668	1717	0.97:1
ButtonOverridesMissPerf.default	1816	1888	0.96:1
InputMinimalPerf.default	1367	1439	0.95:1
TreeWith60ListItems.default	190	203	0.94:1

[msft-fluent-ui-bot]

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

Handy links:

• Release Notes
• Official NPM Release