feat: Implement state management for toasts #27800

ling1726 · 2023-05-09T16:28:18Z

Starts with the simplest use case - make a toast appear configurable with:

timeout
position

The main toast management will be done in vanilla js, so that it can be reusable by non-react code in the future (i.e. web-components)

Addresses #27776

Starts with the simplest use case - make a toast appear configurable with: - timeout - position

packages/fluentui/react-northstar/src/components/Animation/Animation.tsx

packages/react-components/react-toast/src/state/vanilla/toast.ts

fabricteam · 2023-05-09T16:44:28Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
InfoButton	mount	21	19	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	737	716	5000
Button	mount	369	372	5000
Field	mount	1263	1298	5000
FluentProvider	mount	905	908	5000
FluentProviderWithTheme	mount	115	109	10
FluentProviderWithTheme	virtual-rerender	98	91	10
FluentProviderWithTheme	virtual-rerender-with-unmount	103	101	10
InfoButton	mount	21	19	5000	Possible regression
MakeStyles	mount	1127	1119	50000
Persona	mount	2030	2011	5000
SpinButton	mount	1591	1595	5000

codesandbox-ci · 2023-05-09T16:48:49Z

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

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

size-auditor · 2023-05-09T16:49:10Z

Asset size changes

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

Baseline commit: 27f252e27361df75a94c5bc5b09fc0097fefd969 (build)

fabricteam · 2023-05-09T16:50:49Z

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

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
ButtonMinimalPerf.default	113	109	1.04:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	110	101	1.09:1
ChatMinimalPerf.default	553	527	1.05:1
InputMinimalPerf.default	766	731	1.05:1
TextMinimalPerf.default	258	246	1.05:1
ChatWithPopoverPerf.default	245	236	1.04:1
HeaderSlotsPerf.default	568	547	1.04:1
MenuMinimalPerf.default	625	603	1.04:1
PortalMinimalPerf.default	122	117	1.04:1
ProviderMinimalPerf.default	280	268	1.04:1
RefMinimalPerf.default	142	136	1.04:1
AvatarMinimalPerf.default	135	131	1.03:1
CarouselMinimalPerf.default	348	338	1.03:1
DropdownManyItemsPerf.default	503	490	1.03:1
GridMinimalPerf.default	250	243	1.03:1
LabelMinimalPerf.default	282	273	1.03:1
LayoutMinimalPerf.default	271	262	1.03:1
ListMinimalPerf.default	389	378	1.03:1
StatusMinimalPerf.default	518	501	1.03:1
IconMinimalPerf.default	487	472	1.03:1
TextAreaMinimalPerf.default	359	350	1.03:1
TreeMinimalPerf.default	605	590	1.03:1
AnimationMinimalPerf.default	372	365	1.02:1
ButtonSlotsPerf.default	411	404	1.02:1
CardMinimalPerf.default	378	371	1.02:1
SegmentMinimalPerf.default	255	251	1.02:1
SliderMinimalPerf.default	946	923	1.02:1
CustomToolbarPrototype.default	1954	1921	1.02:1
AttachmentSlotsPerf.default	838	828	1.01:1
ButtonOverridesMissPerf.default	836	826	1.01:1
DatepickerMinimalPerf.default	4600	4533	1.01:1
DialogMinimalPerf.default	583	578	1.01:1
EmbedMinimalPerf.default	2415	2393	1.01:1
FormMinimalPerf.default	269	267	1.01:1
ItemLayoutMinimalPerf.default	907	901	1.01:1
ReactionMinimalPerf.default	277	275	1.01:1
TableMinimalPerf.default	296	293	1.01:1
TooltipMinimalPerf.default	1632	1616	1.01:1
BoxMinimalPerf.default	250	249	1:1
CheckboxMinimalPerf.default	1571	1566	1:1
DropdownMinimalPerf.default	1821	1812	1:1
FlexMinimalPerf.default	200	201	1:1
ListCommonPerf.default	508	508	1:1
MenuButtonMinimalPerf.default	1264	1269	1:1
RosterPerf.default	1836	1832	1:1
PopupMinimalPerf.default	452	451	1:1
RadioGroupMinimalPerf.default	337	336	1:1
SkeletonMinimalPerf.default	255	254	1:1
SplitButtonMinimalPerf.default	3068	3057	1:1
ToolbarMinimalPerf.default	658	657	1:1
TreeWith60ListItems.default	117	117	1:1
VideoMinimalPerf.default	533	534	1:1
AlertMinimalPerf.default	196	197	0.99:1
ChatDuplicateMessagesPerf.default	185	186	0.99:1
ProviderMergeThemesPerf.default	971	981	0.99:1
TableManyItemsPerf.default	1434	1442	0.99:1
DividerMinimalPerf.default	259	264	0.98:1
HeaderMinimalPerf.default	259	267	0.97:1
LoaderMinimalPerf.default	237	245	0.97:1
AttachmentMinimalPerf.default	96	100	0.96:1
ImageMinimalPerf.default	274	284	0.96:1
ListWith60ListItems.default	470	491	0.96:1
ListNestedPerf.default	369	409	0.9:1

