Charting: Changing hover behavior of circles and removing focus of circles

[khmakoto]

Pull request checklist

• Addresses an existing issue: Part of PRs targeting the 7.0 branch that will need porting into master #15285
• Include a change request file using $ yarn change

Description of changes

Cherry-pick of #15403.

To be merged after #15684.

Original PR description:

Minor edits to area chart according to the figma.

[ecraig12345]

Merged the other PR, and now this one has conflicts.

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

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

[khmakoto]

@ecraig12345 Yeah, I expected the conflicts, which is why I said the other one should be merged first. Just sent an update to fix them.

[msft-github-bot]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	880	903	5000
BaseButtonCompat	mount	990	1000	5000
Breadcrumb	mount	163267	163332	5000
Checkbox	mount	1698	1674	5000
CheckboxBase	mount	1369	1430	5000
ChoiceGroup	mount	5215	5158	5000
ComboBox	mount	1080	1025	1000
CommandBar	mount	22592	22541	1000
ContextualMenu	mount	6375	6451	1000
DefaultButtonCompat	mount	1222	1270	5000
DetailsRow	mount	4019	3931	5000
DetailsRowFast	mount	3896	3941	5000
DetailsRowNoStyles	mount	3729	3761	5000
Dialog	mount	1637	1621	1000
DocumentCardTitle	mount	1876	1878	1000
Dropdown	mount	3799	3697	5000
FocusTrapZone	mount	1870	1945	5000
FocusZone	mount	1884	1825	5000
IconButtonCompat	mount	1935	1951	5000
Label	mount	351	347	5000
Layer	mount	1994	2001	5000
Link	mount	510	491	5000
MenuButtonCompat	mount	1648	1604	5000
MessageBar	mount	2167	2102	5000
Nav	mount	3524	3519	1000
OverflowSet	mount	1109	1114	5000
Panel	mount	1521	1513	1000
Persona	mount	929	935	1000
Pivot	mount	1523	1502	1000
PrimaryButtonCompat	mount	1422	1403	5000
Rating	mount	8311	8306	5000
SearchBox	mount	1527	1483	5000
Shimmer	mount	2798	2803	5000
Slider	mount	2067	2042	5000
SpinButton	mount	5382	5692	5000
Spinner	mount	440	456	5000
SplitButtonCompat	mount	3452	3452	5000
Stack	mount	551	545	5000
StackWithIntrinsicChildren	mount	1635	1651	5000
StackWithTextChildren	mount	5156	5233	5000
SwatchColorPicker	mount	11083	10965	5000
TagPicker	mount	2985	2992	5000
TeachingBubble	mount	12388	12381	5000
Text	mount	468	479	5000
TextField	mount	1525	1542	5000
ThemeProvider	mount	2135	2122	5000
ThemeProvider	virtual-rerender	670	677	5000
Toggle	mount	878	852	5000
button	mount	617	602	5000
buttonNative	mount	115	113	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.49	0.55	0.89:1	2000	989
🦄	Button.Fluent	0.14	0.25	0.56:1	5000	686
🔧	Checkbox.Fluent	0.71	0.41	1.73:1	1000	706
🎯	Dialog.Fluent	0.18	0.25	0.72:1	5000	904
🔧	Dropdown.Fluent	3.12	0.46	6.78:1	1000	3119
🔧	Icon.Fluent	0.17	0.07	2.43:1	5000	826
🦄	Image.Fluent	0.09	0.14	0.64:1	5000	461
🔧	Slider.Fluent	1.7	0.49	3.47:1	1000	1704
🔧	Text.Fluent	0.09	0.04	2.25:1	5000	437
🦄	Tooltip.Fluent	0.12	0.96	0.13:1	5000	619

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
FlexMinimalPerf.default	391	348	1.12:1
TreeWith60ListItems.default	263	235	1.12:1
RadioGroupMinimalPerf.default	549	507	1.08:1
RefMinimalPerf.default	265	246	1.08:1
AccordionMinimalPerf.default	195	183	1.07:1
CarouselMinimalPerf.default	546	508	1.07:1
PortalMinimalPerf.default	191	179	1.07:1
BoxMinimalPerf.default	449	424	1.06:1
HeaderSlotsPerf.default	978	922	1.06:1
TableMinimalPerf.default	513	483	1.06:1
ChatDuplicateMessagesPerf.default	483	461	1.05:1
GridMinimalPerf.default	429	407	1.05:1
LabelMinimalPerf.default	513	489	1.05:1
LayoutMinimalPerf.default	502	479	1.05:1
TextAreaMinimalPerf.default	623	591	1.05:1
Text.Fluent	437	417	1.05:1
ListNestedPerf.default	710	680	1.04:1
MenuMinimalPerf.default	1010	971	1.04:1
StatusMinimalPerf.default	871	841	1.04:1
AnimationMinimalPerf.default	477	464	1.03:1
ButtonOverridesMissPerf.default	1900	1850	1.03:1
CardMinimalPerf.default	671	653	1.03:1
DividerMinimalPerf.default	476	460	1.03:1
ListCommonPerf.default	778	755	1.03:1
ListMinimalPerf.default	575	557	1.03:1
SkeletonMinimalPerf.default	522	505	1.03:1
TextMinimalPerf.default	434	420	1.03:1
TooltipMinimalPerf.default	925	894	1.03:1
Button.Fluent	686	668	1.03:1
ButtonMinimalPerf.default	213	208	1.02:1
ChatMinimalPerf.default	727	714	1.02:1
DropdownManyItemsPerf.default	884	865	1.02:1
EmbedMinimalPerf.default	2252	2209	1.02:1
PopupMinimalPerf.default	776	764	1.02:1
ProviderMergeThemesPerf.default	2208	2159	1.02:1
SegmentMinimalPerf.default	454	447	1.02:1
Checkbox.Fluent	706	690	1.02:1
Dialog.Fluent	904	883	1.02:1
Tooltip.Fluent	619	605	1.02:1
AvatarMinimalPerf.default	546	540	1.01:1
ButtonSlotsPerf.default	679	675	1.01:1
ButtonUseCssPerf.default	952	942	1.01:1
DialogMinimalPerf.default	889	880	1.01:1
FormMinimalPerf.default	519	516	1.01:1
ImageMinimalPerf.default	487	483	1.01:1
ItemLayoutMinimalPerf.default	1498	1480	1.01:1
LoaderMinimalPerf.default	820	808	1.01:1
MenuButtonMinimalPerf.default	1770	1759	1.01:1
ReactionMinimalPerf.default	493	488	1.01:1
SplitButtonMinimalPerf.default	4209	4177	1.01:1
TableManyItemsPerf.default	2543	2525	1.01:1
CustomToolbarPrototype.default	4227	4176	1.01:1
ToolbarMinimalPerf.default	1094	1078	1.01:1
TreeMinimalPerf.default	1035	1021	1.01:1
AttachmentMinimalPerf.default	208	207	1:1
ButtonUseCssNestingPerf.default	1215	1210	1:1
DropdownMinimalPerf.default	3105	3117	1:1
InputMinimalPerf.default	1444	1442	1:1
ProviderMinimalPerf.default	1110	1107	1:1
SliderMinimalPerf.default	1715	1718	1:1
Avatar.Fluent	989	990	1:1
Dropdown.Fluent	3119	3104	1:1
Image.Fluent	461	461	1:1
Slider.Fluent	1704	1707	1:1
AttachmentSlotsPerf.default	1260	1278	0.99:1
CheckboxMinimalPerf.default	3088	3115	0.99:1
ListWith60ListItems.default	1011	1024	0.99:1
IconMinimalPerf.default	795	800	0.99:1
Icon.Fluent	826	831	0.99:1
ChatWithPopoverPerf.default	509	518	0.98:1
VideoMinimalPerf.default	709	720	0.98:1
HeaderMinimalPerf.default	445	457	0.97:1
AlertMinimalPerf.default	334	358	0.93:1

[size-auditor]

Asset size changes

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

Baseline commit: ef714229005bfe3ab09fa2a24f1c31bfe3b82e96 (build)

[msft-github-bot]

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release