Updated tooltip stories to support codesandbox #20373

GeoffCoxMSFT · 2021-10-26T22:40:59Z

Pull request checklist

Addresses an existing issue: Fixes Rework tooltip stories #20358
Include a change request file using $ yarn change

Description of changes

Separated stories
Added codesandbox comments

fabricteam · 2021-10-26T22:50:30Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`169.348 kB` `48.062 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.201 kB` `10.665 kB`
`react-tooltip` Tooltip	`45.556 kB` `15.549 kB`

_{🤖 This report was generated against 8555daca54fa0ab490b5400b8d67a9430be9e8e5}

size-auditor · 2021-10-26T22:55:12Z

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: 3d5ca9b

Possible causes

The baseline build 3d5ca9b is broken
The Size Auditor run for the baseline build 3d5ca9b was not triggered

Recommendations

Please merge your branch for this Pull request with the latest master build and commit your changes once again

codesandbox-ci · 2021-10-26T23:07:50Z

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 5aa15b6:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2021-10-26T23:17:41Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1045	1025	5000
BaseButton	mount	1054	1080	5000
Breadcrumb	mount	2817	2839	1000
ButtonNext	mount	551	584	5000
Checkbox	mount	1731	1757	5000
CheckboxBase	mount	1538	1477	5000
ChoiceGroup	mount	5357	5379	5000
ComboBox	mount	1068	1064	1000
CommandBar	mount	11149	11053	1000
ContextualMenu	mount	7183	7207	1000
DefaultButton	mount	1316	1282	5000
DetailsRow	mount	4210	4314	5000
DetailsRowFast	mount	4179	4219	5000
DetailsRowNoStyles	mount	4065	4063	5000
Dialog	mount	2705	2809	1000
DocumentCardTitle	mount	177	180	1000
Dropdown	mount	3650	3603	5000
FluentProviderNext	mount	3535	3461	5000
FluentProviderWithTheme	mount	218	226	10
FluentProviderWithTheme	virtual-rerender	104	117	10
FluentProviderWithTheme	virtual-rerender-with-unmount	262	253	10
FocusTrapZone	mount	1973	1907	5000
FocusZone	mount	1911	1931	5000
IconButton	mount	1970	1986	5000
Label	mount	383	393	5000
Layer	mount	3352	3347	5000
Link	mount	543	551	5000
MakeStyles	mount	1926	1954	50000
MenuButton	mount	1703	1712	5000
MessageBar	mount	2165	2151	5000
Nav	mount	3735	3664	1000
OverflowSet	mount	1226	1242	5000
Panel	mount	2708	2708	1000
Persona	mount	946	948	1000
Pivot	mount	1613	1607	1000
PrimaryButton	mount	1488	1439	5000
Rating	mount	8941	8823	5000
SearchBox	mount	1558	1569	5000
Shimmer	mount	2851	2969	5000
Slider	mount	2180	2190	5000
SpinButton	mount	5635	5586	5000
Spinner	mount	466	479	5000
SplitButton	mount	3571	3573	5000
Stack	mount	589	612	5000
StackWithIntrinsicChildren	mount	2033	1937	5000
StackWithTextChildren	mount	5507	5521	5000
SwatchColorPicker	mount	11638	11679	5000
Tabs	mount	1593	1623	1000
TagPicker	mount	2996	2985	5000
TeachingBubble	mount	13997	14061	5000
Text	mount	497	503	5000
TextField	mount	1565	1613	5000
ThemeProvider	mount	1283	1307	5000
ThemeProvider	virtual-rerender	662	666	5000
ThemeProvider	virtual-rerender-with-unmount	2148	2111	5000
Toggle	mount	949	952	5000
buttonNative	mount	151	141	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	232	189	1.23:1
TextAreaMinimalPerf.default	634	566	1.12:1
ButtonMinimalPerf.default	222	200	1.11:1
ChatDuplicateMessagesPerf.default	365	336	1.09:1
GridMinimalPerf.default	405	373	1.09:1
PortalMinimalPerf.default	197	184	1.07:1
RadioGroupMinimalPerf.default	527	491	1.07:1
VideoMinimalPerf.default	744	694	1.07:1
ListNestedPerf.default	666	626	1.06:1
CardMinimalPerf.default	676	644	1.05:1
DividerMinimalPerf.default	420	401	1.05:1
HeaderSlotsPerf.default	885	846	1.05:1
TooltipMinimalPerf.default	1235	1177	1.05:1
AttachmentSlotsPerf.default	1215	1165	1.04:1
SegmentMinimalPerf.default	413	396	1.04:1
StatusMinimalPerf.default	785	756	1.04:1
TreeMinimalPerf.default	915	882	1.04:1
AttachmentMinimalPerf.default	186	180	1.03:1
AvatarMinimalPerf.default	232	225	1.03:1
CarouselMinimalPerf.default	538	521	1.03:1
DropdownManyItemsPerf.default	796	771	1.03:1
EmbedMinimalPerf.default	4782	4640	1.03:1
HeaderMinimalPerf.default	425	411	1.03:1
ImageMinimalPerf.default	433	420	1.03:1
ListCommonPerf.default	750	731	1.03:1
MenuMinimalPerf.default	954	929	1.03:1
SkeletonMinimalPerf.default	418	406	1.03:1
IconMinimalPerf.default	706	684	1.03:1
TableMinimalPerf.default	464	450	1.03:1
ButtonSlotsPerf.default	638	623	1.02:1
FormMinimalPerf.default	473	464	1.02:1
LabelMinimalPerf.default	448	439	1.02:1
ChatMinimalPerf.default	744	735	1.01:1
CheckboxMinimalPerf.default	3001	2965	1.01:1
InputMinimalPerf.default	1440	1421	1.01:1
ListMinimalPerf.default	576	568	1.01:1
MenuButtonMinimalPerf.default	1832	1822	1.01:1
PopupMinimalPerf.default	658	654	1.01:1
ReactionMinimalPerf.default	436	431	1.01:1
TableManyItemsPerf.default	2194	2173	1.01:1
ToolbarMinimalPerf.default	1087	1074	1.01:1
DatepickerMinimalPerf.default	6102	6093	1:1
DialogMinimalPerf.default	851	847	1:1
LoaderMinimalPerf.default	762	762	1:1
RefMinimalPerf.default	269	270	1:1
SliderMinimalPerf.default	1892	1890	1:1
CustomToolbarPrototype.default	4514	4520	1:1
DropdownMinimalPerf.default	3401	3431	0.99:1
FlexMinimalPerf.default	329	333	0.99:1
ListWith60ListItems.default	739	744	0.99:1
ProviderMergeThemesPerf.default	1819	1839	0.99:1
SplitButtonMinimalPerf.default	4823	4856	0.99:1
TextMinimalPerf.default	405	409	0.99:1
BoxMinimalPerf.default	406	416	0.98:1
ItemLayoutMinimalPerf.default	1343	1376	0.98:1
RosterPerf.default	1315	1346	0.98:1
ProviderMinimalPerf.default	1230	1251	0.98:1
ChatWithPopoverPerf.default	434	452	0.96:1
AccordionMinimalPerf.default	165	174	0.95:1
AnimationMinimalPerf.default	458	480	0.95:1
ButtonOverridesMissPerf.default	1953	2060	0.95:1
LayoutMinimalPerf.default	398	424	0.94:1
AlertMinimalPerf.default	314	340	0.92:1