fabricteam · 2023-05-09T16:52:45Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`560 B` `352 B`
`priority-overflow` createOverflowManager	`3.194 kB` `1.315 kB`
`react-accordion` Accordion (including children components)	`86.012 kB` `26.086 kB`
`react-alert` Alert	`93.534 kB` `22.497 kB`
`react-avatar` Avatar	`57.754 kB` `15.041 kB`
`react-avatar` AvatarGroup	`15.632 kB` `6.258 kB`
`react-avatar` AvatarGroupItem	`73.968 kB` `19.552 kB`
`react-badge` Badge	`23.512 kB` `7.197 kB`
`react-badge` CounterBadge	`24.416 kB` `7.506 kB`
`react-badge` PresenceBadge	`32.094 kB` `8.367 kB`
`react-button` Button	`36.724 kB` `9.458 kB`
`react-button` CompoundButton	`43.873 kB` `10.939 kB`
`react-button` MenuButton	`41.411 kB` `10.791 kB`
`react-button` SplitButton	`49.635 kB` `12.364 kB`
`react-button` ToggleButton	`54.814 kB` `11.358 kB`
`react-card` Card - All	`86.061 kB` `24.345 kB`
`react-card` Card	`80.997 kB` `22.895 kB`
`react-card` CardFooter	`9.158 kB` `3.844 kB`
`react-card` CardHeader	`11.048 kB` `4.538 kB`
`react-card` CardPreview	`9.963 kB` `4.192 kB`
`react-checkbox` Checkbox	`34.216 kB` `10.784 kB`
`react-combobox` Combobox (including child components)	`87.199 kB` `28.095 kB`
`react-combobox` Dropdown (including child components)	`85.583 kB` `27.692 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`64.855 kB` `17.852 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`203.885 kB` `57.081 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.086 kB` `11.9 kB`
`react-datepicker-compat` DatePicker Compat	`220.251 kB` `58.471 kB`
`react-dialog` Dialog (including children components)	`90.867 kB` `27.047 kB`
`react-divider` Divider	`17.399 kB` `6.298 kB`
`react-field` Field	`18.864 kB` `7.004 kB`
`react-image` Image	`11.479 kB` `4.573 kB`
`react-infobutton` InfoButton	`127.925 kB` `39.003 kB`
`react-infobutton` InfoLabel	`131.208 kB` `39.996 kB`
`react-input` Input	`23.972 kB` `7.676 kB`
`react-label` Label	`10.104 kB` `4.185 kB`
`react-link` Link	`12.304 kB` `5.061 kB`
`react-menu` Menu (including children components)	`128.202 kB` `39.18 kB`
`react-menu` Menu (including selectable components)	`131.186 kB` `39.696 kB`
`react-overflow` hooks only	`11.214 kB` `4.271 kB`
`react-persona` Persona	`64.675 kB` `16.968 kB`
`react-popover` Popover	`114.917 kB` `35.388 kB`
`react-portal` Portal	`11.649 kB` `4.262 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.186 kB`
`react-positioning` usePositioning	`24.008 kB` `8.798 kB`
`react-progress` ProgressBar	`13.856 kB` `5.434 kB`
`react-provider` FluentProvider	`18.033 kB` `6.666 kB`
`react-radio` Radio	`27.282 kB` `8.661 kB`
`react-radio` RadioGroup	`11.312 kB` `4.71 kB`
`react-select` Select	`25.357 kB` `8.798 kB`
`react-slider` Slider	`34.112 kB` `11.018 kB`
`react-spinbutton` SpinButton	`33.882 kB` `10.325 kB`
`react-spinner` Spinner	`20.882 kB` `6.798 kB`
`react-switch` Switch	`29.806 kB` `9.274 kB`
`react-table` DataGrid	`147.531 kB` `40.517 kB`
`react-table` Table (Primitives only)	`44.348 kB` `12.347 kB`
`react-table` Table as DataGrid	`130.09 kB` `33.08 kB`
`react-table` Table (Selection only)	`78.004 kB` `19.079 kB`
`react-table` Table (Sort only)	`77.334 kB` `18.891 kB`
`react-tags` Tag	`21.687 kB` `7.868 kB`
`react-text` Text - Default	`12.492 kB` `4.92 kB`
`react-text` Text - Wrappers	`15.624 kB` `5.232 kB`
`react-textarea` Textarea	`27.399 kB` `9.041 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`31.33 kB` `6.764 kB`
`react-theme` Teams: Light theme	`17.895 kB` `5.162 kB`
`react-tooltip` Tooltip	`46.656 kB` `16.369 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 27f252e27361df75a94c5bc5b09fc0097fefd969}

