Update Tooltip API with visible controlled prop, and onVisibleChange event by behowell · Pull Request #18610 · microsoft/fluentui

behowell · 2021-06-17T22:30:26Z

Pull request checklist

Include a change request file using $ yarn change

Description of changes

This PR includes a few updates to the Tooltip API:

Add visible prop that can be used to control the tooltip's visibility programmatically.
Add onVisibleChange event to notify controlled and uncontrolled tooltips when the visibility should change.
Replace targetRef with target for specifying the target of the tooltip
If target is not specified, use a ref on the child element to determine the target automatically. This replaces the previous method of using the PointerEnter/Focus event's currentTarget prop to determine the target. This was required because now the tooltip can be made visible without a corresponding event.
Remove the onlyIfTruncated prop. The functionality can be implemented by using a controlled visible prop. There's an example in Tooltip.stories.tsx.

…ooltip-beforeshow

size-auditor · 2021-06-17T22:39:51Z

Asset size changes

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

Baseline commit: 37b972a757b0521cbce537b45c992c164d3fe62f (build)

fabricteam · 2021-06-17T22:54:54Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
buttonNative	mount	129	138	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	878	908	5000
BaseButton	mount	995	970	5000
Breadcrumb	mount	2902	2992	1000
ButtonNext	mount	603	599	5000
Checkbox	mount	1720	1703	5000
CheckboxBase	mount	1471	1482	5000
ChoiceGroup	mount	5309	5308	5000
ComboBox	mount	1056	1070	1000
CommandBar	mount	10823	11090	1000
ContextualMenu	mount	6712	6750	1000
DefaultButton	mount	1311	1252	5000
DetailsRow	mount	4106	4203	5000
DetailsRowFast	mount	4087	4090	5000
DetailsRowNoStyles	mount	3829	3920	5000
Dialog	mount	2210	2217	1000
DocumentCardTitle	mount	152	155	1000
Dropdown	mount	3638	3632	5000
FluentProviderNext	mount	7607	7663	5000
FocusTrapZone	mount	1949	1923	5000
FocusZone	mount	1984	1974	5000
IconButton	mount	1979	2038	5000
Label	mount	364	383	5000
Layer	mount	1966	1946	5000
Link	mount	550	536	5000
MakeStyles	mount	1964	1989	50000
MenuButton	mount	1646	1630	5000
MessageBar	mount	2285	2243	5000
Nav	mount	3591	3666	1000
OverflowSet	mount	1177	1159	5000
Panel	mount	2300	2217	1000
Persona	mount	889	896	1000
Pivot	mount	1568	1594	1000
PrimaryButton	mount	1429	1425	5000
Rating	mount	8786	8605	5000
SearchBox	mount	1481	1482	5000
Shimmer	mount	2798	2799	5000
Slider	mount	2175	2202	5000
SpinButton	mount	5415	5378	5000
Spinner	mount	457	464	5000
SplitButton	mount	3422	3443	5000
Stack	mount	561	558	5000
StackWithIntrinsicChildren	mount	1777	1827	5000
StackWithTextChildren	mount	5222	5247	5000
SwatchColorPicker	mount	11290	11097	5000
Tabs	mount	1525	1500	1000
TagPicker	mount	2662	2664	5000
TeachingBubble	mount	12557	12312	5000
Text	mount	489	473	5000
TextField	mount	1545	1564	5000
ThemeProvider	mount	1260	1293	5000
ThemeProvider	virtual-rerender	632	668	5000
Toggle	mount	906	901	5000
buttonNative	mount	129	138	5000	Possible regression

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
DatepickerMinimalPerf.default	6627	5729	1.16:1
TreeWith60ListItems.default	209	181	1.15:1
CarouselMinimalPerf.default	545	511	1.07:1
BoxMinimalPerf.default	412	388	1.06:1
GridMinimalPerf.default	393	372	1.06:1
LabelMinimalPerf.default	463	438	1.06:1
AnimationMinimalPerf.default	466	443	1.05:1
DropdownManyItemsPerf.default	778	738	1.05:1
DropdownMinimalPerf.default	3541	3383	1.05:1
IconMinimalPerf.default	708	676	1.05:1
AttachmentSlotsPerf.default	1223	1177	1.04:1
ChatWithPopoverPerf.default	413	399	1.04:1
LayoutMinimalPerf.default	422	406	1.04:1
LoaderMinimalPerf.default	777	746	1.04:1
SkeletonMinimalPerf.default	401	384	1.04:1
ButtonSlotsPerf.default	608	593	1.03:1
CardMinimalPerf.default	614	598	1.03:1
ChatMinimalPerf.default	754	730	1.03:1
CheckboxMinimalPerf.default	2977	2899	1.03:1
PortalMinimalPerf.default	193	187	1.03:1
RadioGroupMinimalPerf.default	518	503	1.03:1
ReactionMinimalPerf.default	441	430	1.03:1
RefMinimalPerf.default	252	245	1.03:1
TreeMinimalPerf.default	894	867	1.03:1
FlexMinimalPerf.default	329	323	1.02:1
FormMinimalPerf.default	471	462	1.02:1
InputMinimalPerf.default	1377	1354	1.02:1
ListMinimalPerf.default	584	572	1.02:1
MenuMinimalPerf.default	974	951	1.02:1
ProviderMinimalPerf.default	1106	1080	1.02:1
SplitButtonMinimalPerf.default	4277	4173	1.02:1
TableMinimalPerf.default	458	450	1.02:1
ListCommonPerf.default	733	729	1.01:1
ListNestedPerf.default	635	630	1.01:1
ProviderMergeThemesPerf.default	1803	1790	1.01:1
VideoMinimalPerf.default	700	692	1.01:1
EmbedMinimalPerf.default	4580	4572	1:1
ItemLayoutMinimalPerf.default	1371	1366	1:1
MenuButtonMinimalPerf.default	1876	1881	1:1
PopupMinimalPerf.default	666	664	1:1
SliderMinimalPerf.default	1734	1732	1:1
TextMinimalPerf.default	390	389	1:1
TooltipMinimalPerf.default	1123	1121	1:1
DialogMinimalPerf.default	822	830	0.99:1
DividerMinimalPerf.default	411	414	0.99:1
SegmentMinimalPerf.default	382	385	0.99:1
TableManyItemsPerf.default	2178	2202	0.99:1
TextAreaMinimalPerf.default	564	569	0.99:1
AlertMinimalPerf.default	316	323	0.98:1
ButtonMinimalPerf.default	188	192	0.98:1
ImageMinimalPerf.default	450	458	0.98:1
RosterPerf.default	1269	1300	0.98:1
CustomToolbarPrototype.default	4174	4247	0.98:1
ToolbarMinimalPerf.default	1039	1065	0.98:1
ButtonOverridesMissPerf.default	1868	1916	0.97:1
HeaderMinimalPerf.default	420	432	0.97:1
ListWith60ListItems.default	702	726	0.97:1
StatusMinimalPerf.default	755	777	0.97:1
AttachmentMinimalPerf.default	173	180	0.96:1
AvatarMinimalPerf.default	219	228	0.96:1
ChatDuplicateMessagesPerf.default	310	333	0.93:1
HeaderSlotsPerf.default	882	958	0.92:1
AccordionMinimalPerf.default	159	177	0.9:1

…ooltip-beforeshow

…g master

codesandbox-ci · 2021-07-10T00:38:44Z

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 4a8b91e:

Sandbox	Source
Fluent UI React Starter	Configuration

ling1726 · 2021-07-12T07:17:34Z

Using an imperative ref for this is generally an anti-pattern in React. It would be much more aligned with best practices to allow the component to be controlled with an open/visible prop.

Is there are requirement to use an imperative ref for this ?

packages/react-examples/src/react-tooltip/Tooltip/Tooltip.stories.tsx

packages/react-tooltip/src/components/Tooltip/Tooltip.types.ts

behowell · 2021-07-14T18:00:03Z

@ling1726 Thanks for the review! I'll update it to use a controlled visible prop. I had originally thought that the controlled prop wouldn't work well given the complexity of how tooltips use delays, auto-hide if another tooltip shows, and don't have a direct ref to the target element. But after trying it out, I think the controlled prop actually works great. It's cleaner than the imperative API, and I agree that consistency with Popover/Menu is the right call.

fabricteam · 2021-07-16T02:03:31Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`197.903 kB` `57.83 kB`	`197.889 kB` `57.824 kB`	`14 B` `6 B`
`react-menu` Menu (including children components)	`113.961 kB` `34.398 kB`	`113.947 kB` `34.394 kB`	`14 B` `4 B`
`react-menu` Menu (including selectable components)	`115.973 kB` `34.66 kB`	`115.959 kB` `34.655 kB`	`14 B` `5 B`
`react-popover` Popover	`140.952 kB` `41.981 kB`	`140.938 kB` `41.975 kB`	`14 B` `6 B`
`react-positioning` usePopper	`23.169 kB` `7.949 kB`	`23.155 kB` `7.94 kB`	`14 B` `9 B`
`react-tooltip` Tooltip	`45.934 kB` `15.645 kB`	`45.272 kB` `15.451 kB`	`662 B` `194 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`78.403 kB` `23.179 kB`
`react-avatar` Avatar	`54.293 kB` `14.665 kB`
`react-badge` Badge	`24.393 kB` `7.174 kB`
`react-badge` CounterBadge	`27.206 kB` `7.862 kB`
`react-badge` PresenseBadge	`237 B` `177 B`
`react-button` Button	`25.967 kB` `8.231 kB`
`react-button` CompoundButton	`31.409 kB` `9.107 kB`
`react-button` MenuButton	`27.552 kB` `8.732 kB`
`react-button` ToggleButton	`36.393 kB` `8.907 kB`
`react-components` react-components: FluentProvider & webLightTheme	`35.513 kB` `11.437 kB`
`react-divider` Divider	`15.889 kB` `5.747 kB`
`react-image` Image	`10.642 kB` `4.264 kB`
`react-label` Label	`28.622 kB` `10.654 kB`
`react-link` Link	`14.715 kB` `6.012 kB`
`react-make-styles` makeStaticStyles (runtime)	`7.59 kB` `3.321 kB`
`react-make-styles` makeStyles + mergeClasses (runtime)	`22.135 kB` `8.356 kB`
`react-make-styles` makeStyles + mergeClasses (build time)	`2.557 kB` `1.202 kB`
`react-portal` Portal	`7.78 kB` `2.672 kB`
`react-provider` FluentProvider	`16.235 kB` `5.972 kB`
`react-utilities` SSRProvider	`213 B` `170 B`

_{🤖 This report was generated against 37b972a757b0521cbce537b45c992c164d3fe62f}

packages/react-examples/src/react-tooltip/Tooltip/Tooltip.stories.tsx

ling1726 · 2021-07-16T09:54:28Z

It would be great to see some e2e tests with cypress for this, I can guide you to writing them if you'd like

packages/react-examples/src/react-tooltip/Tooltip/Tooltip.stories.tsx

packages/react-tooltip/src/components/Tooltip/useTooltip.tsx

behowell · 2021-07-20T02:11:07Z

It would be great to see some e2e tests with cypress for this, I can guide you to writing them if you'd like

I'm planning to write some tests for tooltip soon; but I wanted to get this PR in first. I'll follow up with you about cypress.

…ull)

…ooltip-beforeshow

msft-fluent-ui-bot · 2021-07-23T07:40:51Z

🎉@fluentui/react-tooltip@v9.0.0-alpha.60 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-23T07:41:00Z

🎉@fluentui/react-utilities@v9.0.0-alpha.35 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-23T07:41:24Z

🎉@fluentui/react-positioning@v9.0.0-alpha.36 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-23T07:42:03Z

🎉@fluentui/react-context-selector@v9.0.0-alpha.19 has been released which incorporates this pull request.:tada:

Handy links:

…event (microsoft#18610) * Add `visible` prop that can be used to control the tooltip's visibility programmatically. * Add `onVisibleChange` event to notify controlled and uncontrolled tooltips when the visibility should change. * Replace `targetRef` with `target` for specifying the target of the tooltip * If `target` is not specified, use a ref on the child element to determine the target automatically. This replaces the previous method of using the PointerEnter/Focus event's currentTarget prop to determine the target. This was required because now the tooltip can be made visible without a corresponding event. * Remove the `onlyIfTruncated` prop. The functionality can be implemented by using a controlled `visible` prop. There's an example in Tooltip.stories.tsx.

behowell and others added 7 commits June 11, 2021 14:51

Replace onlyIfTruncated with onBeforeShow event

5228894

Merge branch 'master' of https://github.com/microsoft/fluentui into t…

e3ca0ed

…ooltip-beforeshow

Add onShow and onHide events, and TooltipImperativeApi

049c6b1

Merge branch 'master' of https://github.com/microsoft/fluentui into t…

2b18399

…ooltip-beforeshow

Update api.md

9c7602a

Change files

f3bdde6

Merge branch 'microsoft:master' into tooltip-beforeshow

7800d38

behowell requested a review from a team as a code owner June 17, 2021 22:30

msft-fluent-ui-bot assigned miroslavstastny Jun 17, 2021

Merge branch 'master' of https://github.com/microsoft/fluentui into t…

67d5c9c

…ooltip-beforeshow

behowell requested review from a team, EisenbergEffect, chrisdholt and nicholasrice as code owners July 10, 2021 00:07

Revert changes to files that were automatically formatted when pullin…

4560e1e

…g master

behowell requested review from khmakoto and removed request for a team, EisenbergEffect, chrisdholt and nicholasrice July 10, 2021 00:15

ling1726 reviewed Jul 12, 2021

View reviewed changes

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

ling1726 reviewed Jul 12, 2021

View reviewed changes

packages/react-tooltip/src/components/Tooltip/Tooltip.types.ts Outdated Show resolved Hide resolved

ling1726 reviewed Jul 12, 2021

View reviewed changes

packages/react-tooltip/src/components/Tooltip/Tooltip.types.ts Outdated Show resolved Hide resolved

behowell added 2 commits July 15, 2021 18:31

Replace imperative Tooltip show/hide API with controllable visible prop

f145f8d

Comment unused story style

7786ac3

behowell added 3 commits July 15, 2021 18:55

Replace useControllableValue with useControllableState

5c4c386

Fix triggerProps ref typings

ab6fefd

Clean up Tooltip stories

16c69b0

behowell changed the title ~~Update Tooltip API with onBeforeShow/onShow/onHide events, and imperative show/hide functions~~ Update Tooltip API with visible controlled prop, and onVisibleChange event Jul 16, 2021

ling1726 reviewed Jul 16, 2021

View reviewed changes

packages/react-examples/src/react-tooltip/Tooltip/Tooltip.stories.tsx Show resolved Hide resolved

ling1726 reviewed Jul 16, 2021

View reviewed changes

packages/react-examples/src/react-tooltip/Tooltip/Tooltip.stories.tsx Show resolved Hide resolved

ling1726 reviewed Jul 16, 2021

View reviewed changes

packages/react-tooltip/src/components/Tooltip/useTooltip.tsx Outdated Show resolved Hide resolved

behowell added the Component: Tooltip label Jul 20, 2021

behowell added 5 commits July 21, 2021 11:28

Update Popper to use options.target whenever it is defined (even if n…

cbe4e15

…ull)

Have tooltip set the target prop to popper's target option

71dc4d2

Merge branch 'master' of https://github.com/microsoft/fluentui into t…

a94fb56

…ooltip-beforeshow

Fix tooltip merge conflict

855f11a

Change files

a11d472

behowell requested a review from a team as a code owner July 21, 2021 18:38

behowell mentioned this pull request Jul 21, 2021

Tooltip Convergence #16735

Closed

34 tasks

behowell added 4 commits July 21, 2021 16:08

Improve type safety of the onlyChild function

2a141c7

Fix merging the ref for the child element, and improve typings

207b015

Change files

38a7035

Update API file

4a8b91e

ling1726 approved these changes Jul 22, 2021

View reviewed changes

behowell merged commit d38109a into microsoft:master Jul 22, 2021

behowell deleted the tooltip-beforeshow branch July 22, 2021 19:09

Conversation

behowell commented Jun 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Uh oh!

size-auditor bot commented Jun 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jun 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

codesandbox-ci bot commented Jul 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ling1726 commented Jul 12, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

behowell commented Jul 14, 2021

Uh oh!

fabricteam commented Jul 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

Uh oh!

ling1726 commented Jul 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

behowell commented Jul 20, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 23, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 23, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 23, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 23, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

behowell commented Jun 17, 2021 •

edited

Loading

size-auditor bot commented Jun 17, 2021 •

edited

Loading

fabricteam commented Jun 17, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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

codesandbox-ci bot commented Jul 10, 2021 •

edited

Loading

fabricteam commented Jul 16, 2021 •

edited

Loading

ling1726 commented Jul 16, 2021 •

edited

Loading