ling1726 · 2021-10-27T07:00:22Z

packages/react-tooltip/src/stories/TooltipPositioning.stories.tsx

+      <div>Each of these buttons places the tooltip in a different location relative to its trigger button.</div>
+      <div className={styles.targetContainer}>
+        <Tooltip content="above start" positioning="above-start">
+          <button style={{ gridArea: '1 / 2' }}>above start</button>


I think we should be using Fluent buttons in these examples. You can check out Menu and Popover stories to see it's going to be a bit painful to have those @ts-ignores but it's the only way to depend on other components until we implement #19866

ling1726 · 2021-10-27T07:01:58Z

packages/react-tooltip/src/stories/TooltipDefault.stories.tsx

+        <Tooltip content="Default tooltip">
+          <button>Default</button>
+        </Tooltip>
+        <Tooltip content="Inverted tooltip" appearance="inverted">


should we take the opportunity in this PR to also break the stories into more atomic stories ? The Default story is generally a the most basic form of the component that can be modified with the control table

Yeah the Tooltip stories are in need of cleanup. It might be better for me to do that in a separate PR, so as not to block this refactoring PR.

packages/react-tooltip/src/stories/TooltipAria.stories.tsx

behowell · 2021-10-27T17:47:40Z

packages/react-tooltip/src/stories/TooltipAria.stories.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta


I haven't seen these codesandbox-dependency comments before... do we have any tools to verify that they're correct and/or update them if the version changes?

not currently. They are a workaround pending resolution of #19866

behowell · 2021-10-27T17:48:41Z

packages/react-tooltip/src/stories/TooltipDefault.stories.tsx

+        <Tooltip content="Default tooltip">
+          <button>Default</button>
+        </Tooltip>
+        <Tooltip content="Inverted tooltip" appearance="inverted">


Yeah the Tooltip stories are in need of cleanup. It might be better for me to do that in a separate PR, so as not to block this refactoring PR.

Co-authored-by: Oleksandr Fediashov <[email protected]>

GeoffCoxMSFT · 2021-10-27T23:22:04Z

@behowell I'll let you take a second pass on these stories to factor them and use other components like Button. This PR can focus only on fixing the codesandbox references.

* Updated stories to support codesandbox * Change files * Update packages/react-tooltip/src/stories/TooltipAria.stories.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]>

GeoffCoxMSFT added 2 commits October 26, 2021 15:39

Updated stories to support codesandbox

dcdcea7

Change files

62c70ad

GeoffCoxMSFT requested review from behowell, khmakoto and a team as code owners October 26, 2021 22:40

msft-fluent-ui-bot assigned bsunderhus Oct 26, 2021

GeoffCoxMSFT requested review from ling1726, miroslavstastny and levithomason October 26, 2021 22:41

khmakoto approved these changes Oct 26, 2021

View reviewed changes

ling1726 reviewed Oct 27, 2021

View reviewed changes

layershifter reviewed Oct 27, 2021

View reviewed changes

packages/react-tooltip/src/stories/TooltipAria.stories.tsx Outdated Show resolved Hide resolved

behowell approved these changes Oct 27, 2021

View reviewed changes

Update packages/react-tooltip/src/stories/TooltipAria.stories.tsx

5aa15b6

Co-authored-by: Oleksandr Fediashov <[email protected]>

GeoffCoxMSFT merged commit d5810cf into master Oct 27, 2021

GeoffCoxMSFT deleted the tooltip-codesandbox branch November 2, 2021 22:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updated tooltip stories to support codesandbox #20373

Updated tooltip stories to support codesandbox #20373

GeoffCoxMSFT commented Oct 26, 2021

fabricteam commented Oct 26, 2021 •

edited

Loading

size-auditor bot commented Oct 26, 2021 •

edited

Loading

codesandbox-ci bot commented Oct 26, 2021 •

edited

Loading

fabricteam commented Oct 26, 2021 •

edited

Loading

ling1726 Oct 27, 2021

ling1726 Oct 27, 2021

behowell Oct 27, 2021

behowell Oct 27, 2021 •

edited

Loading

ling1726 Oct 27, 2021

behowell Oct 27, 2021

GeoffCoxMSFT commented Oct 27, 2021

		@@ -0,0 +1,33 @@
		import * as React from 'react';
		import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta

Updated tooltip stories to support codesandbox #20373

Updated tooltip stories to support codesandbox #20373

Conversation

GeoffCoxMSFT commented Oct 26, 2021

Pull request checklist

Description of changes

fabricteam commented Oct 26, 2021 • edited Loading

📊 Bundle size report

size-auditor bot commented Oct 26, 2021 • edited Loading

Asset size changes

codesandbox-ci bot commented Oct 26, 2021 • edited Loading

fabricteam commented Oct 26, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

ling1726 Oct 27, 2021

Choose a reason for hiding this comment

ling1726 Oct 27, 2021

Choose a reason for hiding this comment

behowell Oct 27, 2021

Choose a reason for hiding this comment

behowell Oct 27, 2021 • edited Loading

Choose a reason for hiding this comment

ling1726 Oct 27, 2021

Choose a reason for hiding this comment

behowell Oct 27, 2021

Choose a reason for hiding this comment

GeoffCoxMSFT commented Oct 27, 2021

fabricteam commented Oct 26, 2021 •

edited

Loading

size-auditor bot commented Oct 26, 2021 •

edited

Loading

codesandbox-ci bot commented Oct 26, 2021 •

edited

Loading

fabricteam commented Oct 26, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)

behowell Oct 27, 2021 •

edited

Loading