fabricteam · 2023-05-09T16:59:28Z

🕵 FluentUI-v0 No visual regressions between this PR and main

fabricteam · 2023-05-09T17:04:50Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-05-09T17:10:42Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1024	1011	5000
Breadcrumb	mount	2607	2613	1000
Checkbox	mount	2682	2652	5000
CheckboxBase	mount	2347	2370	5000
ChoiceGroup	mount	4770	4850	5000
ComboBox	mount	1095	1051	1000
CommandBar	mount	9610	9697	1000
ContextualMenu	mount	20082	21334	1000
DefaultButton	mount	1224	1246	5000
DetailsRow	mount	3639	3696	5000
DetailsRowFast	mount	3683	3661	5000
DetailsRowNoStyles	mount	3431	3352	5000
Dialog	mount	4244	4284	1000
DocumentCardTitle	mount	371	376	1000
Dropdown	mount	3217	3179	5000
FocusTrapZone	mount	1832	1871	5000
FocusZone	mount	1735	1738	5000
GroupedList	mount	68437	81500	2
GroupedList	virtual-rerender	33450	33403	2
GroupedList	virtual-rerender-with-unmount	87605	88261	2
GroupedListV2	mount	365	368	2
GroupedListV2	virtual-rerender	338	353	2
GroupedListV2	virtual-rerender-with-unmount	375	375	2
IconButton	mount	1825	1832	5000
Label	mount	529	539	5000
Layer	mount	4412	4500	5000
Link	mount	627	636	5000
MenuButton	mount	1526	1554	5000
MessageBar	mount	31973	31850	5000
Nav	mount	3164	3187	1000
OverflowSet	mount	1216	1210	5000
Panel	mount	2596	2660	1000
Persona	mount	1210	1185	1000
Pivot	mount	1456	1471	1000
PrimaryButton	mount	1336	1352	5000
Rating	mount	7354	7453	5000
SearchBox	mount	1514	1490	5000
Shimmer	mount	2995	2999	5000
Slider	mount	2140	2152	5000
SpinButton	mount	4662	4635	5000
Spinner	mount	607	622	5000
SplitButton	mount	3093	3141	5000
Stack	mount	667	651	5000
StackWithIntrinsicChildren	mount	1368	1383	5000
StackWithTextChildren	mount	4085	4116	5000
SwatchColorPicker	mount	9925	9878	5000
TagPicker	mount	2571	2544	5000
Text	mount	578	600	5000
TextField	mount	1554	1565	5000
ThemeProvider	mount	1393	1413	5000
ThemeProvider	virtual-rerender	905	900	5000
ThemeProvider	virtual-rerender-with-unmount	2116	2128	5000
Toggle	mount	945	995	5000
buttonNative	mount	322	309	5000

bsunderhus

Ok, this is definitely a "whole new world" of an API model, which makes sense as the Toast problem is more of imperative API, I guess?!

Would be nice to have a follow through react-toast initial implementation 😁.

TLDR: LGTM, nit: basically some naming things and some

packages/react-components/react-toast/.storybook/main.js

packages/react-components/react-toast/src/components/Timer.tsx

packages/react-components/react-toast/src/components/Toast.tsx

