Users/jes/expand collapse hover state

[eljefe223]

Pull request checklist

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

Description of changes

Adding hover style to the expand collapse button in tree items

The purpose of the background is to increase comprehension of the two different interactive elements within an item. We received interaction study indication that people had trouble understanding the difference between selecting a node and expanding it. The button area functions differently, but doesn't indicate such, so this change is to frame it to help differentiate the parts.

Note: Updating the the lopsided svg in a seperate 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 2c5aa58:

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	867	868	5000
BaseButtonCompat	mount	1013	960	5000
Breadcrumb	mount	44265	44583	5000
Checkbox	mount	1604	1643	5000
CheckboxBase	mount	1401	1420	5000
ChoiceGroup	mount	5093	5118	5000
ComboBox	mount	1082	1032	1000
CommandBar	mount	10536	10565	1000
ContextualMenu	mount	6318	6330	1000
DefaultButtonCompat	mount	1205	1202	5000
DetailsRow	mount	3901	3950	5000
DetailsRowFast	mount	3860	3924	5000
DetailsRowNoStyles	mount	3721	3764	5000
Dialog	mount	1570	1428	1000
DocumentCardTitle	mount	1882	1856	1000
Dropdown	mount	3550	3596	5000
FocusTrapZone	mount	1891	1877	5000
FocusZone	mount	1907	1896	5000
IconButtonCompat	mount	1934	1922	5000
Label	mount	352	353	5000
Layer	mount	1903	1905	5000
Link	mount	494	524	5000
MakeStyles	mount	2074	2062	50000
MenuButtonCompat	mount	1555	1614	5000
MessageBar	mount	2059	2095	5000
Nav	mount	3477	3417	1000
OverflowSet	mount	1094	1116	5000
Panel	mount	1493	1505	1000
Persona	mount	906	936	1000
Pivot	mount	1514	1498	1000
PrimaryButtonCompat	mount	1366	1364	5000
Rating	mount	8230	8226	5000
SearchBox	mount	1440	1488	5000
Shimmer	mount	2754	2689	5000
Slider	mount	2040	2046	5000
SpinButton	mount	5428	5273	5000
Spinner	mount	436	443	5000
SplitButtonCompat	mount	3484	3434	5000
Stack	mount	523	546	5000
StackWithIntrinsicChildren	mount	1687	1666	5000
StackWithTextChildren	mount	5013	4965	5000
SwatchColorPicker	mount	10849	10715	5000
Tabs	mount	1477	1507	1000
TagPicker	mount	2983	2972	5000
TeachingBubble	mount	12113	12151	5000
Text	mount	457	420	5000
TextField	mount	1464	1500	5000
ThemeProvider	mount	2250	2250	5000
ThemeProvider	virtual-rerender	663	665	5000
Toggle	mount	841	804	5000
button	mount	715	706	5000
buttonNative	mount	109	113	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.47	0.57	0.82:1	2000	943
🦄	Button.Fluent	0.13	0.21	0.62:1	5000	662
🔧	Checkbox.Fluent	0.67	0.37	1.81:1	1000	673
🎯	Dialog.Fluent	0.18	0.23	0.78:1	5000	900
🔧	Dropdown.Fluent	3.13	0.46	6.8:1	1000	3125
🔧	Icon.Fluent	0.16	0.06	2.67:1	5000	805
🦄	Image.Fluent	0.09	0.13	0.69:1	5000	454
🔧	Slider.Fluent	1.69	0.5	3.38:1	1000	1690
🔧	Text.Fluent	0.08	0.04	2:1	5000	413
🦄	Tooltip.Fluent	0.13	0.93	0.14:1	5000	632

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	227	203	1.12:1
FormMinimalPerf.default	512	456	1.12:1
BoxMinimalPerf.default	440	399	1.1:1
TreeMinimalPerf.default	915	858	1.07:1
PortalMinimalPerf.default	182	172	1.06:1
RadioGroupMinimalPerf.default	536	506	1.06:1
TooltipMinimalPerf.default	919	864	1.06:1
CarouselMinimalPerf.default	499	477	1.05:1
SegmentMinimalPerf.default	423	404	1.05:1
VideoMinimalPerf.default	760	722	1.05:1
Text.Fluent	413	394	1.05:1
ChatDuplicateMessagesPerf.default	455	439	1.04:1
FlexMinimalPerf.default	343	331	1.04:1
TextMinimalPerf.default	423	407	1.04:1
TextAreaMinimalPerf.default	572	551	1.04:1
ChatMinimalPerf.default	721	698	1.03:1
ListMinimalPerf.default	571	554	1.03:1
RefMinimalPerf.default	271	263	1.03:1
TableMinimalPerf.default	474	459	1.03:1
Image.Fluent	454	441	1.03:1
CardMinimalPerf.default	641	626	1.02:1
DropdownManyItemsPerf.default	802	787	1.02:1
EmbedMinimalPerf.default	4536	4447	1.02:1
HeaderMinimalPerf.default	443	434	1.02:1
ItemLayoutMinimalPerf.default	1432	1402	1.02:1
ListCommonPerf.default	774	759	1.02:1
ProviderMinimalPerf.default	1034	1012	1.02:1
SplitButtonMinimalPerf.default	4252	4177	1.02:1
StatusMinimalPerf.default	835	817	1.02:1
Button.Fluent	662	649	1.02:1
AnimationMinimalPerf.default	461	456	1.01:1
GridMinimalPerf.default	407	403	1.01:1
HeaderSlotsPerf.default	903	891	1.01:1
LayoutMinimalPerf.default	468	465	1.01:1
ListWith60ListItems.default	1006	992	1.01:1
ReactionMinimalPerf.default	475	472	1.01:1
SkeletonMinimalPerf.default	430	424	1.01:1
TableManyItemsPerf.default	2311	2294	1.01:1
CustomToolbarPrototype.default	3984	3958	1.01:1
ToolbarMinimalPerf.default	1074	1068	1.01:1
Dialog.Fluent	900	892	1.01:1
Slider.Fluent	1690	1681	1.01:1
AttachmentSlotsPerf.default	1259	1256	1:1
AvatarMinimalPerf.default	509	511	1:1
ButtonOverridesMissPerf.default	1853	1853	1:1
ButtonSlotsPerf.default	663	663	1:1
ChatWithPopoverPerf.default	527	529	1:1
DatepickerMinimalPerf.default	50646	50627	1:1
MenuMinimalPerf.default	972	973	1:1
MenuButtonMinimalPerf.default	1765	1765	1:1
PopupMinimalPerf.default	780	779	1:1
SliderMinimalPerf.default	1763	1757	1:1
TreeWith60ListItems.default	228	228	1:1
Dropdown.Fluent	3125	3139	1:1
Icon.Fluent	805	807	1:1
Tooltip.Fluent	632	629	1:1
ButtonUseCssPerf.default	905	918	0.99:1
CheckboxMinimalPerf.default	2995	3029	0.99:1
DividerMinimalPerf.default	437	440	0.99:1
InputMinimalPerf.default	1447	1457	0.99:1
LabelMinimalPerf.default	497	502	0.99:1
ListNestedPerf.default	658	668	0.99:1
LoaderMinimalPerf.default	806	811	0.99:1
AccordionMinimalPerf.default	178	182	0.98:1
AlertMinimalPerf.default	357	366	0.98:1
ProviderMergeThemesPerf.default	1640	1666	0.98:1
IconMinimalPerf.default	742	755	0.98:1
AttachmentMinimalPerf.default	184	190	0.97:1
ButtonUseCssNestingPerf.default	1157	1196	0.97:1
DropdownMinimalPerf.default	3106	3197	0.97:1
Avatar.Fluent	943	971	0.97:1
Checkbox.Fluent	673	693	0.97:1
ImageMinimalPerf.default	426	446	0.96:1
DialogMinimalPerf.default	867	912	0.95:1

[size-auditor]

Asset size changes

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

Baseline commit: d0d59e633912d2fe72a48e1472afe220a74a51d0 (build)

[msft-fluent-ui-bot]

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

Handy links:

• Release Notes
• Official NPM Release