From fc3a1848681c0b4142abe791dc32c88ccb056545 Mon Sep 17 00:00:00 2001 From: Fluent UI Build Date: Mon, 5 Jun 2023 07:37:31 +0000 Subject: [PATCH 1/8] applying package updates --- apps/perf-test/package.json | 2 +- apps/public-docsite-resources/package.json | 10 +++---- apps/public-docsite-v9/package.json | 2 +- apps/public-docsite/package.json | 12 ++++----- apps/react-18-tests-v8/package.json | 2 +- apps/ssr-tests/package.json | 2 +- apps/stress-test/package.json | 2 +- apps/theming-designer/package.json | 4 +-- apps/ts-minbar-test-react/package.json | 2 +- apps/vr-tests/package.json | 4 +-- ...-4cf263e9-5a59-4ce0-b9b1-a08d8baa5e67.json | 7 ----- ...-bf3bb0f5-64ca-4492-be5c-82e7a6808157.json | 7 ----- ...-09db4fc5-2f5c-4dbe-a602-2c226cff5bab.json | 7 ----- packages/azure-themes/CHANGELOG.json | 15 +++++++++++ packages/azure-themes/CHANGELOG.md | 11 +++++++- packages/azure-themes/package.json | 4 +-- packages/cra-template/CHANGELOG.json | 15 +++++++++++ packages/cra-template/CHANGELOG.md | 11 +++++++- packages/cra-template/package.json | 4 +-- packages/fluent2-theme/CHANGELOG.json | 15 +++++++++++ packages/fluent2-theme/CHANGELOG.md | 11 +++++++- packages/fluent2-theme/package.json | 4 +-- packages/react-cards/CHANGELOG.json | 15 +++++++++++ packages/react-cards/CHANGELOG.md | 11 +++++++- packages/react-cards/package.json | 4 +-- packages/react-charting/CHANGELOG.json | 27 +++++++++++++++++++ packages/react-charting/CHANGELOG.md | 13 ++++++++- packages/react-charting/package.json | 10 +++---- .../react-conformance-griffel/package.json | 2 +- .../react-migration-v8-v9/package.json | 4 +-- packages/react-conformance/CHANGELOG.json | 15 +++++++++++ packages/react-conformance/CHANGELOG.md | 11 +++++++- packages/react-conformance/package.json | 2 +- packages/react-date-time/CHANGELOG.json | 15 +++++++++++ packages/react-date-time/CHANGELOG.md | 11 +++++++- packages/react-date-time/package.json | 4 +-- .../react-docsite-components/CHANGELOG.json | 21 +++++++++++++++ .../react-docsite-components/CHANGELOG.md | 12 ++++++++- .../react-docsite-components/package.json | 6 ++--- packages/react-examples/package.json | 16 +++++------ packages/react-experiments/CHANGELOG.json | 15 +++++++++++ packages/react-experiments/CHANGELOG.md | 11 +++++++- packages/react-experiments/package.json | 4 +-- packages/react-focus/package.json | 2 +- packages/react-monaco-editor/CHANGELOG.json | 21 +++++++++++++++ packages/react-monaco-editor/CHANGELOG.md | 12 ++++++++- packages/react-monaco-editor/package.json | 6 ++--- packages/react/CHANGELOG.json | 27 +++++++++++++++++++ packages/react/CHANGELOG.md | 13 ++++++++- packages/react/package.json | 4 +-- packages/storybook/package.json | 6 ++--- packages/theme-samples/CHANGELOG.json | 15 +++++++++++ packages/theme-samples/CHANGELOG.md | 11 +++++++- packages/theme-samples/package.json | 4 +-- 54 files changed, 406 insertions(+), 97 deletions(-) delete mode 100644 change/@fluentui-react-4cf263e9-5a59-4ce0-b9b1-a08d8baa5e67.json delete mode 100644 change/@fluentui-react-bf3bb0f5-64ca-4492-be5c-82e7a6808157.json delete mode 100644 change/@fluentui-react-conformance-09db4fc5-2f5c-4dbe-a602-2c226cff5bab.json diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json index a01c463eafc58c..25303126d17dcf 100644 --- a/apps/perf-test/package.json +++ b/apps/perf-test/package.json @@ -20,7 +20,7 @@ "dependencies": { "@fluentui/scripts-perf-test-flamegrill": "*", "@fluentui/example-data": "^8.4.11", - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@microsoft/load-themed-styles": "^1.10.26", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json index 0351a0dc67a6c7..64070cfb6cc099 100644 --- a/apps/public-docsite-resources/package.json +++ b/apps/public-docsite-resources/package.json @@ -34,15 +34,15 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/react-examples": "^8.34.4", "@microsoft/load-themed-styles": "^1.10.26", - "@fluentui/azure-themes": "^8.6.12", - "@fluentui/react-docsite-components": "^8.12.17", + "@fluentui/azure-themes": "^8.6.13", + "@fluentui/react-docsite-components": "^8.12.18", "@fluentui/font-icons-mdl2": "^8.5.21", "@fluentui/set-version": "^8.2.11", - "@fluentui/theme-samples": "^8.7.91", - "@fluentui/react-monaco-editor": "^1.7.94", + "@fluentui/theme-samples": "^8.7.92", + "@fluentui/react-monaco-editor": "^1.7.95", "office-ui-fabric-core": "^11.0.0", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index c156daa8b0890c..090e5e1ff9cc4f 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -26,7 +26,7 @@ "@fluentui/react-datepicker-compat": "^0.1.5", "@fluentui/react-migration-v8-v9": "^9.2.16", "@fluentui/react-migration-v0-v9": "^9.0.2", - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/react-northstar": "^0.66.4", "@fluentui/react-icons-northstar": "^0.66.4", "@fluentui/react-components": "^9.21.0", diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json index 13595d5f6af6a5..3ab0c2d6b2cc5c 100644 --- a/apps/public-docsite/package.json +++ b/apps/public-docsite/package.json @@ -25,7 +25,7 @@ "devDependencies": { "@fluentui/common-styles": "^1.2.30", "@fluentui/eslint-plugin": "*", - "@fluentui/react-monaco-editor": "^1.7.94", + "@fluentui/react-monaco-editor": "^1.7.95", "write-file-webpack-plugin": "^4.1.0", "@fluentui/scripts-tasks": "*", "@fluentui/scripts-webpack": "*" @@ -34,17 +34,17 @@ "@fluentui/font-icons-mdl2": "^8.5.21", "@fluentui/public-docsite-resources": "^8.1.41", "@fluentui/public-docsite-setup": "^0.3.21", - "@fluentui/react": "^8.109.10", - "@fluentui/react-docsite-components": "^8.12.17", + "@fluentui/react": "^8.109.11", + "@fluentui/react-docsite-components": "^8.12.18", "@fluentui/react-examples": "^8.34.4", - "@fluentui/react-experiments": "^8.14.86", - "@fluentui/fluent2-theme": "^8.107.16", + "@fluentui/react-experiments": "^8.14.87", + "@fluentui/fluent2-theme": "^8.107.17", "@fluentui/react-file-type-icons": "^8.8.21", "@fluentui/react-icons-mdl2": "^1.3.45", "@fluentui/react-icons-mdl2-branded": "^1.2.46", "@fluentui/set-version": "^8.2.11", "@fluentui/theme": "^2.6.32", - "@fluentui/theme-samples": "^8.7.91", + "@fluentui/theme-samples": "^8.7.92", "@fluentui/utilities": "^8.13.16", "@microsoft/load-themed-styles": "^1.10.26", "office-ui-fabric-core": "^11.0.0", diff --git a/apps/react-18-tests-v8/package.json b/apps/react-18-tests-v8/package.json index 2f931ecef389ac..7d8b0fe2674506 100644 --- a/apps/react-18-tests-v8/package.json +++ b/apps/react-18-tests-v8/package.json @@ -21,7 +21,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/react-hooks": "^8.6.27", "@types/react": "18.0.14", "@types/react-dom": "18.0.6", diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index 29a54eb22a936f..4af102ed27afae 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -13,7 +13,7 @@ }, "license": "MIT", "devDependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@microsoft/load-themed-styles": "^1.10.26", "@types/mocha": "7.0.2", "@fluentui/public-docsite-resources": "^8.1.41", diff --git a/apps/stress-test/package.json b/apps/stress-test/package.json index 52fab2eb9e2f4a..b9e8c1e48ed10b 100644 --- a/apps/stress-test/package.json +++ b/apps/stress-test/package.json @@ -10,7 +10,7 @@ "type-check": "tsc -b tsconfig.type.json" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/react-components": "^9.21.0", "@fluentui/react-icons": "^2.0.196", "@fluentui/web-components": "^2.5.15", diff --git a/apps/theming-designer/package.json b/apps/theming-designer/package.json index 805cc52c96f04c..b93c65e28b0937 100644 --- a/apps/theming-designer/package.json +++ b/apps/theming-designer/package.json @@ -19,9 +19,9 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/merge-styles": "^8.5.12", - "@fluentui/react-docsite-components": "^8.12.17", + "@fluentui/react-docsite-components": "^8.12.18", "@fluentui/foundation-legacy": "^8.2.41", "@fluentui/scheme-utilities": "^8.3.33", "@fluentui/set-version": "^8.2.11", diff --git a/apps/ts-minbar-test-react/package.json b/apps/ts-minbar-test-react/package.json index bfd98ce64aece2..5de67d1509f0a1 100644 --- a/apps/ts-minbar-test-react/package.json +++ b/apps/ts-minbar-test-react/package.json @@ -5,7 +5,7 @@ "description": "Testing Fluent UI React compatibility with Typescript 3.9", "license": "MIT", "dependencies": { - "@fluentui/react": "^8.109.10" + "@fluentui/react": "^8.109.11" }, "scripts": { "type-check": "tsc -p .", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 05238bacfea207..b0d39bd37e873d 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -22,8 +22,8 @@ "dependencies": { "@fluentui/example-data": "^8.4.11", "@fluentui/font-icons-mdl2": "^8.5.21", - "@fluentui/react": "^8.109.10", - "@fluentui/react-experiments": "^8.14.86", + "@fluentui/react": "^8.109.11", + "@fluentui/react-experiments": "^8.14.87", "@fluentui/react-hooks": "^8.6.27", "@fluentui/react-icons-mdl2": "^1.3.45", "@fluentui/storybook": "^1.0.0", diff --git a/change/@fluentui-react-4cf263e9-5a59-4ce0-b9b1-a08d8baa5e67.json b/change/@fluentui-react-4cf263e9-5a59-4ce0-b9b1-a08d8baa5e67.json deleted file mode 100644 index 71710250dc3676..00000000000000 --- a/change/@fluentui-react-4cf263e9-5a59-4ce0-b9b1-a08d8baa5e67.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix: Dropdown hover high contrast mode colors", - "packageName": "@fluentui/react", - "email": "sarah.higley@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-bf3bb0f5-64ca-4492-be5c-82e7a6808157.json b/change/@fluentui-react-bf3bb0f5-64ca-4492-be5c-82e7a6808157.json deleted file mode 100644 index 1f93b779e7e008..00000000000000 --- a/change/@fluentui-react-bf3bb0f5-64ca-4492-be5c-82e7a6808157.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "MessageBar: Add SmallScreenSelector styles to use grid layout to properly place buttons", - "packageName": "@fluentui/react", - "email": "mgodbolt@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-conformance-09db4fc5-2f5c-4dbe-a602-2c226cff5bab.json b/change/@fluentui-react-conformance-09db4fc5-2f5c-4dbe-a602-2c226cff5bab.json deleted file mode 100644 index d3c19c955f1589..00000000000000 --- a/change/@fluentui-react-conformance-09db4fc5-2f5c-4dbe-a602-2c226cff5bab.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix: testOptions custom classname prefix now works as intended.", - "packageName": "@fluentui/react-conformance", - "email": "tristan.watanabe@gmail.com", - "dependentChangeType": "patch" -} diff --git a/packages/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json index e244a7fafb4957..483add49657ec8 100644 --- a/packages/azure-themes/CHANGELOG.json +++ b/packages/azure-themes/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/azure-themes", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/azure-themes_v8.6.13", + "version": "8.6.13", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/azure-themes_v8.6.12", diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md index 465026d5bf06c3..72849c2313558c 100644 --- a/packages/azure-themes/CHANGELOG.md +++ b/packages/azure-themes/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/azure-themes -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.6.13](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.13) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.12..@fluentui/azure-themes_v8.6.13) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.6.12](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.12) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json index 90b461552e2dcc..60fcc64f21ff69 100644 --- a/packages/azure-themes/package.json +++ b/packages/azure-themes/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/azure-themes", - "version": "8.6.12", + "version": "8.6.13", "description": "Azure themes for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/set-version": "^8.2.11", "tslib": "^2.1.0" } diff --git a/packages/cra-template/CHANGELOG.json b/packages/cra-template/CHANGELOG.json index f1cdff14eb7087..ab974a39d4df4d 100644 --- a/packages/cra-template/CHANGELOG.json +++ b/packages/cra-template/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/cra-template", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/cra-template_v8.4.93", + "version": "8.4.93", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/cra-template", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/cra-template_v8.4.92", diff --git a/packages/cra-template/CHANGELOG.md b/packages/cra-template/CHANGELOG.md index 4e5ad1cc76436b..72e96e0d132237 100644 --- a/packages/cra-template/CHANGELOG.md +++ b/packages/cra-template/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/cra-template -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.4.93](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.93) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/cra-template_v8.4.92..@fluentui/cra-template_v8.4.93) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.4.92](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.92) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json index 5f1dd80cfa5d89..6aa2db3e71a241 100644 --- a/packages/cra-template/package.json +++ b/packages/cra-template/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/cra-template", - "version": "8.4.92", + "version": "8.4.93", "description": "Create React App template for Fluent UI React (@fluentui/react)", "repository": { "type": "git", @@ -18,7 +18,7 @@ "template.json" ], "devDependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/scripts-projects-test": "*", "@fluentui/scripts-monorepo": "*" } diff --git a/packages/fluent2-theme/CHANGELOG.json b/packages/fluent2-theme/CHANGELOG.json index cbe42efbc246f4..1e80ee90198b8b 100644 --- a/packages/fluent2-theme/CHANGELOG.json +++ b/packages/fluent2-theme/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/fluent2-theme", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/fluent2-theme_v8.107.17", + "version": "8.107.17", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/fluent2-theme_v8.107.16", diff --git a/packages/fluent2-theme/CHANGELOG.md b/packages/fluent2-theme/CHANGELOG.md index db3624c4bbc113..a3514897c797e5 100644 --- a/packages/fluent2-theme/CHANGELOG.md +++ b/packages/fluent2-theme/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/fluent2-theme -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.107.17](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.17) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.16..@fluentui/fluent2-theme_v8.107.17) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.107.16](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.16) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/fluent2-theme/package.json b/packages/fluent2-theme/package.json index cd464aad79f3f2..ba90b0b6ecc8b4 100644 --- a/packages/fluent2-theme/package.json +++ b/packages/fluent2-theme/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/fluent2-theme", - "version": "8.107.16", + "version": "8.107.17", "description": "A Fluent2 theme for Fluent UI React 8.x", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/set-version": "^8.2.11", "tslib": "^2.1.0" } diff --git a/packages/react-cards/CHANGELOG.json b/packages/react-cards/CHANGELOG.json index 2644fb2f903a49..fc8a9a8cfe2696 100644 --- a/packages/react-cards/CHANGELOG.json +++ b/packages/react-cards/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-cards", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-cards_v0.205.92", + "version": "0.205.92", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/react-cards_v0.205.91", diff --git a/packages/react-cards/CHANGELOG.md b/packages/react-cards/CHANGELOG.md index 50a605d6f40674..fa91f153548eea 100644 --- a/packages/react-cards/CHANGELOG.md +++ b/packages/react-cards/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-cards -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [0.205.92](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.92) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.91..@fluentui/react-cards_v0.205.92) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [0.205.91](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.91) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json index 172ed9471466c4..e339f168739e4b 100644 --- a/packages/react-cards/package.json +++ b/packages/react-cards/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-cards", - "version": "0.205.91", + "version": "0.205.92", "description": "Deprecated experimental Card container components for Fluent UI React.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -34,7 +34,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/foundation-legacy": "^8.2.41", "@fluentui/set-version": "^8.2.11", "@microsoft/load-themed-styles": "^1.10.26", diff --git a/packages/react-charting/CHANGELOG.json b/packages/react-charting/CHANGELOG.json index c244bbc7cd9ceb..6439598c63723e 100644 --- a/packages/react-charting/CHANGELOG.json +++ b/packages/react-charting/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react-charting", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-charting_v5.16.38", + "version": "5.16.38", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react-focus to v8.8.28", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/theme-samples to v8.7.92", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Fri, 02 Jun 2023 07:35:08 GMT", "tag": "@fluentui/react-charting_v5.16.37", diff --git a/packages/react-charting/CHANGELOG.md b/packages/react-charting/CHANGELOG.md index e959331a9e4d15..d1d35e3f48caec 100644 --- a/packages/react-charting/CHANGELOG.md +++ b/packages/react-charting/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react-charting -This log was last generated on Fri, 02 Jun 2023 07:35:08 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [5.16.38](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.38) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.16.37..@fluentui/react-charting_v5.16.38) + +### Patches + +- Bump @fluentui/react-focus to v8.8.28 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) +- Bump @fluentui/theme-samples to v8.7.92 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [5.16.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.37) Fri, 02 Jun 2023 07:35:08 GMT diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json index 55068e197babc2..ae58fbc956fd3d 100644 --- a/packages/react-charting/package.json +++ b/packages/react-charting/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-charting", - "version": "5.16.37", + "version": "5.16.38", "description": "Experimental React charting components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ }, "devDependencies": { "@fluentui/eslint-plugin": "*", - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@types/react-addons-test-utils": "0.14.18", "@fluentui/jest-serializer-merge-styles": "^8.0.29", "@fluentui/scripts-jest": "*", @@ -37,8 +37,8 @@ "jest-canvas-mock": "2.4.0" }, "dependencies": { - "@fluentui/react-focus": "^8.8.27", - "@fluentui/theme-samples": "^8.7.91", + "@fluentui/react-focus": "^8.8.28", + "@fluentui/theme-samples": "^8.7.92", "@microsoft/load-themed-styles": "^1.10.26", "@types/d3-array": "1.2.1", "@types/d3-axis": "1.0.10", @@ -64,7 +64,7 @@ "tslib": "^2.1.0" }, "peerDependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@types/react": ">=16.8.0 <19.0.0", "@types/react-dom": ">=16.8.0 <19.0.0", "react": ">=16.8.0 <19.0.0", diff --git a/packages/react-components/react-conformance-griffel/package.json b/packages/react-components/react-conformance-griffel/package.json index e39c7da813ddab..9aa582f01bfe26 100644 --- a/packages/react-components/react-conformance-griffel/package.json +++ b/packages/react-components/react-conformance-griffel/package.json @@ -29,7 +29,7 @@ "@types/react": ">=16.8.0 <19.0.0", "@types/react-dom": ">=16.8.0 <19.0.0", "typescript": "^4.3.0", - "@fluentui/react-conformance": "^0.16.2" + "@fluentui/react-conformance": "^0.16.3" }, "dependencies": { "@griffel/react": "^1.5.7", diff --git a/packages/react-components/react-migration-v8-v9/package.json b/packages/react-components/react-migration-v8-v9/package.json index 393849996aa0ce..b37e63c1caa438 100644 --- a/packages/react-components/react-migration-v8-v9/package.json +++ b/packages/react-components/react-migration-v8-v9/package.json @@ -32,8 +32,8 @@ }, "dependencies": { "@ctrl/tinycolor": "3.3.4", - "@fluentui/fluent2-theme": "^8.107.16", - "@fluentui/react": "^8.109.10", + "@fluentui/fluent2-theme": "^8.107.17", + "@fluentui/react": "^8.109.11", "@fluentui/react-components": "^9.21.0", "@fluentui/react-icons": "^2.0.196", "@fluentui/react-theme": "^9.1.8", diff --git a/packages/react-conformance/CHANGELOG.json b/packages/react-conformance/CHANGELOG.json index 7d33074b38d1d1..7401d2d9594008 100644 --- a/packages/react-conformance/CHANGELOG.json +++ b/packages/react-conformance/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-conformance", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-conformance_v0.16.3", + "version": "0.16.3", + "comments": { + "patch": [ + { + "author": "tristan.watanabe@gmail.com", + "package": "@fluentui/react-conformance", + "commit": "59d477883786b3330c55ff6877c6bbed11d34bae", + "comment": "fix: testOptions custom classname prefix now works as intended." + } + ] + } + }, { "date": "Wed, 31 May 2023 07:38:39 GMT", "tag": "@fluentui/react-conformance_v0.16.2", diff --git a/packages/react-conformance/CHANGELOG.md b/packages/react-conformance/CHANGELOG.md index 6ec9ee69c98fc1..5664fcf9fcdad7 100644 --- a/packages/react-conformance/CHANGELOG.md +++ b/packages/react-conformance/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-conformance -This log was last generated on Wed, 31 May 2023 07:38:39 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [0.16.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-conformance_v0.16.3) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-conformance_v0.16.2..@fluentui/react-conformance_v0.16.3) + +### Patches + +- fix: testOptions custom classname prefix now works as intended. ([PR #28101](https://github.com/microsoft/fluentui/pull/28101) by tristan.watanabe@gmail.com) + ## [0.16.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-conformance_v0.16.2) Wed, 31 May 2023 07:38:39 GMT diff --git a/packages/react-conformance/package.json b/packages/react-conformance/package.json index 0f5cc5ef6de766..6291197e04e93a 100644 --- a/packages/react-conformance/package.json +++ b/packages/react-conformance/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-conformance", - "version": "0.16.2", + "version": "0.16.3", "description": "Customizable conformance testing utility for Fluent UI React components.", "main": "lib-commonjs/index.js", "typings": "lib-commonjs/index.d.ts", diff --git a/packages/react-date-time/CHANGELOG.json b/packages/react-date-time/CHANGELOG.json index 2f649a83476abc..1c2817bbe6e6da 100644 --- a/packages/react-date-time/CHANGELOG.json +++ b/packages/react-date-time/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-date-time", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-date-time_v8.7.92", + "version": "8.7.92", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-date-time", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/react-date-time_v8.7.91", diff --git a/packages/react-date-time/CHANGELOG.md b/packages/react-date-time/CHANGELOG.md index 6526146d3b0222..a74fcd38675c36 100644 --- a/packages/react-date-time/CHANGELOG.md +++ b/packages/react-date-time/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-date-time -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.7.92](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.92) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-date-time_v8.7.91..@fluentui/react-date-time_v8.7.92) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.7.91](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.91) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/react-date-time/package.json b/packages/react-date-time/package.json index 8a26b3dcce9dbe..0663d1f76be7a2 100644 --- a/packages/react-date-time/package.json +++ b/packages/react-date-time/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-date-time", - "version": "8.7.91", + "version": "8.7.92", "description": "Date and time related React components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/set-version": "^8.2.11", "tslib": "^2.1.0" }, diff --git a/packages/react-docsite-components/CHANGELOG.json b/packages/react-docsite-components/CHANGELOG.json index 6b2e574997b872..47495c3ae71905 100644 --- a/packages/react-docsite-components/CHANGELOG.json +++ b/packages/react-docsite-components/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-docsite-components", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-docsite-components_v8.12.18", + "version": "8.12.18", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + }, + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.95", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Fri, 02 Jun 2023 07:35:08 GMT", "tag": "@fluentui/react-docsite-components_v8.12.17", diff --git a/packages/react-docsite-components/CHANGELOG.md b/packages/react-docsite-components/CHANGELOG.md index bc3d066d76dff7..9506ef42a4a733 100644 --- a/packages/react-docsite-components/CHANGELOG.md +++ b/packages/react-docsite-components/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-docsite-components -This log was last generated on Fri, 02 Jun 2023 07:35:08 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.12.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.12.18) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.12.17..@fluentui/react-docsite-components_v8.12.18) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) +- Bump @fluentui/react-monaco-editor to v1.7.95 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.12.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.12.17) Fri, 02 Jun 2023 07:35:08 GMT diff --git a/packages/react-docsite-components/package.json b/packages/react-docsite-components/package.json index 80c1c2d3cb6e87..4828610240cffa 100644 --- a/packages/react-docsite-components/package.json +++ b/packages/react-docsite-components/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-docsite-components", - "version": "8.12.17", + "version": "8.12.18", "description": "Fluent UI React components for building documentation sites.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -35,14 +35,14 @@ "react-dom": ">=16.8.0 <19.0.0" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/theme": "^2.6.32", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.11", "@fluentui/public-docsite-setup": "^0.3.21", "@fluentui/react-hooks": "^8.6.27", "@fluentui/set-version": "^8.2.11", - "@fluentui/react-monaco-editor": "^1.7.94", + "@fluentui/react-monaco-editor": "^1.7.95", "color-check": "0.0.2", "markdown-to-jsx": "^7.0.0", "office-ui-fabric-core": "^11.0.0", diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index a36907d58c2d68..b5d0eb32b9bf67 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -25,26 +25,26 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/azure-themes": "^8.6.12", + "@fluentui/azure-themes": "^8.6.13", "@fluentui/date-time-utilities": "^8.5.12", "@fluentui/dom-utilities": "^2.2.11", "@fluentui/example-data": "^8.4.11", "@fluentui/font-icons-mdl2": "^8.5.21", "@fluentui/foundation-legacy": "^8.2.41", "@fluentui/merge-styles": "^8.5.12", - "@fluentui/react": "^8.109.10", - "@fluentui/react-cards": "^0.205.91", - "@fluentui/react-charting": "^5.16.37", - "@fluentui/react-docsite-components": "^8.12.17", - "@fluentui/react-experiments": "^8.14.86", + "@fluentui/react": "^8.109.11", + "@fluentui/react-cards": "^0.205.92", + "@fluentui/react-charting": "^5.16.38", + "@fluentui/react-docsite-components": "^8.12.18", + "@fluentui/react-experiments": "^8.14.87", "@fluentui/react-file-type-icons": "^8.8.21", - "@fluentui/react-focus": "^8.8.27", + "@fluentui/react-focus": "^8.8.28", "@fluentui/react-hooks": "^8.6.27", "@fluentui/react-icons-mdl2": "^1.3.45", "@fluentui/scheme-utilities": "^8.3.33", "@fluentui/style-utilities": "^8.9.14", "@fluentui/theme": "^2.6.32", - "@fluentui/theme-samples": "^8.7.91", + "@fluentui/theme-samples": "^8.7.92", "@fluentui/utilities": "^8.13.16", "@microsoft/load-themed-styles": "^1.10.26", "d3-fetch": "3.0.1", diff --git a/packages/react-experiments/CHANGELOG.json b/packages/react-experiments/CHANGELOG.json index aab4128c663eb6..2bc4ae4e0770dd 100644 --- a/packages/react-experiments/CHANGELOG.json +++ b/packages/react-experiments/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-experiments", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-experiments_v8.14.87", + "version": "8.14.87", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/react-experiments_v8.14.86", diff --git a/packages/react-experiments/CHANGELOG.md b/packages/react-experiments/CHANGELOG.md index 36a82a2d7e13f4..3890258526a518 100644 --- a/packages/react-experiments/CHANGELOG.md +++ b/packages/react-experiments/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-experiments -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.14.87](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.87) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-experiments_v8.14.86..@fluentui/react-experiments_v8.14.87) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.14.86](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.86) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/react-experiments/package.json b/packages/react-experiments/package.json index 0cb84e1d8d24b7..3b4cdeaba8c259 100644 --- a/packages/react-experiments/package.json +++ b/packages/react-experiments/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-experiments", - "version": "8.14.86", + "version": "8.14.87", "description": "Experimental React components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -39,7 +39,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/theme": "^2.6.32", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.11", diff --git a/packages/react-focus/package.json b/packages/react-focus/package.json index 2654af46b007dd..b961007ffda683 100644 --- a/packages/react-focus/package.json +++ b/packages/react-focus/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-focus", - "version": "8.8.27", + "version": "8.8.28", "description": "Focus helpers to be used in React applications.", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-monaco-editor/CHANGELOG.json b/packages/react-monaco-editor/CHANGELOG.json index c7f6824ef8b867..883da66ff7478f 100644 --- a/packages/react-monaco-editor/CHANGELOG.json +++ b/packages/react-monaco-editor/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-monaco-editor", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.95", + "version": "1.7.95", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + }, + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react-charting to v5.16.38", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Fri, 02 Jun 2023 07:35:08 GMT", "tag": "@fluentui/react-monaco-editor_v1.7.94", diff --git a/packages/react-monaco-editor/CHANGELOG.md b/packages/react-monaco-editor/CHANGELOG.md index f86b8f768601a2..8ccd4d8aeae3f3 100644 --- a/packages/react-monaco-editor/CHANGELOG.md +++ b/packages/react-monaco-editor/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-monaco-editor -This log was last generated on Fri, 02 Jun 2023 07:35:08 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [1.7.95](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.95) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.94..@fluentui/react-monaco-editor_v1.7.95) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) +- Bump @fluentui/react-charting to v5.16.38 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [1.7.94](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.94) Fri, 02 Jun 2023 07:35:08 GMT diff --git a/packages/react-monaco-editor/package.json b/packages/react-monaco-editor/package.json index e8582518924e62..2e1047240438b1 100644 --- a/packages/react-monaco-editor/package.json +++ b/packages/react-monaco-editor/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-monaco-editor", - "version": "1.7.94", + "version": "1.7.95", "description": "Live React example editing using monaco", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -30,12 +30,12 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.11", "@fluentui/monaco-editor": "^1.3.11", "@fluentui/react-hooks": "^8.6.27", - "@fluentui/react-charting": "^5.16.37", + "@fluentui/react-charting": "^5.16.38", "raw-loader": "4.0.2", "react-syntax-highlighter": "^10.1.3", "tslib": "^2.1.0" diff --git a/packages/react/CHANGELOG.json b/packages/react/CHANGELOG.json index 0122a7123d0058..30ed24dc06d1df 100644 --- a/packages/react/CHANGELOG.json +++ b/packages/react/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:24 GMT", + "tag": "@fluentui/react_v8.109.11", + "version": "8.109.11", + "comments": { + "patch": [ + { + "author": "sarah.higley@microsoft.com", + "package": "@fluentui/react", + "commit": "0868df85405025c1488c8b0f8285ead56c379626", + "comment": "fix: Dropdown hover high contrast mode colors" + }, + { + "author": "mgodbolt@microsoft.com", + "package": "@fluentui/react", + "commit": "4a9f03c96b04bd9cca11b7718a3f7f60bf78d2ee", + "comment": "MessageBar: Add SmallScreenSelector styles to use grid layout to properly place buttons" + }, + { + "author": "beachball", + "package": "@fluentui/react", + "comment": "Bump @fluentui/react-focus to v8.8.28", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/react_v8.109.10", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 90cf72274bac1e..3bc8a5839b3b0d 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:24 GMT and should not be manually modified. +## [8.109.11](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.109.11) + +Mon, 05 Jun 2023 07:37:24 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react_v8.109.10..@fluentui/react_v8.109.11) + +### Patches + +- fix: Dropdown hover high contrast mode colors ([PR #27306](https://github.com/microsoft/fluentui/pull/27306) by sarah.higley@microsoft.com) +- MessageBar: Add SmallScreenSelector styles to use grid layout to properly place buttons ([PR #28100](https://github.com/microsoft/fluentui/pull/28100) by mgodbolt@microsoft.com) +- Bump @fluentui/react-focus to v8.8.28 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.109.10](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.109.10) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/react/package.json b/packages/react/package.json index 811aa987fe2068..b20b773395b5de 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react", - "version": "8.109.10", + "version": "8.109.11", "description": "Reusable React components for building web experiences.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -51,7 +51,7 @@ "@fluentui/foundation-legacy": "^8.2.41", "@fluentui/font-icons-mdl2": "^8.5.21", "@fluentui/merge-styles": "^8.5.12", - "@fluentui/react-focus": "^8.8.27", + "@fluentui/react-focus": "^8.8.28", "@fluentui/react-hooks": "^8.6.27", "@fluentui/react-portal-compat-context": "^9.0.6", "@fluentui/react-window-provider": "^2.2.15", diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 16ef8a98243bdb..360e12ad87c578 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -22,13 +22,13 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/theme": "^2.6.32", "@storybook/addon-knobs": "6.4.0", "@storybook/addon-essentials": "6.5.15", "@storybook/addons": "6.5.15", - "@fluentui/azure-themes": "^8.6.12", - "@fluentui/theme-samples": "^8.7.91", + "@fluentui/azure-themes": "^8.6.13", + "@fluentui/theme-samples": "^8.7.92", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/theme-samples/CHANGELOG.json b/packages/theme-samples/CHANGELOG.json index 774e87035b561b..febd5c5ec1347a 100644 --- a/packages/theme-samples/CHANGELOG.json +++ b/packages/theme-samples/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/theme-samples", "entries": [ + { + "date": "Mon, 05 Jun 2023 07:37:25 GMT", + "tag": "@fluentui/theme-samples_v8.7.92", + "version": "8.7.92", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/theme-samples", + "comment": "Bump @fluentui/react to v8.109.11", + "commit": "b922d4bbfce680ac0a8ec46b73e30958c7fa3b09" + } + ] + } + }, { "date": "Thu, 01 Jun 2023 07:38:37 GMT", "tag": "@fluentui/theme-samples_v8.7.91", diff --git a/packages/theme-samples/CHANGELOG.md b/packages/theme-samples/CHANGELOG.md index 3e38e7bd28129f..7f76e75355718a 100644 --- a/packages/theme-samples/CHANGELOG.md +++ b/packages/theme-samples/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/theme-samples -This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified. +This log was last generated on Mon, 05 Jun 2023 07:37:25 GMT and should not be manually modified. +## [8.7.92](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.92) + +Mon, 05 Jun 2023 07:37:25 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme-samples_v8.7.91..@fluentui/theme-samples_v8.7.92) + +### Patches + +- Bump @fluentui/react to v8.109.11 ([PR #28125](https://github.com/microsoft/fluentui/pull/28125) by beachball) + ## [8.7.91](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.91) Thu, 01 Jun 2023 07:38:37 GMT diff --git a/packages/theme-samples/package.json b/packages/theme-samples/package.json index ce3e04c7e4b619..96e3bc960faf2d 100644 --- a/packages/theme-samples/package.json +++ b/packages/theme-samples/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/theme-samples", - "version": "8.7.91", + "version": "8.7.92", "description": "Sample themes for use with Fabric components.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.109.10", + "@fluentui/react": "^8.109.11", "@fluentui/set-version": "^8.2.11", "@fluentui/scheme-utilities": "^8.3.33", "tslib": "^2.1.0" From 54316f1ded96bffa3505140ec68031afd0cebdb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ji=C5=99=C3=AD=20Vyhn=C3=A1lek?= Date: Mon, 5 Jun 2023 12:12:21 +0200 Subject: [PATCH 2/8] Virtualized datagrid columns overflowing (#27983) --- ...ndow-9216b207-e3ef-40d2-814b-9e6f2267d335.json | 7 +++++++ ...able-53bb57fc-9922-42a6-9795-a9ae7da8c8b4.json | 7 +++++++ .../src/components/DataGrid/DataGrid.tsx | 2 +- .../src/components/DataGrid/index.ts | 2 +- .../{useDataGrid.styles.ts => useDataGrid.ts} | 15 +++++++++++++-- .../react-table/etc/react-table.api.md | 4 ++++ .../src/components/DataGrid/DataGrid.types.ts | 6 ++++++ .../src/components/DataGrid/useDataGrid.ts | 5 ++++- .../react-components/react-table/src/index.ts | 1 + 9 files changed, 44 insertions(+), 5 deletions(-) create mode 100644 change/@fluentui-react-data-grid-react-window-9216b207-e3ef-40d2-814b-9e6f2267d335.json create mode 100644 change/@fluentui-react-table-53bb57fc-9922-42a6-9795-a9ae7da8c8b4.json rename packages/react-components/react-data-grid-react-window/src/components/DataGrid/{useDataGrid.styles.ts => useDataGrid.ts} (51%) diff --git a/change/@fluentui-react-data-grid-react-window-9216b207-e3ef-40d2-814b-9e6f2267d335.json b/change/@fluentui-react-data-grid-react-window-9216b207-e3ef-40d2-814b-9e6f2267d335.json new file mode 100644 index 00000000000000..1cd494249a19ac --- /dev/null +++ b/change/@fluentui-react-data-grid-react-window-9216b207-e3ef-40d2-814b-9e6f2267d335.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Fixed an issue where columns would overflow when resizableColumns is on", + "packageName": "@fluentui/react-data-grid-react-window", + "email": "jirivyhnalek@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-53bb57fc-9922-42a6-9795-a9ae7da8c8b4.json b/change/@fluentui-react-table-53bb57fc-9922-42a6-9795-a9ae7da8c8b4.json new file mode 100644 index 00000000000000..7d35c863072a45 --- /dev/null +++ b/change/@fluentui-react-table-53bb57fc-9922-42a6-9795-a9ae7da8c8b4.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "DataGrid now exposes containerWidthOffset prop, which is mainly used internally to adjust available space for column resizing based on other props", + "packageName": "@fluentui/react-table", + "email": "jirivyhnalek@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx index 62bfa0648d0305..b2daaa21a7941e 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useDataGrid_unstable } from './useDataGrid.styles'; +import { useDataGrid_unstable } from './useDataGrid'; import { renderDataGrid_unstable, useDataGridStyles_unstable, diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts index b5c5a7388b1d75..0b3589e2b3bc1d 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts @@ -1,2 +1,2 @@ export * from './DataGrid'; -export * from './useDataGrid.styles'; +export * from './useDataGrid'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.styles.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts similarity index 51% rename from packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.styles.ts rename to packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts index c50790787ddad8..fab0d21d7ea5a1 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.styles.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts @@ -1,6 +1,7 @@ import * as React from 'react'; -import type { DataGridProps, DataGridState } from '@fluentui/react-table'; +import { DataGridProps, DataGridState, TABLE_SELECTION_CELL_WIDTH } from '@fluentui/react-table'; import { useDataGrid_unstable as useBaseState } from '@fluentui/react-table'; +import { useFluent, useScrollbarWidth } from '@fluentui/react-components'; /** * Create the state required to render DataGrid. @@ -12,5 +13,15 @@ import { useDataGrid_unstable as useBaseState } from '@fluentui/react-table'; * @param ref - reference to root HTMLElement of DataGrid */ export const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref): DataGridState => { - return useBaseState({ ...props, 'aria-rowcount': props.items.length }, ref); + const { targetDocument } = useFluent(); + const scrollbarWidth = useScrollbarWidth({ targetDocument }); + + let containerWidthOffset = props.containerWidthOffset; + + if (containerWidthOffset === undefined) { + containerWidthOffset = props.selectionMode ? -TABLE_SELECTION_CELL_WIDTH : 0; + containerWidthOffset -= scrollbarWidth || 0; + } + + return useBaseState({ ...props, 'aria-rowcount': props.items.length, containerWidthOffset }, ref); }; diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md index da972c37b1bea5..dca10704a31e82 100644 --- a/packages/react-components/react-table/etc/react-table.api.md +++ b/packages/react-components/react-table/etc/react-table.api.md @@ -134,6 +134,7 @@ export type DataGridProps = TableProps & Pick void; + containerWidthOffset?: number; }; // @public @@ -242,6 +243,9 @@ export type SortDirection = 'ascending' | 'descending'; // @public export const Table: ForwardRefComponent; +// @public (undocumented) +export const TABLE_SELECTION_CELL_WIDTH = 44; + // @public export const TableBody: ForwardRefComponent; diff --git a/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts b/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts index dcd38068af3084..b7146c4498a096 100644 --- a/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts +++ b/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts @@ -80,6 +80,12 @@ export type DataGridProps = TableProps & e: KeyboardEvent | TouchEvent | MouseEvent | undefined, data: { columnId: TableColumnId; width: number }, ) => void; + /** + * For column resizing. Allows for a container size to be adjusted by a number of pixels, to make + * sure the columns don't overflow the table. + * By default, this value is calculated internally based on other props, but can be overriden. + */ + containerWidthOffset?: number; }; /** diff --git a/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts b/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts index edfe1be7f4e105..cecb2188e6f6cb 100644 --- a/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts +++ b/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts @@ -34,8 +34,11 @@ export const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref Date: Mon, 5 Jun 2023 13:39:33 +0200 Subject: [PATCH 3/8] feat: Implement Toast using composition API (#28094) * 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. * update md * Add tests * make timer a slot * make Toast internal * fix types * changefile * fix md * Update timer classname --- ...-d5e2a8b7-bfb3-4995-bd38-c0e77ebc6981.json | 7 + .../react-toast/etc/react-toast.api.md | 4 +- .../react-components/react-toast/src/Toast.ts | 1 + .../src/components/Timer/Timer.tsx | 30 +-- .../react-toast/src/components/Toast.tsx | 73 ------ .../src/components/Toast/Toast.test.tsx | 210 ++++++++++++++++++ .../src/components/Toast/Toast.tsx | 19 ++ .../src/components/Toast/Toast.types.ts | 36 +++ .../Toast/__snapshots__/Toast.test.tsx.snap | 12 + .../react-toast/src/components/Toast/index.ts | 6 + .../src/components/Toast/renderToast.tsx | 33 +++ .../src/components/Toast/useToast.ts | 91 ++++++++ .../components/Toast/useToastContextValues.ts | 17 ++ .../useToastStyles.styles.ts} | 38 +++- .../react-toast/src/state/types.ts | 16 +- .../src/state/useToastController.test.ts | 68 ++++++ .../src/state/useToastController.ts | 10 +- .../react-toast/src/state/vanilla/toaster.ts | 1 + .../stories/Toast/UpdateToast.stories.tsx | 51 ++++- .../react-utilities/src/utils/properties.ts | 2 + 20 files changed, 614 insertions(+), 111 deletions(-) create mode 100644 change/@fluentui-react-utilities-d5e2a8b7-bfb3-4995-bd38-c0e77ebc6981.json create mode 100644 packages/react-components/react-toast/src/Toast.ts delete mode 100644 packages/react-components/react-toast/src/components/Toast.tsx create mode 100644 packages/react-components/react-toast/src/components/Toast/Toast.test.tsx create mode 100644 packages/react-components/react-toast/src/components/Toast/Toast.tsx create mode 100644 packages/react-components/react-toast/src/components/Toast/Toast.types.ts create mode 100644 packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap create mode 100644 packages/react-components/react-toast/src/components/Toast/index.ts create mode 100644 packages/react-components/react-toast/src/components/Toast/renderToast.tsx create mode 100644 packages/react-components/react-toast/src/components/Toast/useToast.ts create mode 100644 packages/react-components/react-toast/src/components/Toast/useToastContextValues.ts rename packages/react-components/react-toast/src/components/{Toast.styles.ts => Toast/useToastStyles.styles.ts} (60%) create mode 100644 packages/react-components/react-toast/src/state/useToastController.test.ts diff --git a/change/@fluentui-react-utilities-d5e2a8b7-bfb3-4995-bd38-c0e77ebc6981.json b/change/@fluentui-react-utilities-d5e2a8b7-bfb3-4995-bd38-c0e77ebc6981.json new file mode 100644 index 00000000000000..43f7648afbb422 --- /dev/null +++ b/change/@fluentui-react-utilities-d5e2a8b7-bfb3-4995-bd38-c0e77ebc6981.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: getNativeElementProps should support animation event handlers", + "packageName": "@fluentui/react-utilities", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-toast/etc/react-toast.api.md b/packages/react-components/react-toast/etc/react-toast.api.md index a74c2776ddaa54..809de1559cf1eb 100644 --- a/packages/react-components/react-toast/etc/react-toast.api.md +++ b/packages/react-components/react-toast/etc/react-toast.api.md @@ -99,10 +99,10 @@ export const useToastAlertStyles_unstable: (state: ToastAlertState) => ToastAler // @public (undocumented) export function useToastController(toasterId?: ToasterId): { - dispatchToast: (content: React_2.ReactNode, options?: Partial> | undefined) => void; + dispatchToast: (content: React_2.ReactNode, options?: DispatchToastOptions | undefined) => void; dismissToast: (toastId: ToastId) => void; dismissAllToasts: () => void; - updateToast: (options: UpdateToastEventDetail) => void; + updateToast: (options: UpdateToastOptions) => void; }; // @public diff --git a/packages/react-components/react-toast/src/Toast.ts b/packages/react-components/react-toast/src/Toast.ts new file mode 100644 index 00000000000000..a84c38a13fc605 --- /dev/null +++ b/packages/react-components/react-toast/src/Toast.ts @@ -0,0 +1 @@ +export * from './components/Toast/index'; diff --git a/packages/react-components/react-toast/src/components/Timer/Timer.tsx b/packages/react-components/react-toast/src/components/Timer/Timer.tsx index f98265da4ca1f5..d98f9f994ff25d 100644 --- a/packages/react-components/react-toast/src/components/Timer/Timer.tsx +++ b/packages/react-components/react-toast/src/components/Timer/Timer.tsx @@ -1,22 +1,16 @@ import * as React from 'react'; import { useStyles } from './useTimerStyles.styles'; -export const Timer: React.FC<{ +export type TimerProps = { running: boolean; timeout: number; onTimeout: () => void; -}> = props => { + as?: 'span'; +}; + +export const Timer = React.forwardRef((props, ref) => { const styles = useStyles(); const { running, timeout, onTimeout } = props; - const ref = React.useRef(null); - - React.useEffect(() => { - if (ref.current) { - const timerElement = ref.current; - timerElement.addEventListener('animationend', onTimeout); - return () => timerElement.removeEventListener('animationend', onTimeout); - } - }, [onTimeout]); const style: React.CSSProperties = { animationDuration: `${timeout}ms`, @@ -27,5 +21,15 @@ export const Timer: React.FC<{ return null; } - return ; -}; + return ( + + ); +}); + +Timer.displayName = 'Timer'; diff --git a/packages/react-components/react-toast/src/components/Toast.tsx b/packages/react-components/react-toast/src/components/Toast.tsx deleted file mode 100644 index 0c5aba4346fc39..00000000000000 --- a/packages/react-components/react-toast/src/components/Toast.tsx +++ /dev/null @@ -1,73 +0,0 @@ -/** - * ⚠️ This is temporary and WILL be removed - */ - -import * as React from 'react'; -import { Transition } from 'react-transition-group'; -import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities'; -import { mergeClasses } from '@griffel/react'; -import { useToast, Toast as ToastProps } from '../state'; -import { Timer } from './Timer'; -import { Announce } from '../AriaLive'; -import { useToastStyles } from './Toast.styles'; -import { ToastContextProvider } from '../contexts/toastContext'; - -export const Toast: React.FC = props => { - const styles = useToastStyles(); - - const { visible, children, close, remove, updateId, announce, ...toastOptions } = props; - const { timeout, politeness } = toastOptions; - const { play, running, toastRef } = useToast({ ...props, content: children }); - - // start the toast once it's fully in - useIsomorphicLayoutEffect(() => { - if (toastRef.current) { - const toast = toastRef.current; - toast.addEventListener('animationend', play, { - once: true, - }); - } - }, [play, toastRef]); - - React.useEffect(() => { - if (visible) { - announce(toastRef.current?.textContent ?? '', { politeness }); - } - }, [announce, politeness, toastRef, visible, updateId]); - - const onEntering = () => { - if (!toastRef.current) { - return; - } - - const element = toastRef.current; - element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`); - }; - - const contextValue = React.useMemo( - () => ({ - close, - }), - [close], - ); - - return ( - - -
- {children} - -
- - - ); -}; diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.test.tsx b/packages/react-components/react-toast/src/components/Toast/Toast.test.tsx new file mode 100644 index 00000000000000..cf677f05e16881 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/Toast.test.tsx @@ -0,0 +1,210 @@ +import * as React from 'react'; +import { render, act, fireEvent } from '@testing-library/react'; +import { Toast } from './Toast'; +import { isConformant } from '../../testing/isConformant'; +import { ToastProps } from './Toast.types'; +import { toastClassNames } from './useToastStyles.styles'; + +const defaultToastProps: ToastProps = { + announce: () => null, + close: () => null, + content: '', + data: {}, + dispatchedAt: 0, + pauseOnHover: false, + pauseOnWindowBlur: false, + politeness: 'polite', + position: 'bottom-left', + priority: 0, + remove: () => null, + timeout: -1, + toasterId: 'toaster', + toastId: 'toast', + updateId: 0, + visible: true, +}; + +const runningTimerSelector = '[data-timer-status="running"]'; +const pausedTimerSelector = '[data-timer-status="paused"]'; + +describe('Toast', () => { + beforeEach(() => { + jest.useRealTimers(); + }); + + isConformant({ + Component: Toast, + displayName: 'Toast', + requiredProps: defaultToastProps, + isInternal: true, + }); + + it('renders a default state', () => { + const result = render(Default Toast); + expect(result.container).toMatchSnapshot(); + }); + + it('should announce on mount', () => { + const announce = jest.fn(); + const toastProps = { ...defaultToastProps, announce }; + render(Toast); + + expect(announce).toHaveBeenCalledTimes(1); + expect(announce).toHaveBeenCalledWith('Toast', { politeness: 'polite' }); + }); + + it('should announce on updateId change', () => { + const announce = jest.fn(); + const toastProps = { ...defaultToastProps, announce }; + const { rerender } = render(Toast); + + toastProps.updateId++; + + rerender(Toast); + + expect(announce).toHaveBeenCalledTimes(2); + expect(announce).toHaveBeenNthCalledWith(2, 'Toast', { politeness: 'polite' }); + }); + + it('should announce with configured politeness', () => { + const announce = jest.fn(); + const toastProps: ToastProps = { ...defaultToastProps, announce, politeness: 'assertive' }; + render(Toast); + + expect(announce).toHaveBeenCalledTimes(1); + expect(announce).toHaveBeenCalledWith('Toast', { politeness: 'assertive' }); + }); + + it('should respect user root', () => { + const className = 'foo'; + const toastProps: ToastProps = { ...defaultToastProps, data: { root: { className } } }; + const { container } = render(Toast); + + expect(container.querySelector(`.${className}`)).not.toBe(null); + }); + + it('should remove toast after visible is false', () => { + jest.useFakeTimers(); + const remove = jest.fn(); + const toastProps: ToastProps = { ...defaultToastProps, remove }; + const { rerender } = render(Toast); + toastProps.visible = false; + rerender(Toast); + + jest.advanceTimersByTime(500); + + expect(remove).toHaveBeenCalledTimes(1); + }); + + it('should start timer after toast on animationend', () => { + const toastProps: ToastProps = { ...defaultToastProps, timeout: 1 }; + const { container } = render(Toast); + + const toastElement = container.querySelector(`.${toastClassNames.root}`); + expect(toastElement).not.toBeNull(); + act(() => { + if (toastElement) { + fireEvent.animationEnd(toastElement); + } + }); + + expect(container.querySelector(runningTimerSelector)).not.toBeNull(); + }); + + it('should close toast ontimeout', () => { + const close = jest.fn(); + const toastProps: ToastProps = { ...defaultToastProps, timeout: 1, close }; + const { container } = render(Toast); + + const toastElement = container.querySelector(`.${toastClassNames.root}`); + expect(toastElement).not.toBeNull(); + act(() => { + if (toastElement) { + fireEvent.animationEnd(toastElement); + } + }); + + const timer = container.querySelector(runningTimerSelector); + expect(timer).not.toBeNull(); + + act(() => { + if (timer) { + fireEvent.animationEnd(timer); + } + }); + + expect(close).toHaveBeenCalledTimes(1); + }); + + it('should pause on hover', () => { + const toastProps: ToastProps = { ...defaultToastProps, timeout: 1, pauseOnHover: true }; + const { container } = render(Toast); + + const toastElement = container.querySelector(`.${toastClassNames.root}`); + expect(toastElement).not.toBeNull(); + act(() => { + if (toastElement) { + fireEvent.animationEnd(toastElement); + } + }); + + expect(container.querySelector(runningTimerSelector)).not.toBeNull(); + + act(() => { + if (toastElement) { + fireEvent.mouseEnter(toastElement); + } + }); + + expect(container.querySelector(pausedTimerSelector)).not.toBeNull(); + + act(() => { + if (toastElement) { + fireEvent.mouseLeave(toastElement); + } + }); + + expect(container.querySelector(runningTimerSelector)).not.toBeNull(); + }); + + it('should pause on window blur', () => { + const toastProps: ToastProps = { ...defaultToastProps, timeout: 1, pauseOnWindowBlur: true }; + const { container } = render(Toast); + + const toastElement = container.querySelector(`.${toastClassNames.root}`); + expect(toastElement).not.toBeNull(); + act(() => { + if (toastElement) { + fireEvent.animationEnd(toastElement); + } + }); + + expect(container.querySelector(runningTimerSelector)).not.toBeNull(); + + act(() => { + fireEvent.blur(window); + }); + + expect(container.querySelector(pausedTimerSelector)).not.toBeNull(); + + act(() => { + fireEvent.focus(window); + }); + + expect(container.querySelector(runningTimerSelector)).not.toBeNull(); + }); + + it('should render different timer on update', () => { + const toastProps: ToastProps = { ...defaultToastProps, timeout: 1 }; + const { container, rerender } = render(Toast); + + const firstTimer = container.querySelector(pausedTimerSelector); + expect(firstTimer).not.toBeNull(); + + toastProps.updateId++; + rerender(Toast); + + const secondTimer = container.querySelector(pausedTimerSelector); + expect(firstTimer).not.toBe(secondTimer); + }); +}); diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.tsx b/packages/react-components/react-toast/src/components/Toast/Toast.tsx new file mode 100644 index 00000000000000..098c6fc326bc1c --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/Toast.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { useToast_unstable } from './useToast'; +import { renderToast_unstable } from './renderToast'; +import { useToastStyles_unstable } from './useToastStyles.styles'; +import type { ToastProps } from './Toast.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { useToastContextValues_unstable } from './useToastContextValues'; + +/** + * Toast component + */ +export const Toast: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useToast_unstable(props, ref); + + useToastStyles_unstable(state); + return renderToast_unstable(state, useToastContextValues_unstable(state)); +}); + +Toast.displayName = 'Toast'; diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.types.ts b/packages/react-components/react-toast/src/components/Toast/Toast.types.ts new file mode 100644 index 00000000000000..1f8f499b1b73d4 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/Toast.types.ts @@ -0,0 +1,36 @@ +import * as React from 'react'; +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; +import { Announce } from '../AriaLive/AriaLive.types'; +import { Toast as VanillaToast } from '../../state'; +import { ToastContextValue } from '../../contexts/toastContext'; +import { TimerProps } from '../Timer/Timer'; + +export type ToastContextValues = { + toast: ToastContextValue; +}; + +export type ToastSlots = { + root: NonNullable>; + timer: NonNullable>; +}; + +/** + * Toast Props + */ +export type ToastProps = ComponentProps> & + VanillaToast & { + visible: boolean; + announce: Announce; + }; + +/** + * State used in rendering Toast + */ +export type ToastState = ComponentState & + Pick & { + transitionTimeout: number; + timerTimeout: number; + running: boolean; + onTransitionEntering: () => void; + nodeRef: React.Ref; + }; diff --git a/packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap b/packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap new file mode 100644 index 00000000000000..b3b7f14e8feb07 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Toast renders a default state 1`] = ` +
+
+ Default Toast +
+
+`; diff --git a/packages/react-components/react-toast/src/components/Toast/index.ts b/packages/react-components/react-toast/src/components/Toast/index.ts new file mode 100644 index 00000000000000..d479da1e5c8bbb --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/index.ts @@ -0,0 +1,6 @@ +export * from './Toast'; +export * from './Toast.types'; +export * from './renderToast'; +export * from './useToast'; +export * from './useToastStyles.styles'; +export * from './useToastContextValues'; diff --git a/packages/react-components/react-toast/src/components/Toast/renderToast.tsx b/packages/react-components/react-toast/src/components/Toast/renderToast.tsx new file mode 100644 index 00000000000000..ca9bde26741e30 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/renderToast.tsx @@ -0,0 +1,33 @@ +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; +import { Transition } from 'react-transition-group'; +import type { ToastState, ToastSlots, ToastContextValues } from './Toast.types'; +import { ToastContextProvider } from '../../contexts/toastContext'; + +/** + * Render the final JSX of Toast + */ +export const renderToast_unstable = (state: ToastState, contextValues: ToastContextValues) => { + const { onTransitionEntering, visible, transitionTimeout, remove, nodeRef } = state; + const { slots, slotProps } = getSlotsNext(state); + + return ( + + + + + + + ); +}; diff --git a/packages/react-components/react-toast/src/components/Toast/useToast.ts b/packages/react-components/react-toast/src/components/Toast/useToast.ts new file mode 100644 index 00000000000000..f72a2bc6ab753d --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/useToast.ts @@ -0,0 +1,91 @@ +import * as React from 'react'; +import { + getNativeElementProps, + useMergedRefs, + ExtractSlotProps, + Slot, + useEventCallback, + resolveShorthand, +} from '@fluentui/react-utilities'; +import type { ToastProps, ToastState } from './Toast.types'; +import { useToast } from '../../state'; +import { Timer, TimerProps } from '../Timer/Timer'; + +/** + * Create the state required to render Toast. + * + * The returned state can be modified with hooks such as useToastStyles_unstable, + * before being passed to renderToast_unstable. + * + * @param props - props from this instance of Toast + * @param ref - reference to root HTMLElement of Toast + */ +export const useToast_unstable = (props: ToastProps, ref: React.Ref): ToastState => { + const { + visible, + children, + close, + remove, + updateId, + announce, + data, + timeout: timerTimeout, + politeness, + ...rest + } = props; + const { play, running, toastRef } = useToast({ ...props, content: children }); + + React.useEffect(() => { + if (visible) { + announce(toastRef.current?.textContent ?? '', { politeness }); + } + }, [announce, politeness, toastRef, visible, updateId]); + + // It's impossible to animate to height: auto in CSS, the actual pixel value must be known + // Get the height of the toast before animation styles have been applied and set a CSS + // variable with its height. The CSS variable will be used by the styles + const onTransitionEntering = () => { + if (!toastRef.current) { + return; + } + + const element = toastRef.current; + element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`); + }; + + // Users never actually use Toast as a JSX but imperatively through useToastController + const userRootSlot = (data as { root?: ExtractSlotProps> }).root; + + const onAnimationEnd = useEventCallback((e: React.AnimationEvent) => { + // start toast once it's fully animated in + play(); + userRootSlot?.onAnimationEnd?.(e); + }); + + return { + components: { + timer: Timer, + root: 'div', + }, + timer: resolveShorthand( + { key: updateId, onTimeout: close, running, timeout: timerTimeout ?? -1 }, + { required: true }, + ), + root: getNativeElementProps('div', { + ref: useMergedRefs(ref, toastRef), + children, + ...rest, + ...userRootSlot, + onAnimationEnd, + }), + timerTimeout, + transitionTimeout: 500, + running, + visible, + remove, + close, + onTransitionEntering, + updateId, + nodeRef: toastRef, + }; +}; diff --git a/packages/react-components/react-toast/src/components/Toast/useToastContextValues.ts b/packages/react-components/react-toast/src/components/Toast/useToastContextValues.ts new file mode 100644 index 00000000000000..dd2c1ec2232af3 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/useToastContextValues.ts @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { ToastContextValues, ToastState } from './Toast.types'; + +export function useToastContextValues_unstable(state: ToastState): ToastContextValues { + const { close } = state; + + const toastContext = React.useMemo( + () => ({ + close, + }), + [close], + ); + + return { + toast: toastContext, + }; +} diff --git a/packages/react-components/react-toast/src/components/Toast.styles.ts b/packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts similarity index 60% rename from packages/react-components/react-toast/src/components/Toast.styles.ts rename to packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts index 23ae5f6a4dee36..910e0d55e98217 100644 --- a/packages/react-components/react-toast/src/components/Toast.styles.ts +++ b/packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts @@ -1,19 +1,26 @@ -/** - * ⚠️ This is temporary and WILL be removed - */ - -import { makeStyles, shorthands } from '@griffel/react'; +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; +import type { ToastSlots, ToastState } from './Toast.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; -export const useToastStyles = makeStyles({ - toast: { - pointerEvents: 'all', +export const toastClassNames: SlotClassNames = { + root: 'fui-Toast', + timer: 'fui-Toast__timer', +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { boxSizing: 'border-box', marginTop: '16px', minHeight: '44px', + pointerEvents: 'all', ...shorthands.borderRadius(tokens.borderRadiusMedium), '--fui-toast-height': '44px', }, + enter: { animationDuration: '200ms, 400ms', animationDelay: '0ms, 200ms', @@ -66,3 +73,18 @@ export const useToastStyles = makeStyles({ ], }, }); + +/** + * Apply styling to the Toast slots based on the state + */ +export const useToastStyles_unstable = (state: ToastState): ToastState => { + const styles = useStyles(); + state.root.className = mergeClasses( + toastClassNames.root, + state.visible ? styles.enter : styles.exit, + styles.root, + state.root.className, + ); + + return state; +}; diff --git a/packages/react-components/react-toast/src/state/types.ts b/packages/react-components/react-toast/src/state/types.ts index 58ef94dc0ece07..0a02ab35c660d9 100644 --- a/packages/react-components/react-toast/src/state/types.ts +++ b/packages/react-components/react-toast/src/state/types.ts @@ -1,3 +1,4 @@ +import type { Slot } from '@fluentui/react-utilities'; import { EVENTS } from './constants'; export type ToastId = string; @@ -5,7 +6,7 @@ export type ToasterId = string; export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'; -export interface ToastOptions { +export interface ToastOptions { toastId: ToastId; position: ToastPosition; content: unknown; @@ -15,6 +16,7 @@ export interface ToastOptions { toasterId: ToasterId | undefined; priority: number; politeness: 'assertive' | 'polite'; + data: TData; } export interface ToastOffsetObject { @@ -31,7 +33,7 @@ export interface ToasterOptions limit?: number; } -export interface Toast extends ToastOptions { +export interface Toast extends ToastOptions { close: () => void; remove: () => void; updateId: number; @@ -64,3 +66,13 @@ export type ToastListenerMap = { [EVENTS.dismissAll]: EventListener; [EVENTS.update]: EventListener; }; + +type RootSlot = Slot<'div'>; + +export interface DispatchToastOptions extends Partial> { + root?: RootSlot; +} + +export interface UpdateToastOptions extends UpdateToastEventDetail { + root?: RootSlot; +} diff --git a/packages/react-components/react-toast/src/state/useToastController.test.ts b/packages/react-components/react-toast/src/state/useToastController.test.ts new file mode 100644 index 00000000000000..052597ea1f3d01 --- /dev/null +++ b/packages/react-components/react-toast/src/state/useToastController.test.ts @@ -0,0 +1,68 @@ +import { renderHook } from '@testing-library/react-hooks'; +import { + dismissAllToasts as dismissAllToastsVanilla, + dismissToast as dismissToastVanilla, + dispatchToast as dispatchToastVanilla, + updateToast as updateToastVanilla, +} from './vanilla'; +import { useToastController } from './useToastController'; + +jest.mock('./vanilla'); + +describe('useToastController', () => { + beforeEach(() => { + jest.resetAllMocks(); + }); + + it('should set toaster id for all actions if passed as an argument', () => { + const toasterId = 'test'; + const { result } = renderHook(() => useToastController(toasterId)); + const { dismissAllToasts, dismissToast, dispatchToast, updateToast } = result.current; + + dismissAllToasts(); + dismissToast('toast'); + dispatchToast('toast'); + updateToast({ toastId: 'toast' }); + + expect(dismissAllToastsVanilla).toHaveBeenCalledTimes(1); + expect(dismissToastVanilla).toHaveBeenCalledTimes(1); + expect(dispatchToastVanilla).toHaveBeenCalledTimes(1); + expect(updateToastVanilla).toHaveBeenCalledTimes(1); + + expect(dismissAllToastsVanilla).toHaveBeenCalledWith(toasterId, document); + expect(dismissToastVanilla).toHaveBeenCalledWith(expect.anything(), toasterId, document); + expect(dispatchToastVanilla).toHaveBeenCalledWith( + expect.anything(), + expect.objectContaining({ toasterId }), + document, + ); + expect(updateToastVanilla).toHaveBeenCalledWith(expect.objectContaining({ toasterId }), document); + }); + + describe('dispatchToast', () => { + it('should pass root to data', () => { + const { result } = renderHook(() => useToastController()); + const { dispatchToast } = result.current; + + dispatchToast('toast', { root: { className: 'foo' } }); + expect(dispatchToastVanilla).toHaveBeenCalledWith( + expect.anything(), + expect.objectContaining({ data: { root: { className: 'foo' } } }), + document, + ); + }); + }); + + describe('updateTpast', () => { + it('should pass root to data', () => { + const { result } = renderHook(() => useToastController()); + const { updateToast } = result.current; + + updateToast({ toastId: 'foo', root: { className: 'foo' } }); + expect(updateToastVanilla).toHaveBeenCalledWith( + expect.objectContaining({ data: { root: { className: 'foo' } } }), + document, + ); + }); + }); +}); diff --git a/packages/react-components/react-toast/src/state/useToastController.ts b/packages/react-components/react-toast/src/state/useToastController.ts index 247466eb45f831..f290ea7cc26826 100644 --- a/packages/react-components/react-toast/src/state/useToastController.ts +++ b/packages/react-components/react-toast/src/state/useToastController.ts @@ -6,7 +6,7 @@ import { dismissAllToasts as dismissAllToastsVanilla, updateToast as updateToastVanilla, } from './vanilla'; -import { ToastId, ToastOptions, ToasterId, UpdateToastEventDetail } from './types'; +import { DispatchToastOptions, ToastId, ToasterId, UpdateToastOptions } from './types'; const noop = () => undefined; @@ -24,8 +24,8 @@ export function useToastController(toasterId?: ToasterId) { } return { - dispatchToast: (content: React.ReactNode, options?: Partial>) => { - dispatchToastVanilla(content, { ...options, toasterId }, targetDocument); + dispatchToast: (content: React.ReactNode, options?: DispatchToastOptions) => { + dispatchToastVanilla(content, { ...options, toasterId, data: { root: options?.root } }, targetDocument); }, dismissToast: (toastId: ToastId) => { dismissToastVanilla(toastId, toasterId, targetDocument); @@ -33,8 +33,8 @@ export function useToastController(toasterId?: ToasterId) { dismissAllToasts: () => { dismissAllToastsVanilla(toasterId, targetDocument); }, - updateToast: (options: UpdateToastEventDetail) => { - updateToastVanilla({ ...options, toasterId }, targetDocument); + updateToast: (options: UpdateToastOptions) => { + updateToastVanilla({ ...options, data: { root: options.root }, toasterId }, targetDocument); }, }; }, [targetDocument, toasterId]); diff --git a/packages/react-components/react-toast/src/state/vanilla/toaster.ts b/packages/react-components/react-toast/src/state/vanilla/toaster.ts index b134cbef363f3b..dca75b06f1e9b8 100644 --- a/packages/react-components/react-toast/src/state/vanilla/toaster.ts +++ b/packages/react-components/react-toast/src/state/vanilla/toaster.ts @@ -177,6 +177,7 @@ export class Toaster { updateId: 0, toasterId, dispatchedAt: Date.now(), + data: {}, }; assignDefined(toast, toastOptions); diff --git a/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx b/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx index 2716e90cd5fe92..5d2a9cd3e00ae5 100644 --- a/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx @@ -1,25 +1,60 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; -import { useId } from '@fluentui/react-components'; +import { Toaster, useToastController, ToastAlert, ToastTrigger } from '@fluentui/react-toast'; +import { useId, Link } from '@fluentui/react-components'; export const UpdateToast = () => { + const toastId = useId('toast'); const toasterId = useId('toaster'); - const toastId = useId('example'); + const [dispatched, setDispatched] = React.useState(false); + const { dispatchToast, updateToast } = useToastController(toasterId); const notify = () => - dispatchToast(This toast never closes, { toastId, timeout: -1 }); + dispatchToast( + + Undo + + } + > + Sending email... + , + { timeout: -1, toastId }, + ); + const update = () => updateToast({ - content: This toast will close soon, + content: ( + + Dismiss + + } + > + Email sent + + ), toastId, - timeout: 1000, + timeout: 2000, }); + const onClick = () => { + if (dispatched) { + update(); + setDispatched(false); + } else { + notify(); + setDispatched(true); + } + }; + return ( <> - - + ); }; diff --git a/packages/react-components/react-utilities/src/utils/properties.ts b/packages/react-components/react-utilities/src/utils/properties.ts index c270f142615547..2f434f8afc95b3 100644 --- a/packages/react-components/react-utilities/src/utils/properties.ts +++ b/packages/react-components/react-utilities/src/utils/properties.ts @@ -19,6 +19,8 @@ const toObjectMap = (...items: (string[] | Record)[]) => { */ export const baseElementEvents = toObjectMap([ 'onAuxClick', + 'onAnimationEnd', + 'onAnimationStart', 'onCopy', 'onCut', 'onPaste', From 626afe1a1eda5d16fc0812e4fdda82bfdf612ae8 Mon Sep 17 00:00:00 2001 From: ling1726 Date: Mon, 5 Jun 2023 14:12:13 +0200 Subject: [PATCH 4/8] feat: Implement ToastLayout, remove ToastAlert (#28114) * feat: Implement ToastLayout, remove ToastAlert Implements the ToastLayout component along with ToastTitle, ToastBody and ToastFooter. This PR removes the existing ToastAlert component, because the new layout component handles all layout cases specified by design. * fix conformance tests * remove ToastAlert --- .../react-toast/etc/react-toast.api.md | 108 +++++++++++++--- .../react-toast/src/ToastAlert.ts | 1 - .../react-toast/src/ToastBody.ts | 1 + .../react-toast/src/ToastFooter.ts | 1 + .../react-toast/src/ToastLayout.ts | 1 + .../react-toast/src/ToastTitle.ts | 1 + .../components/ToastAlert/ToastAlert.test.tsx | 57 --------- .../src/components/ToastAlert/ToastAlert.tsx | 21 --- .../components/ToastAlert/ToastAlert.types.ts | 39 ------ .../src/components/ToastAlert/index.ts | 5 - .../ToastAlert/renderToastAlert.tsx | 19 --- .../ToastAlert/useToastAlertStyles.styles.ts | 120 ------------------ .../components/ToastBody/ToastBody.test.tsx | 24 ++++ .../src/components/ToastBody/ToastBody.tsx | 18 +++ .../components/ToastBody/ToastBody.types.ts | 16 +++ .../__snapshots__/ToastBody.test.tsx.snap | 11 ++ .../src/components/ToastBody/index.ts | 5 + .../components/ToastBody/renderToastBody.tsx | 21 +++ .../src/components/ToastBody/useToastBody.ts | 26 ++++ .../ToastBody/useToastBodyStyles.styles.ts | 47 +++++++ .../ToastFooter/ToastFooter.test.tsx | 16 +++ .../components/ToastFooter/ToastFooter.tsx | 18 +++ .../ToastFooter/ToastFooter.types.ts | 15 +++ .../__snapshots__/ToastFooter.test.tsx.snap | 11 ++ .../src/components/ToastFooter/index.ts | 5 + .../ToastFooter/renderToastFooter.tsx | 15 +++ .../components/ToastFooter/useToastFooter.ts | 24 ++++ .../useToastFooterStyles.styles.ts | 31 +++++ .../ToastLayout/ToastLayout.test.tsx | 16 +++ .../components/ToastLayout/ToastLayout.tsx | 18 +++ .../ToastLayout/ToastLayout.types.ts | 15 +++ .../__snapshots__/ToastLayout.test.tsx.snap | 11 ++ .../src/components/ToastLayout/index.ts | 5 + .../ToastLayout/renderToastLayout.tsx | 15 +++ .../components/ToastLayout/useToastLayout.ts | 24 ++++ .../useToastLayoutStyles.styles.ts | 42 ++++++ .../components/ToastTitle/ToastTitle.test.tsx | 34 +++++ .../src/components/ToastTitle/ToastTitle.tsx | 18 +++ .../components/ToastTitle/ToastTitle.types.ts | 23 ++++ .../__snapshots__/ToastTitle.test.tsx.snap | 11 ++ .../src/components/ToastTitle/index.ts | 5 + .../ToastTitle/renderToastTitle.tsx | 22 ++++ .../useToastTitle.tsx} | 17 ++- .../ToastTitle/useToastTitleStyles.styles.ts | 55 ++++++++ .../react-components/react-toast/src/index.ts | 43 +++++-- .../stories/Toast/CustomAnnounce.stories.tsx | 18 ++- .../stories/Toast/CustomTimeout.stories.tsx | 10 +- .../stories/Toast/Default.stories.tsx | 15 ++- .../Toast/DefaultToastOptions.stories.tsx | 9 +- .../stories/Toast/DismissAll.stories.tsx | 9 +- .../stories/Toast/DismissToast.stories.tsx | 10 +- .../Toast/DismissToastWithAction.stories.tsx | 24 ++-- .../Toast/MultipleToasters.stories.tsx | 16 ++- .../stories/Toast/Offset.stories.tsx | 10 +- .../stories/Toast/PauseOnHover.stories.tsx | 10 +- .../Toast/PauseOnWindowBlur.stories.tsx | 9 +- .../stories/Toast/ToastPositions.stories.tsx | 9 +- .../stories/Toast/ToasterLimit.stories.tsx | 9 +- .../stories/Toast/UpdateToast.stories.tsx | 33 ++--- 59 files changed, 879 insertions(+), 363 deletions(-) delete mode 100644 packages/react-components/react-toast/src/ToastAlert.ts create mode 100644 packages/react-components/react-toast/src/ToastBody.ts create mode 100644 packages/react-components/react-toast/src/ToastFooter.ts create mode 100644 packages/react-components/react-toast/src/ToastLayout.ts create mode 100644 packages/react-components/react-toast/src/ToastTitle.ts delete mode 100644 packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.test.tsx delete mode 100644 packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.tsx delete mode 100644 packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.types.ts delete mode 100644 packages/react-components/react-toast/src/components/ToastAlert/index.ts delete mode 100644 packages/react-components/react-toast/src/components/ToastAlert/renderToastAlert.tsx delete mode 100644 packages/react-components/react-toast/src/components/ToastAlert/useToastAlertStyles.styles.ts create mode 100644 packages/react-components/react-toast/src/components/ToastBody/ToastBody.test.tsx create mode 100644 packages/react-components/react-toast/src/components/ToastBody/ToastBody.tsx create mode 100644 packages/react-components/react-toast/src/components/ToastBody/ToastBody.types.ts create mode 100644 packages/react-components/react-toast/src/components/ToastBody/__snapshots__/ToastBody.test.tsx.snap create mode 100644 packages/react-components/react-toast/src/components/ToastBody/index.ts create mode 100644 packages/react-components/react-toast/src/components/ToastBody/renderToastBody.tsx create mode 100644 packages/react-components/react-toast/src/components/ToastBody/useToastBody.ts create mode 100644 packages/react-components/react-toast/src/components/ToastBody/useToastBodyStyles.styles.ts create mode 100644 packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.test.tsx create mode 100644 packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.tsx create mode 100644 packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.types.ts create mode 100644 packages/react-components/react-toast/src/components/ToastFooter/__snapshots__/ToastFooter.test.tsx.snap create mode 100644 packages/react-components/react-toast/src/components/ToastFooter/index.ts create mode 100644 packages/react-components/react-toast/src/components/ToastFooter/renderToastFooter.tsx create mode 100644 packages/react-components/react-toast/src/components/ToastFooter/useToastFooter.ts create mode 100644 packages/react-components/react-toast/src/components/ToastFooter/useToastFooterStyles.styles.ts create mode 100644 packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.test.tsx create mode 100644 packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.tsx create mode 100644 packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.types.ts create mode 100644 packages/react-components/react-toast/src/components/ToastLayout/__snapshots__/ToastLayout.test.tsx.snap create mode 100644 packages/react-components/react-toast/src/components/ToastLayout/index.ts create mode 100644 packages/react-components/react-toast/src/components/ToastLayout/renderToastLayout.tsx create mode 100644 packages/react-components/react-toast/src/components/ToastLayout/useToastLayout.ts create mode 100644 packages/react-components/react-toast/src/components/ToastLayout/useToastLayoutStyles.styles.ts create mode 100644 packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.test.tsx create mode 100644 packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.tsx create mode 100644 packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.types.ts create mode 100644 packages/react-components/react-toast/src/components/ToastTitle/__snapshots__/ToastTitle.test.tsx.snap create mode 100644 packages/react-components/react-toast/src/components/ToastTitle/index.ts create mode 100644 packages/react-components/react-toast/src/components/ToastTitle/renderToastTitle.tsx rename packages/react-components/react-toast/src/components/{ToastAlert/useToastAlert.tsx => ToastTitle/useToastTitle.tsx} (68%) create mode 100644 packages/react-components/react-toast/src/components/ToastTitle/useToastTitleStyles.styles.ts diff --git a/packages/react-components/react-toast/etc/react-toast.api.md b/packages/react-components/react-toast/etc/react-toast.api.md index 809de1559cf1eb..2ba90894f1cee5 100644 --- a/packages/react-components/react-toast/etc/react-toast.api.md +++ b/packages/react-components/react-toast/etc/react-toast.api.md @@ -16,33 +16,38 @@ import type { Slot } from '@fluentui/react-utilities'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { TriggerProps } from '@fluentui/react-utilities'; -// @public (undocumented) -export const renderToastAlert_unstable: (state: ToastAlertState) => JSX.Element; +// @public +export const renderToastBody_unstable: (state: ToastBodyState) => JSX.Element; // @public export const renderToaster_unstable: (state: ToasterState) => JSX.Element; // @public -export const ToastAlert: ForwardRefComponent; +export const renderToastFooter_unstable: (state: ToastFooterState) => JSX.Element; + +// @public +export const renderToastLayout_unstable: (state: ToastLayoutState) => JSX.Element; + +// @public +export const renderToastTitle_unstable: (state: ToastTitleState) => JSX.Element; + +// @public +export const ToastBody: ForwardRefComponent; // @public (undocumented) -export const toastAlertClassNames: SlotClassNames; +export const toastBodyClassNames: SlotClassNames; // @public -export type ToastAlertProps = ComponentProps & { - intent?: 'info' | 'success' | 'error' | 'warning'; - appearance?: 'primary' | 'inverted'; -}; +export type ToastBodyProps = ComponentProps & {}; // @public (undocumented) -export type ToastAlertSlots = { - root: NonNullable>; - media?: Slot<'div'>; - action?: Slot<'div'>; +export type ToastBodySlots = { + root: Slot<'div'>; + subtitle?: Slot<'div'>; }; // @public -export type ToastAlertState = ComponentState & Pick & Required>; +export type ToastBodyState = ComponentState; // @public export const Toaster: React_2.FC; @@ -66,15 +71,70 @@ export type ToasterState = ComponentState & Pick; + +// @public (undocumented) +export const toastFooterClassNames: SlotClassNames; + +// @public +export type ToastFooterProps = ComponentProps & {}; + +// @public (undocumented) +export type ToastFooterSlots = { + root: Slot<'div'>; +}; + +// @public +export type ToastFooterState = ComponentState; + // @public (undocumented) export type ToastId = string; +// @public +export const ToastLayout: ForwardRefComponent; + +// @public (undocumented) +export const toastLayoutClassNames: SlotClassNames; + +// @public +export type ToastLayoutProps = ComponentProps & {}; + +// @public (undocumented) +export type ToastLayoutSlots = { + root: Slot<'div'>; +}; + +// @public +export type ToastLayoutState = ComponentState; + // @public (undocumented) export type ToastOffset = Partial> | ToastOffsetObject; // @public (undocumented) export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'; +// @public +export const ToastTitle: ForwardRefComponent; + +// @public (undocumented) +export const toastTitleClassNames: SlotClassNames; + +// @public +export type ToastTitleProps = ComponentProps & { + intent?: 'info' | 'success' | 'error' | 'warning'; +}; + +// @public (undocumented) +export type ToastTitleSlots = { + root: NonNullable>; + media?: Slot<'div'>; + action?: Slot<'div'>; +}; + +// @public +export type ToastTitleState = ComponentState & Required>; + // @public export const ToastTrigger: React_2.FC; @@ -92,10 +152,10 @@ export type ToastTriggerState = { }; // @public -export const useToastAlert_unstable: (props: ToastAlertProps, ref: React_2.Ref) => ToastAlertState; +export const useToastBody_unstable: (props: ToastBodyProps, ref: React_2.Ref) => ToastBodyState; // @public -export const useToastAlertStyles_unstable: (state: ToastAlertState) => ToastAlertState; +export const useToastBodyStyles_unstable: (state: ToastBodyState) => ToastBodyState; // @public (undocumented) export function useToastController(toasterId?: ToasterId): { @@ -111,6 +171,24 @@ export const useToaster_unstable: (props: ToasterProps) => ToasterState; // @public export const useToasterStyles_unstable: (state: ToasterState) => ToasterState; +// @public +export const useToastFooter_unstable: (props: ToastFooterProps, ref: React_2.Ref) => ToastFooterState; + +// @public +export const useToastFooterStyles_unstable: (state: ToastFooterState) => ToastFooterState; + +// @public +export const useToastLayout_unstable: (props: ToastLayoutProps, ref: React_2.Ref) => ToastLayoutState; + +// @public +export const useToastLayoutStyles_unstable: (state: ToastLayoutState) => ToastLayoutState; + +// @public +export const useToastTitle_unstable: (props: ToastTitleProps, ref: React_2.Ref) => ToastTitleState; + +// @public +export const useToastTitleStyles_unstable: (state: ToastTitleState) => ToastTitleState; + // (No @packageDocumentation comment for this package) ``` diff --git a/packages/react-components/react-toast/src/ToastAlert.ts b/packages/react-components/react-toast/src/ToastAlert.ts deleted file mode 100644 index f66ac7caf00937..00000000000000 --- a/packages/react-components/react-toast/src/ToastAlert.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/ToastAlert'; diff --git a/packages/react-components/react-toast/src/ToastBody.ts b/packages/react-components/react-toast/src/ToastBody.ts new file mode 100644 index 00000000000000..526fb1959cccd9 --- /dev/null +++ b/packages/react-components/react-toast/src/ToastBody.ts @@ -0,0 +1 @@ +export * from './components/ToastBody/index'; diff --git a/packages/react-components/react-toast/src/ToastFooter.ts b/packages/react-components/react-toast/src/ToastFooter.ts new file mode 100644 index 00000000000000..1a569b6d26a6d7 --- /dev/null +++ b/packages/react-components/react-toast/src/ToastFooter.ts @@ -0,0 +1 @@ +export * from './components/ToastFooter/index'; diff --git a/packages/react-components/react-toast/src/ToastLayout.ts b/packages/react-components/react-toast/src/ToastLayout.ts new file mode 100644 index 00000000000000..d425053db21361 --- /dev/null +++ b/packages/react-components/react-toast/src/ToastLayout.ts @@ -0,0 +1 @@ +export * from './components/ToastLayout/index'; diff --git a/packages/react-components/react-toast/src/ToastTitle.ts b/packages/react-components/react-toast/src/ToastTitle.ts new file mode 100644 index 00000000000000..3424a5dcbc301d --- /dev/null +++ b/packages/react-components/react-toast/src/ToastTitle.ts @@ -0,0 +1 @@ +export * from './components/ToastTitle/index'; diff --git a/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.test.tsx b/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.test.tsx deleted file mode 100644 index 0eaeb262d5a6d9..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.test.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from 'react'; - -import { render, screen } from '@testing-library/react'; - -import { isConformant } from '../../testing/isConformant'; -import { ToastAlert } from './ToastAlert'; -import { toastAlertClassNames } from './useToastAlertStyles.styles'; - -describe('ToastAlert', () => { - isConformant({ - Component: ToastAlert, - displayName: 'ToastAlert', - testOptions: { - 'has-static-classnames': [ - { - props: { - media: 'Test Icon', - action: 'Test Action', - }, - expectedClassNames: { - root: toastAlertClassNames.root, - media: toastAlertClassNames.media, - action: toastAlertClassNames.action, - }, - }, - ], - }, - }); - - it('renders a default state', () => { - render(Test); - expect(screen.getByText('Test')).toBeTruthy(); - }); - - it('renders an media', () => { - render(}>Test); - expect(screen.getByTestId('foo')).toBeTruthy(); - }); - - it('renders a button', () => { - render( - - Test - , - ); - expect(screen.getByText('Undo')).toBeTruthy(); - }); - - it('prioritizes media over intent prop', () => { - render( - }> - Test - , - ); - expect(screen.getByTestId('foo')).toBeTruthy(); - }); -}); diff --git a/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.tsx b/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.tsx deleted file mode 100644 index 9c486da57ff63d..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; - -import { renderToastAlert_unstable } from './renderToastAlert'; -import { useToastAlert_unstable } from './useToastAlert'; -import { useToastAlertStyles_unstable } from './useToastAlertStyles.styles'; - -import type { ToastAlertProps } from './ToastAlert.types'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; - -/** - * An ToastAlert component displays a brief, important message to attract a user's attention - * without interrupting their current task. - */ -export const ToastAlert: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useToastAlert_unstable(props, ref); - - useToastAlertStyles_unstable(state); - return renderToastAlert_unstable(state); -}) as ForwardRefComponent; - -ToastAlert.displayName = 'ToastAlert'; diff --git a/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.types.ts b/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.types.ts deleted file mode 100644 index eda967255639de..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastAlert/ToastAlert.types.ts +++ /dev/null @@ -1,39 +0,0 @@ -import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; - -export type ToastAlertSlots = { - /** - * The root slot is the top level container for the toastAlert component - */ - root: NonNullable>; - /** - * The icon slot renders the icon determined by the `icon` or `intent` prop - */ - media?: Slot<'div'>; - /** - * The action slot renders a button that prompts the user to take action on the toastAlert - */ - action?: Slot<'div'>; -}; - -/** - * ToastAlert Props - */ -export type ToastAlertProps = ComponentProps & { - /** - * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop - * overrides the intent prop - */ - intent?: 'info' | 'success' | 'error' | 'warning'; - /** - * The appearance of the ToastAlert. - * @default 'primary' - */ - appearance?: 'primary' | 'inverted'; -}; - -/** - * State used in rendering ToastAlert - */ -export type ToastAlertState = ComponentState & - Pick & - Required>; diff --git a/packages/react-components/react-toast/src/components/ToastAlert/index.ts b/packages/react-components/react-toast/src/components/ToastAlert/index.ts deleted file mode 100644 index 81a58c2c5274b7..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastAlert/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './ToastAlert'; -export * from './ToastAlert.types'; -export * from './renderToastAlert'; -export * from './useToastAlert'; -export * from './useToastAlertStyles.styles'; diff --git a/packages/react-components/react-toast/src/components/ToastAlert/renderToastAlert.tsx b/packages/react-components/react-toast/src/components/ToastAlert/renderToastAlert.tsx deleted file mode 100644 index bdbcb4394e52cd..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastAlert/renderToastAlert.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/** @jsxRuntime classic */ -/** @jsx createElement */ - -import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; - -import type { ToastAlertState, ToastAlertSlots } from './ToastAlert.types'; - -export const renderToastAlert_unstable = (state: ToastAlertState) => { - const { slots, slotProps } = getSlotsNext(state); - - return ( - - {slots.media && } - {slotProps.root.children} - {slots.action && } - - ); -}; diff --git a/packages/react-components/react-toast/src/components/ToastAlert/useToastAlertStyles.styles.ts b/packages/react-components/react-toast/src/components/ToastAlert/useToastAlertStyles.styles.ts deleted file mode 100644 index 213e3b6aca49e3..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastAlert/useToastAlertStyles.styles.ts +++ /dev/null @@ -1,120 +0,0 @@ -import { tokens } from '@fluentui/react-theme'; -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; -import type { ToastAlertSlots, ToastAlertState } from './ToastAlert.types'; -import type { SlotClassNames } from '@fluentui/react-utilities'; - -export const toastAlertClassNames: SlotClassNames = { - root: 'fui-ToastAlert', - media: 'fui-ToastAlert__media', - action: 'fui-ToastAlert__action', -}; - -const useStyles = makeStyles({ - root: { - display: 'flex', - alignItems: 'center', - minHeight: '44px', - ...shorthands.padding('0px', '12px'), - ...shorthands.borderRadius(tokens.borderRadiusMedium), - ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke), - boxShadow: tokens.shadow8, - fontSize: tokens.fontSizeBase300, - lineHeight: '20px', - fontWeight: tokens.fontWeightSemibold, - color: tokens.colorNeutralForeground1, - backgroundColor: tokens.colorNeutralBackground1, - }, - inverted: { - color: tokens.colorNeutralForegroundInverted2, - backgroundColor: tokens.colorNeutralBackgroundInverted, - }, - media: { - height: '16px', - fontSize: '16px', - ...shorthands.padding('0', '8px', '0', '0'), - }, - avatar: { - ...shorthands.margin('0', '8px', '0', '0'), - }, - action: { - ...shorthands.padding('5px', '10px'), - minWidth: 0, - marginLeft: 'auto', - color: tokens.colorBrandForeground1, - }, -}); - -const useIntentMediaStyles = makeStyles({ - success: { - color: tokens.colorPaletteGreenForeground3, - }, - error: { - color: tokens.colorPaletteRedForeground3, - }, - warning: { - color: tokens.colorPaletteYellowForeground2, - }, - info: { - color: tokens.colorNeutralForeground2, - }, -}); - -const useIntentMediaStylesInverted = makeStyles({ - success: { - color: tokens.colorPaletteGreenForegroundInverted, - }, - error: { - color: tokens.colorPaletteRedForegroundInverted, - }, - warning: { - color: tokens.colorPaletteYellowForegroundInverted, - }, - info: { - color: tokens.colorNeutralForegroundInverted2, - }, -}); - -const useActionButtonColorInverted = makeStyles({ - action: { - color: tokens.colorBrandForegroundInverted, - }, -}); - -/** - * Apply styling to the ToastAlert slots based on the state - */ -export const useToastAlertStyles_unstable = (state: ToastAlertState): ToastAlertState => { - const inverted = state.appearance === 'inverted'; - const styles = useStyles(); - const intentMediaStylesPrimary = useIntentMediaStyles(); - const intentMediaStylesInverted = useIntentMediaStylesInverted(); - const actionStylesInverted = useActionButtonColorInverted(); - - state.root.className = mergeClasses( - toastAlertClassNames.root, - styles.root, - inverted && styles.inverted, - state.root.className, - ); - - if (state.media) { - state.media.className = mergeClasses( - toastAlertClassNames.media, - styles.media, - state.intent && (inverted ? intentMediaStylesInverted[state.intent] : intentMediaStylesPrimary[state.intent]), - state.media.className, - ); - } - - if (state.action) { - // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last - state.action.className = mergeClasses( - toastAlertClassNames.action, - styles.action, - inverted && actionStylesInverted.action, - state.action.className, - ); - } - - return state; -}; diff --git a/packages/react-components/react-toast/src/components/ToastBody/ToastBody.test.tsx b/packages/react-components/react-toast/src/components/ToastBody/ToastBody.test.tsx new file mode 100644 index 00000000000000..4364402cf9d694 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/ToastBody.test.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { ToastBody } from './ToastBody'; +import { isConformant } from '../../testing/isConformant'; +import { ToastBodyProps } from './ToastBody.types'; + +describe('ToastBody', () => { + isConformant({ + Component: ToastBody, + displayName: 'ToastBody', + disabledTests: [ + // TODO: having problems due to the fact root is Fragment + 'component-has-static-classnames-object', + ], + requiredProps: { + subtitle: 'subtitle', + }, + }); + + it('renders a default state', () => { + const result = render(Default ToastBody); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-toast/src/components/ToastBody/ToastBody.tsx b/packages/react-components/react-toast/src/components/ToastBody/ToastBody.tsx new file mode 100644 index 00000000000000..782a29b90fe7d2 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/ToastBody.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useToastBody_unstable } from './useToastBody'; +import { renderToastBody_unstable } from './renderToastBody'; +import { useToastBodyStyles_unstable } from './useToastBodyStyles.styles'; +import type { ToastBodyProps } from './ToastBody.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * ToastBody component + */ +export const ToastBody: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useToastBody_unstable(props, ref); + + useToastBodyStyles_unstable(state); + return renderToastBody_unstable(state); +}); + +ToastBody.displayName = 'ToastBody'; diff --git a/packages/react-components/react-toast/src/components/ToastBody/ToastBody.types.ts b/packages/react-components/react-toast/src/components/ToastBody/ToastBody.types.ts new file mode 100644 index 00000000000000..22dcda4c205c3e --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/ToastBody.types.ts @@ -0,0 +1,16 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type ToastBodySlots = { + root: Slot<'div'>; + subtitle?: Slot<'div'>; +}; + +/** + * ToastBody Props + */ +export type ToastBodyProps = ComponentProps & {}; + +/** + * State used in rendering ToastBody + */ +export type ToastBodyState = ComponentState; diff --git a/packages/react-components/react-toast/src/components/ToastBody/__snapshots__/ToastBody.test.tsx.snap b/packages/react-components/react-toast/src/components/ToastBody/__snapshots__/ToastBody.test.tsx.snap new file mode 100644 index 00000000000000..5d597e15f4b9b0 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/__snapshots__/ToastBody.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ToastBody renders a default state 1`] = ` +
+
+ Default ToastBody +
+
+`; diff --git a/packages/react-components/react-toast/src/components/ToastBody/index.ts b/packages/react-components/react-toast/src/components/ToastBody/index.ts new file mode 100644 index 00000000000000..e6021a19a6001c --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/index.ts @@ -0,0 +1,5 @@ +export * from './ToastBody'; +export * from './ToastBody.types'; +export * from './renderToastBody'; +export * from './useToastBody'; +export * from './useToastBodyStyles.styles'; diff --git a/packages/react-components/react-toast/src/components/ToastBody/renderToastBody.tsx b/packages/react-components/react-toast/src/components/ToastBody/renderToastBody.tsx new file mode 100644 index 00000000000000..905b5c45715b5e --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/renderToastBody.tsx @@ -0,0 +1,21 @@ +/** @jsxRuntime classic */ +/** @jsxFrag Fragment */ +/** @jsx createElement */ + +import { createElement, Fragment } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; +import type { ToastBodyState, ToastBodySlots } from './ToastBody.types'; + +/** + * Render the final JSX of ToastBody + */ +export const renderToastBody_unstable = (state: ToastBodyState) => { + const { slots, slotProps } = getSlotsNext(state); + + return ( + <> + + {slots.subtitle ? : null} + + ); +}; diff --git a/packages/react-components/react-toast/src/components/ToastBody/useToastBody.ts b/packages/react-components/react-toast/src/components/ToastBody/useToastBody.ts new file mode 100644 index 00000000000000..320310518ccc7e --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/useToastBody.ts @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import type { ToastBodyProps, ToastBodyState } from './ToastBody.types'; + +/** + * Create the state required to render ToastBody. + * + * The returned state can be modified with hooks such as useToastBodyStyles_unstable, + * before being passed to renderToastBody_unstable. + * + * @param props - props from this instance of ToastBody + * @param ref - reference to root HTMLElement of ToastBody + */ +export const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref): ToastBodyState => { + return { + components: { + root: 'div', + subtitle: 'div', + }, + subtitle: resolveShorthand(props.subtitle), + root: getNativeElementProps('div', { + ref, + ...props, + }), + }; +}; diff --git a/packages/react-components/react-toast/src/components/ToastBody/useToastBodyStyles.styles.ts b/packages/react-components/react-toast/src/components/ToastBody/useToastBodyStyles.styles.ts new file mode 100644 index 00000000000000..f0fcb270487a0a --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastBody/useToastBodyStyles.styles.ts @@ -0,0 +1,47 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import type { ToastBodySlots, ToastBodyState } from './ToastBody.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; + +export const toastBodyClassNames: SlotClassNames = { + root: 'fui-ToastBody', + subtitle: 'fui-ToastBody__subtitle', +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + gridColumnStart: 2, + gridColumnEnd: 3, + paddingTop: '6px', + fontSize: tokens.fontSizeBase300, + lineHeight: tokens.fontSizeBase300, + fontWeight: tokens.fontWeightRegular, + }, + + subtitle: { + paddingTop: '4px', + gridColumnStart: 2, + gridColumnEnd: 3, + fontSize: tokens.fontSizeBase200, + lineHeight: tokens.fontSizeBase200, + fontWeight: tokens.fontWeightRegular, + color: tokens.colorNeutralForeground2, + }, +}); + +/** + * Apply styling to the ToastBody slots based on the state + */ +export const useToastBodyStyles_unstable = (state: ToastBodyState): ToastBodyState => { + const styles = useStyles(); + state.root.className = mergeClasses(toastBodyClassNames.root, styles.root, state.root.className); + + if (state.subtitle) { + state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, styles.subtitle, state.subtitle.className); + } + + return state; +}; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.test.tsx b/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.test.tsx new file mode 100644 index 00000000000000..bba43a6b1d209c --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { ToastFooter } from './ToastFooter'; +import { isConformant } from '../../testing/isConformant'; + +describe('ToastFooter', () => { + isConformant({ + Component: ToastFooter, + displayName: 'ToastFooter', + }); + + it('renders a default state', () => { + const result = render(Default ToastFooter); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.tsx b/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.tsx new file mode 100644 index 00000000000000..153b0139f50313 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useToastFooter_unstable } from './useToastFooter'; +import { renderToastFooter_unstable } from './renderToastFooter'; +import { useToastFooterStyles_unstable } from './useToastFooterStyles.styles'; +import type { ToastFooterProps } from './ToastFooter.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * ToastFooter component + */ +export const ToastFooter: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useToastFooter_unstable(props, ref); + + useToastFooterStyles_unstable(state); + return renderToastFooter_unstable(state); +}); + +ToastFooter.displayName = 'ToastFooter'; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.types.ts b/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.types.ts new file mode 100644 index 00000000000000..6bbdcc6459e10b --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/ToastFooter.types.ts @@ -0,0 +1,15 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type ToastFooterSlots = { + root: Slot<'div'>; +}; + +/** + * ToastFooter Props + */ +export type ToastFooterProps = ComponentProps & {}; + +/** + * State used in rendering ToastFooter + */ +export type ToastFooterState = ComponentState; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/__snapshots__/ToastFooter.test.tsx.snap b/packages/react-components/react-toast/src/components/ToastFooter/__snapshots__/ToastFooter.test.tsx.snap new file mode 100644 index 00000000000000..42ae654e933d60 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/__snapshots__/ToastFooter.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ToastFooter renders a default state 1`] = ` +
+
+ Default ToastFooter +
+
+`; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/index.ts b/packages/react-components/react-toast/src/components/ToastFooter/index.ts new file mode 100644 index 00000000000000..dfd6de50783477 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/index.ts @@ -0,0 +1,5 @@ +export * from './ToastFooter'; +export * from './ToastFooter.types'; +export * from './renderToastFooter'; +export * from './useToastFooter'; +export * from './useToastFooterStyles.styles'; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/renderToastFooter.tsx b/packages/react-components/react-toast/src/components/ToastFooter/renderToastFooter.tsx new file mode 100644 index 00000000000000..23c5e5674c1149 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/renderToastFooter.tsx @@ -0,0 +1,15 @@ +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; +import type { ToastFooterState, ToastFooterSlots } from './ToastFooter.types'; + +/** + * Render the final JSX of ToastFooter + */ +export const renderToastFooter_unstable = (state: ToastFooterState) => { + const { slots, slotProps } = getSlotsNext(state); + + return ; +}; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/useToastFooter.ts b/packages/react-components/react-toast/src/components/ToastFooter/useToastFooter.ts new file mode 100644 index 00000000000000..bc6454c2f4fff7 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/useToastFooter.ts @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { getNativeElementProps } from '@fluentui/react-utilities'; +import type { ToastFooterProps, ToastFooterState } from './ToastFooter.types'; + +/** + * Create the state required to render ToastFooter. + * + * The returned state can be modified with hooks such as useToastFooterStyles_unstable, + * before being passed to renderToastFooter_unstable. + * + * @param props - props from this instance of ToastFooter + * @param ref - reference to root HTMLElement of ToastFooter + */ +export const useToastFooter_unstable = (props: ToastFooterProps, ref: React.Ref): ToastFooterState => { + return { + components: { + root: 'div', + }, + root: getNativeElementProps('div', { + ref, + ...props, + }), + }; +}; diff --git a/packages/react-components/react-toast/src/components/ToastFooter/useToastFooterStyles.styles.ts b/packages/react-components/react-toast/src/components/ToastFooter/useToastFooterStyles.styles.ts new file mode 100644 index 00000000000000..d3161b0cf2c316 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastFooter/useToastFooterStyles.styles.ts @@ -0,0 +1,31 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import type { ToastFooterSlots, ToastFooterState } from './ToastFooter.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; + +export const toastFooterClassNames: SlotClassNames = { + root: 'fui-ToastFooter', +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + paddingTop: '16px', + gridColumnStart: 2, + gridColumnEnd: 3, + display: 'flex', + alignItems: 'center', + ...shorthands.gap('14px'), + }, +}); + +/** + * Apply styling to the ToastFooter slots based on the state + */ +export const useToastFooterStyles_unstable = (state: ToastFooterState): ToastFooterState => { + const styles = useStyles(); + state.root.className = mergeClasses(toastFooterClassNames.root, styles.root, state.root.className); + + return state; +}; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.test.tsx b/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.test.tsx new file mode 100644 index 00000000000000..00394c8480f669 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { ToastLayout } from './ToastLayout'; +import { isConformant } from '../../testing/isConformant'; + +describe('ToastLayout', () => { + isConformant({ + Component: ToastLayout, + displayName: 'ToastLayout', + }); + + it('renders a default state', () => { + const result = render(Default ToastLayout); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.tsx b/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.tsx new file mode 100644 index 00000000000000..b5687d906a15c9 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useToastLayout_unstable } from './useToastLayout'; +import { renderToastLayout_unstable } from './renderToastLayout'; +import { useToastLayoutStyles_unstable } from './useToastLayoutStyles.styles'; +import type { ToastLayoutProps } from './ToastLayout.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * ToastLayout component + */ +export const ToastLayout: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useToastLayout_unstable(props, ref); + + useToastLayoutStyles_unstable(state); + return renderToastLayout_unstable(state); +}); + +ToastLayout.displayName = 'ToastLayout'; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.types.ts b/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.types.ts new file mode 100644 index 00000000000000..4364c01c46690a --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.types.ts @@ -0,0 +1,15 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type ToastLayoutSlots = { + root: Slot<'div'>; +}; + +/** + * ToastLayout Props + */ +export type ToastLayoutProps = ComponentProps & {}; + +/** + * State used in rendering ToastLayout + */ +export type ToastLayoutState = ComponentState; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/__snapshots__/ToastLayout.test.tsx.snap b/packages/react-components/react-toast/src/components/ToastLayout/__snapshots__/ToastLayout.test.tsx.snap new file mode 100644 index 00000000000000..cbcb7bd7919ef6 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastLayout/__snapshots__/ToastLayout.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ToastLayout renders a default state 1`] = ` +
+
+ Default ToastLayout +
+
+`; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/index.ts b/packages/react-components/react-toast/src/components/ToastLayout/index.ts new file mode 100644 index 00000000000000..3f72ac07b9aa4b --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastLayout/index.ts @@ -0,0 +1,5 @@ +export * from './ToastLayout'; +export * from './ToastLayout.types'; +export * from './renderToastLayout'; +export * from './useToastLayout'; +export * from './useToastLayoutStyles.styles'; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/renderToastLayout.tsx b/packages/react-components/react-toast/src/components/ToastLayout/renderToastLayout.tsx new file mode 100644 index 00000000000000..fc47f6258e2306 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastLayout/renderToastLayout.tsx @@ -0,0 +1,15 @@ +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; +import type { ToastLayoutState, ToastLayoutSlots } from './ToastLayout.types'; + +/** + * Render the final JSX of ToastLayout + */ +export const renderToastLayout_unstable = (state: ToastLayoutState) => { + const { slots, slotProps } = getSlotsNext(state); + + return ; +}; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/useToastLayout.ts b/packages/react-components/react-toast/src/components/ToastLayout/useToastLayout.ts new file mode 100644 index 00000000000000..bf54af90526170 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastLayout/useToastLayout.ts @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { getNativeElementProps } from '@fluentui/react-utilities'; +import type { ToastLayoutProps, ToastLayoutState } from './ToastLayout.types'; + +/** + * Create the state required to render ToastLayout. + * + * The returned state can be modified with hooks such as useToastLayoutStyles_unstable, + * before being passed to renderToastLayout_unstable. + * + * @param props - props from this instance of ToastLayout + * @param ref - reference to root HTMLElement of ToastLayout + */ +export const useToastLayout_unstable = (props: ToastLayoutProps, ref: React.Ref): ToastLayoutState => { + return { + components: { + root: 'div', + }, + root: getNativeElementProps('div', { + ref, + ...props, + }), + }; +}; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/useToastLayoutStyles.styles.ts b/packages/react-components/react-toast/src/components/ToastLayout/useToastLayoutStyles.styles.ts new file mode 100644 index 00000000000000..274507552ac812 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastLayout/useToastLayoutStyles.styles.ts @@ -0,0 +1,42 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import type { ToastLayoutSlots, ToastLayoutState } from './ToastLayout.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; + +export const toastLayoutClassNames: SlotClassNames = { + root: 'fui-ToastLayout', +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + display: 'grid', + gridTemplateColumns: 'auto 1fr auto', + ...shorthands.padding('12px', '12px'), + ...shorthands.borderRadius(tokens.borderRadiusMedium), + ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke), + boxShadow: tokens.shadow8, + fontSize: tokens.fontSizeBase300, + lineHeight: '20px', + fontWeight: tokens.fontWeightSemibold, + color: tokens.colorNeutralForeground1, + backgroundColor: tokens.colorNeutralBackground1, + }, + + inverted: { + color: tokens.colorNeutralForegroundInverted2, + backgroundColor: tokens.colorNeutralBackgroundInverted, + }, +}); + +/** + * Apply styling to the ToastLayout slots based on the state + */ +export const useToastLayoutStyles_unstable = (state: ToastLayoutState): ToastLayoutState => { + const styles = useStyles(); + state.root.className = mergeClasses(toastLayoutClassNames.root, styles.root, state.root.className); + + return state; +}; diff --git a/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.test.tsx b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.test.tsx new file mode 100644 index 00000000000000..b40ce5e663ac1c --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.test.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { ToastTitle } from './ToastTitle'; +import { isConformant } from '../../testing/isConformant'; +import { ToastTitleProps } from './ToastTitle.types'; +import { toastTitleClassNames } from './useToastTitleStyles.styles'; + +describe('ToastTitle', () => { + isConformant({ + Component: ToastTitle, + displayName: 'ToastTitle', + getTargetElement: result => { + const targetElement = result.container.querySelector(`.${toastTitleClassNames.root}`); + if (targetElement) { + return targetElement as HTMLElement; + } + + throw new Error(`Failed to get ToastTitle root ${toastTitleClassNames.root}`); + }, + disabledTests: [ + // TODO: having problems due to the fact root is Fragment + 'component-has-static-classnames-object', + ], + requiredProps: { + media: 'c', + action: 'a', + }, + }); + + it('renders a default state', () => { + const result = render(Default ToastTitle); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.tsx b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.tsx new file mode 100644 index 00000000000000..86e6d18dc34f4c --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useToastTitle_unstable } from './useToastTitle'; +import { renderToastTitle_unstable } from './renderToastTitle'; +import { useToastTitleStyles_unstable } from './useToastTitleStyles.styles'; +import type { ToastTitleProps } from './ToastTitle.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * ToastTitle component + */ +export const ToastTitle: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useToastTitle_unstable(props, ref); + + useToastTitleStyles_unstable(state); + return renderToastTitle_unstable(state); +}); + +ToastTitle.displayName = 'ToastTitle'; diff --git a/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.types.ts b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.types.ts new file mode 100644 index 00000000000000..e3b5f9f0ec1483 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.types.ts @@ -0,0 +1,23 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type ToastTitleSlots = { + root: NonNullable>; + media?: Slot<'div'>; + action?: Slot<'div'>; +}; + +/** + * ToastTitle Props + */ +export type ToastTitleProps = ComponentProps & { + /** + * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop + * overrides the intent prop + */ + intent?: 'info' | 'success' | 'error' | 'warning'; +}; + +/** + * State used in rendering ToastTitle + */ +export type ToastTitleState = ComponentState & Required>; diff --git a/packages/react-components/react-toast/src/components/ToastTitle/__snapshots__/ToastTitle.test.tsx.snap b/packages/react-components/react-toast/src/components/ToastTitle/__snapshots__/ToastTitle.test.tsx.snap new file mode 100644 index 00000000000000..48019b3e400ffe --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastTitle/__snapshots__/ToastTitle.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ToastTitle renders a default state 1`] = ` +
+
+ Default ToastTitle +
+
+`; diff --git a/packages/react-components/react-toast/src/components/ToastTitle/index.ts b/packages/react-components/react-toast/src/components/ToastTitle/index.ts new file mode 100644 index 00000000000000..951ef82050691a --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastTitle/index.ts @@ -0,0 +1,5 @@ +export * from './ToastTitle'; +export * from './ToastTitle.types'; +export * from './renderToastTitle'; +export * from './useToastTitle'; +export * from './useToastTitleStyles.styles'; diff --git a/packages/react-components/react-toast/src/components/ToastTitle/renderToastTitle.tsx b/packages/react-components/react-toast/src/components/ToastTitle/renderToastTitle.tsx new file mode 100644 index 00000000000000..aa0268ad3c4b2c --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastTitle/renderToastTitle.tsx @@ -0,0 +1,22 @@ +/** @jsxRuntime classic */ +/** @jsxFrag Fragment */ +/** @jsx createElement */ + +import { createElement, Fragment } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; +import type { ToastTitleState, ToastTitleSlots } from './ToastTitle.types'; + +/** + * Render the final JSX of ToastTitle + */ +export const renderToastTitle_unstable = (state: ToastTitleState) => { + const { slots, slotProps } = getSlotsNext(state); + + return ( + <> + {slots.media ? : null} + + {slots.action ? : null} + + ); +}; diff --git a/packages/react-components/react-toast/src/components/ToastAlert/useToastAlert.tsx b/packages/react-components/react-toast/src/components/ToastTitle/useToastTitle.tsx similarity index 68% rename from packages/react-components/react-toast/src/components/ToastAlert/useToastAlert.tsx rename to packages/react-components/react-toast/src/components/ToastTitle/useToastTitle.tsx index d61d1ae69e8380..e25f93e846d321 100644 --- a/packages/react-components/react-toast/src/components/ToastAlert/useToastAlert.tsx +++ b/packages/react-components/react-toast/src/components/ToastTitle/useToastTitle.tsx @@ -3,19 +3,19 @@ import * as React from 'react'; import { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons'; import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; -import type { ToastAlertProps, ToastAlertState } from './ToastAlert.types'; +import type { ToastTitleProps, ToastTitleState } from './ToastTitle.types'; /** - * Create the state required to render ToastAlert. + * Create the state required to render ToastTitle. * - * The returned state can be modified with hooks such as useToastAlertStyles_unstable, - * before being passed to renderToastAlert_unstable. + * The returned state can be modified with hooks such as useToastTitleStyles_unstable, + * before being passed to renderToastTitle_unstable. * - * @param props - props from this instance of ToastAlert - * @param ref - reference to root HTMLElement of ToastAlert + * @param props - props from this instance of ToastTitle + * @param ref - reference to root HTMLElement of ToastTitle */ -export const useToastAlert_unstable = (props: ToastAlertProps, ref: React.Ref): ToastAlertState => { - const { appearance = 'primary', intent } = props; +export const useToastTitle_unstable = (props: ToastTitleProps, ref: React.Ref): ToastTitleState => { + const { intent = 'info' } = props; /** Determine the role and media to render based on the intent */ let defaultIcon; @@ -36,7 +36,6 @@ export const useToastAlert_unstable = (props: ToastAlertProps, ref: React.Ref = { + root: 'fui-ToastTitle', + media: 'fui-ToastTitle__media', + action: 'fui-ToastTitle__action', +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + display: 'flex', + alignItems: 'center', + gridColumnEnd: 3, + }, + + media: { + display: 'flex', + alignItems: 'center', + gridColumnEnd: 2, + paddingRight: '8px', + fontSize: '16px', + }, + + action: { + display: 'flex', + alignItems: 'center', + paddingLeft: '12px', + gridColumnEnd: -1, + color: tokens.colorBrandForeground1, + }, +}); + +/** + * Apply styling to the ToastTitle slots based on the state + */ +export const useToastTitleStyles_unstable = (state: ToastTitleState): ToastTitleState => { + const styles = useStyles(); + state.root.className = mergeClasses(toastTitleClassNames.root, styles.root, state.root.className); + + if (state.media) { + state.media.className = mergeClasses(toastTitleClassNames.media, styles.media, state.media.className); + } + + if (state.action) { + state.action.className = mergeClasses(toastTitleClassNames.action, styles.action, state.action.className); + } + + return state; +}; diff --git a/packages/react-components/react-toast/src/index.ts b/packages/react-components/react-toast/src/index.ts index 88682c72c42efe..a2bb19c8671dda 100644 --- a/packages/react-components/react-toast/src/index.ts +++ b/packages/react-components/react-toast/src/index.ts @@ -1,13 +1,5 @@ export { useToastController } from './state'; export type { ToastPosition, ToastId, ToastOffset } from './state'; -export { - ToastAlert, - useToastAlertStyles_unstable, - useToastAlert_unstable, - renderToastAlert_unstable, - toastAlertClassNames, -} from './ToastAlert'; -export type { ToastAlertProps, ToastAlertSlots, ToastAlertState } from './ToastAlert'; export { ToastTrigger } from './ToastTrigger'; export type { ToastTriggerChildProps, ToastTriggerProps, ToastTriggerState } from './ToastTrigger'; @@ -19,3 +11,38 @@ export { toasterClassNames, } from './Toaster'; export type { ToasterProps, ToasterState, ToasterSlots } from './Toaster'; +export { + ToastLayout, + useToastLayoutStyles_unstable, + useToastLayout_unstable, + renderToastLayout_unstable, + toastLayoutClassNames, +} from './ToastLayout'; +export type { ToastLayoutProps, ToastLayoutState, ToastLayoutSlots } from './ToastLayout'; + +export { + ToastTitle, + useToastTitleStyles_unstable, + useToastTitle_unstable, + renderToastTitle_unstable, + toastTitleClassNames, +} from './ToastTitle'; +export type { ToastTitleProps, ToastTitleState, ToastTitleSlots } from './ToastTitle'; + +export { + ToastBody, + useToastBodyStyles_unstable, + useToastBody_unstable, + renderToastBody_unstable, + toastBodyClassNames, +} from './ToastBody'; +export type { ToastBodyProps, ToastBodyState, ToastBodySlots } from './ToastBody'; + +export { + ToastFooter, + useToastFooterStyles_unstable, + useToastFooter_unstable, + renderToastFooter_unstable, + toastFooterClassNames, +} from './ToastFooter'; +export type { ToastFooterProps, ToastFooterState, ToastFooterSlots } from './ToastFooter'; diff --git a/packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx b/packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx index d07144815244cb..4fea6492b848b1 100644 --- a/packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert, ToasterProps } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastLayout, ToastTitle, ToasterProps } from '@fluentui/react-toast'; import { useId, Link, makeStyles, shorthands } from '@fluentui/react-components'; const useStyles = makeStyles({ @@ -24,17 +24,21 @@ export const CustomAnnounce = () => { const { dispatchToast } = useToastController(toasterId); const dispatchAlert = () => dispatchToast( - Undo}> - Assertive toast {counter++} - , + + Undo}> + Assertive toast {counter++} + + , { politeness: 'assertive' }, ); const dispatchStatus = () => dispatchToast( - Undo}> - Polite toast {counter++} - , + + Undo}> + Polite toast {counter++} + + , { politeness: 'polite' }, ); diff --git a/packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx b/packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx index 1f72ea4f0f8044..51d7a354ec194d 100644 --- a/packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx @@ -1,11 +1,17 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const CustomTimeout = () => { const toasterId = useId('toaster'); const { dispatchToast } = useToastController(toasterId); - const notify = () => dispatchToast(Custom timeout 1000ms, { timeout: 1000 }); + const notify = () => + dispatchToast( + + Custom timeout 1000ms + , + { timeout: 1000 }, + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/Default.stories.tsx b/packages/react-components/react-toast/stories/Toast/Default.stories.tsx index 907b00606231dc..ed10bb2e6a0b14 100644 --- a/packages/react-components/react-toast/stories/Toast/Default.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/Default.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastLayout, ToastTitle, ToastBody, ToastFooter } from '@fluentui/react-toast'; import { useId, Link } from '@fluentui/react-components'; export const Default = () => { @@ -7,9 +7,16 @@ export const Default = () => { const { dispatchToast } = useToastController(toasterId); const notify = () => dispatchToast( - Undo}> - Email sent - , + + Undo}> + Email sent + + This is a toast body + + Action + Action + + , ); return ( diff --git a/packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx b/packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx index 8322d1f416a5f9..7e83bb88b90be5 100644 --- a/packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx @@ -1,11 +1,16 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const DefaultToastOptions = () => { const toasterId = useId('toaster'); const { dispatchToast } = useToastController(toasterId); - const notify = () => dispatchToast(Options configured in Toaster); + const notify = () => + dispatchToast( + + Options configured in Toaster + , + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx b/packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx index da66671714bd36..76a01909fe950f 100644 --- a/packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx @@ -1,11 +1,16 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const DismissAll = () => { const toasterId = useId('toaster'); const { dispatchToast, dismissAllToasts } = useToastController(toasterId); - const notify = () => dispatchToast('This is a toast); + const notify = () => + dispatchToast( + + 'This is a toast + , + ); const dismissAll = () => dismissAllToasts(); return ( diff --git a/packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx b/packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx index b2929fa4f43f22..804b327e40660e 100644 --- a/packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx @@ -1,12 +1,18 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const DismissToast = () => { const toasterId = useId('toaster'); const toastId = useId('example'); const { dispatchToast, dismissToast } = useToastController(toasterId); - const notify = () => dispatchToast(This is a toast, { toastId }); + const notify = () => + dispatchToast( + + This is a toast + , + { toastId }, + ); const dismiss = () => dismissToast(toastId); return ( diff --git a/packages/react-components/react-toast/stories/Toast/DismissToastWithAction.stories.tsx b/packages/react-components/react-toast/stories/Toast/DismissToastWithAction.stories.tsx index 5f9a208ed3d012..c20f5c898ccc91 100644 --- a/packages/react-components/react-toast/stories/Toast/DismissToastWithAction.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/DismissToastWithAction.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert, ToastTrigger } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, ToastTrigger, ToastLayout } from '@fluentui/react-toast'; import { useId, Link } from '@fluentui/react-components'; export const DismissToastWithAction = () => { @@ -7,16 +7,18 @@ export const DismissToastWithAction = () => { const { dispatchToast } = useToastController(toasterId); const notify = () => dispatchToast( - - Dismiss - - } - > - Dismiss me - , + + + Dismiss + + } + > + Dismiss me + + , { timeout: -1 }, ); diff --git a/packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx b/packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx index 81fa6e345e9bb1..5db63b6d6d0288 100644 --- a/packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const MultipeToasters = () => { @@ -7,8 +7,18 @@ export const MultipeToasters = () => { const second = useId('toaster-2'); const { dispatchToast: dispatchFirstToast } = useToastController(first); const { dispatchToast: dispatchSecondToast } = useToastController(second); - const notifyFirst = () => dispatchFirstToast(First toaster); - const notifySecond = () => dispatchSecondToast(Second toaster); + const notifyFirst = () => + dispatchFirstToast( + + First toaster + , + ); + const notifySecond = () => + dispatchSecondToast( + + Second toaster + , + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/Offset.stories.tsx b/packages/react-components/react-toast/stories/Toast/Offset.stories.tsx index e1b0221f77e2dc..4f2d0f454cb806 100644 --- a/packages/react-components/react-toast/stories/Toast/Offset.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/Offset.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ToastPosition, Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { ToastPosition, Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const Offset = () => { @@ -7,9 +7,11 @@ export const Offset = () => { const { dispatchToast } = useToastController(toasterId); const notify = (position: ToastPosition) => dispatchToast( - - Offset: {horizontal}, {vertical} - , + + + Offset: {horizontal}, {vertical} + + , { position }, ); const [horizontal, setHorizontal] = React.useState(10); diff --git a/packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx b/packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx index 00a66d0b0d6f73..959fbb5d34b576 100644 --- a/packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx @@ -1,11 +1,17 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const PauseOnHover = () => { const toasterId = useId('toaster'); const { dispatchToast } = useToastController(toasterId); - const notify = () => dispatchToast(Hover me!, { pauseOnHover: true }); + const notify = () => + dispatchToast( + + Hover me! + , + { pauseOnHover: true }, + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx b/packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx index d2cbb16a444da9..2a61ffad568fe4 100644 --- a/packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx @@ -1,12 +1,17 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const PauseOnWindowBlur = () => { const toasterId = useId('toaster'); const { dispatchToast } = useToastController(toasterId); const notify = () => - dispatchToast(Click on another window!, { pauseOnWindowBlur: true }); + dispatchToast( + + Click on another window! + , + { pauseOnWindowBlur: true }, + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx b/packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx index 2b8336dcc2d86f..b35e4b618e83c5 100644 --- a/packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx @@ -1,12 +1,17 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastPosition, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastPosition, ToastTitle, ToastLayout } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const ToastPositions = () => { const toasterId = useId('toaster'); const { dispatchToast } = useToastController(toasterId); const notify = (position: ToastPosition) => - dispatchToast(This toast is {position}, { position }); + dispatchToast( + + This toast is {position} + , + { position }, + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx b/packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx index b1ab714c7f73ac..bdd06771704370 100644 --- a/packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx @@ -1,11 +1,16 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const ToasterLimit = () => { const toasterId = useId('toaster'); const { dispatchToast } = useToastController(toasterId); - const notify = () => dispatchToast(Limited to 3 toasts); + const notify = () => + dispatchToast( + + Limited to 3 toasts + , + ); return ( <> diff --git a/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx b/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx index 5d2a9cd3e00ae5..18a1d30a1f4192 100644 --- a/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastAlert, ToastTrigger } from '@fluentui/react-toast'; -import { useId, Link } from '@fluentui/react-components'; +import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; +import { useId } from '@fluentui/react-components'; export const UpdateToast = () => { const toastId = useId('toast'); @@ -10,32 +10,17 @@ export const UpdateToast = () => { const { dispatchToast, updateToast } = useToastController(toasterId); const notify = () => dispatchToast( - - Undo - - } - > - Sending email... - , - { timeout: -1, toastId }, + + This toast never closes + , + { toastId, timeout: -1 }, ); - const update = () => updateToast({ content: ( - - Dismiss - - } - > - Email sent - + + This toast will close soon + ), toastId, timeout: 2000, From 47da43cf46a952edd165c606fc457f7ace2fc142 Mon Sep 17 00:00:00 2001 From: Salvijus K <42890752+SKPG-Tech@users.noreply.github.com> Date: Mon, 5 Jun 2023 15:14:14 +0300 Subject: [PATCH 5/8] Fix typo in the docs (#28129) --- .../react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx index 5641f5100967c3..444f69bc1bdce4 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx @@ -233,7 +233,7 @@ OverflowItems.parameters = { story: [ 'This example uses the', 'Overflow component and utilities,', - 'Please refer to the documentation for achieve more complex scenarios.', + 'Please refer to the documentation to achieve more complex scenarios.', ].join('\n'), }, }, From 3176741887b780b2b3557dee489f0c82f67bb7b5 Mon Sep 17 00:00:00 2001 From: ling1726 Date: Mon, 5 Jun 2023 15:20:53 +0200 Subject: [PATCH 6/8] chore: Rename Toast to ToastContainer (#28139) * chore: Rename Toast to ToastContainer Renames the internal Toast to ToastContainer * update snapshot --- .../react-components/react-toast/src/Toast.ts | 1 - .../react-toast/src/ToastContainer.ts | 1 + .../src/components/Toast/Toast.tsx | 19 ----- .../react-toast/src/components/Toast/index.ts | 6 -- .../components/Toast/useToastContextValues.ts | 17 ----- .../ToastContainer.test.tsx} | 70 +++++++++---------- .../ToastContainer/ToastContainer.tsx | 19 +++++ .../ToastContainer.types.ts} | 14 ++-- .../ToastContainer.test.tsx.snap} | 6 +- .../src/components/ToastContainer/index.ts | 6 ++ .../renderToastContainer.tsx} | 11 +-- .../useToastContainer.ts} | 19 ++--- .../useToastContainerContextValues.ts | 17 +++++ .../useToastContainerStyles.styles.ts} | 12 ++-- .../src/components/Toaster/useToaster.tsx | 6 +- 15 files changed, 115 insertions(+), 109 deletions(-) delete mode 100644 packages/react-components/react-toast/src/Toast.ts create mode 100644 packages/react-components/react-toast/src/ToastContainer.ts delete mode 100644 packages/react-components/react-toast/src/components/Toast/Toast.tsx delete mode 100644 packages/react-components/react-toast/src/components/Toast/index.ts delete mode 100644 packages/react-components/react-toast/src/components/Toast/useToastContextValues.ts rename packages/react-components/react-toast/src/components/{Toast/Toast.test.tsx => ToastContainer/ToastContainer.test.tsx} (58%) create mode 100644 packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.tsx rename packages/react-components/react-toast/src/components/{Toast/Toast.types.ts => ToastContainer/ToastContainer.types.ts} (64%) rename packages/react-components/react-toast/src/components/{Toast/__snapshots__/Toast.test.tsx.snap => ToastContainer/__snapshots__/ToastContainer.test.tsx.snap} (50%) create mode 100644 packages/react-components/react-toast/src/components/ToastContainer/index.ts rename packages/react-components/react-toast/src/components/{Toast/renderToast.tsx => ToastContainer/renderToastContainer.tsx} (68%) rename packages/react-components/react-toast/src/components/{Toast/useToast.ts => ToastContainer/useToastContainer.ts} (78%) create mode 100644 packages/react-components/react-toast/src/components/ToastContainer/useToastContainerContextValues.ts rename packages/react-components/react-toast/src/components/{Toast/useToastStyles.styles.ts => ToastContainer/useToastContainerStyles.styles.ts} (79%) diff --git a/packages/react-components/react-toast/src/Toast.ts b/packages/react-components/react-toast/src/Toast.ts deleted file mode 100644 index a84c38a13fc605..00000000000000 --- a/packages/react-components/react-toast/src/Toast.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/Toast/index'; diff --git a/packages/react-components/react-toast/src/ToastContainer.ts b/packages/react-components/react-toast/src/ToastContainer.ts new file mode 100644 index 00000000000000..14ef7e7a4fff6e --- /dev/null +++ b/packages/react-components/react-toast/src/ToastContainer.ts @@ -0,0 +1 @@ +export * from './components/ToastContainer/index'; diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.tsx b/packages/react-components/react-toast/src/components/Toast/Toast.tsx deleted file mode 100644 index 098c6fc326bc1c..00000000000000 --- a/packages/react-components/react-toast/src/components/Toast/Toast.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import { useToast_unstable } from './useToast'; -import { renderToast_unstable } from './renderToast'; -import { useToastStyles_unstable } from './useToastStyles.styles'; -import type { ToastProps } from './Toast.types'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useToastContextValues_unstable } from './useToastContextValues'; - -/** - * Toast component - */ -export const Toast: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useToast_unstable(props, ref); - - useToastStyles_unstable(state); - return renderToast_unstable(state, useToastContextValues_unstable(state)); -}); - -Toast.displayName = 'Toast'; diff --git a/packages/react-components/react-toast/src/components/Toast/index.ts b/packages/react-components/react-toast/src/components/Toast/index.ts deleted file mode 100644 index d479da1e5c8bbb..00000000000000 --- a/packages/react-components/react-toast/src/components/Toast/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './Toast'; -export * from './Toast.types'; -export * from './renderToast'; -export * from './useToast'; -export * from './useToastStyles.styles'; -export * from './useToastContextValues'; diff --git a/packages/react-components/react-toast/src/components/Toast/useToastContextValues.ts b/packages/react-components/react-toast/src/components/Toast/useToastContextValues.ts deleted file mode 100644 index dd2c1ec2232af3..00000000000000 --- a/packages/react-components/react-toast/src/components/Toast/useToastContextValues.ts +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import { ToastContextValues, ToastState } from './Toast.types'; - -export function useToastContextValues_unstable(state: ToastState): ToastContextValues { - const { close } = state; - - const toastContext = React.useMemo( - () => ({ - close, - }), - [close], - ); - - return { - toast: toastContext, - }; -} diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.test.tsx b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.test.tsx similarity index 58% rename from packages/react-components/react-toast/src/components/Toast/Toast.test.tsx rename to packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.test.tsx index cf677f05e16881..324f2bed1d8e2b 100644 --- a/packages/react-components/react-toast/src/components/Toast/Toast.test.tsx +++ b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.test.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import { render, act, fireEvent } from '@testing-library/react'; -import { Toast } from './Toast'; +import { ToastContainer } from './ToastContainer'; import { isConformant } from '../../testing/isConformant'; -import { ToastProps } from './Toast.types'; -import { toastClassNames } from './useToastStyles.styles'; +import { ToastContainerProps } from './ToastContainer.types'; +import { toastClassNames } from './useToastContainerStyles.styles'; -const defaultToastProps: ToastProps = { +const defaultToastContainerProps: ToastContainerProps = { announce: () => null, close: () => null, content: '', @@ -27,58 +27,58 @@ const defaultToastProps: ToastProps = { const runningTimerSelector = '[data-timer-status="running"]'; const pausedTimerSelector = '[data-timer-status="paused"]'; -describe('Toast', () => { +describe('ToastContainer', () => { beforeEach(() => { jest.useRealTimers(); }); isConformant({ - Component: Toast, - displayName: 'Toast', - requiredProps: defaultToastProps, + Component: ToastContainer, + displayName: 'ToastContainer', + requiredProps: defaultToastContainerProps, isInternal: true, }); it('renders a default state', () => { - const result = render(Default Toast); + const result = render(Default ToastContainer); expect(result.container).toMatchSnapshot(); }); it('should announce on mount', () => { const announce = jest.fn(); - const toastProps = { ...defaultToastProps, announce }; - render(Toast); + const toastProps = { ...defaultToastContainerProps, announce }; + render(ToastContainer); expect(announce).toHaveBeenCalledTimes(1); - expect(announce).toHaveBeenCalledWith('Toast', { politeness: 'polite' }); + expect(announce).toHaveBeenCalledWith('ToastContainer', { politeness: 'polite' }); }); it('should announce on updateId change', () => { const announce = jest.fn(); - const toastProps = { ...defaultToastProps, announce }; - const { rerender } = render(Toast); + const toastProps = { ...defaultToastContainerProps, announce }; + const { rerender } = render(ToastContainer); toastProps.updateId++; - rerender(Toast); + rerender(ToastContainer); expect(announce).toHaveBeenCalledTimes(2); - expect(announce).toHaveBeenNthCalledWith(2, 'Toast', { politeness: 'polite' }); + expect(announce).toHaveBeenNthCalledWith(2, 'ToastContainer', { politeness: 'polite' }); }); it('should announce with configured politeness', () => { const announce = jest.fn(); - const toastProps: ToastProps = { ...defaultToastProps, announce, politeness: 'assertive' }; - render(Toast); + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, announce, politeness: 'assertive' }; + render(ToastContainer); expect(announce).toHaveBeenCalledTimes(1); - expect(announce).toHaveBeenCalledWith('Toast', { politeness: 'assertive' }); + expect(announce).toHaveBeenCalledWith('ToastContainer', { politeness: 'assertive' }); }); it('should respect user root', () => { const className = 'foo'; - const toastProps: ToastProps = { ...defaultToastProps, data: { root: { className } } }; - const { container } = render(Toast); + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, data: { root: { className } } }; + const { container } = render(ToastContainer); expect(container.querySelector(`.${className}`)).not.toBe(null); }); @@ -86,10 +86,10 @@ describe('Toast', () => { it('should remove toast after visible is false', () => { jest.useFakeTimers(); const remove = jest.fn(); - const toastProps: ToastProps = { ...defaultToastProps, remove }; - const { rerender } = render(Toast); + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, remove }; + const { rerender } = render(ToastContainer); toastProps.visible = false; - rerender(Toast); + rerender(ToastContainer); jest.advanceTimersByTime(500); @@ -97,8 +97,8 @@ describe('Toast', () => { }); it('should start timer after toast on animationend', () => { - const toastProps: ToastProps = { ...defaultToastProps, timeout: 1 }; - const { container } = render(Toast); + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, timeout: 1 }; + const { container } = render(ToastContainer); const toastElement = container.querySelector(`.${toastClassNames.root}`); expect(toastElement).not.toBeNull(); @@ -113,8 +113,8 @@ describe('Toast', () => { it('should close toast ontimeout', () => { const close = jest.fn(); - const toastProps: ToastProps = { ...defaultToastProps, timeout: 1, close }; - const { container } = render(Toast); + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, timeout: 1, close }; + const { container } = render(ToastContainer); const toastElement = container.querySelector(`.${toastClassNames.root}`); expect(toastElement).not.toBeNull(); @@ -137,8 +137,8 @@ describe('Toast', () => { }); it('should pause on hover', () => { - const toastProps: ToastProps = { ...defaultToastProps, timeout: 1, pauseOnHover: true }; - const { container } = render(Toast); + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, timeout: 1, pauseOnHover: true }; + const { container } = render(ToastContainer); const toastElement = container.querySelector(`.${toastClassNames.root}`); expect(toastElement).not.toBeNull(); @@ -168,8 +168,8 @@ describe('Toast', () => { }); it('should pause on window blur', () => { - const toastProps: ToastProps = { ...defaultToastProps, timeout: 1, pauseOnWindowBlur: true }; - const { container } = render(Toast); + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, timeout: 1, pauseOnWindowBlur: true }; + const { container } = render(ToastContainer); const toastElement = container.querySelector(`.${toastClassNames.root}`); expect(toastElement).not.toBeNull(); @@ -195,14 +195,14 @@ describe('Toast', () => { }); it('should render different timer on update', () => { - const toastProps: ToastProps = { ...defaultToastProps, timeout: 1 }; - const { container, rerender } = render(Toast); + const toastProps: ToastContainerProps = { ...defaultToastContainerProps, timeout: 1 }; + const { container, rerender } = render(ToastContainer); const firstTimer = container.querySelector(pausedTimerSelector); expect(firstTimer).not.toBeNull(); toastProps.updateId++; - rerender(Toast); + rerender(ToastContainer); const secondTimer = container.querySelector(pausedTimerSelector); expect(firstTimer).not.toBe(secondTimer); diff --git a/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.tsx b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.tsx new file mode 100644 index 00000000000000..1b12bf79a9ca23 --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { useToastContainer_unstable } from './useToastContainer'; +import { renderToastContainer_unstable } from './renderToastContainer'; +import { useToastContainerStyles_unstable } from './useToastContainerStyles.styles'; +import type { ToastContainerProps } from './ToastContainer.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { useToastContainerContextValues_unstable } from './useToastContainerContextValues'; + +/** + * ToastContainer component + */ +export const ToastContainer: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useToastContainer_unstable(props, ref); + + useToastContainerStyles_unstable(state); + return renderToastContainer_unstable(state, useToastContainerContextValues_unstable(state)); +}); + +ToastContainer.displayName = 'ToastContainer'; diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.types.ts b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.types.ts similarity index 64% rename from packages/react-components/react-toast/src/components/Toast/Toast.types.ts rename to packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.types.ts index 1f8f499b1b73d4..1f9540e57299a4 100644 --- a/packages/react-components/react-toast/src/components/Toast/Toast.types.ts +++ b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.types.ts @@ -5,29 +5,29 @@ import { Toast as VanillaToast } from '../../state'; import { ToastContextValue } from '../../contexts/toastContext'; import { TimerProps } from '../Timer/Timer'; -export type ToastContextValues = { +export type ToastContainerContextValues = { toast: ToastContextValue; }; -export type ToastSlots = { +export type ToastContainerSlots = { root: NonNullable>; timer: NonNullable>; }; /** - * Toast Props + * ToastContainer Props */ -export type ToastProps = ComponentProps> & +export type ToastContainerProps = ComponentProps> & VanillaToast & { visible: boolean; announce: Announce; }; /** - * State used in rendering Toast + * State used in rendering ToastContainer */ -export type ToastState = ComponentState & - Pick & { +export type ToastContainerState = ComponentState & + Pick & { transitionTimeout: number; timerTimeout: number; running: boolean; diff --git a/packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap b/packages/react-components/react-toast/src/components/ToastContainer/__snapshots__/ToastContainer.test.tsx.snap similarity index 50% rename from packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap rename to packages/react-components/react-toast/src/components/ToastContainer/__snapshots__/ToastContainer.test.tsx.snap index b3b7f14e8feb07..d7709d893913ab 100644 --- a/packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap +++ b/packages/react-components/react-toast/src/components/ToastContainer/__snapshots__/ToastContainer.test.tsx.snap @@ -1,12 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Toast renders a default state 1`] = ` +exports[`ToastContainer renders a default state 1`] = `
- Default Toast + Default ToastContainer
`; diff --git a/packages/react-components/react-toast/src/components/ToastContainer/index.ts b/packages/react-components/react-toast/src/components/ToastContainer/index.ts new file mode 100644 index 00000000000000..01a852c24989ac --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastContainer/index.ts @@ -0,0 +1,6 @@ +export * from './ToastContainer'; +export * from './ToastContainer.types'; +export * from './renderToastContainer'; +export * from './useToastContainer'; +export * from './useToastContainerStyles.styles'; +export * from './useToastContainerContextValues'; diff --git a/packages/react-components/react-toast/src/components/Toast/renderToast.tsx b/packages/react-components/react-toast/src/components/ToastContainer/renderToastContainer.tsx similarity index 68% rename from packages/react-components/react-toast/src/components/Toast/renderToast.tsx rename to packages/react-components/react-toast/src/components/ToastContainer/renderToastContainer.tsx index ca9bde26741e30..ab13cae7610e10 100644 --- a/packages/react-components/react-toast/src/components/Toast/renderToast.tsx +++ b/packages/react-components/react-toast/src/components/ToastContainer/renderToastContainer.tsx @@ -4,15 +4,18 @@ import { createElement } from '@fluentui/react-jsx-runtime'; import { getSlotsNext } from '@fluentui/react-utilities'; import { Transition } from 'react-transition-group'; -import type { ToastState, ToastSlots, ToastContextValues } from './Toast.types'; +import type { ToastContainerState, ToastContainerSlots, ToastContainerContextValues } from './ToastContainer.types'; import { ToastContextProvider } from '../../contexts/toastContext'; /** - * Render the final JSX of Toast + * Render the final JSX of ToastContainer */ -export const renderToast_unstable = (state: ToastState, contextValues: ToastContextValues) => { +export const renderToastContainer_unstable = ( + state: ToastContainerState, + contextValues: ToastContainerContextValues, +) => { const { onTransitionEntering, visible, transitionTimeout, remove, nodeRef } = state; - const { slots, slotProps } = getSlotsNext(state); + const { slots, slotProps } = getSlotsNext(state); return ( ): ToastState => { +export const useToastContainer_unstable = ( + props: ToastContainerProps, + ref: React.Ref, +): ToastContainerState => { const { visible, children, @@ -53,7 +56,7 @@ export const useToast_unstable = (props: ToastProps, ref: React.Ref element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`); }; - // Users never actually use Toast as a JSX but imperatively through useToastController + // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController const userRootSlot = (data as { root?: ExtractSlotProps> }).root; const onAnimationEnd = useEventCallback((e: React.AnimationEvent) => { diff --git a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerContextValues.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerContextValues.ts new file mode 100644 index 00000000000000..7ea8809573013b --- /dev/null +++ b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerContextValues.ts @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { ToastContainerContextValues, ToastContainerState } from './ToastContainer.types'; + +export function useToastContainerContextValues_unstable(state: ToastContainerState): ToastContainerContextValues { + const { close } = state; + + const toastContext = React.useMemo( + () => ({ + close, + }), + [close], + ); + + return { + toast: toastContext, + }; +} diff --git a/packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerStyles.styles.ts similarity index 79% rename from packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts rename to packages/react-components/react-toast/src/components/ToastContainer/useToastContainerStyles.styles.ts index 910e0d55e98217..e90e56c74d777e 100644 --- a/packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts +++ b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerStyles.styles.ts @@ -1,11 +1,11 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; -import type { ToastSlots, ToastState } from './Toast.types'; +import type { ToastContainerSlots, ToastContainerState } from './ToastContainer.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -export const toastClassNames: SlotClassNames = { - root: 'fui-Toast', - timer: 'fui-Toast__timer', +export const toastClassNames: SlotClassNames = { + root: 'fui-ToastContainer', + timer: 'fui-ToastContainer__timer', }; /** @@ -75,9 +75,9 @@ const useStyles = makeStyles({ }); /** - * Apply styling to the Toast slots based on the state + * Apply styling to the ToastContainer slots based on the state */ -export const useToastStyles_unstable = (state: ToastState): ToastState => { +export const useToastContainerStyles_unstable = (state: ToastContainerState): ToastContainerState => { const styles = useStyles(); state.root.className = mergeClasses( toastClassNames.root, diff --git a/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx b/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx index c2b58c2b55becb..73b3a1946c17ea 100644 --- a/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx +++ b/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx @@ -3,7 +3,7 @@ import { ExtractSlotProps, Slot, getNativeElementProps, resolveShorthand } from import type { ToasterProps, ToasterState } from './Toaster.types'; import { TOAST_POSITIONS, ToastPosition, useToaster } from '../../state'; import { Announce } from '../AriaLive'; -import { Toast } from '../Toast'; +import { ToastContainer } from '../ToastContainer'; /** * Create the state required to render Toaster. @@ -22,9 +22,9 @@ export const useToaster_unstable = (props: ToasterProps): ToasterState => { resolveShorthand(toastsToRender.has(toastPosition) ? rootProps : null, { defaultProps: { children: toastsToRender.get(toastPosition)?.map(toast => ( - + {toast.content as React.ReactNode} - + )), 'data-toaster-position': toastPosition, // Explicitly casting because our slot types can't handle data attributes From 8b699accbe90425a8f3042b0943ac20d457d9bcc Mon Sep 17 00:00:00 2001 From: ling1726 Date: Mon, 5 Jun 2023 17:25:01 +0200 Subject: [PATCH 7/8] feat: rename ToastLayout to Toast (#28140) * feat: rename ToastLayout to Toast Follows up from #28139 and renames ToastLayout to Toast * fix md --- .../react-toast/etc/react-toast.api.md | 36 +++++++++---------- .../react-components/react-toast/src/Toast.ts | 1 + .../react-toast/src/ToastLayout.ts | 1 - .../Toast.test.tsx} | 10 +++--- .../src/components/Toast/Toast.tsx | 18 ++++++++++ .../src/components/Toast/Toast.types.ts | 15 ++++++++ .../Toast/__snapshots__/Toast.test.tsx.snap | 11 ++++++ .../react-toast/src/components/Toast/index.ts | 5 +++ .../src/components/Toast/renderToast.tsx | 15 ++++++++ .../src/components/Toast/useToast.ts | 24 +++++++++++++ .../useToastStyles.styles.ts} | 12 +++---- .../components/ToastLayout/ToastLayout.tsx | 18 ---------- .../ToastLayout/ToastLayout.types.ts | 15 -------- .../__snapshots__/ToastLayout.test.tsx.snap | 11 ------ .../src/components/ToastLayout/index.ts | 5 --- .../ToastLayout/renderToastLayout.tsx | 15 -------- .../components/ToastLayout/useToastLayout.ts | 24 ------------- .../react-components/react-toast/src/index.ts | 10 ++---- .../stories/Toast/CustomAnnounce.stories.tsx | 10 +++--- .../stories/Toast/CustomTimeout.stories.tsx | 6 ++-- .../stories/Toast/Default.stories.tsx | 6 ++-- .../Toast/DefaultToastOptions.stories.tsx | 6 ++-- .../stories/Toast/DismissAll.stories.tsx | 6 ++-- .../stories/Toast/DismissToast.stories.tsx | 6 ++-- .../Toast/DismissToastWithAction.stories.tsx | 6 ++-- .../Toast/MultipleToasters.stories.tsx | 10 +++--- .../stories/Toast/Offset.stories.tsx | 6 ++-- .../stories/Toast/PauseOnHover.stories.tsx | 6 ++-- .../Toast/PauseOnWindowBlur.stories.tsx | 6 ++-- .../stories/Toast/ToastPositions.stories.tsx | 6 ++-- .../stories/Toast/ToasterLimit.stories.tsx | 6 ++-- .../stories/Toast/UpdateToast.stories.tsx | 10 +++--- 32 files changed, 168 insertions(+), 174 deletions(-) create mode 100644 packages/react-components/react-toast/src/Toast.ts delete mode 100644 packages/react-components/react-toast/src/ToastLayout.ts rename packages/react-components/react-toast/src/components/{ToastLayout/ToastLayout.test.tsx => Toast/Toast.test.tsx} (55%) create mode 100644 packages/react-components/react-toast/src/components/Toast/Toast.tsx create mode 100644 packages/react-components/react-toast/src/components/Toast/Toast.types.ts create mode 100644 packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap create mode 100644 packages/react-components/react-toast/src/components/Toast/index.ts create mode 100644 packages/react-components/react-toast/src/components/Toast/renderToast.tsx create mode 100644 packages/react-components/react-toast/src/components/Toast/useToast.ts rename packages/react-components/react-toast/src/components/{ToastLayout/useToastLayoutStyles.styles.ts => Toast/useToastStyles.styles.ts} (68%) delete mode 100644 packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.tsx delete mode 100644 packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.types.ts delete mode 100644 packages/react-components/react-toast/src/components/ToastLayout/__snapshots__/ToastLayout.test.tsx.snap delete mode 100644 packages/react-components/react-toast/src/components/ToastLayout/index.ts delete mode 100644 packages/react-components/react-toast/src/components/ToastLayout/renderToastLayout.tsx delete mode 100644 packages/react-components/react-toast/src/components/ToastLayout/useToastLayout.ts diff --git a/packages/react-components/react-toast/etc/react-toast.api.md b/packages/react-components/react-toast/etc/react-toast.api.md index 2ba90894f1cee5..46b4fe48d16935 100644 --- a/packages/react-components/react-toast/etc/react-toast.api.md +++ b/packages/react-components/react-toast/etc/react-toast.api.md @@ -16,6 +16,9 @@ import type { Slot } from '@fluentui/react-utilities'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { TriggerProps } from '@fluentui/react-utilities'; +// @public +export const renderToast_unstable: (state: ToastState) => JSX.Element; + // @public export const renderToastBody_unstable: (state: ToastBodyState) => JSX.Element; @@ -26,10 +29,10 @@ export const renderToaster_unstable: (state: ToasterState) => JSX.Element; export const renderToastFooter_unstable: (state: ToastFooterState) => JSX.Element; // @public -export const renderToastLayout_unstable: (state: ToastLayoutState) => JSX.Element; +export const renderToastTitle_unstable: (state: ToastTitleState) => JSX.Element; // @public -export const renderToastTitle_unstable: (state: ToastTitleState) => JSX.Element; +export const Toast: ForwardRefComponent; // @public export const ToastBody: ForwardRefComponent; @@ -49,6 +52,9 @@ export type ToastBodySlots = { // @public export type ToastBodyState = ComponentState; +// @public (undocumented) +export const toastClassNames: SlotClassNames; + // @public export const Toaster: React_2.FC; @@ -91,28 +97,22 @@ export type ToastFooterState = ComponentState; // @public (undocumented) export type ToastId = string; -// @public -export const ToastLayout: ForwardRefComponent; +// @public (undocumented) +export type ToastOffset = Partial> | ToastOffsetObject; // @public (undocumented) -export const toastLayoutClassNames: SlotClassNames; +export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'; // @public -export type ToastLayoutProps = ComponentProps & {}; +export type ToastProps = ComponentProps & {}; // @public (undocumented) -export type ToastLayoutSlots = { +export type ToastSlots = { root: Slot<'div'>; }; // @public -export type ToastLayoutState = ComponentState; - -// @public (undocumented) -export type ToastOffset = Partial> | ToastOffsetObject; - -// @public (undocumented) -export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'; +export type ToastState = ComponentState; // @public export const ToastTitle: ForwardRefComponent; @@ -151,6 +151,9 @@ export type ToastTriggerState = { children: React_2.ReactElement | null; }; +// @public +export const useToast_unstable: (props: ToastProps, ref: React_2.Ref) => ToastState; + // @public export const useToastBody_unstable: (props: ToastBodyProps, ref: React_2.Ref) => ToastBodyState; @@ -178,10 +181,7 @@ export const useToastFooter_unstable: (props: ToastFooterProps, ref: React_2.Ref export const useToastFooterStyles_unstable: (state: ToastFooterState) => ToastFooterState; // @public -export const useToastLayout_unstable: (props: ToastLayoutProps, ref: React_2.Ref) => ToastLayoutState; - -// @public -export const useToastLayoutStyles_unstable: (state: ToastLayoutState) => ToastLayoutState; +export const useToastStyles_unstable: (state: ToastState) => ToastState; // @public export const useToastTitle_unstable: (props: ToastTitleProps, ref: React_2.Ref) => ToastTitleState; diff --git a/packages/react-components/react-toast/src/Toast.ts b/packages/react-components/react-toast/src/Toast.ts new file mode 100644 index 00000000000000..a84c38a13fc605 --- /dev/null +++ b/packages/react-components/react-toast/src/Toast.ts @@ -0,0 +1 @@ +export * from './components/Toast/index'; diff --git a/packages/react-components/react-toast/src/ToastLayout.ts b/packages/react-components/react-toast/src/ToastLayout.ts deleted file mode 100644 index d425053db21361..00000000000000 --- a/packages/react-components/react-toast/src/ToastLayout.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/ToastLayout/index'; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.test.tsx b/packages/react-components/react-toast/src/components/Toast/Toast.test.tsx similarity index 55% rename from packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.test.tsx rename to packages/react-components/react-toast/src/components/Toast/Toast.test.tsx index 00394c8480f669..0c750cb4087258 100644 --- a/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.test.tsx +++ b/packages/react-components/react-toast/src/components/Toast/Toast.test.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { ToastLayout } from './ToastLayout'; +import { Toast } from './Toast'; import { isConformant } from '../../testing/isConformant'; -describe('ToastLayout', () => { +describe('Toast', () => { isConformant({ - Component: ToastLayout, - displayName: 'ToastLayout', + Component: Toast, + displayName: 'Toast', }); it('renders a default state', () => { - const result = render(Default ToastLayout); + const result = render(Default Toast); expect(result.container).toMatchSnapshot(); }); }); diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.tsx b/packages/react-components/react-toast/src/components/Toast/Toast.tsx new file mode 100644 index 00000000000000..78998c00a7b492 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/Toast.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useToast_unstable } from './useToast'; +import { renderToast_unstable } from './renderToast'; +import { useToastStyles_unstable } from './useToastStyles.styles'; +import type { ToastProps } from './Toast.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * Toast component + */ +export const Toast: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useToast_unstable(props, ref); + + useToastStyles_unstable(state); + return renderToast_unstable(state); +}); + +Toast.displayName = 'Toast'; diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.types.ts b/packages/react-components/react-toast/src/components/Toast/Toast.types.ts new file mode 100644 index 00000000000000..a894239f2ade9f --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/Toast.types.ts @@ -0,0 +1,15 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type ToastSlots = { + root: Slot<'div'>; +}; + +/** + * Toast Props + */ +export type ToastProps = ComponentProps & {}; + +/** + * State used in rendering Toast + */ +export type ToastState = ComponentState; diff --git a/packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap b/packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap new file mode 100644 index 00000000000000..4e224d666dc00e --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Toast renders a default state 1`] = ` +
+
+ Default Toast +
+
+`; diff --git a/packages/react-components/react-toast/src/components/Toast/index.ts b/packages/react-components/react-toast/src/components/Toast/index.ts new file mode 100644 index 00000000000000..0bd595944fb22a --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/index.ts @@ -0,0 +1,5 @@ +export * from './Toast'; +export * from './Toast.types'; +export * from './renderToast'; +export * from './useToast'; +export * from './useToastStyles.styles'; diff --git a/packages/react-components/react-toast/src/components/Toast/renderToast.tsx b/packages/react-components/react-toast/src/components/Toast/renderToast.tsx new file mode 100644 index 00000000000000..b7eef53f8eccf2 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/renderToast.tsx @@ -0,0 +1,15 @@ +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; +import type { ToastState, ToastSlots } from './Toast.types'; + +/** + * Render the final JSX of Toast + */ +export const renderToast_unstable = (state: ToastState) => { + const { slots, slotProps } = getSlotsNext(state); + + return ; +}; diff --git a/packages/react-components/react-toast/src/components/Toast/useToast.ts b/packages/react-components/react-toast/src/components/Toast/useToast.ts new file mode 100644 index 00000000000000..8409bf802a1d37 --- /dev/null +++ b/packages/react-components/react-toast/src/components/Toast/useToast.ts @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { getNativeElementProps } from '@fluentui/react-utilities'; +import type { ToastProps, ToastState } from './Toast.types'; + +/** + * Create the state required to render Toast. + * + * The returned state can be modified with hooks such as useToastStyles_unstable, + * before being passed to renderToast_unstable. + * + * @param props - props from this instance of Toast + * @param ref - reference to root HTMLElement of Toast + */ +export const useToast_unstable = (props: ToastProps, ref: React.Ref): ToastState => { + return { + components: { + root: 'div', + }, + root: getNativeElementProps('div', { + ref, + ...props, + }), + }; +}; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/useToastLayoutStyles.styles.ts b/packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts similarity index 68% rename from packages/react-components/react-toast/src/components/ToastLayout/useToastLayoutStyles.styles.ts rename to packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts index 274507552ac812..2a1a251ff65921 100644 --- a/packages/react-components/react-toast/src/components/ToastLayout/useToastLayoutStyles.styles.ts +++ b/packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts @@ -1,10 +1,10 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; -import type { ToastLayoutSlots, ToastLayoutState } from './ToastLayout.types'; +import type { ToastSlots, ToastState } from './Toast.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -export const toastLayoutClassNames: SlotClassNames = { - root: 'fui-ToastLayout', +export const toastClassNames: SlotClassNames = { + root: 'fui-Toast', }; /** @@ -32,11 +32,11 @@ const useStyles = makeStyles({ }); /** - * Apply styling to the ToastLayout slots based on the state + * Apply styling to the Toast slots based on the state */ -export const useToastLayoutStyles_unstable = (state: ToastLayoutState): ToastLayoutState => { +export const useToastStyles_unstable = (state: ToastState): ToastState => { const styles = useStyles(); - state.root.className = mergeClasses(toastLayoutClassNames.root, styles.root, state.root.className); + state.root.className = mergeClasses(toastClassNames.root, styles.root, state.root.className); return state; }; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.tsx b/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.tsx deleted file mode 100644 index b5687d906a15c9..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; -import { useToastLayout_unstable } from './useToastLayout'; -import { renderToastLayout_unstable } from './renderToastLayout'; -import { useToastLayoutStyles_unstable } from './useToastLayoutStyles.styles'; -import type { ToastLayoutProps } from './ToastLayout.types'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; - -/** - * ToastLayout component - */ -export const ToastLayout: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useToastLayout_unstable(props, ref); - - useToastLayoutStyles_unstable(state); - return renderToastLayout_unstable(state); -}); - -ToastLayout.displayName = 'ToastLayout'; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.types.ts b/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.types.ts deleted file mode 100644 index 4364c01c46690a..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; - -export type ToastLayoutSlots = { - root: Slot<'div'>; -}; - -/** - * ToastLayout Props - */ -export type ToastLayoutProps = ComponentProps & {}; - -/** - * State used in rendering ToastLayout - */ -export type ToastLayoutState = ComponentState; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/__snapshots__/ToastLayout.test.tsx.snap b/packages/react-components/react-toast/src/components/ToastLayout/__snapshots__/ToastLayout.test.tsx.snap deleted file mode 100644 index cbcb7bd7919ef6..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastLayout/__snapshots__/ToastLayout.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ToastLayout renders a default state 1`] = ` -
-
- Default ToastLayout -
-
-`; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/index.ts b/packages/react-components/react-toast/src/components/ToastLayout/index.ts deleted file mode 100644 index 3f72ac07b9aa4b..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastLayout/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './ToastLayout'; -export * from './ToastLayout.types'; -export * from './renderToastLayout'; -export * from './useToastLayout'; -export * from './useToastLayoutStyles.styles'; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/renderToastLayout.tsx b/packages/react-components/react-toast/src/components/ToastLayout/renderToastLayout.tsx deleted file mode 100644 index fc47f6258e2306..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastLayout/renderToastLayout.tsx +++ /dev/null @@ -1,15 +0,0 @@ -/** @jsxRuntime classic */ -/** @jsx createElement */ - -import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; -import type { ToastLayoutState, ToastLayoutSlots } from './ToastLayout.types'; - -/** - * Render the final JSX of ToastLayout - */ -export const renderToastLayout_unstable = (state: ToastLayoutState) => { - const { slots, slotProps } = getSlotsNext(state); - - return ; -}; diff --git a/packages/react-components/react-toast/src/components/ToastLayout/useToastLayout.ts b/packages/react-components/react-toast/src/components/ToastLayout/useToastLayout.ts deleted file mode 100644 index bf54af90526170..00000000000000 --- a/packages/react-components/react-toast/src/components/ToastLayout/useToastLayout.ts +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import { getNativeElementProps } from '@fluentui/react-utilities'; -import type { ToastLayoutProps, ToastLayoutState } from './ToastLayout.types'; - -/** - * Create the state required to render ToastLayout. - * - * The returned state can be modified with hooks such as useToastLayoutStyles_unstable, - * before being passed to renderToastLayout_unstable. - * - * @param props - props from this instance of ToastLayout - * @param ref - reference to root HTMLElement of ToastLayout - */ -export const useToastLayout_unstable = (props: ToastLayoutProps, ref: React.Ref): ToastLayoutState => { - return { - components: { - root: 'div', - }, - root: getNativeElementProps('div', { - ref, - ...props, - }), - }; -}; diff --git a/packages/react-components/react-toast/src/index.ts b/packages/react-components/react-toast/src/index.ts index a2bb19c8671dda..b72bb14ab99da0 100644 --- a/packages/react-components/react-toast/src/index.ts +++ b/packages/react-components/react-toast/src/index.ts @@ -11,14 +11,8 @@ export { toasterClassNames, } from './Toaster'; export type { ToasterProps, ToasterState, ToasterSlots } from './Toaster'; -export { - ToastLayout, - useToastLayoutStyles_unstable, - useToastLayout_unstable, - renderToastLayout_unstable, - toastLayoutClassNames, -} from './ToastLayout'; -export type { ToastLayoutProps, ToastLayoutState, ToastLayoutSlots } from './ToastLayout'; +export { Toast, useToastStyles_unstable, useToast_unstable, renderToast_unstable, toastClassNames } from './Toast'; +export type { ToastProps, ToastState, ToastSlots } from './Toast'; export { ToastTitle, diff --git a/packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx b/packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx index 4fea6492b848b1..f9e93cf785f8cc 100644 --- a/packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastLayout, ToastTitle, ToasterProps } from '@fluentui/react-toast'; +import { Toaster, useToastController, Toast, ToastTitle, ToasterProps } from '@fluentui/react-toast'; import { useId, Link, makeStyles, shorthands } from '@fluentui/react-components'; const useStyles = makeStyles({ @@ -24,21 +24,21 @@ export const CustomAnnounce = () => { const { dispatchToast } = useToastController(toasterId); const dispatchAlert = () => dispatchToast( - + Undo}> Assertive toast {counter++} - , + , { politeness: 'assertive' }, ); const dispatchStatus = () => dispatchToast( - + Undo}> Polite toast {counter++} - , + , { politeness: 'polite' }, ); diff --git a/packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx b/packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx index 51d7a354ec194d..9504287e88e721 100644 --- a/packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const CustomTimeout = () => { @@ -7,9 +7,9 @@ export const CustomTimeout = () => { const { dispatchToast } = useToastController(toasterId); const notify = () => dispatchToast( - + Custom timeout 1000ms - , + , { timeout: 1000 }, ); diff --git a/packages/react-components/react-toast/stories/Toast/Default.stories.tsx b/packages/react-components/react-toast/stories/Toast/Default.stories.tsx index ed10bb2e6a0b14..7f7ecf3cd34018 100644 --- a/packages/react-components/react-toast/stories/Toast/Default.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/Default.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastLayout, ToastTitle, ToastBody, ToastFooter } from '@fluentui/react-toast'; +import { Toaster, useToastController, Toast, ToastTitle, ToastBody, ToastFooter } from '@fluentui/react-toast'; import { useId, Link } from '@fluentui/react-components'; export const Default = () => { @@ -7,7 +7,7 @@ export const Default = () => { const { dispatchToast } = useToastController(toasterId); const notify = () => dispatchToast( - + Undo}> Email sent @@ -16,7 +16,7 @@ export const Default = () => { Action Action - , + , ); return ( diff --git a/packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx b/packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx index 7e83bb88b90be5..12474895120545 100644 --- a/packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const DefaultToastOptions = () => { @@ -7,9 +7,9 @@ export const DefaultToastOptions = () => { const { dispatchToast } = useToastController(toasterId); const notify = () => dispatchToast( - + Options configured in Toaster - , + , ); return ( diff --git a/packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx b/packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx index 76a01909fe950f..af71e386da1fc7 100644 --- a/packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const DismissAll = () => { @@ -7,9 +7,9 @@ export const DismissAll = () => { const { dispatchToast, dismissAllToasts } = useToastController(toasterId); const notify = () => dispatchToast( - + 'This is a toast - , + , ); const dismissAll = () => dismissAllToasts(); diff --git a/packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx b/packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx index 804b327e40660e..24185f579b2519 100644 --- a/packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const DismissToast = () => { @@ -8,9 +8,9 @@ export const DismissToast = () => { const { dispatchToast, dismissToast } = useToastController(toasterId); const notify = () => dispatchToast( - + This is a toast - , + , { toastId }, ); const dismiss = () => dismissToast(toastId); diff --git a/packages/react-components/react-toast/stories/Toast/DismissToastWithAction.stories.tsx b/packages/react-components/react-toast/stories/Toast/DismissToastWithAction.stories.tsx index c20f5c898ccc91..7b1f5c773d2575 100644 --- a/packages/react-components/react-toast/stories/Toast/DismissToastWithAction.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/DismissToastWithAction.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastTitle, ToastTrigger, ToastLayout } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, ToastTrigger, Toast } from '@fluentui/react-toast'; import { useId, Link } from '@fluentui/react-components'; export const DismissToastWithAction = () => { @@ -7,7 +7,7 @@ export const DismissToastWithAction = () => { const { dispatchToast } = useToastController(toasterId); const notify = () => dispatchToast( - + { > Dismiss me - , + , { timeout: -1 }, ); diff --git a/packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx b/packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx index 5db63b6d6d0288..0fa9a6e8c2d06c 100644 --- a/packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const MultipeToasters = () => { @@ -9,15 +9,15 @@ export const MultipeToasters = () => { const { dispatchToast: dispatchSecondToast } = useToastController(second); const notifyFirst = () => dispatchFirstToast( - + First toaster - , + , ); const notifySecond = () => dispatchSecondToast( - + Second toaster - , + , ); return ( diff --git a/packages/react-components/react-toast/stories/Toast/Offset.stories.tsx b/packages/react-components/react-toast/stories/Toast/Offset.stories.tsx index 4f2d0f454cb806..5559bd7da1a48a 100644 --- a/packages/react-components/react-toast/stories/Toast/Offset.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/Offset.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ToastPosition, Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; +import { ToastPosition, Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const Offset = () => { @@ -7,11 +7,11 @@ export const Offset = () => { const { dispatchToast } = useToastController(toasterId); const notify = (position: ToastPosition) => dispatchToast( - + Offset: {horizontal}, {vertical} - , + , { position }, ); const [horizontal, setHorizontal] = React.useState(10); diff --git a/packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx b/packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx index 959fbb5d34b576..d56a06b87e6071 100644 --- a/packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const PauseOnHover = () => { @@ -7,9 +7,9 @@ export const PauseOnHover = () => { const { dispatchToast } = useToastController(toasterId); const notify = () => dispatchToast( - + Hover me! - , + , { pauseOnHover: true }, ); diff --git a/packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx b/packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx index 2a61ffad568fe4..6ddfd6a3dff7a3 100644 --- a/packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const PauseOnWindowBlur = () => { @@ -7,9 +7,9 @@ export const PauseOnWindowBlur = () => { const { dispatchToast } = useToastController(toasterId); const notify = () => dispatchToast( - + Click on another window! - , + , { pauseOnWindowBlur: true }, ); diff --git a/packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx b/packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx index b35e4b618e83c5..210cb7556ed684 100644 --- a/packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastPosition, ToastTitle, ToastLayout } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastPosition, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const ToastPositions = () => { @@ -7,9 +7,9 @@ export const ToastPositions = () => { const { dispatchToast } = useToastController(toasterId); const notify = (position: ToastPosition) => dispatchToast( - + This toast is {position} - , + , { position }, ); diff --git a/packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx b/packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx index bdd06771704370..0c20ea998408b7 100644 --- a/packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const ToasterLimit = () => { @@ -7,9 +7,9 @@ export const ToasterLimit = () => { const { dispatchToast } = useToastController(toasterId); const notify = () => dispatchToast( - + Limited to 3 toasts - , + , ); return ( diff --git a/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx b/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx index 18a1d30a1f4192..9bd15047953b16 100644 --- a/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx +++ b/packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Toaster, useToastController, ToastTitle, ToastLayout } from '@fluentui/react-toast'; +import { Toaster, useToastController, ToastTitle, Toast } from '@fluentui/react-toast'; import { useId } from '@fluentui/react-components'; export const UpdateToast = () => { @@ -10,17 +10,17 @@ export const UpdateToast = () => { const { dispatchToast, updateToast } = useToastController(toasterId); const notify = () => dispatchToast( - + This toast never closes - , + , { toastId, timeout: -1 }, ); const update = () => updateToast({ content: ( - + This toast will close soon - + ), toastId, timeout: 2000, From b8eb75993520ef05a8eba8cbb676251a95812285 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko <66456876+tomi-msft@users.noreply.github.com> Date: Mon, 5 Jun 2023 09:57:40 -0700 Subject: [PATCH 8/8] fix: update Skeleton stories path (#28124) --- .../react-skeleton/stories/Skeleton/index.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-skeleton/stories/Skeleton/index.stories.tsx b/packages/react-components/react-skeleton/stories/Skeleton/index.stories.tsx index 48d214dde603ef..df3d5d478cf640 100644 --- a/packages/react-components/react-skeleton/stories/Skeleton/index.stories.tsx +++ b/packages/react-components/react-skeleton/stories/Skeleton/index.stories.tsx @@ -9,7 +9,7 @@ export { Animation } from './SkeletonAnimation.stories'; export { Row } from './SkeletonRow.stories'; export default { - title: 'Skeleton', + title: 'Components/Skeleton', component: Skeleton, parameters: { docs: {