fluentui
fluentui copied to clipboard
Published
20 hours ago •
microsoft
microsoft
feat: Implement Toast using composition API
Implements the Toast component using the composition API. Also updates the toast imperative functions to be able to override the root slot.
Fixes #27773
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react-accordion Accordion (including children components) |
88.516 kB26.795 kB |
88.552 kB26.801 kB |
36 B 6 B |
| react-alert Alert |
93.549 kB22.537 kB |
93.585 kB22.546 kB |
36 B 9 B |
| react-avatar Avatar |
57.797 kB15.091 kB |
57.833 kB15.1 kB |
36 B 9 B |
| react-avatar AvatarGroup |
15.646 kB6.298 kB |
15.682 kB6.306 kB |
36 B 8 B |
| react-avatar AvatarGroupItem |
73.973 kB19.582 kB |
74.009 kB19.59 kB |
36 B 8 B |
| react-badge Badge |
23.555 kB7.256 kB |
23.591 kB7.264 kB |
36 B 8 B |
| react-badge CounterBadge |
24.457 kB7.559 kB |
24.493 kB7.565 kB |
36 B 6 B |
| react-badge PresenceBadge |
32.135 kB8.423 kB |
32.171 kB8.431 kB |
36 B 8 B |
| react-button Button |
36.742 kB9.5 kB |
36.778 kB9.51 kB |
36 B 10 B |
| react-button CompoundButton |
43.896 kB10.98 kB |
43.932 kB10.99 kB |
36 B 10 B |
| react-button MenuButton |
41.427 kB10.836 kB |
41.463 kB10.846 kB |
36 B 10 B |
| react-button SplitButton |
49.649 kB12.42 kB |
49.685 kB12.426 kB |
36 B 6 B |
| react-button ToggleButton |
55.024 kB11.436 kB |
55.06 kB11.446 kB |
36 B 10 B |
| react-card Card - All |
88.716 kB25.114 kB |
88.752 kB25.122 kB |
36 B 8 B |
| react-card Card |
83.651 kB23.658 kB |
83.687 kB23.666 kB |
36 B 8 B |
| react-card CardFooter |
9.193 kB3.892 kB |
9.229 kB3.9 kB |
36 B 8 B |
| react-card CardHeader |
11.089 kB4.588 kB |
11.125 kB4.596 kB |
36 B 8 B |
| react-card CardPreview |
9.998 kB4.24 kB |
10.034 kB4.248 kB |
36 B 8 B |
| react-checkbox Checkbox |
34.5 kB10.878 kB |
34.536 kB10.884 kB |
36 B 6 B |
| react-combobox Combobox (including child components) |
87.735 kB28.243 kB |
87.771 kB28.251 kB |
36 B 8 B |
| react-combobox Dropdown (including child components) |
86.074 kB27.848 kB |
86.11 kB27.855 kB |
36 B 7 B |
| react-components react-components: Button, FluentProvider & webLightTheme |
64.899 kB17.91 kB |
64.935 kB17.918 kB |
36 B 8 B |
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
206.425 kB57.914 kB |
206.461 kB57.925 kB |
36 B 11 B |
| react-components react-components: FluentProvider & webLightTheme |
36.132 kB11.954 kB |
36.168 kB11.964 kB |
36 B 10 B |
| react-datepicker-compat DatePicker Compat |
222.56 kB59.204 kB |
222.596 kB59.214 kB |
36 B 10 B |
| react-dialog Dialog (including children components) |
92.076 kB27.492 kB |
92.112 kB27.498 kB |
36 B 6 B |
| react-divider Divider |
17.441 kB6.349 kB |
17.477 kB6.357 kB |
36 B 8 B |
| react-field Field |
18.9 kB7.083 kB |
18.936 kB7.092 kB |
36 B 9 B |
| react-image Image |
11.514 kB4.619 kB |
11.55 kB4.627 kB |
36 B 8 B |
| react-infobutton InfoButton |
130.121 kB39.785 kB |
130.157 kB39.793 kB |
36 B 8 B |
| react-infobutton InfoLabel |
133.586 kB40.852 kB |
133.622 kB40.861 kB |
36 B 9 B |
| react-input Input |
24.183 kB7.772 kB |
24.219 kB7.781 kB |
36 B 9 B |
| react-label Label |
10.139 kB4.231 kB |
10.175 kB4.243 kB |
36 B 12 B |
| react-link Link |
12.339 kB5.105 kB |
12.375 kB5.113 kB |
36 B 8 B |
| react-menu Menu (including children components) |
130.848 kB39.946 kB |
130.884 kB39.953 kB |
36 B 7 B |
| react-menu Menu (including selectable components) |
133.832 kB40.479 kB |
133.868 kB40.486 kB |
36 B 7 B |
| react-persona Persona |
64.718 kB17.012 kB |
64.754 kB17.021 kB |
36 B 9 B |
| react-popover Popover |
117.083 kB36.122 kB |
117.119 kB36.133 kB |
36 B 11 B |
| react-progress ProgressBar |
13.891 kB5.482 kB |
13.927 kB5.488 kB |
36 B 6 B |
| react-provider FluentProvider |
18.079 kB6.713 kB |
18.115 kB6.719 kB |
36 B 6 B |
| react-radio Radio |
27.404 kB8.722 kB |
27.44 kB8.73 kB |
36 B 8 B |
| react-radio RadioGroup |
11.326 kB4.743 kB |
11.362 kB4.753 kB |
36 B 10 B |
| react-select Select |
25.373 kB8.826 kB |
25.409 kB8.834 kB |
36 B 8 B |
| react-slider Slider |
34.322 kB11.099 kB |
34.358 kB11.107 kB |
36 B 8 B |
| react-spinbutton SpinButton |
34.121 kB10.421 kB |
34.157 kB10.429 kB |
36 B 8 B |
| react-spinner Spinner |
21.327 kB7.015 kB |
21.363 kB7.021 kB |
36 B 6 B |
| react-switch Switch |
29.924 kB9.342 kB |
29.96 kB9.353 kB |
36 B 11 B |
| react-table DataGrid |
150.868 kB41.518 kB |
150.904 kB41.525 kB |
36 B 7 B |
| react-table Table (Primitives only) |
45.111 kB12.567 kB |
45.147 kB12.577 kB |
36 B 10 B |
| react-table Table as DataGrid |
133.356 kB34.002 kB |
133.392 kB34.008 kB |
36 B 6 B |
| react-table Table (Selection only) |
79.125 kB19.379 kB |
79.161 kB19.386 kB |
36 B 7 B |
| react-table Table (Sort only) |
78.455 kB19.187 kB |
78.491 kB19.195 kB |
36 B 8 B |
| react-tags Tag |
22.004 kB7.93 kB |
22.04 kB7.94 kB |
36 B 10 B |
| react-text Text - Default |
12.527 kB4.963 kB |
12.563 kB4.972 kB |
36 B 9 B |
| react-text Text - Wrappers |
15.677 kB5.284 kB |
15.713 kB5.293 kB |
36 B 9 B |
| react-textarea Textarea |
27.686 kB9.126 kB |
27.722 kB9.135 kB |
36 B 9 B |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| global-context createContext |
510 B330 B |
| global-context createContextSelector |
537 B342 B |
| react-overflow hooks only |
11.206 kB4.266 kB |
| react-portal Portal |
11.676 kB4.31 kB |
| react-portal-compat PortalCompatProvider |
6.473 kB2.196 kB |
| react-positioning usePositioning |
24.249 kB8.856 kB |
| react-tooltip Tooltip |
47.119 kB16.528 kB |
| react-utilities SSRProvider |
180 B159 B |
Asset size changes
Size Auditor did not detect a change in bundle size for any component!
Baseline commit: 386ee70863eb4059b51cb85b41fbadcc76c94e6e (build)
![size-auditor[bot] avatar](https://avatars.githubusercontent.com/in/13711?v=4 "Published by a pub.dev verified publisher"){kind=small}
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 4aa6ef5bb72d25633856d6a082d64eb2eed3682a:
| Sandbox | Source |
|---|---|
| @fluentui/react 8 starter | Configuration |
| @fluentui/react-components 9 starter | Configuration |
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
Perf Analysis (@fluentui/react-components)
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| FluentProviderWithTheme | mount | 85 | 74 | 10 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 579 | 582 | 5000 | |
| Button | mount | 305 | 291 | 5000 | |
| Field | mount | 1002 | 1022 | 5000 | |
| FluentProvider | mount | 632 | 649 | 5000 | |
| FluentProviderWithTheme | mount | 85 | 74 | 10 | Possible regression |
| FluentProviderWithTheme | virtual-rerender | 74 | 72 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 69 | 77 | 10 | |
| InfoButton | mount | 15 | 12 | 5000 | |
| MakeStyles | mount | 854 | 888 | 50000 | |
| Persona | mount | 1649 | 1570 | 5000 | |
| SpinButton | mount | 1269 | 1267 | 5000 |
:tada:@fluentui/[email protected] has been released which incorporates this pull request.:tada:
Handy links:
:tada:@fluentui/[email protected] has been released which incorporates this pull request.:tada:
Handy links: