Refactor Tooltip to remove mergeProps by behowell · Pull Request #19428 · microsoft/fluentui

behowell · 2021-08-18T01:03:32Z

Pull request checklist

Addresses an existing issue: Migrates Converged component to use simplified prop merging #18844 Fix tooltip event arguments #19723
Include a change request file using $ yarn change

Description of changes

Refactor TooltipProps and related types, and update useTooltip and renderTooltip to use the new approach described in RFC #18642

codesandbox-ci · 2021-08-18T01:10:55Z

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 1e92ed7:

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

fabricteam · 2021-08-18T01:16:33Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-tooltip` Tooltip	`45.412 kB` `15.442 kB`	`45.739 kB` `15.56 kB`	`-327 B` `-118 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`164.715 kB` `46.961 kB`
`react-components` react-components: FluentProvider & webLightTheme	`35.769 kB` `11.404 kB`

_{🤖 This report was generated against 0d26909912889432060fd4c87b2f4a45017e1532}

size-auditor · 2021-08-18T01:21:38Z

Asset size changes

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

Baseline commit: 0d26909912889432060fd4c87b2f4a45017e1532 (build)

fabricteam · 2021-08-18T01:53:41Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1116	1073	5000
BaseButton	mount	1076	1067	5000
Breadcrumb	mount	2871	2851	1000
ButtonNext	mount	526	542	5000
Checkbox	mount	1787	1811	5000
CheckboxBase	mount	1557	1541	5000
ChoiceGroup	mount	5549	5420	5000
ComboBox	mount	1140	1103	1000
CommandBar	mount	11489	11482	1000
ContextualMenu	mount	7473	7472	1000
DefaultButton	mount	1312	1318	5000
DetailsRow	mount	4290	4280	5000
DetailsRowFast	mount	4270	4230	5000
DetailsRowNoStyles	mount	3995	4187	5000
Dialog	mount	2667	2610	1000
DocumentCardTitle	mount	156	169	1000
Dropdown	mount	3681	3621	5000
FluentProviderNext	mount	7541	7641	5000
FluentProviderWithTheme	mount	337	360	10
FluentProviderWithTheme	virtual-rerender	101	117	10
FluentProviderWithTheme	virtual-rerender-with-unmount	519	513	10
FocusTrapZone	mount	2098	2076	5000
FocusZone	mount	2093	2059	5000
IconButton	mount	2049	2112	5000
Label	mount	362	369	5000
Layer	mount	3322	3367	5000
Link	mount	556	534	5000
MakeStyles	mount	1990	1937	50000
MenuButton	mount	1724	1739	5000
MessageBar	mount	2214	2235	5000
Nav	mount	3791	3763	1000
OverflowSet	mount	1271	1255	5000
Panel	mount	2583	2679	1000
Persona	mount	974	944	1000
Pivot	mount	1618	1625	1000
PrimaryButton	mount	1462	1521	5000
Rating	mount	9326	9210	5000
SearchBox	mount	1610	1581	5000
Shimmer	mount	3097	3075	5000
Slider	mount	2270	2282	5000
SpinButton	mount	5677	5747	5000
Spinner	mount	466	453	5000
SplitButton	mount	3607	3666	5000
Stack	mount	574	574	5000
StackWithIntrinsicChildren	mount	2075	2048	5000
StackWithTextChildren	mount	5439	5550	5000
SwatchColorPicker	mount	11894	11913	5000
Tabs	mount	1636	1606	1000
TagPicker	mount	3073	3034	5000
TeachingBubble	mount	14585	14552	5000
Text	mount	476	493	5000
TextField	mount	1634	1596	5000
ThemeProvider	mount	1347	1309	5000
ThemeProvider	virtual-rerender	637	642	5000
ThemeProvider	virtual-rerender-with-unmount	2114	2125	5000
Toggle	mount	936	969	5000
buttonNative	mount	132	131	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ListMinimalPerf.default	638	591	1.08:1
PortalMinimalPerf.default	209	193	1.08:1
ButtonMinimalPerf.default	226	212	1.07:1
CardMinimalPerf.default	696	653	1.07:1
HeaderMinimalPerf.default	453	425	1.07:1
FlexMinimalPerf.default	347	327	1.06:1
RadioGroupMinimalPerf.default	552	521	1.06:1
SkeletonMinimalPerf.default	428	403	1.06:1
TreeWith60ListItems.default	216	203	1.06:1
BoxMinimalPerf.default	416	397	1.05:1
ToolbarMinimalPerf.default	1141	1090	1.05:1
ButtonSlotsPerf.default	672	646	1.04:1
DropdownManyItemsPerf.default	857	827	1.04:1
HeaderSlotsPerf.default	935	898	1.04:1
ItemLayoutMinimalPerf.default	1450	1398	1.04:1
TextMinimalPerf.default	424	407	1.04:1
VideoMinimalPerf.default	772	743	1.04:1
AttachmentSlotsPerf.default	1247	1210	1.03:1
AvatarMinimalPerf.default	234	228	1.03:1
ChatDuplicateMessagesPerf.default	362	350	1.03:1
ChatMinimalPerf.default	781	761	1.03:1
FormMinimalPerf.default	495	480	1.03:1
ListCommonPerf.default	785	762	1.03:1
LoaderMinimalPerf.default	802	782	1.03:1
RefMinimalPerf.default	272	264	1.03:1
StatusMinimalPerf.default	818	796	1.03:1
AttachmentMinimalPerf.default	205	200	1.02:1
ButtonOverridesMissPerf.default	2067	2019	1.02:1
CarouselMinimalPerf.default	552	540	1.02:1
DialogMinimalPerf.default	873	860	1.02:1
GridMinimalPerf.default	415	408	1.02:1
MenuButtonMinimalPerf.default	1917	1882	1.02:1
PopupMinimalPerf.default	676	663	1.02:1
SliderMinimalPerf.default	1946	1905	1.02:1
TableManyItemsPerf.default	2288	2241	1.02:1
AlertMinimalPerf.default	336	333	1.01:1
ChatWithPopoverPerf.default	443	440	1.01:1
CheckboxMinimalPerf.default	3073	3057	1.01:1
DropdownMinimalPerf.default	3543	3517	1.01:1
LayoutMinimalPerf.default	439	435	1.01:1
ListWith60ListItems.default	770	760	1.01:1
MenuMinimalPerf.default	984	974	1.01:1
RosterPerf.default	1391	1382	1.01:1
SegmentMinimalPerf.default	420	415	1.01:1
SplitButtonMinimalPerf.default	4950	4888	1.01:1
CustomToolbarPrototype.default	4672	4619	1.01:1
AccordionMinimalPerf.default	188	188	1:1
AnimationMinimalPerf.default	482	482	1:1
EmbedMinimalPerf.default	4824	4836	1:1
InputMinimalPerf.default	1485	1478	1:1
ProviderMergeThemesPerf.default	1892	1887	1:1
ProviderMinimalPerf.default	1301	1295	1:1
TooltipMinimalPerf.default	1233	1227	1:1
DividerMinimalPerf.default	425	428	0.99:1
ReactionMinimalPerf.default	456	460	0.99:1
IconMinimalPerf.default	757	768	0.99:1
TableMinimalPerf.default	478	484	0.99:1
TextAreaMinimalPerf.default	616	625	0.99:1
DatepickerMinimalPerf.default	6403	6539	0.98:1
ListNestedPerf.default	662	674	0.98:1
ImageMinimalPerf.default	459	472	0.97:1
LabelMinimalPerf.default	466	479	0.97:1
TreeMinimalPerf.default	937	962	0.97:1

…ooltip-unmergeprops

…oltip-unmergeprops

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

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

bsunderhus · 2021-08-23T17:17:49Z

Please, keep this blocked meanwhile the RFCs (#18949, #19068) are implemented 🙏🏼, otherwise we'll face a huge amount of conflicts. I'm hoping to finish the last RFC this week

layershifter · 2021-08-31T10:22:55Z

@behowell as #19483 was merged, this is not blocked anymore. Can you please update this PR to include latest changes?

…ooltip-unmergeprops

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

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

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

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

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

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

msft-fluent-ui-bot · 2021-09-24T17:52:28Z

Hello @khmakoto!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msft-fluent-ui-bot`) and give me an instruction to get started! Learn more here.

#### Pull request checklist - [x] Addresses an existing issue: microsoft#18844 microsoft#19723 - [x] Include a change request file using `$ yarn change` #### Description of changes Refactor `TooltipProps` and related types, and update `useTooltip` and `renderTooltip` to use the new approach described in RFC microsoft#18642

behowell added 2 commits August 17, 2021 17:57

Refactor Tooltip to remove mergeProps

e225477

Change files

5e6096f

behowell added the Component: Tooltip label Aug 18, 2021

behowell self-assigned this Aug 18, 2021

This was referenced Aug 18, 2021

Migrates Converged component to use simplified prop merging #18844

Closed

Tooltip Convergence #16735

Closed

Update test to reset generated IDs for each test

394748a

behowell marked this pull request as ready for review August 18, 2021 01:27

behowell requested a review from a team as a code owner August 18, 2021 01:27

behowell requested a review from bsunderhus August 18, 2021 01:27

behowell added 3 commits August 19, 2021 18:29

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

58ef307

…ooltip-unmergeprops

Fix merge conflict

0e80ff3

Merge branch 'master' of https://github.com/behowell/fluentui into to…

b9dd9db

…oltip-unmergeprops

layershifter reviewed Aug 23, 2021

View reviewed changes

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

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

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

bsunderhus added the Status: Blocked Resolution blocked by another issue label Aug 23, 2021

layershifter removed the Status: Blocked Resolution blocked by another issue label Aug 31, 2021

behowell added this to the September Project Cycle Q3 2021 milestone Sep 3, 2021

behowell added 2 commits September 7, 2021 03:17

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

84bcb06

…ooltip-unmergeprops

Merge with root-as-slot changes

cf44399

behowell mentioned this pull request Sep 13, 2021

Project: Prepare Tooltip & Avatar for beta #19778

Closed

behowell added 2 commits September 16, 2021 02:36

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

85116a2

…ooltip-unmergeprops

Update for latest changes to root-as-slot and IntrinsicShorthandProps

41a8cbc

behowell added the Priority 1: High label Sep 16, 2021

bsunderhus self-assigned this Sep 23, 2021

Merge branch 'master' into pr/behowell/19428

e1dca5d

behowell requested a review from khmakoto as a code owner September 23, 2021 11:39

bsunderhus added 3 commits September 23, 2021 13:50

Updates pointing to withArrow

217a7fd

Updates API

2ee8e31

Merge branch 'master' into pr/behowell/19428

4726c6d

bsunderhus approved these changes Sep 23, 2021

View reviewed changes

layershifter reviewed Sep 23, 2021

View reviewed changes

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

layershifter reviewed Sep 23, 2021

View reviewed changes

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

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

4601900

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

layershifter reviewed Sep 23, 2021

View reviewed changes

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

bsunderhus and others added 3 commits September 23, 2021 15:00

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

d47975e

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Updates onVisibleChange usage to follow signature

684c62f

Remove pointing

436951d

layershifter approved these changes Sep 23, 2021

View reviewed changes

Updates code-style

4f28b30

khmakoto reviewed Sep 24, 2021

View reviewed changes

bsunderhus added 3 commits September 24, 2021 10:23

Updates Tooltip interfaces to type

87a45ee

Merge branch 'master' into pr/behowell/19428

56b988f

Updates API

1e92ed7

bsunderhus requested a review from khmakoto September 24, 2021 08:25

khmakoto approved these changes Sep 24, 2021

View reviewed changes

khmakoto added the AutoMerge label Sep 24, 2021

msft-fluent-ui-bot merged commit c45d347 into microsoft:master Sep 24, 2021

behowell deleted the tooltip-unmergeprops branch July 25, 2022 17:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor Tooltip to remove mergeProps#19428

Refactor Tooltip to remove mergeProps#19428
msft-fluent-ui-bot merged 22 commits intomicrosoft:masterfrom
behowell:tooltip-unmergeprops

behowell commented Aug 18, 2021 •

edited by layershifter

Loading

Uh oh!

codesandbox-ci bot commented Aug 18, 2021 •

edited

Loading

Uh oh!

fabricteam commented Aug 18, 2021 •

edited

Loading

Uh oh!

size-auditor bot commented Aug 18, 2021 •

edited

Loading

Uh oh!

fabricteam commented Aug 18, 2021 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bsunderhus commented Aug 23, 2021

Uh oh!

layershifter commented Aug 31, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

msft-fluent-ui-bot commented Sep 24, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

behowell commented Aug 18, 2021 • edited by layershifter Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Aug 18, 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!

Uh oh!

Uh oh!

Uh oh!

bsunderhus commented Aug 23, 2021

Uh oh!

layershifter commented Aug 31, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

msft-fluent-ui-bot commented Sep 24, 2021

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-fluent-ui-bot) and give me an instruction to get started! Learn more here.

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

behowell commented Aug 18, 2021 •

edited by layershifter

Loading

codesandbox-ci bot commented Aug 18, 2021 •

edited

Loading

fabricteam commented Aug 18, 2021 •

edited

Loading

size-auditor bot commented Aug 18, 2021 •

edited

Loading

fabricteam commented Aug 18, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msft-fluent-ui-bot`) and give me an instruction to get started! Learn more here.