packages/react-components/react-toast/src/components/Toaster.tsx

packages/react-components/react-toast/src/state/vanilla/createToast.ts

packages/react-components/react-toast/src/state/useToastFactory.ts

packages/react-components/react-toast/src/state/useToaster.ts

packages/react-components/react-toast/src/components/Timer.tsx

packages/react-components/react-toast/src/components/Toast.tsx

packages/react-components/react-toast/src/state/useToast.ts

packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx

packages/react-components/react-toast/src/state/vanilla/toaster.ts

packages/react-components/react-toast/src/components/Toaster.tsx

packages/react-components/react-toast/src/state/useToaster.ts

packages/react-components/react-toast/src/components/Timer/Timer.tsx

fabricteam · 2023-05-10T10:26:24Z

🕵 fluentuiv8 No visual regressions between this PR and main

tudorpopams

Reviewing files owned by v-build

* master: feat(react-drawer): create DrawerBody component (microsoft#27581) feat(react-tree): TreeItem itemType restructure (microsoft#27799) feat: Implement state management for toasts (microsoft#27800) bugfix: fix VisibleFlatTreeItemGenerator omitting visible items (microsoft#27802) fix: overflowManager should always dispatch initial state (microsoft#27756) fix(react-badge): Remove white border around presence badge when on a dark background (microsoft#27780) react-tags: rename dismissable to dismissible (microsoft#27798) chore: update ownership of react-tags (microsoft#27795) applying package updates feat(react-tags): Replace `avatar` prop with `media`; polish styles for spacing (microsoft#27725) RFC appearance migration (microsoft#24181) chore(react-skeleton): Release react-skeleton to stable (microsoft#27767) fix(Coachmark): Remove positioning regression and update bounds on resize (microsoft#27782) applying package updates fix(v8): explicitly publish dist folder after node 16 upgrade (microsoft#27769)

* feat/drawer-header: fix: add changefiles feat(react-drawer): create DrawerBody component (microsoft#27581) feat(react-tree): TreeItem itemType restructure (microsoft#27799) feat: Implement state management for toasts (microsoft#27800) bugfix: fix VisibleFlatTreeItemGenerator omitting visible items (microsoft#27802) fix: overflowManager should always dispatch initial state (microsoft#27756) fix(react-badge): Remove white border around presence badge when on a dark background (microsoft#27780) react-tags: rename dismissable to dismissible (microsoft#27798) chore: update ownership of react-tags (microsoft#27795) applying package updates feat(react-tags): Replace `avatar` prop with `media`; polish styles for spacing (microsoft#27725) RFC appearance migration (microsoft#24181) chore(react-skeleton): Release react-skeleton to stable (microsoft#27767) fix(Coachmark): Remove positioning regression and update bounds on resize (microsoft#27782) applying package updates fix(v8): explicitly publish dist folder after node 16 upgrade (microsoft#27769)

* master: (29 commits) feat(react-drawer): create DrawerBody component (microsoft#27581) feat(react-tree): TreeItem itemType restructure (microsoft#27799) feat: Implement state management for toasts (microsoft#27800) bugfix: fix VisibleFlatTreeItemGenerator omitting visible items (microsoft#27802) fix: overflowManager should always dispatch initial state (microsoft#27756) fix(react-badge): Remove white border around presence badge when on a dark background (microsoft#27780) react-tags: rename dismissable to dismissible (microsoft#27798) chore: update ownership of react-tags (microsoft#27795) applying package updates feat(react-tags): Replace `avatar` prop with `media`; polish styles for spacing (microsoft#27725) RFC appearance migration (microsoft#24181) chore(react-skeleton): Release react-skeleton to stable (microsoft#27767) fix(Coachmark): Remove positioning regression and update bounds on resize (microsoft#27782) applying package updates fix(v8): explicitly publish dist folder after node 16 upgrade (microsoft#27769) applying package updates fix: do not use outlineStyle: none in createCustomFocusIndicatorStyle (microsoft#26089) fix: Scale pulse animation with percentages and flip wave animation's direction (microsoft#27654) Publish dist folder that got removed due to node 16 upgrade (microsoft#27764) fix(scripts-update-release-notes): properly handle git for-each-ref cmd call to not fail release notes update (microsoft#27757) ...

feat: Implement state management for toasts

9e65c44

Starts with the simplest use case - make a toast appear configurable with: - timeout - position

msft-fluent-ui-bot assigned tomi-msft May 9, 2023

github-actions bot added this to the May Project Cycle Q2 2023 milestone May 9, 2023

ling1726 marked this pull request as ready for review May 9, 2023 16:28

ling1726 requested review from a team as code owners May 9, 2023 16:28

ling1726 added 2 commits May 9, 2023 18:31

remove redundant import

09e42f9

remove props

7e15b98

ling1726 commented May 9, 2023

View reviewed changes

packages/fluentui/react-northstar/src/components/Animation/Animation.tsx Show resolved Hide resolved

ling1726 commented May 9, 2023

View reviewed changes

packages/react-components/react-toast/src/state/vanilla/toast.ts Show resolved Hide resolved

useToastFactory

0c9f61c

review feedback

72d5cf1

bsunderhus approved these changes May 9, 2023

View reviewed changes

ling1726 added 3 commits May 10, 2023 08:45

rename toast controls

aa53249

don't create duplicate toasts

43664a5

make position styles vanilla

56f4c84

layershifter reviewed May 10, 2023

View reviewed changes

packages/react-components/react-toast/src/components/Timer.tsx Outdated Show resolved Hide resolved

layershifter reviewed May 10, 2023

View reviewed changes

ling1726 added 3 commits May 10, 2023 11:53

refactor Timer

686cac1

fix cruft

9c3566c

remove unnecessary callbacks

815c30c

ling1726 added 5 commits May 10, 2023 11:54

stop leaking react

d77f18c

update toaster

ce1387c

update useToaster

8eed249

update timer usage

6305979

update timer usage

4a35e67

ling1726 requested a review from layershifter May 10, 2023 10:11

layershifter reviewed May 10, 2023

View reviewed changes

packages/react-components/react-toast/src/components/Timer/Timer.tsx Show resolved Hide resolved

layershifter approved these changes May 10, 2023

View reviewed changes

tudorpopams approved these changes May 10, 2023

View reviewed changes

ling1726 merged commit debc189 into microsoft:master May 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Implement state management for toasts #27800

feat: Implement state management for toasts #27800

ling1726 commented May 9, 2023 •

edited

Loading

fabricteam commented May 9, 2023 •

edited

Loading

codesandbox-ci bot commented May 9, 2023 •

edited

Loading

size-auditor bot commented May 9, 2023 •

edited

Loading

fabricteam commented May 9, 2023 •

edited

Loading

fabricteam commented May 9, 2023 •

edited

Loading

fabricteam commented May 9, 2023 •

edited

Loading

fabricteam commented May 9, 2023 •

edited

Loading

fabricteam commented May 9, 2023 •

edited

Loading

bsunderhus left a comment

fabricteam commented May 10, 2023

tudorpopams left a comment

feat: Implement state management for toasts #27800

feat: Implement state management for toasts #27800

Conversation

ling1726 commented May 9, 2023 • edited Loading

fabricteam commented May 9, 2023 • edited Loading

Perf Analysis (@fluentui/react-components)

codesandbox-ci bot commented May 9, 2023 • edited Loading

size-auditor bot commented May 9, 2023 • edited Loading

Asset size changes

fabricteam commented May 9, 2023 • edited Loading

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

fabricteam commented May 9, 2023 • edited Loading

📊 Bundle size report

fabricteam commented May 9, 2023 • edited Loading

🕵 FluentUI-v0 No visual regressions between this PR and main

fabricteam commented May 9, 2023 • edited Loading

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam commented May 9, 2023 • edited Loading

Perf Analysis (@fluentui/react)

bsunderhus left a comment

Choose a reason for hiding this comment

fabricteam commented May 10, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

tudorpopams left a comment

Choose a reason for hiding this comment

ling1726 commented May 9, 2023 •

edited

Loading

fabricteam commented May 9, 2023 •

edited

Loading

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

codesandbox-ci bot commented May 9, 2023 •

edited

Loading

size-auditor bot commented May 9, 2023 •

edited

Loading

fabricteam commented May 9, 2023 •

edited

Loading

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

fabricteam commented May 9, 2023 •

edited

Loading

fabricteam commented May 9, 2023 •

edited

Loading

fabricteam commented May 9, 2023 •

edited

Loading

fabricteam commented May 9, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)