React toast /experiment/use motion presence #28780

ling1726 · 2023-08-08T18:14:40Z

yarn workspace @fluentui/react-toast start

Examples to test

Default
Focus Keyboard Shortcut

The focus keyboard shortcut is:

CTRL+M
Delete to delete one toast
Escape to delete all toasts

… presence requestAnimationFrame

…exist

* master: chore(cxe-prg): migrate to new slot API (microsoft#28752) chore(teams-prg): migrate to new slot API (microsoft#28751) chore: re-export slot and assertSlots methods (microsoft#28755) Docs(react-tree): Improve docs and stories (microsoft#28741) feat: implements nested tree selection (microsoft#28668) applying package updates applying package updates feature(react-utilities): implements new slot methods (`slot` and `assertSlots`) (microsoft#28373) fix(TimePicker): Selection now works in locales that don't use "am"/"pm" in their time format (microsoft#28469) bugfix: ensures controlled state works properly + (microsoft#28665) feat(tokens): Add status color tokens (microsoft#28006) feat(tokens): Add colorBrandStroke2Contrast and colorNeutralStrokeAlpha2 (microsoft#28638) Made BreadcrumbButton consistent with Item and Link (microsoft#28672)

fabricteam · 2023-08-08T18:23:16Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`priority-overflow` createOverflowManager	`4.162 kB` `1.735 kB`
`react-badge` Badge	`23.183 kB` `7.254 kB`
`react-badge` CounterBadge	`24.084 kB` `7.553 kB`
`react-badge` PresenceBadge	`22.14 kB` `7.867 kB`
`react-divider` Divider	`17.098 kB` `6.303 kB`
`react-image` Image	`12.029 kB` `4.783 kB`
`react-label` Label	`10.423 kB` `4.31 kB`
`react-overflow` hooks only	`12.419 kB` `4.687 kB`
`react-portal` Portal	`12.255 kB` `4.504 kB`
`react-positioning` usePositioning	`25.137 kB` `9.109 kB`
`react-text` Text - Default	`13.043 kB` `5.129 kB`
`react-text` Text - Wrappers	`16.215 kB` `5.447 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`34.611 kB` `7.295 kB`
`react-theme` Teams: Light theme	`19.282 kB` `5.486 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against f94b6d05d7642563cb96e2718402fbbbab65cbbc}

fabricteam · 2023-08-08T18:23:58Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	644	651	5000
Button	mount	323	317	5000
Field	mount	1158	1160	5000
FluentProvider	mount	711	709	5000
FluentProviderWithTheme	mount	77	82	10
FluentProviderWithTheme	virtual-rerender	65	62	10
FluentProviderWithTheme	virtual-rerender-with-unmount	76	73	10
InfoButton	mount	10	7	5000
MakeStyles	mount	864	877	50000
Persona	mount	1739	1719	5000
SpinButton	mount	1371	1337	5000

fabricteam · 2023-08-08T18:36:17Z

🕵 fluentuiv9 No visual regressions between this PR and main

* master: (66 commits) fix(react-infobutton): Cursor should be pointer when hovering the button to show it's a button (microsoft#28893) chore(react-tags-preview): add docs (microsoft#28899) applying package updates fix(react-tree): stablilize `handleActionsRef` created by TreeItem (microsoft#28896) bugfix: headless flat tree itemType manual definition (microsoft#28898) doc(react-tree): adds a11y edge cases to the docs (microsoft#28897) Update DatePickerDescription.md with note about compat components (microsoft#28882) chore(react-tree): removes preview warning from the docs (microsoft#28886) applying package updates fix(public-docsite): Remove image clipping and move top banner under top nav to avoid header issues (microsoft#28885) feat(react-tree): stable release (microsoft#28845) Virtualizer: Merge scrollref prop with container ref (microsoft#28829) chore(react-jsx-runtime): release stable version (microsoft#28880) applying package updates fix(react-tags-preview): style update - tag hover style should only be on dismiss icon (microsoft#28791) applying package updates feat(public-docsite): Add topbanner component and use it in the public docsite (microsoft#28870) feat: Add VivaEngageIcon to @fluentui/react-icons-mdl2 package (microsoft#28804) docs: Remove InfoButton stories in favor of having only InfoLabel stories. (microsoft#28856) Added more CY and VR tests to the Breadcrumb (microsoft#28790) ...

* master: chore: updates generator to use new slot API (microsoft#28916) chore: bumps version of esbuild-loader to v3.2.0 (microsoft#28878) chore(react-nav-preview): migrates to use new slot API (microsoft#28917)

* master: Accordion : updated styles for accordion header cursor (microsoft#28850) Additional VR tests Charting Library (microsoft#28777) feat(react-motion): create react-motion-preview package scaffolding (microsoft#28947)

…ment/use-motion-presence

fabricteam · 2023-08-23T13:07:58Z

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

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
PortalMinimalPerf.default	89	87	1.02:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AlertMinimalPerf.default	161	145	1.11:1
CardMinimalPerf.default	326	297	1.1:1
DialogMinimalPerf.default	454	426	1.07:1
TextAreaMinimalPerf.default	292	272	1.07:1
ButtonMinimalPerf.default	90	85	1.06:1
CarouselMinimalPerf.default	272	257	1.06:1
AvatarMinimalPerf.default	112	107	1.05:1
ButtonSlotsPerf.default	310	296	1.05:1
AnimationMinimalPerf.default	303	292	1.04:1
ChatWithPopoverPerf.default	195	187	1.04:1
EmbedMinimalPerf.default	1866	1796	1.04:1
InputMinimalPerf.default	541	522	1.04:1
ItemLayoutMinimalPerf.default	709	683	1.04:1
ListNestedPerf.default	323	312	1.04:1
ProviderMinimalPerf.default	206	199	1.04:1
RefMinimalPerf.default	110	106	1.04:1
SkeletonMinimalPerf.default	201	193	1.04:1
TreeMinimalPerf.default	480	462	1.04:1
ChatMinimalPerf.default	431	417	1.03:1
DropdownManyItemsPerf.default	390	379	1.03:1
FormMinimalPerf.default	220	213	1.03:1
GridMinimalPerf.default	198	192	1.03:1
HeaderSlotsPerf.default	473	458	1.03:1
LayoutMinimalPerf.default	202	196	1.03:1
ImageMinimalPerf.default	220	215	1.02:1
LoaderMinimalPerf.default	193	190	1.02:1
DatepickerMinimalPerf.default	3561	3531	1.01:1
HeaderMinimalPerf.default	206	204	1.01:1
PopupMinimalPerf.default	353	348	1.01:1
ReactionMinimalPerf.default	203	201	1.01:1
SplitButtonMinimalPerf.default	2262	2245	1.01:1
TableManyItemsPerf.default	1107	1095	1.01:1
TableMinimalPerf.default	228	226	1.01:1
TextMinimalPerf.default	190	188	1.01:1
ButtonOverridesMissPerf.default	627	627	1:1
DropdownMinimalPerf.default	1397	1404	1:1
FlexMinimalPerf.default	154	154	1:1
ListCommonPerf.default	384	383	1:1
ListMinimalPerf.default	304	305	1:1
ListWith60ListItems.default	370	369	1:1
SegmentMinimalPerf.default	193	193	1:1
StatusMinimalPerf.default	392	392	1:1
CustomToolbarPrototype.default	1486	1480	1:1
BoxMinimalPerf.default	197	198	0.99:1
CheckboxMinimalPerf.default	1126	1135	0.99:1
DividerMinimalPerf.default	205	207	0.99:1
MenuButtonMinimalPerf.default	949	957	0.99:1
ProviderMergeThemesPerf.default	660	668	0.99:1
TooltipMinimalPerf.default	1254	1262	0.99:1
TreeWith60ListItems.default	84	85	0.99:1
AttachmentSlotsPerf.default	639	651	0.98:1
ChatDuplicateMessagesPerf.default	148	151	0.98:1
LabelMinimalPerf.default	219	223	0.98:1
MenuMinimalPerf.default	484	494	0.98:1
RosterPerf.default	1514	1539	0.98:1
RadioGroupMinimalPerf.default	261	265	0.98:1
SliderMinimalPerf.default	736	751	0.98:1
ToolbarMinimalPerf.default	523	538	0.97:1
AttachmentMinimalPerf.default	80	84	0.95:1
IconMinimalPerf.default	377	397	0.95:1
VideoMinimalPerf.default	426	447	0.95:1
AccordionMinimalPerf.default	81	87	0.93:1

fabricteam · 2023-08-23T13:10:35Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-08-23T13:14:22Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2023-08-23T13:20:55Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	613	628	5000
Breadcrumb	mount	1657	1675	1000
Checkbox	mount	1662	1666	5000
CheckboxBase	mount	1454	1460	5000
ChoiceGroup	mount	3015	2875	5000
ComboBox	mount	664	663	1000
CommandBar	mount	6194	6163	1000
ContextualMenu	mount	12128	12555	1000
DefaultButton	mount	745	738	5000
DetailsRow	mount	2162	2218	5000
DetailsRowFast	mount	2166	2326	5000
DetailsRowNoStyles	mount	1987	1994	5000
Dialog	mount	2658	2770	1000
DocumentCardTitle	mount	224	215	1000
Dropdown	mount	1981	1960	5000
FocusTrapZone	mount	1121	1128	5000
FocusZone	mount	1048	1030	5000
GroupedList	mount	41258	41612	2
GroupedList	virtual-rerender	17841	19873	2
GroupedList	virtual-rerender-with-unmount	51191	51419	2
GroupedListV2	mount	220	235	2
GroupedListV2	virtual-rerender	208	213	2
GroupedListV2	virtual-rerender-with-unmount	226	222	2
IconButton	mount	1100	1112	5000
Label	mount	335	344	5000
Layer	mount	2722	2740	5000
Link	mount	397	382	5000
MenuButton	mount	953	955	5000
MessageBar	mount	21169	21237	5000
Nav	mount	1944	1952	1000
OverflowSet	mount	783	776	5000
Panel	mount	2010	1754	1000
Persona	mount	752	748	1000
Pivot	mount	842	869	1000
PrimaryButton	mount	861	846	5000
Rating	mount	4649	4647	5000
SearchBox	mount	907	908	5000
Shimmer	mount	1889	1896	5000
Slider	mount	1323	1331	5000
SpinButton	mount	2822	2903	5000
Spinner	mount	385	387	5000
SplitButton	mount	1856	1825	5000
Stack	mount	397	409	5000
StackWithIntrinsicChildren	mount	854	827	5000
StackWithTextChildren	mount	2587	2621	5000
SwatchColorPicker	mount	6148	6095	5000
TagPicker	mount	1466	1451	5000
Text	mount	362	374	5000
TextField	mount	940	937	5000
ThemeProvider	mount	820	837	5000
ThemeProvider	virtual-rerender	571	579	5000
ThemeProvider	virtual-rerender-with-unmount	1302	1266	5000
Toggle	mount	601	597	5000
buttonNative	mount	192	192	5000

marcosmoura and others added 16 commits August 1, 2023 14:15

feat: implement useMotionPresence hook

1faa4c8

docs: add missing change files

230e273

fix: improve performance of duration calculation

b8128e7

feat: implement useAnimationFrame hook to help controlling the motion…

c721171

… presence requestAnimationFrame

fix: improve type definition to avoid typecast

6bbf319

fix: return a blank style declaration in case global "window" do not …

44b58d5

…exist

fix: regenerate API

b3124d6

fix: regenerate API

caef0bd

Merge branch 'master' into feat/use-motion-presence-hook

ac4e941

revert: use RefCallback instead of Ref

8fa8f4a

fix: regenerate API

45ac91f

Merge branch 'master' into feat/use-motion-presence-hook

2497b77

fix: regenerate API

cceb832

feat: simplify API by removing redundant prop

d3cbded

experiment: useMotionPresence with Toast

04ee339

github-actions bot added this to the August Project Cycle Q4 2023 milestone Aug 8, 2023

ling1726 mentioned this pull request Aug 8, 2023

feat(react-motion): add useMotion hook #28699

Merged

marcosmoura added 9 commits August 17, 2023 18:06

feat: implement useMotion hook instead of useMotionPresence

ab9ff66

feat: remove useMotionPresence hook

76d1b82

fix: remove old changefile

7fd87f9

feat: expose useAnimationFrame hook

1e16743

fix: add missing changefile

41e9e8c

Merge branch 'master' into feat/use-motion-presence-hook

647b9e5

fix: mismatch dependencies

f384b82

feat: add motion docs to public site

ce4d183

marcosmoura and others added 18 commits August 17, 2023 18:38

docs: add documentatio for the hook

05ba7e1

feat: create useMotion hook accepting either a boolean or motion state

e9e8bbe

Merge branch 'master' into feat/use-motion-presence-hook

9152d81

fix: upgrade stories to use latest changes to hook

3872d0a

feat: make package public

6debd98

fix: add missing change file

7f27429

fix: join two related hooks in one file to be easier to test

9593026

fix: remove unused imports

fd9970f

docs: move stories to public site

5cb0a56

docs: add title to example

92ecfed

Merge branch 'master' into feat/use-motion-presence-hook

190493f

fix: remove leftover property

9086d1a

fix: add type to improve useMemo

969ce87

Merge branch 'master' into feat/use-motion-presence-hook

1d8e9b8

* master: chore: updates generator to use new slot API (microsoft#28916) chore: bumps version of esbuild-loader to v3.2.0 (microsoft#28878) chore(react-nav-preview): migrates to use new slot API (microsoft#28917)

Merge branch 'master' into feat/use-motion-presence-hook

c437db6

* master: Accordion : updated styles for accordion header cursor (microsoft#28850) Additional VR tests Charting Library (microsoft#28777) feat(react-motion): create react-motion-preview package scaffolding (microsoft#28947)

feat: use boolean instead of function

f09ff57

Merge branch 'feat/use-motion-presence-hook' into react-toast-/experi…

dad1942

…ment/use-motion-presence

update

a23dac8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React toast /experiment/use motion presence #28780

React toast /experiment/use motion presence #28780

ling1726 commented Aug 8, 2023 •

edited

Loading

fabricteam commented Aug 8, 2023 •

edited

Loading

fabricteam commented Aug 8, 2023 •

edited

Loading

fabricteam commented Aug 8, 2023 •

edited

Loading

fabricteam commented Aug 23, 2023

fabricteam commented Aug 23, 2023

fabricteam commented Aug 23, 2023

fabricteam commented Aug 23, 2023

React toast /experiment/use motion presence #28780

Are you sure you want to change the base?

React toast /experiment/use motion presence #28780

Conversation

ling1726 commented Aug 8, 2023 • edited Loading

fabricteam commented Aug 8, 2023 • edited Loading

📊 Bundle size report

fabricteam commented Aug 8, 2023 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Aug 8, 2023 • edited Loading

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam commented Aug 23, 2023

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

fabricteam commented Aug 23, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam commented Aug 23, 2023

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam commented Aug 23, 2023

Perf Analysis (@fluentui/react)

ling1726 commented Aug 8, 2023 •

edited

Loading

fabricteam commented Aug 8, 2023 •

edited

Loading

fabricteam commented Aug 8, 2023 •

edited

Loading

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

fabricteam commented Aug 8, 2023 •

edited

Loading

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

Perf Analysis (`@fluentui/react`)