diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index f0969aa90343..232faef9d3d8 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -24,9 +24,9 @@ jobs: # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@aa578102511db1f4524ed59b8cc2bae4f6e88195 # v3.27.6 + uses: github/codeql-action/init@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0 with: languages: javascript - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@aa578102511db1f4524ed59b8cc2bae4f6e88195 # v3.27.6 + uses: github/codeql-action/analyze@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0 diff --git a/.yarn/cache/@babel-code-frame-npm-7.25.7-40a9f53f43-000fb8299f.zip b/.yarn/cache/@babel-code-frame-npm-7.25.7-40a9f53f43-000fb8299f.zip deleted file mode 100644 index 4b9781d9f69b..000000000000 Binary files a/.yarn/cache/@babel-code-frame-npm-7.25.7-40a9f53f43-000fb8299f.zip and /dev/null differ diff --git a/.yarn/cache/@babel-code-frame-npm-7.26.2-4902b56813-db2c2122af.zip b/.yarn/cache/@babel-code-frame-npm-7.26.2-4902b56813-db2c2122af.zip new file mode 100644 index 000000000000..0c47a20c2973 Binary files /dev/null and b/.yarn/cache/@babel-code-frame-npm-7.26.2-4902b56813-db2c2122af.zip differ diff --git a/.yarn/cache/@babel-compat-data-npm-7.25.8-a7237f1519-269fcb0d89.zip b/.yarn/cache/@babel-compat-data-npm-7.25.8-a7237f1519-269fcb0d89.zip deleted file mode 100644 index 2bbd0325fad1..000000000000 Binary files a/.yarn/cache/@babel-compat-data-npm-7.25.8-a7237f1519-269fcb0d89.zip and /dev/null differ diff --git a/.yarn/cache/@babel-compat-data-npm-7.26.3-ef0b896cd9-0bf4e49168.zip b/.yarn/cache/@babel-compat-data-npm-7.26.3-ef0b896cd9-0bf4e49168.zip new file mode 100644 index 000000000000..7660be99fa9b Binary files /dev/null and b/.yarn/cache/@babel-compat-data-npm-7.26.3-ef0b896cd9-0bf4e49168.zip differ diff --git a/.yarn/cache/@babel-core-npm-7.25.8-e5a00584a2-31eb1a8ca1.zip b/.yarn/cache/@babel-core-npm-7.26.0-6f14d37f26-65767bfdb1.zip similarity index 70% rename from .yarn/cache/@babel-core-npm-7.25.8-e5a00584a2-31eb1a8ca1.zip rename to .yarn/cache/@babel-core-npm-7.26.0-6f14d37f26-65767bfdb1.zip index 50842ae5c846..c9e41a41af30 100644 Binary files a/.yarn/cache/@babel-core-npm-7.25.8-e5a00584a2-31eb1a8ca1.zip and b/.yarn/cache/@babel-core-npm-7.26.0-6f14d37f26-65767bfdb1.zip differ diff --git a/.yarn/cache/@babel-generator-npm-7.25.7-68dd72ad91-0154282962.zip b/.yarn/cache/@babel-generator-npm-7.25.7-68dd72ad91-0154282962.zip deleted file mode 100644 index e9073d973e54..000000000000 Binary files a/.yarn/cache/@babel-generator-npm-7.25.7-68dd72ad91-0154282962.zip and /dev/null differ diff --git a/.yarn/cache/@babel-generator-npm-7.26.2-5061e18ae4-71ace82b5b.zip b/.yarn/cache/@babel-generator-npm-7.26.2-5061e18ae4-71ace82b5b.zip new file mode 100644 index 000000000000..d3bd2a2edaf9 Binary files /dev/null and b/.yarn/cache/@babel-generator-npm-7.26.2-5061e18ae4-71ace82b5b.zip differ diff --git a/.yarn/cache/@babel-generator-npm-7.26.3-b055e513c1-c1d8710cc1.zip b/.yarn/cache/@babel-generator-npm-7.26.3-b055e513c1-c1d8710cc1.zip new file mode 100644 index 000000000000..3a35f12e663b Binary files /dev/null and b/.yarn/cache/@babel-generator-npm-7.26.3-b055e513c1-c1d8710cc1.zip differ diff --git a/.yarn/cache/@babel-helper-compilation-targets-npm-7.25.7-912ef98d47-bbf9be8480.zip b/.yarn/cache/@babel-helper-compilation-targets-npm-7.25.7-912ef98d47-bbf9be8480.zip deleted file mode 100644 index cdfd1fcbe3e6..000000000000 Binary files a/.yarn/cache/@babel-helper-compilation-targets-npm-7.25.7-912ef98d47-bbf9be8480.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-compilation-targets-npm-7.25.9-1e2a209538-8053fbfc21.zip b/.yarn/cache/@babel-helper-compilation-targets-npm-7.25.9-1e2a209538-8053fbfc21.zip new file mode 100644 index 000000000000..ae6057e4818f Binary files /dev/null and b/.yarn/cache/@babel-helper-compilation-targets-npm-7.25.9-1e2a209538-8053fbfc21.zip differ diff --git a/.yarn/cache/@babel-helper-module-imports-npm-7.25.7-f7b3a083a0-94556712c2.zip b/.yarn/cache/@babel-helper-module-imports-npm-7.25.7-f7b3a083a0-94556712c2.zip deleted file mode 100644 index a59da212fe44..000000000000 Binary files a/.yarn/cache/@babel-helper-module-imports-npm-7.25.7-f7b3a083a0-94556712c2.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-module-imports-npm-7.25.9-b86e31bde9-e090be5dee.zip b/.yarn/cache/@babel-helper-module-imports-npm-7.25.9-b86e31bde9-e090be5dee.zip new file mode 100644 index 000000000000..92d15073e934 Binary files /dev/null and b/.yarn/cache/@babel-helper-module-imports-npm-7.25.9-b86e31bde9-e090be5dee.zip differ diff --git a/.yarn/cache/@babel-helper-module-transforms-npm-7.25.7-01310522f0-480309b127.zip b/.yarn/cache/@babel-helper-module-transforms-npm-7.25.7-01310522f0-480309b127.zip deleted file mode 100644 index 295845714b29..000000000000 Binary files a/.yarn/cache/@babel-helper-module-transforms-npm-7.25.7-01310522f0-480309b127.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-module-transforms-npm-7.26.0-7557a3558f-9841d2a62f.zip b/.yarn/cache/@babel-helper-module-transforms-npm-7.26.0-7557a3558f-9841d2a62f.zip new file mode 100644 index 000000000000..e56392ab1b2d Binary files /dev/null and b/.yarn/cache/@babel-helper-module-transforms-npm-7.26.0-7557a3558f-9841d2a62f.zip differ diff --git a/.yarn/cache/@babel-helper-string-parser-npm-7.25.7-352069de58-2b8de9fa86.zip b/.yarn/cache/@babel-helper-string-parser-npm-7.25.7-352069de58-2b8de9fa86.zip deleted file mode 100644 index 01cc480e7430..000000000000 Binary files a/.yarn/cache/@babel-helper-string-parser-npm-7.25.7-352069de58-2b8de9fa86.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-string-parser-npm-7.25.9-eade578078-c28656c52b.zip b/.yarn/cache/@babel-helper-string-parser-npm-7.25.9-eade578078-c28656c52b.zip new file mode 100644 index 000000000000..284b3364160c Binary files /dev/null and b/.yarn/cache/@babel-helper-string-parser-npm-7.25.9-eade578078-c28656c52b.zip differ diff --git a/.yarn/cache/@babel-helper-validator-identifier-npm-7.25.7-1c758f0472-ec6934cc47.zip b/.yarn/cache/@babel-helper-validator-identifier-npm-7.25.7-1c758f0472-ec6934cc47.zip deleted file mode 100644 index bfc140e134e0..000000000000 Binary files a/.yarn/cache/@babel-helper-validator-identifier-npm-7.25.7-1c758f0472-ec6934cc47.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-validator-identifier-npm-7.25.9-2634b947a4-3f9b649be0.zip b/.yarn/cache/@babel-helper-validator-identifier-npm-7.25.9-2634b947a4-3f9b649be0.zip new file mode 100644 index 000000000000..dbd05a465a2d Binary files /dev/null and b/.yarn/cache/@babel-helper-validator-identifier-npm-7.25.9-2634b947a4-3f9b649be0.zip differ diff --git a/.yarn/cache/@babel-helper-validator-option-npm-7.25.7-8c969bf588-3c46cbdd66.zip b/.yarn/cache/@babel-helper-validator-option-npm-7.25.7-8c969bf588-3c46cbdd66.zip deleted file mode 100644 index 171cefae0462..000000000000 Binary files a/.yarn/cache/@babel-helper-validator-option-npm-7.25.7-8c969bf588-3c46cbdd66.zip and /dev/null differ diff --git a/.yarn/cache/@babel-helper-validator-option-npm-7.25.9-6450027d5d-9491b27559.zip b/.yarn/cache/@babel-helper-validator-option-npm-7.25.9-6450027d5d-9491b27559.zip new file mode 100644 index 000000000000..dd45f0be203b Binary files /dev/null and b/.yarn/cache/@babel-helper-validator-option-npm-7.25.9-6450027d5d-9491b27559.zip differ diff --git a/.yarn/cache/@babel-helpers-npm-7.25.7-267b4cec46-2632909f83.zip b/.yarn/cache/@babel-helpers-npm-7.26.0-d7ff09b837-fd4757f65d.zip similarity index 71% rename from .yarn/cache/@babel-helpers-npm-7.25.7-267b4cec46-2632909f83.zip rename to .yarn/cache/@babel-helpers-npm-7.26.0-d7ff09b837-fd4757f65d.zip index e542588bc6ca..7a7d3bdb09fd 100644 Binary files a/.yarn/cache/@babel-helpers-npm-7.25.7-267b4cec46-2632909f83.zip and b/.yarn/cache/@babel-helpers-npm-7.26.0-d7ff09b837-fd4757f65d.zip differ diff --git a/.yarn/cache/@babel-highlight-npm-7.25.7-308b20da71-823be2523d.zip b/.yarn/cache/@babel-highlight-npm-7.25.7-308b20da71-823be2523d.zip deleted file mode 100644 index 9655f31bb951..000000000000 Binary files a/.yarn/cache/@babel-highlight-npm-7.25.7-308b20da71-823be2523d.zip and /dev/null differ diff --git a/.yarn/cache/@babel-parser-npm-7.25.8-fda12195b5-0396eb71e3.zip b/.yarn/cache/@babel-parser-npm-7.25.8-fda12195b5-0396eb71e3.zip deleted file mode 100644 index 29a6e4d021ff..000000000000 Binary files a/.yarn/cache/@babel-parser-npm-7.25.8-fda12195b5-0396eb71e3.zip and /dev/null differ diff --git a/.yarn/cache/@babel-parser-npm-7.26.0-9b4a777d36-07e01683b0.zip b/.yarn/cache/@babel-parser-npm-7.26.0-9b4a777d36-07e01683b0.zip new file mode 100644 index 000000000000..ca67e2448ef0 Binary files /dev/null and b/.yarn/cache/@babel-parser-npm-7.26.0-9b4a777d36-07e01683b0.zip differ diff --git a/.yarn/cache/@babel-parser-npm-7.26.3-552f4dcfdb-e7e3814b2d.zip b/.yarn/cache/@babel-parser-npm-7.26.3-552f4dcfdb-e7e3814b2d.zip new file mode 100644 index 000000000000..dc6d200460d2 Binary files /dev/null and b/.yarn/cache/@babel-parser-npm-7.26.3-552f4dcfdb-e7e3814b2d.zip differ diff --git a/.yarn/cache/@babel-template-npm-7.25.7-4db3590fa2-49e1e88d2e.zip b/.yarn/cache/@babel-template-npm-7.25.7-4db3590fa2-49e1e88d2e.zip deleted file mode 100644 index f383909cdaa3..000000000000 Binary files a/.yarn/cache/@babel-template-npm-7.25.7-4db3590fa2-49e1e88d2e.zip and /dev/null differ diff --git a/.yarn/cache/@babel-template-npm-7.25.9-d903b7b6d5-e861180881.zip b/.yarn/cache/@babel-template-npm-7.25.9-d903b7b6d5-e861180881.zip new file mode 100644 index 000000000000..dfcd54f5a428 Binary files /dev/null and b/.yarn/cache/@babel-template-npm-7.25.9-d903b7b6d5-e861180881.zip differ diff --git a/.yarn/cache/@babel-traverse-npm-7.25.7-0ca7b771fb-5b2d332fcd.zip b/.yarn/cache/@babel-traverse-npm-7.26.4-2a96cd6adb-30c81a80d6.zip similarity index 78% rename from .yarn/cache/@babel-traverse-npm-7.25.7-0ca7b771fb-5b2d332fcd.zip rename to .yarn/cache/@babel-traverse-npm-7.26.4-2a96cd6adb-30c81a80d6.zip index 76aa1348c31d..c68922491514 100644 Binary files a/.yarn/cache/@babel-traverse-npm-7.25.7-0ca7b771fb-5b2d332fcd.zip and b/.yarn/cache/@babel-traverse-npm-7.26.4-2a96cd6adb-30c81a80d6.zip differ diff --git a/.yarn/cache/@babel-types-npm-7.25.8-44acfff5f6-973108dbb1.zip b/.yarn/cache/@babel-types-npm-7.25.8-44acfff5f6-973108dbb1.zip deleted file mode 100644 index 54b78ba4586e..000000000000 Binary files a/.yarn/cache/@babel-types-npm-7.25.8-44acfff5f6-973108dbb1.zip and /dev/null differ diff --git a/.yarn/cache/@babel-types-npm-7.26.0-ae81de0a93-40780741ec.zip b/.yarn/cache/@babel-types-npm-7.26.0-ae81de0a93-40780741ec.zip new file mode 100644 index 000000000000..f1b0571f9a6f Binary files /dev/null and b/.yarn/cache/@babel-types-npm-7.26.0-ae81de0a93-40780741ec.zip differ diff --git a/.yarn/cache/@babel-types-npm-7.26.3-348c6bde15-c31d054963.zip b/.yarn/cache/@babel-types-npm-7.26.3-348c6bde15-c31d054963.zip new file mode 100644 index 000000000000..b34c7f71fdd8 Binary files /dev/null and b/.yarn/cache/@babel-types-npm-7.26.3-348c6bde15-c31d054963.zip differ diff --git a/.yarn/cache/@figma-code-connect-npm-1.2.2-68da228123-8e37bc7069.zip b/.yarn/cache/@figma-code-connect-npm-1.2.4-44da22931d-3dbf45238c.zip similarity index 66% rename from .yarn/cache/@figma-code-connect-npm-1.2.2-68da228123-8e37bc7069.zip rename to .yarn/cache/@figma-code-connect-npm-1.2.4-44da22931d-3dbf45238c.zip index 2e02f791a30e..1f269af2e1fc 100644 Binary files a/.yarn/cache/@figma-code-connect-npm-1.2.2-68da228123-8e37bc7069.zip and b/.yarn/cache/@figma-code-connect-npm-1.2.4-44da22931d-3dbf45238c.zip differ diff --git a/.yarn/cache/@stackblitz-sdk-npm-1.11.0-a3cab8fa5d-351647b818.zip b/.yarn/cache/@stackblitz-sdk-npm-1.11.0-a3cab8fa5d-351647b818.zip new file mode 100644 index 000000000000..b2cda1cd6020 Binary files /dev/null and b/.yarn/cache/@stackblitz-sdk-npm-1.11.0-a3cab8fa5d-351647b818.zip differ diff --git a/.yarn/cache/@storybook-addon-links-npm-8.2.9-6a7720cab3-e6b14e2cb6.zip b/.yarn/cache/@storybook-addon-links-npm-8.2.9-6a7720cab3-e6b14e2cb6.zip deleted file mode 100644 index 311b6c74dc76..000000000000 Binary files a/.yarn/cache/@storybook-addon-links-npm-8.2.9-6a7720cab3-e6b14e2cb6.zip and /dev/null differ diff --git a/.yarn/cache/@storybook-addon-links-npm-8.4.7-1480bc861f-3d64225348.zip b/.yarn/cache/@storybook-addon-links-npm-8.4.7-1480bc861f-3d64225348.zip new file mode 100644 index 000000000000..155b3d2042c8 Binary files /dev/null and b/.yarn/cache/@storybook-addon-links-npm-8.4.7-1480bc861f-3d64225348.zip differ diff --git a/.yarn/cache/@storybook-builder-vite-npm-8.2.9-e33ad290c2-ed8e28b694.zip b/.yarn/cache/@storybook-builder-vite-npm-8.2.9-e33ad290c2-ed8e28b694.zip deleted file mode 100644 index 8cbb58ec88c2..000000000000 Binary files a/.yarn/cache/@storybook-builder-vite-npm-8.2.9-e33ad290c2-ed8e28b694.zip and /dev/null differ diff --git a/.yarn/cache/@storybook-builder-vite-npm-8.4.7-d827020fdb-4726f7d6f8.zip b/.yarn/cache/@storybook-builder-vite-npm-8.4.7-d827020fdb-4726f7d6f8.zip new file mode 100644 index 000000000000..9734c24456cd Binary files /dev/null and b/.yarn/cache/@storybook-builder-vite-npm-8.4.7-d827020fdb-4726f7d6f8.zip differ diff --git a/.yarn/cache/@storybook-components-npm-8.4.7-1324dbb8c5-e39fb81e83.zip b/.yarn/cache/@storybook-components-npm-8.4.7-1324dbb8c5-e39fb81e83.zip new file mode 100644 index 000000000000..9244de1c5d15 Binary files /dev/null and b/.yarn/cache/@storybook-components-npm-8.4.7-1324dbb8c5-e39fb81e83.zip differ diff --git a/.yarn/cache/@storybook-csf-plugin-npm-8.2.9-ad9f21b845-514171f66a.zip b/.yarn/cache/@storybook-csf-plugin-npm-8.2.9-ad9f21b845-514171f66a.zip deleted file mode 100644 index a4fcd8d48e7c..000000000000 Binary files a/.yarn/cache/@storybook-csf-plugin-npm-8.2.9-ad9f21b845-514171f66a.zip and /dev/null differ diff --git a/.yarn/cache/@storybook-csf-plugin-npm-8.4.7-21bff48449-d9006d1a50.zip b/.yarn/cache/@storybook-csf-plugin-npm-8.4.7-21bff48449-d9006d1a50.zip new file mode 100644 index 000000000000..2c279da72712 Binary files /dev/null and b/.yarn/cache/@storybook-csf-plugin-npm-8.4.7-21bff48449-d9006d1a50.zip differ diff --git a/.yarn/cache/@storybook-manager-api-npm-8.4.7-bff0bd07c6-2b826ec55d.zip b/.yarn/cache/@storybook-manager-api-npm-8.4.7-bff0bd07c6-2b826ec55d.zip new file mode 100644 index 000000000000..e2ee6beb00e7 Binary files /dev/null and b/.yarn/cache/@storybook-manager-api-npm-8.4.7-bff0bd07c6-2b826ec55d.zip differ diff --git a/.yarn/cache/@storybook-preview-api-npm-8.4.7-5f4a091585-1c467bb2c1.zip b/.yarn/cache/@storybook-preview-api-npm-8.4.7-5f4a091585-1c467bb2c1.zip new file mode 100644 index 000000000000..cdd08c35ecd1 Binary files /dev/null and b/.yarn/cache/@storybook-preview-api-npm-8.4.7-5f4a091585-1c467bb2c1.zip differ diff --git a/.yarn/cache/@storybook-theming-npm-8.4.7-2a12232835-47d29993c3.zip b/.yarn/cache/@storybook-theming-npm-8.4.7-2a12232835-47d29993c3.zip new file mode 100644 index 000000000000..a4df4d9bdb49 Binary files /dev/null and b/.yarn/cache/@storybook-theming-npm-8.4.7-2a12232835-47d29993c3.zip differ diff --git a/.yarn/cache/@storybook-web-components-npm-8.2.9-f1691d0e15-9bac46a5d7.zip b/.yarn/cache/@storybook-web-components-npm-8.2.9-f1691d0e15-9bac46a5d7.zip deleted file mode 100644 index de40a38a2a74..000000000000 Binary files a/.yarn/cache/@storybook-web-components-npm-8.2.9-f1691d0e15-9bac46a5d7.zip and /dev/null differ diff --git a/.yarn/cache/@storybook-web-components-npm-8.4.7-9ecac433d2-1f35b2e2b7.zip b/.yarn/cache/@storybook-web-components-npm-8.4.7-9ecac433d2-1f35b2e2b7.zip new file mode 100644 index 000000000000..ba90d0a2af14 Binary files /dev/null and b/.yarn/cache/@storybook-web-components-npm-8.4.7-9ecac433d2-1f35b2e2b7.zip differ diff --git a/.yarn/cache/@storybook-web-components-vite-npm-8.2.9-3bd41c0e59-7382d9d2d7.zip b/.yarn/cache/@storybook-web-components-vite-npm-8.2.9-3bd41c0e59-7382d9d2d7.zip deleted file mode 100644 index bfd49d7af875..000000000000 Binary files a/.yarn/cache/@storybook-web-components-vite-npm-8.2.9-3bd41c0e59-7382d9d2d7.zip and /dev/null differ diff --git a/.yarn/cache/@storybook-web-components-vite-npm-8.4.7-19755b8e75-4921e34b84.zip b/.yarn/cache/@storybook-web-components-vite-npm-8.4.7-19755b8e75-4921e34b84.zip new file mode 100644 index 000000000000..0be99238129c Binary files /dev/null and b/.yarn/cache/@storybook-web-components-vite-npm-8.4.7-19755b8e75-4921e34b84.zip differ diff --git a/.yarn/cache/@types-find-cache-dir-npm-3.2.1-07fd2b6e78-bf5c4e96da.zip b/.yarn/cache/@types-find-cache-dir-npm-3.2.1-07fd2b6e78-bf5c4e96da.zip deleted file mode 100644 index 107a9901c5a3..000000000000 Binary files a/.yarn/cache/@types-find-cache-dir-npm-3.2.1-07fd2b6e78-bf5c4e96da.zip and /dev/null differ diff --git a/.yarn/cache/to-fast-properties-npm-2.0.0-0dc60cc481-be2de62fe5.zip b/.yarn/cache/to-fast-properties-npm-2.0.0-0dc60cc481-be2de62fe5.zip deleted file mode 100644 index bed5e126bb77..000000000000 Binary files a/.yarn/cache/to-fast-properties-npm-2.0.0-0dc60cc481-be2de62fe5.zip and /dev/null differ diff --git a/config/jest-config-carbon/package.json b/config/jest-config-carbon/package.json index 8e03bc9e5815..455b944843bf 100644 --- a/config/jest-config-carbon/package.json +++ b/config/jest-config-carbon/package.json @@ -2,7 +2,7 @@ "name": "jest-config-carbon", "private": true, "description": "Jest configuration and preset for Carbon", - "version": "1.16.0", + "version": "1.17.0", "license": "Apache-2.0", "main": "index.js", "repository": { diff --git a/e2e/components/Accordion/Accordion-test.avt.e2e.js b/e2e/components/Accordion/Accordion-test.avt.e2e.js index 7a224b0176a7..f707de245bca 100644 --- a/e2e/components/Accordion/Accordion-test.avt.e2e.js +++ b/e2e/components/Accordion/Accordion-test.avt.e2e.js @@ -128,7 +128,7 @@ test.describe('@avt Accordion', () => { test('@avt-advanced-states disabled', async ({ page }) => { await visitStory(page, { component: 'Accordion', - id: 'components-accordion--playground', + id: 'components-accordion--default', globals: { theme: 'white', }, diff --git a/e2e/components/ContainedList/ContainedList-test.e2e.js b/e2e/components/ContainedList/ContainedList-test.e2e.js index 0e49ff450879..2e72ecef778b 100644 --- a/e2e/components/ContainedList/ContainedList-test.e2e.js +++ b/e2e/components/ContainedList/ContainedList-test.e2e.js @@ -78,14 +78,6 @@ test.describe('ContainedList', () => { }); }); - test('playground @vrt', async ({ page }) => { - await snapshotStory(page, { - component: 'ContainedList', - id: 'components-containedlist--playground', - theme, - }); - }); - test('with-expandable-search @vrt', async ({ page }) => { await snapshotStory(page, { component: 'ContainedList', diff --git a/e2e/components/DataTable/DataTable-test.avt.e2e.js b/e2e/components/DataTable/DataTable-test.avt.e2e.js index 6b687af0cfc1..c732e067d412 100644 --- a/e2e/components/DataTable/DataTable-test.avt.e2e.js +++ b/e2e/components/DataTable/DataTable-test.avt.e2e.js @@ -276,21 +276,6 @@ test.describe('@avt DataTable', () => { 'components-datatable-selection--default' ); }); - test.skip('@avt-advanced-states with-radio-expansion', async ({ page }) => { - await visitStory(page, { - component: 'DataTable', - id: 'components-datatable-dynamic--playground', - globals: { - theme: 'white', - }, - args: { - radio: true, - }, - }); - await expect(page).toHaveNoACViolations( - 'components-datatable-with-radio-expansion' - ); - }); test('@avt-advanced-states with-selection-and-sorting', async ({ page, }) => { diff --git a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js index 874996c618c2..9f9a0ede3b3a 100644 --- a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js +++ b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js @@ -36,7 +36,7 @@ test.describe('@avt DatePicker', () => { test('@avt-advanced-states disabled', async ({ page }) => { await visitStory(page, { component: 'DatePicker', - id: 'components-datepicker--playground', + id: 'components-datepicker--default', globals: { theme: 'white', }, @@ -65,7 +65,7 @@ test.describe('@avt DatePicker', () => { test.skip('@avt-advanced-states open', async ({ page }) => { await visitStory(page, { component: 'DatePicker', - id: 'components-datepicker--playground', + id: 'components-datepicker--default', globals: { theme: 'white', }, diff --git a/e2e/components/FileUploader/FileUploader-test.avt.e2e.js b/e2e/components/FileUploader/FileUploader-test.avt.e2e.js index 5f2a02ad9b0a..9646a78ddf11 100644 --- a/e2e/components/FileUploader/FileUploader-test.avt.e2e.js +++ b/e2e/components/FileUploader/FileUploader-test.avt.e2e.js @@ -25,7 +25,7 @@ test.describe('@avt FileUploader', () => { test('@avt-advanced-states with upload', async ({ page }) => { await visitStory(page, { component: 'FileUploader', - id: 'components-fileuploader--playground', + id: 'components-fileuploader--default', globals: { theme: 'white', }, diff --git a/e2e/components/Menu/Menu-test.avt.e2e.js b/e2e/components/Menu/Menu-test.avt.e2e.js index 82ecabf55a07..15bc503ee449 100644 --- a/e2e/components/Menu/Menu-test.avt.e2e.js +++ b/e2e/components/Menu/Menu-test.avt.e2e.js @@ -14,7 +14,7 @@ test.describe('@avt Menu', () => { test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'Menu', - id: 'components-menu--playground', + id: 'components-menu--default', globals: { theme: 'white', }, @@ -25,7 +25,7 @@ test.describe('@avt Menu', () => { test.fixme('@avt-keyboard-nav Menu', async ({ page }) => { await visitStory(page, { component: 'Menu', - id: 'components-menu--playground', + id: 'components-menu--default', globals: { theme: 'white', }, diff --git a/e2e/components/Menu/Menu-test.e2e.js b/e2e/components/Menu/Menu-test.e2e.js index 7541bc740e50..4c2cc4e31316 100644 --- a/e2e/components/Menu/Menu-test.e2e.js +++ b/e2e/components/Menu/Menu-test.e2e.js @@ -17,7 +17,7 @@ test.describe('Menu', () => { test('menu @vrt', async ({ page }) => { await snapshotStory(page, { component: 'Menu', - id: 'components-menu--playground', + id: 'components-menu--default', theme, }); }); diff --git a/e2e/components/Notifications/Notifications-test.avt.e2e.js b/e2e/components/Notifications/Notifications-test.avt.e2e.js index 8604812505b7..45518cfd2555 100644 --- a/e2e/components/Notifications/Notifications-test.avt.e2e.js +++ b/e2e/components/Notifications/Notifications-test.avt.e2e.js @@ -70,7 +70,7 @@ test.describe('@avt Notifications', () => { test('@avt-advanced-states actionable info', async ({ page }) => { await visitStory(page, { component: 'Notifications', - id: 'components-notifications-actionable--playground', + id: 'components-notifications-actionable--default', globals: { theme: 'white', args: { @@ -84,7 +84,7 @@ test.describe('@avt Notifications', () => { test('@avt-advanced-states actionable info-square', async ({ page }) => { await visitStory(page, { component: 'Notifications', - id: 'components-notifications-actionable--playground', + id: 'components-notifications-actionable--default', globals: { theme: 'white', args: { @@ -100,7 +100,7 @@ test.describe('@avt Notifications', () => { test('@avt-advanced-states actionable success', async ({ page }) => { await visitStory(page, { component: 'Notifications', - id: 'components-notifications-actionable--playground', + id: 'components-notifications-actionable--default', globals: { theme: 'white', args: { @@ -114,7 +114,7 @@ test.describe('@avt Notifications', () => { test('@avt-advanced-states actionable warning', async ({ page }) => { await visitStory(page, { component: 'Notifications', - id: 'components-notifications-actionable--playground', + id: 'components-notifications-actionable--default', globals: { theme: 'white', args: { @@ -128,7 +128,7 @@ test.describe('@avt Notifications', () => { test('@avt-advanced-states actionable warning-alt', async ({ page }) => { await visitStory(page, { component: 'Notifications', - id: 'components-notifications-actionable--playground', + id: 'components-notifications-actionable--default', globals: { theme: 'white', args: { @@ -146,7 +146,7 @@ test.describe('@avt Notifications', () => { }) => { await visitStory(page, { component: 'Notifications', - id: 'components-notifications-actionable--playground', + id: 'components-notifications-actionable--default', globals: { theme: 'white', args: { @@ -165,7 +165,7 @@ test.describe('@avt Notifications', () => { }) => { await visitStory(page, { component: 'Notifications', - id: 'components-notifications-actionable--playground', + id: 'components-notifications-actionable--default', globals: { theme: 'white', args: { @@ -184,7 +184,7 @@ test.describe('@avt Notifications', () => { }) => { await visitStory(page, { component: 'Notifications', - id: 'components-notifications-actionable--playground', + id: 'components-notifications-actionable--default', globals: { theme: 'white', args: { @@ -203,7 +203,7 @@ test.describe('@avt Notifications', () => { }) => { await visitStory(page, { component: 'Notifications', - id: 'components-notifications-actionable--playground', + id: 'components-notifications-actionable--default', globals: { theme: 'white', args: { @@ -222,7 +222,7 @@ test.describe('@avt Notifications', () => { }) => { await visitStory(page, { component: 'Notifications', - id: 'components-notifications-actionable--playground', + id: 'components-notifications-actionable--default', globals: { theme: 'white', args: { diff --git a/e2e/components/Popover/Popover-test.e2e.js b/e2e/components/Popover/Popover-test.e2e.js index 4b54cd5ad81a..3dfa8e5c6887 100644 --- a/e2e/components/Popover/Popover-test.e2e.js +++ b/e2e/components/Popover/Popover-test.e2e.js @@ -18,7 +18,7 @@ test.describe('Popover', () => { test('Popover @vrt', async ({ page }) => { await snapshotStory(page, { component: 'Popover', - id: 'components-popover--playground', + id: 'components-popover--default', theme, }); }); diff --git a/e2e/components/RadioButton/RadioButton-test.avt.e2e.js b/e2e/components/RadioButton/RadioButton-test.avt.e2e.js index f48aa6e04f0f..400362451bd5 100644 --- a/e2e/components/RadioButton/RadioButton-test.avt.e2e.js +++ b/e2e/components/RadioButton/RadioButton-test.avt.e2e.js @@ -62,7 +62,7 @@ test.describe('@avt RadioButton', () => { test('@avt-advanced-states - invalid state', async ({ page }) => { await visitStory(page, { component: 'RadioButton', - id: 'components-radiobutton--playground', + id: 'components-radiobutton--default', globals: { theme: 'white', }, @@ -79,7 +79,7 @@ test.describe('@avt RadioButton', () => { test('@avt-advanced-states - warn state', async ({ page }) => { await visitStory(page, { component: 'RadioButton', - id: 'components-radiobutton--playground', + id: 'components-radiobutton--default', globals: { theme: 'white', }, @@ -96,7 +96,7 @@ test.describe('@avt RadioButton', () => { test('@avt-advanced-states - disabled state', async ({ page }) => { await visitStory(page, { component: 'RadioButton', - id: 'components-radiobutton--playground', + id: 'components-radiobutton--default', globals: { theme: 'white', }, @@ -112,7 +112,7 @@ test.describe('@avt RadioButton', () => { test('@avt-advanced-states - read only state', async ({ page }) => { await visitStory(page, { component: 'RadioButton', - id: 'components-radiobutton--playground', + id: 'components-radiobutton--default', globals: { theme: 'white', }, diff --git a/e2e/components/TextArea/TextArea-test.avt.e2e.js b/e2e/components/TextArea/TextArea-test.avt.e2e.js index 032edd56d247..5b0eb4fe96f7 100644 --- a/e2e/components/TextArea/TextArea-test.avt.e2e.js +++ b/e2e/components/TextArea/TextArea-test.avt.e2e.js @@ -25,7 +25,7 @@ test.describe('@avt TextArea', () => { test('@avt-advanced-states invalid', async ({ page }) => { await visitStory(page, { component: 'TextArea', - id: 'components-textarea--playground', + id: 'components-textarea--default', globals: { theme: 'white', }, @@ -39,7 +39,7 @@ test.describe('@avt TextArea', () => { test('@avt-advanced-states warn', async ({ page }) => { await visitStory(page, { component: 'TextArea', - id: 'components-textarea--playground', + id: 'components-textarea--default', globals: { theme: 'white', }, @@ -64,7 +64,7 @@ test.describe('@avt TextArea', () => { test('@avt-keyboard-nav TextArea keyboard counter', async ({ page }) => { await visitStory(page, { component: 'TextArea', - id: 'components-textarea--playground', + id: 'components-textarea--default', globals: { theme: 'white', }, diff --git a/e2e/components/TextInput/TextInput-test.avt.e2e.js b/e2e/components/TextInput/TextInput-test.avt.e2e.js index e7495e4a3146..816757902960 100644 --- a/e2e/components/TextInput/TextInput-test.avt.e2e.js +++ b/e2e/components/TextInput/TextInput-test.avt.e2e.js @@ -25,7 +25,7 @@ test.describe('@avt TextInput', () => { test('@avt-advanced-states - disabled', async ({ page }) => { await visitStory(page, { component: 'TextInput', - id: 'components-textinput--playground', + id: 'components-textinput--default', globals: { theme: 'white', }, diff --git a/e2e/components/Toggletip/Toggletip-test.avt.e2e.js b/e2e/components/Toggletip/Toggletip-test.avt.e2e.js index 69b984f68a2d..b8dff6509dd2 100644 --- a/e2e/components/Toggletip/Toggletip-test.avt.e2e.js +++ b/e2e/components/Toggletip/Toggletip-test.avt.e2e.js @@ -31,9 +31,6 @@ test.describe('@avt Toggletip', () => { }, }); - // Checking if the defaultOpen is working - await expect(page.locator('.cds--popover--open')).toBeVisible(); - // Checking first Toggletip interaction await page.keyboard.press('Tab'); await expect(page.getByLabel('Show information').first()).toBeFocused(); @@ -46,12 +43,5 @@ test.describe('@avt Toggletip', () => { await expect(page.getByRole('button', { name: 'Button' })).toBeFocused(); await page.keyboard.press('Tab'); await expect(page.locator('.cds--popover--open')).toBeHidden(); - - // Checking second Toggletip interaction and close on Escape key - await expect(page.getByLabel('Show information').last()).toBeFocused(); - await page.keyboard.press('Enter'); - await expect(page.locator('.cds--popover--open')).toBeVisible(); - await page.keyboard.press('Escape'); - await expect(page.locator('.cds--popover--open')).toBeHidden(); }); }); diff --git a/examples/class-prefix/package.json b/examples/class-prefix/package.json index f00cee626c70..06e1ed5cfa18 100644 --- a/examples/class-prefix/package.json +++ b/examples/class-prefix/package.json @@ -1,7 +1,7 @@ { "name": "class-prefix", "private": true, - "version": "0.69.0", + "version": "0.70.0", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.72.0", + "@carbon/react": "^1.73.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/codesandbox-styles/package.json b/examples/codesandbox-styles/package.json index 7acdc811bb25..e850bb3c5be9 100644 --- a/examples/codesandbox-styles/package.json +++ b/examples/codesandbox-styles/package.json @@ -1,7 +1,7 @@ { "name": "codesandbox-styles", "private": true, - "version": "0.74.0", + "version": "0.75.0", "type": "module", "scripts": { "dev": "vite" @@ -11,6 +11,6 @@ "vite": "^4.3.8" }, "dependencies": { - "@carbon/styles": "^1.71.0" + "@carbon/styles": "^1.72.0" } } diff --git a/examples/custom-theme/package.json b/examples/custom-theme/package.json index cb1ad139788b..3d2809d4fea3 100644 --- a/examples/custom-theme/package.json +++ b/examples/custom-theme/package.json @@ -1,7 +1,7 @@ { "name": "custom-theme", "private": true, - "version": "0.70.0", + "version": "0.71.0", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.72.0", + "@carbon/react": "^1.73.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/id-prefix/package.json b/examples/id-prefix/package.json index cb2b8d8992fe..fe334a1a974f 100644 --- a/examples/id-prefix/package.json +++ b/examples/id-prefix/package.json @@ -1,7 +1,7 @@ { "name": "id-prefix", "private": true, - "version": "0.69.0", + "version": "0.70.0", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.72.0", + "@carbon/react": "^1.73.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/light-dark-mode/package.json b/examples/light-dark-mode/package.json index 01fc58ae3d8e..c10b2fd8dc5b 100644 --- a/examples/light-dark-mode/package.json +++ b/examples/light-dark-mode/package.json @@ -1,7 +1,7 @@ { "name": "examples-light-dark", "private": true, - "version": "0.70.0", + "version": "0.71.0", "scripts": { "build": "next build", "dev": "next dev", @@ -9,7 +9,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^1.72.0", + "@carbon/react": "^1.73.0", "next": "14.1.1", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 576438e21e1c..b84821676e4c 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -1,7 +1,7 @@ { "name": "examples-nextjs", "private": true, - "version": "0.72.0", + "version": "0.73.0", "scripts": { "build": "next build", "dev": "next dev", @@ -9,7 +9,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^1.72.0", + "@carbon/react": "^1.73.0", "next": "14.1.1", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/examples/v10-token-compat-in-v11/package.json b/examples/v10-token-compat-in-v11/package.json index beb3e0a5f583..26a3acf5d75b 100644 --- a/examples/v10-token-compat-in-v11/package.json +++ b/examples/v10-token-compat-in-v11/package.json @@ -1,7 +1,7 @@ { "name": "v10-token-compat-in-v11", "private": true, - "version": "0.70.0", + "version": "0.71.0", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.72.0", + "@carbon/react": "^1.73.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/vite/package.json b/examples/vite/package.json index 36dcf17f2540..3e5dec992eec 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -1,7 +1,7 @@ { "name": "vite", "private": true, - "version": "0.70.0", + "version": "0.71.0", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.72.0", + "@carbon/react": "^1.73.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/packages/carbon-components-react/package.json b/packages/carbon-components-react/package.json index d39b07943d92..e1968263dd14 100644 --- a/packages/carbon-components-react/package.json +++ b/packages/carbon-components-react/package.json @@ -2,7 +2,7 @@ "name": "carbon-components-react", "private": true, "description": "The Carbon Design System is IBM’s open-source design system for products and experiences. This package reached end of support on September 30, 2024 and will not receive any more updates.", - "version": "8.72.0", + "version": "8.73.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -43,8 +43,8 @@ "sass": "^1.33.0" }, "dependencies": { - "@carbon/react": "^1.72.0", - "@carbon/styles": "^1.71.0", + "@carbon/react": "^1.73.0", + "@carbon/styles": "^1.72.0", "@ibm/telemetry-js": "^1.5.0", "chalk": "1.1.3" }, diff --git a/packages/carbon-components/package.json b/packages/carbon-components/package.json index 2ae5c02dda66..249cb89497c8 100644 --- a/packages/carbon-components/package.json +++ b/packages/carbon-components/package.json @@ -2,7 +2,7 @@ "name": "carbon-components", "private": true, "description": "The Carbon Design System is IBM’s open-source design system for products and experiences. This package reached end of support on September 30, 2024 and will not receive any more updates.", - "version": "11.71.0", + "version": "11.72.0", "license": "Apache-2.0", "repository": { "type": "git", @@ -44,7 +44,7 @@ "sass": "^1.33.0" }, "dependencies": { - "@carbon/styles": "^1.71.0", + "@carbon/styles": "^1.72.0", "@ibm/telemetry-js": "^1.5.0", "chalk": "1.1.3" }, diff --git a/packages/elements/package.json b/packages/elements/package.json index addc904c6d63..8395f30dda29 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/elements", "description": "A collection of design elements in code for the IBM Design Language", - "version": "11.57.0", + "version": "11.58.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -39,12 +39,12 @@ }, "dependencies": { "@carbon/colors": "^11.28.0", - "@carbon/grid": "^11.29.0", + "@carbon/grid": "^11.30.0", "@carbon/icons": "^11.53.0", "@carbon/layout": "^11.28.0", "@carbon/motion": "^11.24.0", - "@carbon/themes": "^11.43.0", - "@carbon/type": "^11.33.0", + "@carbon/themes": "^11.44.0", + "@carbon/type": "^11.34.0", "@ibm/telemetry-js": "^1.5.0" }, "devDependencies": { diff --git a/packages/grid/package.json b/packages/grid/package.json index c6bd67c7b982..9cf6784b6f7c 100644 --- a/packages/grid/package.json +++ b/packages/grid/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/grid", "description": "Grid for digital and software products using the Carbon Design System", - "version": "11.29.0", + "version": "11.30.0", "license": "Apache-2.0", "repository": { "type": "git", diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss index 6913cf61ffb5..3a0c50d2b464 100644 --- a/packages/grid/scss/_css-grid.scss +++ b/packages/grid/scss/_css-grid.scss @@ -138,7 +138,7 @@ // Narrow .#{$prefix}--css-grid--narrow { - --cds-grid-gutter-start: 0; + --cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */ } // Condensed @@ -187,7 +187,7 @@ } .#{$prefix}--subgrid--narrow { - --cds-grid-gutter-start: 0; + --cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */ --cds-grid-gutter-end: #{math.div($grid-gutter, 2)}; --cds-grid-column-hang: #{math.div($grid-gutter, 2)}; } diff --git a/packages/pictograms-react/package.json b/packages/pictograms-react/package.json index a2ca52df4666..b75ade3af8d6 100644 --- a/packages/pictograms-react/package.json +++ b/packages/pictograms-react/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/pictograms-react", "description": "React components for pictograms in digital and software products using the Carbon Design System", - "version": "11.69.0", + "version": "11.70.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -45,7 +45,7 @@ }, "devDependencies": { "@carbon/icon-build-helpers": "^1.32.0", - "@carbon/pictograms": "^12.43.0", + "@carbon/pictograms": "^12.44.0", "rimraf": "^6.0.0" }, "sideEffects": false diff --git a/packages/pictograms/package.json b/packages/pictograms/package.json index 586214085d8b..2f537d0a92d0 100644 --- a/packages/pictograms/package.json +++ b/packages/pictograms/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/pictograms", "description": "Pictograms for digital and software products using the Carbon Design System", - "version": "12.43.0", + "version": "12.44.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 9910c688946b..fb2430d115ee 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -1973,6 +1973,17 @@ Map { }, }, }, + "TableDecoratorRow": Object { + "displayName": "TableDecoratorRow", + "propTypes": Object { + "className": Object { + "type": "string", + }, + "decorator": Object { + "type": "node", + }, + }, + }, "TableExpandHeader": Object { "propTypes": Object { "aria-controls": Object { @@ -8058,6 +8069,17 @@ Map { }, }, }, + "TableDecoratorRow" => Object { + "displayName": "TableDecoratorRow", + "propTypes": Object { + "className": Object { + "type": "string", + }, + "decorator": Object { + "type": "node", + }, + }, + }, "TableExpandHeader" => Object { "propTypes": Object { "aria-controls": Object { @@ -9440,6 +9462,9 @@ Map { ], "type": "oneOf", }, + "alignmentAxisOffset": Object { + "type": "number", + }, "as": Object { "type": "elementType", }, diff --git a/packages/react/code-connect/DatePicker/DatePicker.figma.tsx b/packages/react/code-connect/DatePicker/DatePicker.figma.tsx index d6cb0f47dfd6..f38a41be19b3 100644 --- a/packages/react/code-connect/DatePicker/DatePicker.figma.tsx +++ b/packages/react/code-connect/DatePicker/DatePicker.figma.tsx @@ -40,10 +40,10 @@ figma.connect( readOnly: figma.enum('State', { 'Read-only': true, }), - // hideLabel: figma.boolean('Show label ', { // extra space after label in Figma property name causing code connect to break - // true: false, - // false: true, - // }), + hideLabel: figma.boolean('Show label', { + true: false, + false: true, + }), }, example: ({ ...props }) => ( diff --git a/packages/react/code-connect/UIShell/Header.figma.tsx b/packages/react/code-connect/UIShell/Header.figma.tsx index d1f7903571b2..6163aa6a1a4e 100644 --- a/packages/react/code-connect/UIShell/Header.figma.tsx +++ b/packages/react/code-connect/UIShell/Header.figma.tsx @@ -19,7 +19,7 @@ import figma from '@figma/code-connect'; figma.connect( Header, - 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2213-17092&t=A3oys5odsvKkcDFA-4', + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-Carbon-Design-System?node-id=92123-1663&t=UFUf7yvv8SJyoEK1-4', { props: { prefix: figma.boolean('Site prefix', { diff --git a/packages/react/package.json b/packages/react/package.json index 22b4ed966a07..ab06708bdf22 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/react", "description": "React components for the Carbon Design System", - "version": "1.72.0", + "version": "1.73.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -52,7 +52,7 @@ "@carbon/feature-flags": "^0.24.0", "@carbon/icons-react": "^11.53.0", "@carbon/layout": "^11.28.0", - "@carbon/styles": "^1.71.0", + "@carbon/styles": "^1.72.0", "@floating-ui/react": "^0.26.0", "@ibm/telemetry-js": "^1.5.0", "classnames": "2.5.1", @@ -78,12 +78,13 @@ "@babel/preset-react": "^7.24.7", "@babel/preset-typescript": "^7.24.7", "@carbon/test-utils": "^10.34.0", - "@carbon/themes": "^11.43.0", - "@figma/code-connect": "^1.2.2", + "@carbon/themes": "^11.44.0", + "@figma/code-connect": "^1.2.4", "@rollup/plugin-babel": "^6.0.0", "@rollup/plugin-commonjs": "^28.0.0", "@rollup/plugin-node-resolve": "^15.0.0", "@rollup/plugin-typescript": "^11.0.0", + "@stackblitz/sdk": "^1.11.0", "@storybook/addon-a11y": "^8.4.5", "@storybook/addon-actions": "^8.4.5", "@storybook/addon-docs": "^8.4.5", diff --git a/packages/react/previewer/codePreviewer.tsx b/packages/react/previewer/codePreviewer.tsx new file mode 100644 index 000000000000..49fd5a8f83c9 --- /dev/null +++ b/packages/react/previewer/codePreviewer.tsx @@ -0,0 +1,102 @@ +import React from 'react'; +import StackBlitzSDK from '@stackblitz/sdk'; +import sdk, { Project } from '@stackblitz/sdk'; +import { index, main, packageJson, style, viteConfig } from './configFiles'; +import * as carbonComponents from '../src/index'; +import * as carbonIconsReact from '@carbon/icons-react'; + +export const stackblitzPrefillConfig = ( + code: any, + // components: Array, // Add all required components to be imported from @carbon/react + // icons: Array // Add all required icons to be imported from @carbon/icons-react + customImport: string +) => { + const storyCode = code.parameters.docs.source.originalSource + .replace(/^\s*args\s*=>\s*{\s*|}\s*;?\s*$/g, '') + // Before: args => { } + // After: + .replace(/^\s*\(\)\s*=>\s*{/g, '') // We could delete this one if all stories had the return statement + // Before: () => { + // After: + .replace(/^\s*args\s*=>/g, 'return') + // Before: args => { + // After: return + .replace(/^"|"$/g, '') + // Before: "" + // After: + .replace(/{\.\.\.args}/g, '') + // Before: + // After: + .replace(/onChange=\{(args\.onChange|action\('onChange'\))\}\s*/g, '') + .replace(/onClick=\{(args\.onClick|action\('onClick'\))\}\s*/g, ''); + // Remove the onClick/onChange action + + // Function to find all matches + const findComponentImports = ( + componentNames: Array, + storyCode: string + ) => { + return componentNames.filter((componentName) => { + // Grab the component and add the "<" resulting in"`, storyCode: string) => { + return iconNames.filter((iconName) => { + // Grab the component to convert in " 0 ? `import { ${matchedIcons} } from "@carbon/icons-react";` : ''} + export default function App() { + ${storyCode} + } + `; + + const stackblitzFileConfig: Project = { + title: 'Carbon demo', + description: + 'Run official live example code for a Carbon component, created by Carbon Design System on StackBlitz', + template: 'node', + files: { + 'package.json': packageJson, + 'index.html': index, + 'vite.config.js': viteConfig, + 'src/main.jsx': main, + 'src/App.jsx': app, + 'src/index.scss': style, + }, + }; + + StackBlitzSDK.openProject(stackblitzFileConfig, { + newWindow: true, + openFile: 'src/App.jsx', + }); +}; diff --git a/packages/react/previewer/configFiles.tsx b/packages/react/previewer/configFiles.tsx new file mode 100644 index 000000000000..a1e69e03fcfc --- /dev/null +++ b/packages/react/previewer/configFiles.tsx @@ -0,0 +1,70 @@ +export const packageJson: string = `{ + "name": "vite", + "private": true, + "version": "0.70.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@carbon/react": "latest", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@vitejs/plugin-react": "4.0.0", + "sass": "^1.77.7", + "vite": "^4.3.8" + } +}`; + +export const index: string = ` + + + + + + + Vite App + + +
+ + + + +`; + +export const viteConfig: string = ` +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}); +`; + +export const main: string = ` +import './index.scss'; + +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import App from './App'; + +const domNode = document.getElementById('root'); +const root = createRoot(domNode); +root.render( + + + +); +`; + +export const style: string = ` +@use '@carbon/react' with ( + $font-path: '@ibm/plex' +); +`; diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js index 3fc8a6767449..17cd9a659b01 100644 --- a/packages/react/src/__tests__/index-test.js +++ b/packages/react/src/__tests__/index-test.js @@ -205,6 +205,7 @@ describe('Carbon Components React', () => { "TableBody", "TableCell", "TableContainer", + "TableDecoratorRow", "TableExpandHeader", "TableExpandRow", "TableExpandedRow", diff --git a/packages/react/src/components/AILabel/index.tsx b/packages/react/src/components/AILabel/index.tsx index 7567efc84f78..7ce2a9af4c2a 100644 --- a/packages/react/src/components/AILabel/index.tsx +++ b/packages/react/src/components/AILabel/index.tsx @@ -193,6 +193,8 @@ export const AILabel = React.forwardRef( ? `${aiText} ${slugLabel || ariaLabel}` : `${aiText} ${aiTextLabel || textLabel}`; + const isSmallIcon = ['xs', '2xs', 'mini'].includes(size); + return (
{revertActive ? ( @@ -205,7 +207,11 @@ export const AILabel = React.forwardRef( ) : ( - + diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js index 85ac311d7976..b7a85c5caa16 100644 --- a/packages/react/src/components/Accordion/Accordion.stories.js +++ b/packages/react/src/components/Accordion/Accordion.stories.js @@ -29,8 +29,35 @@ export default { }, }; -export const Default = () => ( - +const sharedArgTypes = { + align: { + options: ['start', 'end'], + control: { type: 'select' }, + }, + children: { + control: false, + }, + className: { + control: false, + }, + disabled: { + control: { + type: 'boolean', + }, + }, + isFlush: { + control: { + type: 'boolean', + }, + }, + size: { + options: ['sm', 'md', 'lg'], + control: { type: 'select' }, + }, +}; + +export const Default = (args) => ( +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod @@ -55,7 +82,12 @@ export const Default = () => ( commodo consequat.

- + + Section 4 title (the title can be a node) + + }>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim @@ -66,7 +98,14 @@ export const Default = () => ( ); -export const Controlled = () => { +Default.args = { + disabled: false, + isFlush: false, +}; + +Default.argTypes = { ...sharedArgTypes }; + +export const Controlled = (args) => { const [expandAll, setExpandAll] = React.useState(false); return ( <> @@ -89,7 +128,7 @@ export const Controlled = () => { - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do @@ -127,8 +166,15 @@ export const Controlled = () => { ); }; -export const _WithLayer = () => ( - +Controlled.args = { + disabled: false, + isFlush: false, +}; + +Controlled.argTypes = { ...sharedArgTypes }; + +export const _WithLayer = (args) => ( +

@@ -166,6 +212,13 @@ export const _WithLayer = () => ( ); +WithLayer.args = { + disabled: false, + isFlush: false, +}; + +WithLayer.argTypes = { ...sharedArgTypes }; + export const Skeleton = (args) => ( ); @@ -174,75 +227,6 @@ Skeleton.decorators = [ (story) =>

{story()}
, ]; -export const Playground = (args) => ( - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. -

- - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. -

- - - - - - Section 4 title (the title can be a node) - - }> -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. -

- - -); - -Playground.args = { - disabled: false, - isFlush: false, -}; - -Playground.argTypes = { - align: { - options: ['start', 'end'], - control: { type: 'select' }, - }, - children: { - control: false, - }, - className: { - control: false, - }, - disabled: { - control: { - type: 'boolean', - }, - }, - isFlush: { - control: { - type: 'boolean', - }, - }, - size: { - options: ['sm', 'md', 'lg'], - control: { type: 'select' }, - }, -}; - Skeleton.args = { isFlush: false, }; diff --git a/packages/react/src/components/AspectRatio/AspectRatio.stories.js b/packages/react/src/components/AspectRatio/AspectRatio.stories.js index 3b79039d16fd..05fec5396137 100644 --- a/packages/react/src/components/AspectRatio/AspectRatio.stories.js +++ b/packages/react/src/components/AspectRatio/AspectRatio.stories.js @@ -29,26 +29,7 @@ export default { }, }; -export const Default = () => { - return ( - - - Content - - - Content - - - Content - - - Content - - - ); -}; - -export const Playground = { +export const Default = { render: ({ ratio, ...args }) => { return ( @@ -69,21 +50,15 @@ export const Playground = { }, }; -Playground.argTypes = { +Default.argTypes = { as: { - table: { - disable: true, - }, + control: false, }, children: { - table: { - disable: true, - }, + control: false, }, className: { - table: { - disable: true, - }, + control: false, }, ratio: { control: { diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js index d1605545a3f7..5bf74f259764 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js @@ -27,8 +27,16 @@ export default { }, }; -export const Default = () => ( - +const sharedArgTypes = { + children: { + table: { + disable: true, + }, + }, +}; + +export const Default = (args) => ( + Breadcrumb 1 @@ -38,8 +46,12 @@ export const Default = () => ( ); -export const BreadcrumbWithOverflowMenu = () => ( - +Default.argTypes = { + ...sharedArgTypes, +}; + +export const BreadcrumbWithOverflowMenu = (args) => ( + Breadcrumb 1 @@ -55,23 +67,8 @@ export const BreadcrumbWithOverflowMenu = () => ( ); -export const Skeleton = () => ; - -export const Playground = (args) => ( - - - Breadcrumb 1 - - Breadcrumb 2 - Breadcrumb 3 - Breadcrumb 4 - -); - -Playground.argTypes = { - children: { - table: { - disable: true, - }, - }, +BreadcrumbWithOverflowMenu.argTypes = { + ...sharedArgTypes, }; + +export const Skeleton = () => ; diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx index a46466ebea1a..5c07b5f4a1eb 100644 --- a/packages/react/src/components/Button/Button.mdx +++ b/packages/react/src/components/Button/Button.mdx @@ -3,6 +3,7 @@ import Button from '../Button'; import ButtonSet from '../ButtonSet'; import { Add, TrashCan } from '@carbon/icons-react'; import * as ButtonStories from './Button.stories'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; diff --git a/packages/react/src/components/Button/Button.stories.js b/packages/react/src/components/Button/Button.stories.js index 364a5321f6b9..551a58742178 100644 --- a/packages/react/src/components/Button/Button.stories.js +++ b/packages/react/src/components/Button/Button.stories.js @@ -12,6 +12,8 @@ import { default as Button, ButtonSkeleton } from '../Button'; import ButtonSet from '../ButtonSet'; import mdx from './Button.mdx'; import './button-story.scss'; +import { composeStories } from '@storybook/react'; +import * as stories from '../Breadcrumb/Breadcrumb.stories'; export default { title: 'Components/Button', diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js index 1c6da060394c..f792661649c1 100644 --- a/packages/react/src/components/Checkbox/Checkbox.stories.js +++ b/packages/react/src/components/Checkbox/Checkbox.stories.js @@ -39,21 +39,132 @@ export default { }, }; -export const Default = () => { - return ( - - - - - ); +const sharedArgs = { + helperText: 'Helper text goes here', + invalid: false, + invalidText: 'Invalid message goes here', + warn: false, + warnText: 'Warning message goes here', }; -export const Horizontal = () => { +const sharedArgTypes = { + helperText: { + description: 'Provide text for the form group for additional help', + control: { + type: 'text', + }, + }, + invalid: { + description: 'Specify whether the form group is currently invalid', + control: { + type: 'boolean', + }, + }, + invalidText: { + description: + 'Provide the text that is displayed when the form group is in an invalid state', + control: { + type: 'text', + }, + }, + legendText: { + description: + 'Provide the text to be rendered inside of the fieldset ', + control: { + type: 'text', + }, + }, + readOnly: { + description: 'Specify whether the CheckboxGroup is read-only', + control: { + type: 'boolean', + }, + }, + warn: { + description: 'Specify whether the form group is currently in warning state', + control: { + type: 'boolean', + }, + }, + warnText: { + description: + 'Provide the text that is displayed when the form group is in warning state', + control: { + type: 'text', + }, + }, + checked: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + defaultChecked: { + table: { + disable: true, + }, + }, + hideLabel: { + table: { + disable: true, + }, + }, + id: { + table: { + disable: true, + }, + }, + indeterminate: { + table: { + disable: true, + }, + }, + labelText: { + table: { + disable: true, + }, + }, + onChange: { + table: { + disable: true, + }, + }, + title: { + table: { + disable: true, + }, + }, + orientation: { + description: 'Provide how checkbox should be displayed', + control: 'select', + options: ['horizontal', 'vertical'], + }, +}; + +export const Default = (args) => ( + + + + +); + +Default.args = { + ...sharedArgs, +}; + +Default.argTypes = { ...sharedArgTypes }; + +export const Horizontal = (args) => { return ( + helperText="Helper text goes here" + {...args}> @@ -61,6 +172,10 @@ export const Horizontal = () => { ); }; +Horizontal.args = { ...sharedArgs }; + +Horizontal.argTypes = { ...sharedArgTypes }; + export const Single = () => { return ( <> @@ -122,15 +237,15 @@ const AILabelFunc = (kind) => ( ); -export const withAILabel = () => ( +export const withAILabel = (args) => (
- + - + ( - + (
); -export const Playground = (args) => ( - - - - - -); - -Playground.args = { - helperText: 'Helper text goes here', +withAILabel.args = { invalid: false, invalidText: 'Invalid message goes here', readOnly: false, @@ -182,100 +283,4 @@ Playground.args = { warnText: 'Warning message goes here', }; -Playground.argTypes = { - helperText: { - description: 'Provide text for the form group for additional help', - control: { - type: 'text', - }, - }, - invalid: { - description: 'Specify whether the form group is currently invalid', - control: { - type: 'boolean', - }, - }, - invalidText: { - description: - 'Provide the text that is displayed when the form group is in an invalid state', - control: { - type: 'text', - }, - }, - legendText: { - description: - 'Provide the text to be rendered inside of the fieldset ', - control: { - type: 'text', - }, - }, - readOnly: { - description: 'Specify whether the CheckboxGroup is read-only', - control: { - type: 'boolean', - }, - }, - warn: { - description: 'Specify whether the form group is currently in warning state', - control: { - type: 'boolean', - }, - }, - warnText: { - description: - 'Provide the text that is displayed when the form group is in warning state', - control: { - type: 'text', - }, - }, - checked: { - table: { - disable: true, - }, - }, - className: { - table: { - disable: true, - }, - }, - defaultChecked: { - table: { - disable: true, - }, - }, - hideLabel: { - table: { - disable: true, - }, - }, - id: { - table: { - disable: true, - }, - }, - indeterminate: { - table: { - disable: true, - }, - }, - labelText: { - table: { - disable: true, - }, - }, - onChange: { - table: { - disable: true, - }, - }, - title: { - table: { - disable: true, - }, - }, - orientation: { - description: 'Provide how checkbox should be displayed', - control: 'select', - options: ['horizontal', 'vertical'], - }, -}; +withAILabel.argTypes = { ...sharedArgTypes }; diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js index 7050fcae9801..452ad42ef309 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js @@ -135,37 +135,3 @@ export const Skeleton = () => (
); - -export const Playground = (args) => ( - - {'yarn add @carbon/react'} - -); - -Playground.argTypes = { - ['aria-label']: { - table: { - disable: true, - }, - }, - ariaLabel: { - table: { - disable: true, - }, - }, - children: { - table: { - disable: true, - }, - }, - onClick: { - table: { - disable: true, - }, - }, - type: { - table: { - disable: true, - }, - }, -}; diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx index d5dfa4adfee2..8f9d956e2e4c 100644 --- a/packages/react/src/components/ComboBox/ComboBox.mdx +++ b/packages/react/src/components/ComboBox/ComboBox.mdx @@ -1,6 +1,7 @@ import { ArgTypes, Canvas, Meta } from '@storybook/blocks'; import * as ComboBoxStories from './ComboBox.stories.js'; import ComboBox from '../ComboBox'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; @@ -71,9 +72,14 @@ For more information, checkout the Downshift `useCombobox` props ## typeahead Prop -The `typeahead` prop enables predictive text and autocomplete functionality in the ComboBox. When enabled, it displays inline suggestions as you type, using a built-in prefix-matching filter that ignores the `shouldFilterItem` prop. Pressing `Tab` will complete the input with the first matching suggestion, while arrow keys can still be used to navigate through filtered options. +The `typeahead` prop enables predictive text and autocomplete functionality in +the ComboBox. When enabled, it displays inline suggestions as you type, using a +built-in prefix-matching filter that ignores the `shouldFilterItem` prop. +Pressing `Tab` will complete the input with the first matching suggestion, while +arrow keys can still be used to navigate through filtered options. -When combined with the `allowCustomValue` prop, the ComboBox supports both custom values and typeahead suggestions. +When combined with the `allowCustomValue` prop, the ComboBox supports both +custom values and typeahead suggestions. ### Combobox `downshiftActions` @@ -140,7 +146,6 @@ You can use `selectedItem` for a fully controlled component. ```jsx - const options = [ { id: 'option-1', @@ -172,11 +177,12 @@ return ( titleText="Fully Controlled ComboBox title" helperText="Combobox helper text" /> -
+
@@ -184,7 +190,6 @@ return (
); - ``` ## `itemToElement` diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js index 451ace723902..7621e0c2d319 100644 --- a/packages/react/src/components/ComboBox/ComboBox.stories.js +++ b/packages/react/src/components/ComboBox/ComboBox.stories.js @@ -65,18 +65,139 @@ export default { }, }; -export const Default = () => ( -
- {}} - id="carbon-combobox" - items={items} - itemToString={(item) => (item ? item.text : '')} - titleText="ComboBox title" - helperText="Combobox helper text" - /> -
-); +const sharedArgTypes = { + ['aria-label']: { + table: { + disable: true, + }, + }, + ariaLabel: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + id: { + table: { + disable: true, + }, + }, + downshiftProps: { + table: { + disable: true, + }, + }, + initialSelectedItem: { + table: { + disable: true, + }, + }, + invalidText: { + control: 'text', + }, + items: { + table: { + disable: true, + }, + }, + itemToElement: { + table: { + disable: true, + }, + }, + itemToString: { + table: { + disable: true, + }, + }, + onChange: { + action: 'changed', + }, + onToggleClick: { + action: 'clicked', + }, + onInputChange: { + table: { + disable: true, + }, + }, + selectedItem: { + table: { + disable: true, + }, + }, + shouldFilterItem: { + table: { + disable: true, + }, + }, + translateWithId: { + table: { + disable: true, + }, + }, + titleText: { + table: { + disable: true, + }, + }, + type: { + table: { + disable: true, + }, + }, + warnText: { + control: 'text', + }, +}; + +export const Default = (args) => { + const items = [ + { + id: 'option-0', + text: 'An example option that is really long to show what should be done to handle long text', + }, + { + id: 'option-1', + text: 'Option 1', + }, + { + id: 'option-2', + text: 'Option 2', + }, + { + id: 'option-3', + text: 'Option 3 - a disabled item', + disabled: true, + }, + { + id: 'option-4', + text: 'Option 4', + }, + { + id: 'option-5', + text: 'Option 5', + }, + ]; + return ( +
+ (item ? item.text : '')} + titleText="ComboBox title" + helperText="Combobox helper text" + {...args} + /> +
+ ); +}; + +Default.argTypes = { ...sharedArgTypes }; export const AllowCustomValue = (args) => { const filterItems = (menu) => { @@ -120,7 +241,7 @@ export const AutocompleteWithTypeahead = (args) => { ); }; -export const ExperimentalAutoAlign = () => ( +export const ExperimentalAutoAlign = (args) => (
( titleText="ComboBox title" helperText="Combobox helper text" autoAlign={true} + {...args} />
); +ExperimentalAutoAlign.argTypes = { ...sharedArgTypes }; + AllowCustomValue.argTypes = { onChange: { action: 'onChange' }, }; -export const _WithLayer = () => ( +export const _WithLayer = (args) => ( {(layer) => (
@@ -151,12 +275,15 @@ export const _WithLayer = () => ( itemToString={(item) => (item ? item.text : '')} titleText="ComboBox title" helperText="Combobox helper text" + {...args} />
)} ); +_WithLayer.argTypes = { ...sharedArgTypes }; + const aiLabel = ( @@ -188,7 +315,7 @@ const aiLabel = ( ); -export const withAILabel = () => ( +export const withAILabel = (args) => (
{}} @@ -198,11 +325,14 @@ export const withAILabel = () => ( titleText="ComboBox title" helperText="Combobox helper text" decorator={aiLabel} + {...args} />
); -export const _fullyControlled = () => { +withAILabel.argTypes = { ...sharedArgTypes }; + +export const _fullyControlled = (args) => { const options = [ { id: 'option-1', @@ -232,6 +362,7 @@ export const _fullyControlled = () => { itemToString={(item) => (item ? item.text : '')} titleText="Fully Controlled ComboBox title" helperText="Combobox helper text" + {...args} />
{ ); }; -export const Playground = (args) => ( -
- (item ? item.text : '')} - titleText="ComboBox title" - helperText="Combobox helper text" - {...args} - /> -
-); +_fullyControlled.argTypes = { ...sharedArgTypes }; AutocompleteWithTypeahead.argTypes = { onChange: { action: 'onChange' }, }; - -Playground.argTypes = { - ['aria-label']: { - table: { - disable: true, - }, - }, - ariaLabel: { - table: { - disable: true, - }, - }, - className: { - table: { - disable: true, - }, - }, - id: { - table: { - disable: true, - }, - }, - downshiftProps: { - table: { - disable: true, - }, - }, - initialSelectedItem: { - table: { - disable: true, - }, - }, - invalidText: { - control: 'text', - }, - items: { - table: { - disable: true, - }, - }, - itemToElement: { - table: { - disable: true, - }, - }, - itemToString: { - table: { - disable: true, - }, - }, - onChange: { - action: 'changed', - }, - onToggleClick: { - action: 'clicked', - }, - onInputChange: { - table: { - disable: true, - }, - }, - selectedItem: { - table: { - disable: true, - }, - }, - shouldFilterItem: { - table: { - disable: true, - }, - }, - translateWithId: { - table: { - disable: true, - }, - }, - titleText: { - table: { - disable: true, - }, - }, - type: { - table: { - disable: true, - }, - }, - warnText: { - control: 'text', - }, -}; diff --git a/packages/react/src/components/ComboButton/ComboButton.mdx b/packages/react/src/components/ComboButton/ComboButton.mdx index b50630639743..2c5d5a79825b 100644 --- a/packages/react/src/components/ComboButton/ComboButton.mdx +++ b/packages/react/src/components/ComboButton/ComboButton.mdx @@ -39,8 +39,8 @@ If it seems your specified `menuAlignment` isn't working, it's because we prioritize ensuring the Menu remains visible. We calculate the optimal position to display the Menu in case the provided `menuAlignment` obscures it. -We encourage you to play around in the Storybook playground to better understand -the `menuAlignment` prop. +We encourage you to play around in the Storybook Default stories to better +understand the `menuAlignment` prop. ## Component API diff --git a/packages/react/src/components/ComboButton/ComboButton.stories.js b/packages/react/src/components/ComboButton/ComboButton.stories.js index fed5415c0d8e..2d7d4335df03 100644 --- a/packages/react/src/components/ComboButton/ComboButton.stories.js +++ b/packages/react/src/components/ComboButton/ComboButton.stories.js @@ -28,22 +28,56 @@ export default { }, }; -export const Default = () => ( - - - - - -); +const sharedArgs = { + onClick: action('onClick'), + label: 'Primary action', +}; + +const sharedArgTypes = { + children: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + translateWithId: { + table: { + disable: true, + }, + }, +}; + +export const Default = (args) => { + const onClick = action('onClick (MenuItem)'); + + return ( + + + + + + + + ); +}; +Default.args = { ...sharedArgs }; +Default.argTypes = { ...sharedArgTypes }; -export const ExperimentalAutoAlign = () => ( +export const ExperimentalAutoAlign = (args) => (
- + @@ -52,8 +86,10 @@ export const ExperimentalAutoAlign = () => (
); -export const WithDanger = () => ( - +ExperimentalAutoAlign.argTypes = { ...sharedArgTypes }; + +export const WithDanger = (args) => ( + @@ -62,13 +98,17 @@ export const WithDanger = () => ( ); -export const WithIcons = () => ( - +WithDanger.argTypes = { ...sharedArgTypes }; + +export const WithIcons = (args) => ( + ); +WithIcons.argTypes = { ...sharedArgTypes }; + export const WithMenuAlignment = () => ( <>
@@ -123,43 +163,3 @@ export const WithMenuAlignment = () => (
); - -export const Playground = (args) => { - const onClick = action('onClick (MenuItem)'); - - return ( - - - - - - - - ); -}; - -Playground.argTypes = { - children: { - table: { - disable: true, - }, - }, - className: { - table: { - disable: true, - }, - }, - translateWithId: { - table: { - disable: true, - }, - }, -}; - -Playground.args = { - onClick: action('onClick'), - label: 'Primary action', -}; diff --git a/packages/react/src/components/ComposedModal/ComposedModal.mdx b/packages/react/src/components/ComposedModal/ComposedModal.mdx index 739e3299aef0..02769808e242 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal.mdx +++ b/packages/react/src/components/ComposedModal/ComposedModal.mdx @@ -4,6 +4,7 @@ import { InlineNotification } from '../Notification'; import CodeSnippet from '../CodeSnippet'; import * as ComposedModalStories from './ComposedModal.stories.js'; import './ComposedModal.stories.scss'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; diff --git a/packages/react/src/components/ComposedModal/ComposedModal.stories.js b/packages/react/src/components/ComposedModal/ComposedModal.stories.js index 157d8d883ace..9c15e4b0963a 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal.stories.js +++ b/packages/react/src/components/ComposedModal/ComposedModal.stories.js @@ -44,13 +44,51 @@ export default { }, }; -export const Default = () => { +const sharedArgTypes = { + children: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + containerClassName: { + table: { + disable: true, + }, + }, + onClose: { + action: 'onClose', + }, + onKeyDown: { + action: 'onKeyDown', + }, + selectorPrimaryFocus: { + table: { + disable: true, + }, + }, + selectorsFloatingMenus: { + table: { + disable: true, + }, + }, +}; + +export const Default = (args) => { const [open, setOpen] = useState(true); return ( <> - setOpen(false)}> - + setOpen(false)}> +

Custom domains direct requests for your apps in this Cloud Foundry @@ -69,12 +107,18 @@ export const Default = () => { - + ); }; +Default.argTypes = { ...sharedArgTypes }; + export const FullWidth = () => { const [open, setOpen] = useState(true); return ( @@ -154,7 +198,7 @@ export const PassiveModal = () => { }; export const WithStateManager = () => { - const button = useRef(); + const button = React.useRef(); /** * Simple state manager for modals. @@ -163,7 +207,7 @@ export const WithStateManager = () => { renderLauncher: LauncherContent, children: ModalContent, }) => { - const [open, setOpen] = useState(false); + const [open, setOpen] = React.useState(false); return ( <> {!ModalContent || typeof document === 'undefined' @@ -449,76 +493,3 @@ export const _withAILabel = { ); }, }; - -export const Playground = (args) => { - const [open, setOpen] = useState(true); - return ( - <> - - setOpen(false)}> - - -

- Custom domains direct requests for your apps in this Cloud Foundry - organization to a URL that you own. A custom domain can be a shared - domain, a shared subdomain, or a shared domain and host. -

- - - - - - - ); -}; - -Playground.argTypes = { - children: { - table: { - disable: true, - }, - }, - className: { - table: { - disable: true, - }, - }, - containerClassName: { - table: { - disable: true, - }, - }, - onClose: { - action: 'onClose', - }, - onKeyDown: { - action: 'onKeyDown', - }, - selectorPrimaryFocus: { - table: { - disable: true, - }, - }, - selectorsFloatingMenus: { - table: { - disable: true, - }, - }, -}; diff --git a/packages/react/src/components/ContainedList/ContainedList.stories.js b/packages/react/src/components/ContainedList/ContainedList.stories.js index 92deeed6da64..32851cccbfbc 100644 --- a/packages/react/src/components/ContainedList/ContainedList.stories.js +++ b/packages/react/src/components/ContainedList/ContainedList.stories.js @@ -60,23 +60,26 @@ export default { }, }; -export const Default = () => ( +const DefaultStory = (args) => ( <> - - List item - List item - List item - List item - - - List item - List item - List item - List item - + {[...Array(4)].map((_, i) => ( + + {[...Array(8)].map((_, j) => ( + List item + ))} + + ))} ); +export const Default = DefaultStory.bind({}); + +Default.args = { + label: 'List title', + kind: 'on-page', + size: 'lg', +}; + export const Disclosed = () => ( <> @@ -352,23 +355,3 @@ export const UsageExamples = () => { ); }; - -const PlaygroundStory = (args) => ( - <> - {[...Array(4)].map((_, i) => ( - - {[...Array(8)].map((_, j) => ( - List item - ))} - - ))} - -); - -export const Playground = PlaygroundStory.bind({}); - -Playground.args = { - label: 'List title', - kind: 'on-page', - size: 'lg', -}; diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx index cfab008cd933..d52de1e5c7ad 100644 --- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx +++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx @@ -39,7 +39,7 @@ Content switchers allow users to toggle between two or more content sections within the same space on screen. Only one content section is shown at a time. Create Switch components for each section in the content switcher. - + ## Component API diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js index 87b331e8bdc5..bccf75da9636 100644 --- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js +++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js @@ -11,7 +11,12 @@ import { WithLayer } from '../../../.storybook/templates/WithLayer'; import ContentSwitcher from './ContentSwitcher'; import { Switch, IconSwitch } from '../Switch'; import mdx from './ContentSwitcher.mdx'; -import { TableOfContents, Workspace, ViewMode_2 } from '@carbon/icons-react'; +import { + TableOfContents, + Workspace, + ViewMode_2, + Icon, +} from '@carbon/icons-react'; export default { title: 'Components/ContentSwitcher', @@ -34,17 +39,36 @@ export default { }, }; -export const Default = () => ( - {}}> +const sharedArgTypes = { + children: { + control: false, + }, + className: { + control: false, + }, + onChange: { + action: 'onChange', + }, + size: { + options: ['sm', 'md', 'lg'], + }, +}; + +export const Default = (args) => ( + - Second section + ); -export const _WithLayer = () => ( +Default.argTypes = { + ...sharedArgTypes, +}; + +export const _WithLayer = (args) => ( - {}}> + {}} {...args}> @@ -52,6 +76,10 @@ export const _WithLayer = () => ( ); +_WithLayer.argTypes = { + ...sharedArgTypes, +}; + export const IconOnly = (args) => ( {}} {...args}> @@ -66,6 +94,10 @@ export const IconOnly = (args) => ( ); +IconOnly.argTypes = { + ...sharedArgTypes, +}; + export const IconOnlyWithLayer = (args) => ( {}} {...args}> @@ -82,29 +114,6 @@ export const IconOnlyWithLayer = (args) => ( ); -export const Playground = (args) => ( - - - - - -); - -Playground.argTypes = { - children: { - table: { - disable: true, - }, - }, - className: { - table: { - disable: true, - }, - }, - onChange: { - action: 'onChange', - }, - size: { - options: ['sm', 'md', 'lg'], - }, +IconOnlyWithLayer.argTypes = { + ...sharedArgTypes, }; diff --git a/packages/react/src/components/ContextMenu/useContextMenu.mdx b/packages/react/src/components/ContextMenu/useContextMenu.mdx index debe239f8b0a..739a063d6d1e 100644 --- a/packages/react/src/components/ContextMenu/useContextMenu.mdx +++ b/packages/react/src/components/ContextMenu/useContextMenu.mdx @@ -18,7 +18,7 @@ import * as useContextMenu from './useContextMenu.stories.js'; ## Overview The `useContextMenu` hook is meant to be used in conjunction with `Menu` (see -this [component's documentation](/docs/components-menu--playground) for more +this [component's documentation](/docs/components-menu--default) for more details). It provides an easy way to generate the necessary props for `Menu`. By default, it will listen to the `contextmenu` event on `document`. In most diff --git a/packages/react/src/components/CopyButton/CopyButton.mdx b/packages/react/src/components/CopyButton/CopyButton.mdx index d6ae3b7a23ce..f7c53d3650c4 100644 --- a/packages/react/src/components/CopyButton/CopyButton.mdx +++ b/packages/react/src/components/CopyButton/CopyButton.mdx @@ -25,7 +25,7 @@ The copy button should be accompanied by a tooltip. Tooltip feedback text should be concise and describe the action taken when the user clicks the copy button. By default we display the text “Copied!”. - + ## Component API diff --git a/packages/react/src/components/CopyButton/CopyButton.stories.js b/packages/react/src/components/CopyButton/CopyButton.stories.js index aeb89a0dcaef..d59cafec1929 100644 --- a/packages/react/src/components/CopyButton/CopyButton.stories.js +++ b/packages/react/src/components/CopyButton/CopyButton.stories.js @@ -20,11 +20,9 @@ export default { }, }; -export const Default = () => ; +export const Default = (args) => ; -export const Playground = (args) => ; - -Playground.argTypes = { +Default.argTypes = { className: { table: { disable: true, diff --git a/packages/react/src/components/DataTable/DataTable.mdx b/packages/react/src/components/DataTable/DataTable.mdx index b5b700377cce..0fe291de1722 100644 --- a/packages/react/src/components/DataTable/DataTable.mdx +++ b/packages/react/src/components/DataTable/DataTable.mdx @@ -18,7 +18,7 @@ import {  |  [Accessibility](https://www.carbondesignsystem.com/components/data-table/accessibility) - + {/* */} @@ -155,7 +155,7 @@ into your render prop, visit the [render props](#render-props) section. In order to sort the rows in your data table, you will need to pass in the `isSortable` prop to the `DataTable` component. - + Optionally, you can pass in `isSortable` to each `TableHeader` that you want to be sorted, or not sorted. This is useful if you only want to enable sorting on @@ -206,7 +206,7 @@ function customSortRow(cellA, cellB, { sortDirection, sortStates, locale }) { The `DataTable` components supports row-level expansion when combined with the `TableExpandHeader`, `TableExpandRow`, and `TableExpandedRow` components. - + _Note: press "Show code" above to view a code snippet of this example_ @@ -229,7 +229,7 @@ row id as a single argument. The `DataTable` component supports row selection when used with the `TableSelectAll` and `TableSelectRow` components. - + _Note: press "Show code" above to view a code snippet of this example_ @@ -263,7 +263,7 @@ the `TableToolbarSearch` component. Any input entered through By default `filterRows` is provided through our default implementation. However, you can provide your own method if needed. - + In order to integrate filtering into your data table, you will need to provide the `onInputChange` function provided to you from `DataTable`'s render prop and @@ -350,13 +350,13 @@ the following components: - `TableSelectAll` - `TableSelectRow` - + _Note: press "Show code" above to view a code snippet of this example_ ## Toolbar - + ### Overflow Menu diff --git a/packages/react/src/components/DataTable/DataTable.tsx b/packages/react/src/components/DataTable/DataTable.tsx index 67999fc93440..275f65481b7e 100644 --- a/packages/react/src/components/DataTable/DataTable.tsx +++ b/packages/react/src/components/DataTable/DataTable.tsx @@ -24,6 +24,7 @@ import TableBatchActions from './TableBatchActions'; import TableBody from './TableBody'; import TableCell from './TableCell'; import TableContainer from './TableContainer'; +import TableDecoratorRow from './TableDecoratorRow'; import TableExpandHeader from './TableExpandHeader'; import TableExpandRow from './TableExpandRow'; import TableExpandedRow from './TableExpandedRow'; @@ -99,6 +100,7 @@ export interface DataTableHeader { key: string; header: React.ReactNode; slug?: React.ReactElement; + decorator?: React.ReactElement; } export interface DataTableRenderProps { @@ -203,7 +205,8 @@ export interface DataTableRenderProps { }; getCellProps: (getCellPropsArgs: { cell: DataTableCell }) => { [key: string]: unknown; - hasSlugHeader?: boolean; + hasAILabelHeader?: boolean; + hasDecoratorHeader?: boolean; }; // Custom event handlers @@ -390,6 +393,7 @@ class DataTable extends React.Component< static TableBody: typeof TableBody; static TableCell: typeof TableCell; static TableContainer: typeof TableContainer; + static TableDecoratorRow: typeof TableDecoratorRow; static TableExpandHeader: typeof TableExpandHeader; static TableExpandRow: typeof TableExpandRow; static TableExpandedRow: typeof TableExpandedRow; @@ -473,6 +477,7 @@ class DataTable extends React.Component< isSortable, isSortHeader: sortHeaderKey === header.key, slug: header.slug, + decorator: header.decorator, onClick: (event) => { const nextSortState = getNextSortState(this.props, this.state, { key: header.key, @@ -747,7 +752,8 @@ class DataTable extends React.Component< getCellProps = ({ cell, ...rest }) => { return { ...rest, - hasSlugHeader: cell.hasSlugHeader, + hasAILabelHeader: cell.hasAILabelHeader, + hasDecoratorHeader: cell.hasDecoratorHeader, }; }; @@ -1035,6 +1041,7 @@ DataTable.TableBatchActions = TableBatchActions; DataTable.TableBody = TableBody; DataTable.TableCell = TableCell; DataTable.TableContainer = TableContainer; +DataTable.TableDecoratorRow = TableDecoratorRow; DataTable.TableExpandHeader = TableExpandHeader; DataTable.TableExpandRow = TableExpandRow; DataTable.TableExpandedRow = TableExpandedRow; diff --git a/packages/react/src/components/DataTable/TableCell.tsx b/packages/react/src/components/DataTable/TableCell.tsx index 1046bd770d2d..114847a14094 100644 --- a/packages/react/src/components/DataTable/TableCell.tsx +++ b/packages/react/src/components/DataTable/TableCell.tsx @@ -29,7 +29,7 @@ interface TableCellProps extends ReactAttr { /** * Specify if the table cell is in an AI column */ - hasSlugHeader?: boolean; + hasAILabelHeader?: boolean; /** * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43 @@ -38,11 +38,11 @@ interface TableCellProps extends ReactAttr { } const TableCell = React.forwardRef( - ({ children, className, hasSlugHeader, colSpan, ...rest }, ref) => { + ({ children, className, hasAILabelHeader, colSpan, ...rest }, ref) => { const prefix = usePrefix(); const tableCellClassNames = classNames(className, { - [`${prefix}--table-cell--column-slug`]: hasSlugHeader, + [`${prefix}--table-cell--column-slug`]: hasAILabelHeader, }); return ( { + const prefix = usePrefix(); + const TableDecoratorRowClasses = classNames({ + ...(className && { [className]: true }), + [`${prefix}--table-column-decorator`]: true, + [`${prefix}--table-column-decorator--active`]: decorator, + }); + + let normalizedDecorator = React.isValidElement(decorator) + ? (decorator as ReactNode) + : null; + if ( + normalizedDecorator && + normalizedDecorator['type']?.displayName === 'AILabel' + ) { + normalizedDecorator = React.cloneElement( + normalizedDecorator as React.ReactElement, + { + size: 'mini', + } + ); + } + + return {normalizedDecorator}; +}; + +TableDecoratorRow.displayName = 'TableDecoratorRow'; +TableDecoratorRow.propTypes = { + /** + * The CSS class names of the cell that wraps the underlying input control + */ + className: PropTypes.string, + + /** + * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component + */ + decorator: PropTypes.node, +}; + +export default TableDecoratorRow; diff --git a/packages/react/src/components/DataTable/TableExpandRow.tsx b/packages/react/src/components/DataTable/TableExpandRow.tsx index f2d3be5e1a0e..7e5c7d928eb5 100644 --- a/packages/react/src/components/DataTable/TableExpandRow.tsx +++ b/packages/react/src/components/DataTable/TableExpandRow.tsx @@ -73,12 +73,18 @@ const TableExpandRow = React.forwardRef( ) => { const prefix = usePrefix(); - // We need to put the slug before the expansion arrow and all other table cells after the arrow. - let rowHasSlug; - const slug = React.Children.toArray(children).map((child: any) => { - if (child.type?.displayName === 'TableSlugRow') { - if (child.props.slug) { - rowHasSlug = true; + // We need to put the AILabel and Decorator before the expansion arrow and all other table cells after the arrow. + let rowHasAILabel; + const decorator = React.Children.toArray(children).map((child: any) => { + if ( + child.type?.displayName === 'TableSlugRow' || + child.type?.displayName === 'TableDecoratorRow' + ) { + if ( + child.props.slug || + child.props.decorator?.type.displayName === 'AILabel' + ) { + rowHasAILabel = true; } return child; @@ -87,7 +93,10 @@ const TableExpandRow = React.forwardRef( const normalizedChildren = React.Children.toArray(children).map( (child: any) => { - if (child.type?.displayName !== 'TableSlugRow') { + if ( + child.type?.displayName !== 'TableSlugRow' && + child.type?.displayName !== 'TableDecoratorRow' + ) { return child; } } @@ -98,7 +107,8 @@ const TableExpandRow = React.forwardRef( [`${prefix}--parent-row`]: true, [`${prefix}--expandable-row`]: isExpanded, [`${prefix}--data-table--selected`]: isSelected, - [`${prefix}--data-table--slug-row`]: rowHasSlug, + [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: + rowHasAILabel, }, rowClassName ); @@ -106,7 +116,7 @@ const TableExpandRow = React.forwardRef( return ( - {slug} + {decorator} (null); - let normalizedSlug; - if (slug) { - normalizedSlug = React.cloneElement(slug as React.ReactElement, { - size: 'mini', - ref: slugRef, - }); + // AILabel is always size `mini` + const AILableRef = useRef(null); + + let colHasAILabel; + let normalizedDecorator = React.isValidElement(slug ?? decorator) + ? (slug ?? decorator) + : null; + if ( + normalizedDecorator && + normalizedDecorator['type']?.displayName === 'AILabel' + ) { + colHasAILabel = true; + normalizedDecorator = React.cloneElement( + normalizedDecorator as React.ReactElement, + { + size: 'mini', + ref: AILableRef, + } + ); } const headerLabelClassNames = classNames({ [`${prefix}--table-header-label`]: true, - [`${prefix}--table-header-label--slug`]: slug, + [`${prefix}--table-header-label--slug ${prefix}--table-header-label--ai-label`]: + colHasAILabel, + [`${prefix}--table-header-label--decorator`]: decorator, }); if (!isSortable) { @@ -172,7 +192,9 @@ const TableHeader = React.forwardRef(function TableHeader( {children ? (
{children} - {normalizedSlug} +
+ {normalizedDecorator} +
) : null} @@ -198,11 +220,16 @@ const TableHeader = React.forwardRef(function TableHeader( }); const headerClasses = cx(headerClassName, `${prefix}--table-sort__header`, { - [`${prefix}--table-sort__header--slug`]: slug, + [`${prefix}--table-sort__header--ai-label`]: colHasAILabel, + [`${prefix}--table-sort__header--decorator`]: decorator, }); const handleClick = (evt) => { - if (slug && slugRef.current && slugRef.current.contains(evt.target)) { + if ( + colHasAILabel && + AILableRef.current && + AILableRef.current.contains(evt.target) + ) { return; } else if (onClick) { return onClick(evt); @@ -233,7 +260,9 @@ const TableHeader = React.forwardRef(function TableHeader( size={20} className={`${prefix}--table-sort__icon-unsorted`} /> - {normalizedSlug} +
+ {normalizedDecorator} +
diff --git a/packages/react/src/components/DataTable/TableRow.tsx b/packages/react/src/components/DataTable/TableRow.tsx index a55baaf140d3..453b28e69f13 100644 --- a/packages/react/src/components/DataTable/TableRow.tsx +++ b/packages/react/src/components/DataTable/TableRow.tsx @@ -25,12 +25,18 @@ export interface TableRowProps extends ReactAttr { const TableRow = (props: TableRowProps) => { const prefix = usePrefix(); - let rowHasSlug; + let rowHasAILabel; if (props?.children) { React.Children.toArray(props.children).map((child: any) => { - if (child.type?.displayName === 'TableSlugRow') { - if (child.props.slug) { - rowHasSlug = true; + if ( + child.type?.displayName === 'TableSlugRow' || + child.type?.displayName === 'TableDecoratorRow' + ) { + if ( + child.props.slug || + child.props.decorator?.type.displayName === 'AILabel' + ) { + rowHasAILabel = true; } } }); @@ -39,7 +45,8 @@ const TableRow = (props: TableRowProps) => { // only useful in `TableExpandRow` const className = cx(props.className, { [`${prefix}--data-table--selected`]: props.isSelected, - [`${prefix}--data-table--slug-row`]: rowHasSlug, + [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: + rowHasAILabel, }); const { diff --git a/packages/react/src/components/DataTable/TableSlugRow.tsx b/packages/react/src/components/DataTable/TableSlugRow.tsx index 17b3f57de2f4..968ef6da7bff 100644 --- a/packages/react/src/components/DataTable/TableSlugRow.tsx +++ b/packages/react/src/components/DataTable/TableSlugRow.tsx @@ -6,9 +6,10 @@ */ import PropTypes from 'prop-types'; -import React, { ReactNode } from 'react'; +import React, { ReactNode, useEffect } from 'react'; import classNames from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; +import deprecateComponent from '../../prop-types/deprecateComponent'; export interface TableSlugRowProps { /** @@ -23,6 +24,13 @@ export interface TableSlugRowProps { } const TableSlugRow = ({ className, slug }: TableSlugRowProps) => { + useEffect(() => { + deprecateComponent( + 'TableSlugRow', + 'The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.' + ); + }, []); + const prefix = usePrefix(); const TableSlugRowClasses = classNames({ ...(className && { [className]: true }), diff --git a/packages/react/src/components/DataTable/__tests__/Table-test.js b/packages/react/src/components/DataTable/__tests__/Table-test.js index 0c7869a376e2..9846e188094f 100644 --- a/packages/react/src/components/DataTable/__tests__/Table-test.js +++ b/packages/react/src/components/DataTable/__tests__/Table-test.js @@ -248,7 +248,7 @@ describe('Table', () => { - Header1 + Header1 diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index ed766e80804a..edd5f4ed221b 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap @@ -35,6 +35,9 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav class="cds--table-header-label" > Field A +
@@ -207,6 +213,9 @@ exports[`DataTable behaves as expected selection -- radio buttons should render class="cds--table-header-label" > Field A +
@@ -664,6 +676,9 @@ exports[`DataTable behaves as expected selection should render and match snapsho class="cds--table-header-label" > Field A +
@@ -1069,6 +1087,9 @@ exports[`DataTable renders as expected - Component API should render and match s class="cds--table-header-label" > Field A +
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap index b1fe959fc430..dfede01b6f65 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap @@ -18,6 +18,9 @@ exports[`TableHeader renders as expected - Component API should render 1`] = ` class="cds--table-header-label" > Header +
diff --git a/packages/react/src/components/DataTable/index.ts b/packages/react/src/components/DataTable/index.ts index f38a32936231..393d215b18bf 100644 --- a/packages/react/src/components/DataTable/index.ts +++ b/packages/react/src/components/DataTable/index.ts @@ -21,6 +21,7 @@ import TableBody from './TableBody'; import TableCell from './TableCell'; import TableContainer from './TableContainer'; import TableExpandHeader from './TableExpandHeader'; +import TableDecoratorRow from './TableDecoratorRow'; import TableExpandRow from './TableExpandRow'; import TableExpandedRow from './TableExpandedRow'; import TableHead from './TableHead'; @@ -46,6 +47,7 @@ DataTable.TableBatchActions = TableBatchActions; DataTable.TableBody = TableBody; DataTable.TableCell = TableCell; DataTable.TableContainer = TableContainer; +DataTable.TableDecoratorRow = TableDecoratorRow; DataTable.TableExpandHeader = TableExpandHeader; DataTable.TableExpandRow = TableExpandRow; DataTable.TableExpandedRow = TableExpandedRow; @@ -77,6 +79,7 @@ export { TableBody, TableCell, TableContainer, + TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, diff --git a/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js b/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js index 4420a233a33d..5852a96be3a2 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js @@ -17,6 +17,7 @@ import DataTable, { TableSelectAll, TableSelectRow, TableSlugRow, + TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, @@ -51,6 +52,49 @@ export default { }, }; +const sharedArgTypes = { + filterRows: { + table: { + disable: true, + }, + }, + headers: { + table: { + disable: true, + }, + }, + isSortable: { + table: { + disable: true, + }, + }, + overflowMenuOnHover: { + table: { + disable: true, + }, + }, + radio: { + table: { + disable: true, + }, + }, + rows: { + table: { + disable: true, + }, + }, + translateWithId: { + table: { + disable: true, + }, + }, + sortRow: { + table: { + disable: true, + }, + }, +}; + const columnAILabelHeaders = [ { key: 'name', @@ -71,7 +115,7 @@ const columnAILabelHeaders = [ { key: 'attached_groups', header: 'Attached groups', - slug: ( + decorator: ( ); -export const AILabelWithSelection = () => ( - +export const AILabelWithSelection = (args) => ( + {({ rows, headers, @@ -173,9 +217,11 @@ export const AILabelWithSelection = () => ( {rows.map((row, i) => ( - + {i === 3 || i === 4 || i === 1 ? ( + + ) : ( + + )} {row.cells.map((cell) => ( {cell.value} @@ -189,8 +235,10 @@ export const AILabelWithSelection = () => ( ); -export const AILabelWithRadioSelection = () => ( - +AILabelWithSelection.argTypes = { ...sharedArgTypes }; + +export const AILabelWithRadioSelection = (args) => ( + {({ rows, headers, @@ -219,9 +267,11 @@ export const AILabelWithRadioSelection = () => ( {rows.map((row, i) => ( - + {i === 3 || i === 4 || i === 1 ? ( + + ) : ( + + )} {row.cells.map((cell) => ( {cell.value} @@ -235,8 +285,10 @@ export const AILabelWithRadioSelection = () => ( ); -export const AILabelWithSelectionAndExpansion = () => ( - +AILabelWithRadioSelection.argTypes = { ...sharedArgTypes }; + +export const AILabelWithSelectionAndExpansion = (args) => ( + {({ rows, headers, @@ -272,9 +324,11 @@ export const AILabelWithSelectionAndExpansion = () => ( {rows.map((row, i) => ( - + {i === 3 || i === 4 || i === 1 ? ( + + ) : ( + + )} {row.cells.map((cell) => ( {cell.value} @@ -296,8 +350,10 @@ export const AILabelWithSelectionAndExpansion = () => ( ); -export const AILabelWithExpansion = () => ( - +AILabelWithSelectionAndExpansion.argTypes = { ...sharedArgTypes }; + +export const AILabelWithExpansion = (args) => ( + {({ rows, headers, @@ -331,9 +387,11 @@ export const AILabelWithExpansion = () => ( {rows.map((row, i) => ( - + {i === 3 || i === 4 || i === 1 ? ( + + ) : ( + + )} {row.cells.map((cell) => ( {cell.value} ))} @@ -354,8 +412,10 @@ export const AILabelWithExpansion = () => ( ); -export const ColumnAILabelWithSelectionAndExpansion = () => ( - +AILabelWithExpansion.argTypes = { ...sharedArgTypes }; + +export const ColumnAILabelWithSelectionAndExpansion = (args) => ( + {({ rows, headers, @@ -423,8 +483,10 @@ export const ColumnAILabelWithSelectionAndExpansion = () => ( ); -export const ColumnAILabelSort = () => ( - +ColumnAILabelWithSelectionAndExpansion.argTypes = { ...sharedArgTypes }; + +export const ColumnAILabelSort = (args) => ( + {({ rows, headers, @@ -465,3 +527,5 @@ export const ColumnAILabelSort = () => ( )} ); + +ColumnAILabelSort.argTypes = { ...sharedArgTypes }; diff --git a/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js b/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js index 0a1c81fbe9de..e102e5201b65 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js @@ -40,7 +40,50 @@ export default { }, }; -export const Default = () => { +const sharedArgTypes = { + filterRows: { + table: { + disable: true, + }, + }, + headers: { + table: { + disable: true, + }, + }, + isSortable: { + table: { + disable: true, + }, + }, + overflowMenuOnHover: { + table: { + disable: true, + }, + }, + radio: { + table: { + disable: true, + }, + }, + rows: { + table: { + disable: true, + }, + }, + translateWithId: { + table: { + disable: true, + }, + }, + sortRow: { + table: { + disable: true, + }, + }, +}; + +export const Default = (args) => { const rows = [ { id: 'load-balancer-1', @@ -102,7 +145,7 @@ export const Default = () => { const headers = ['Name', 'Rule', 'Status', 'Other', 'Example']; return ( -
Field B +
Field B +
Field B +
Field B +
+
{headers.map((header) => ( @@ -127,7 +170,11 @@ export const Default = () => { ); }; -export const XLWithTwoLines = () => { +Default.argTypes = { + ...sharedArgTypes, +}; + +export const XLWithTwoLines = (args) => { const rows = [ { id: 'load-balancer-1', @@ -224,7 +271,7 @@ export const XLWithTwoLines = () => { const headers = ['Name', 'Rule', 'Status', 'Other', 'Example']; return ( -
+
{headers.map((header) => ( @@ -249,132 +296,6 @@ export const XLWithTwoLines = () => { ); }; -export const Playground = (args) => { - const rows = [ - { - id: 'load-balancer-1', - name: 'Load Balancer 1', - rule: 'Round robin', - Status: 'Starting', - other: 'Test', - example: '22', - }, - { - id: 'load-balancer-2', - name: 'Load Balancer 2', - rule: 'DNS delegation', - status: 'Active', - other: 'Test', - example: '22', - }, - { - id: 'load-balancer-3', - name: 'Load Balancer 3', - rule: 'Round robin', - status: 'Disabled', - other: 'Test', - example: '22', - }, - { - id: 'load-balancer-4', - name: 'Load Balancer 4', - rule: 'Round robin', - status: 'Disabled', - other: 'Test', - example: '22', - }, - { - id: 'load-balancer-5', - name: 'Load Balancer 5', - rule: 'Round robin', - status: 'Disabled', - other: 'Test', - example: '22', - }, - { - id: 'load-balancer-6', - name: 'Load Balancer 6', - rule: 'Round robin', - status: 'Disabled', - other: 'Test', - example: '22', - }, - { - id: 'load-balancer-7', - name: 'Load Balancer 7', - rule: 'Round robin', - status: 'Disabled', - other: 'Test', - example: '22', - }, - ]; - const headers = ['Name', 'Rule', 'Status', 'Other', 'Example']; - - return ( -
- - - {headers.map((header) => ( - - {header} - - ))} - - - - {rows.map((row) => ( - - {Object.keys(row) - .filter((key) => key !== 'id') - .map((key) => { - return {row[key]}; - })} - - ))} - -
- ); -}; - -Playground.argTypes = { - filterRows: { - table: { - disable: true, - }, - }, - headers: { - table: { - disable: true, - }, - }, - isSortable: { - table: { - disable: true, - }, - }, - overflowMenuOnHover: { - table: { - disable: true, - }, - }, - radio: { - table: { - disable: true, - }, - }, - rows: { - table: { - disable: true, - }, - }, - translateWithId: { - table: { - disable: true, - }, - }, - sortRow: { - table: { - disable: true, - }, - }, +XLWithTwoLines.argTypes = { + ...sharedArgTypes, }; diff --git a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js index fccb21d44ccc..e914ded5efe4 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js @@ -61,127 +61,7 @@ export default { }, }; -export const Default = () => ( - - {({ - rows, - headers, - getHeaderProps, - getRowProps, - getSelectionProps, - getToolbarProps, - getBatchActionProps, - onInputChange, - selectedRows, - getTableProps, - getTableContainerProps, - selectRow, - }) => { - const batchActionProps = { - ...getBatchActionProps({ - onSelectAll: () => { - rows.map((row) => { - if (!row.isSelected) { - selectRow(row.id); - } - }); - }, - }), - }; - - return ( - - - - - Delete - - - Delete - - - Save - - - Download - - - - - - alert('Alert 1')}> - Action 1 - - alert('Alert 2')}> - Action 2 - - alert('Alert 3')}> - Action 3 - - - - - - - - - - {headers.map((header, i) => ( - - {header.header} - - ))} - - - - {rows.map((row, i) => ( - - - {row.cells.map((cell) => ( - {cell.value} - ))} - - ))} - -
- - ); - }} - -); - -export const Playground = (args) => ( +export const Default = (args) => ( {({ rows, @@ -288,7 +168,7 @@ export const Playground = (args) => ( ); -Playground.argTypes = { +Default.argTypes = { filterRows: { table: { disable: true, diff --git a/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js b/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js index 45dfd722d767..9d5c559fe586 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js @@ -69,100 +69,7 @@ export default { }, }; -export const Default = () => { - const [renderedRows, setRenderedRows] = useState(rows); - - const handleTableFilter = (selectedCheckboxes) => { - setRenderedRows([]); - - for (let i = 0; i < selectedCheckboxes.length; i++) { - // Filter the items inside the rows list - const filteredRows = rows.filter((row) => { - return Object.values(row).some((value) => - String(value) - .toLowerCase() - .includes(selectedCheckboxes[i].toLowerCase()) - ); - }); - - setRenderedRows((prevData) => { - // Filter out duplicate rows - const uniqueRows = filteredRows.filter((row) => { - return !prevData.some((prevRow) => { - return Object.keys(row).every((key) => { - return row[key] === prevRow[key]; - }); - }); - }); - return [...prevData, ...uniqueRows]; - }); - } - }; - - const handleOnResetFilter = () => { - setRenderedRows(rows); - }; - - return ( - - {({ - rows, - headers, - getHeaderProps, - getRowProps, - getTableProps, - onInputChange, - }) => ( - - - - {/* pass in `onInputChange` change here to make filtering work */} - - - - - Action 1 - - - Action 2 - - - Action 3 - - - - - - - - - {headers.map((header) => ( - - {header.header} - - ))} - - - - {rows.map((row) => ( - - {row.cells.map((cell) => ( - {cell.value} - ))} - - ))} - -
- - )} - - ); -}; - -export const Playground = (args) => { +export const Default = (args) => { const [renderedRows, setRenderedRows] = useState(rows); const handleTableFilter = (selectedCheckboxes) => { @@ -260,7 +167,7 @@ export const Playground = (args) => { ); }; -Playground.argTypes = { +Default.argTypes = { filterRows: { table: { disable: true, diff --git a/packages/react/src/components/DataTable/stories/DataTable-selection.stories.js b/packages/react/src/components/DataTable/stories/DataTable-selection.stories.js index 655e53ffb87e..2654837af94b 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-selection.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-selection.stories.js @@ -42,8 +42,29 @@ export default { }, }; -export const Default = () => ( - +const sharedArgTypes = { + filterRows: { + control: false, + }, + headers: { + control: false, + }, + overflowMenuOnHover: { + control: false, + }, + rows: { + control: false, + }, + translateWithId: { + control: false, + }, + sortRow: { + control: false, + }, +}; + +export const Default = (args) => ( + {({ rows, headers, @@ -60,7 +81,11 @@ export const Default = () => ( - + {args.radio ? ( +
+ ) : ( + + )} {headers.map((header, i) => ( {header.header} @@ -70,8 +95,16 @@ export const Default = () => ( {rows.map((row, i) => ( - - + { + action('TableRow onClick')(evt); + }}> + {row.cells.map((cell) => ( {cell.value} ))} @@ -84,8 +117,10 @@ export const Default = () => ( ); -export const WithRadioSelection = () => ( - +Default.argTypes = { ...sharedArgTypes }; + +export const WithRadioSelection = (args) => ( + {({ rows, headers, @@ -126,8 +161,10 @@ export const WithRadioSelection = () => ( ); -export const WithSelectionAndSorting = () => ( - +WithRadioSelection.argTypes = { ...sharedArgTypes }; + +export const WithSelectionAndSorting = (args) => ( + {({ rows, headers, @@ -167,89 +204,5 @@ export const WithSelectionAndSorting = () => ( )} ); -export const Playground = (args) => ( - - {({ - rows, - headers, - getHeaderProps, - getRowProps, - getSelectionProps, - getTableProps, - getTableContainerProps, - }) => ( - - - - - {args.radio ? ( -
- ) : ( - - )} - {headers.map((header, i) => ( - - {header.header} - - ))} - - - - {rows.map((row, i) => ( - { - action('TableRow onClick')(evt); - }}> - - {row.cells.map((cell) => ( - {cell.value} - ))} - - ))} - -
- - )} - -); -Playground.argTypes = { - filterRows: { - table: { - disable: true, - }, - }, - headers: { - table: { - disable: true, - }, - }, - overflowMenuOnHover: { - table: { - disable: true, - }, - }, - rows: { - table: { - disable: true, - }, - }, - translateWithId: { - table: { - disable: true, - }, - }, - sortRow: { - table: { - disable: true, - }, - }, -}; +WithSelectionAndSorting.argTypes = { ...sharedArgTypes }; diff --git a/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js b/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js index 0298aef6dcba..1705194bd6c8 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js @@ -37,36 +37,7 @@ export default { }, }; -export const Default = () => ( - - {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => ( - - - - - {headers.map((header) => ( - - {header.header} - - ))} - - - - {rows.map((row) => ( - - {row.cells.map((cell) => ( - {cell.value} - ))} - - ))} - -
- - )} - -); - -export const Playground = (args) => ( +export const Default = (args) => ( {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => ( @@ -95,7 +66,7 @@ export const Playground = (args) => ( ); -Playground.argTypes = { +Default.argTypes = { filterRows: { table: { disable: true, diff --git a/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js b/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js index e430cc02bed9..aafb32e1e25d 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js @@ -47,8 +47,21 @@ export default { }, }; -export const Default = () => ( - +const sharedArgTypes = { + size: { + options: ['xs', 'sm', 'md', 'lg', 'xl'], + control: { type: 'select' }, + }, + useZebraStyles: { + control: { type: 'boolean' }, + }, + isSortable: { control: { type: 'boolean' } }, + persistent: { control: { type: 'boolean' } }, + radio: { table: { disable: true } }, +}; + +export const Default = (args) => ( + {({ rows, headers, @@ -105,8 +118,10 @@ export const Default = () => ( ); -export const PersistentToolbar = () => ( - +Default.argTypes = { ...sharedArgTypes }; + +export const PersistentToolbar = (args) => ( + {({ rows, headers, @@ -163,8 +178,10 @@ export const PersistentToolbar = () => ( ); -export const SmallPersistentToolbar = () => ( - +PersistentToolbar.argTypes = { ...sharedArgTypes }; + +export const SmallPersistentToolbar = (args) => ( + {({ rows, headers, @@ -224,69 +241,9 @@ export const SmallPersistentToolbar = () => ( ); -export const WithOverflowMenu = () => ( - - {({ - rows, - headers, - getHeaderProps, - getRowProps, - getTableProps, - getToolbarProps, - onInputChange, - }) => ( - - - - - - - Action 1 - - - Action 2 - - - Action 3 - - - - - - - - - {headers.map((header) => ( - - {header.header} - - ))} - - - - - {rows.map((row) => ( - - {row.cells.map((cell) => ( - {cell.value} - ))} - - - - - - - - - ))} - -
- - )} - -); +SmallPersistentToolbar.argTypes = { ...sharedArgTypes }; -export const Playground = (args) => ( +export const WithOverflowMenu = (args) => ( {({ rows, @@ -300,12 +257,7 @@ export const Playground = (args) => ( - { - action('TableToolbarSearch - onChange')(evt); - onInputChange(evt); - }} - /> + Action 1 @@ -328,7 +280,7 @@ export const Playground = (args) => ( {header.header} ))} - + @@ -353,18 +305,9 @@ export const Playground = (args) => ( ); -Playground.argTypes = { - size: { - options: ['xs', 'sm', 'md', 'lg', 'xl'], - control: { type: 'select' }, - }, - useZebraStyles: { - control: { type: 'boolean' }, - }, - isSortable: { control: { type: 'boolean' } }, - persistent: { control: { type: 'boolean' } }, +WithOverflowMenu.argTypes = { + ...sharedArgTypes, overflowMenuOnHover: { control: { type: 'boolean' }, }, - radio: { table: { disable: true } }, }; diff --git a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js index 6413dca871c3..a8ec5fdb9400 100644 --- a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js +++ b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js @@ -38,7 +38,7 @@ export default { component: DataTable, }; -export const Default = () => { +export const Default = (args) => { const insertInRandomPosition = (array, element) => { const index = Math.floor(Math.random() * (array.length + 1)); return [...array.slice(0, index), element, ...array.slice(index)]; @@ -102,6 +102,7 @@ export const Default = () => { render() { return ( { return ; }; -export const Playground = (args) => { - const insertInRandomPosition = (array, element) => { - const index = Math.floor(Math.random() * (array.length + 1)); - return [...array.slice(0, index), element, ...array.slice(index)]; - }; - - class DynamicRows extends React.Component { - state = { - rows, - headers: headers, - id: 0, - }; - - handleOnHeaderAdd = () => { - const length = this.state.headers.length; - const header = { - key: `header_${length}`, - header: `Header ${length}`, - }; - - this.setState((state) => { - const rows = state.rows.map((row) => { - return { - ...row, - [header.key]: header.header, - }; - }); - return { - rows, - headers: state.headers.concat(header), - }; - }); - }; - - handleOnRowAdd = () => { - this.setState((state) => { - const { id: _id, rows } = state; - const id = _id + 1; - const row = { - id: '' + id, - name: `New Row ${id}`, - protocol: 'HTTP', - port: id * 100, - rule: id % 2 === 0 ? 'Round robin' : 'DNS delegation', - attached_groups: `Row ${id}'s VM Groups`, - status: 'Starting', - }; - - state.headers - .filter((header) => row[header.key] === undefined) - .forEach((header) => { - row[header.key] = header.header; - }); - - return { - id, - rows: insertInRandomPosition(rows, row), - }; - }); - }; - - render() { - return ( - { - const batchActionProps = getBatchActionProps(); - return ( - - - - - Delete - - - Save - - - Download - - - - { - action('TableToolbarSearch - onChange')(evt); - onInputChange(evt); - }} - tabIndex={ - batchActionProps.shouldShowBatchActions ? -1 : 0 - } - /> - - { - action('handleOnRowAdd')(evt); - this.handleOnRowAdd(); - }}> - Add row - - { - action('handleOnHeaderAdd')(evt); - this.handleOnHeaderAdd(); - }}> - Add header - - - - - - - - - {args.radio ? ( -
- ) : ( - - )} - {headers.map((header, i) => ( - - {header.header} - - ))} - - - - {rows.map((row) => ( - - - - {row.cells.map((cell) => ( - {cell.value} - ))} - - -
Expandable row content
-
Description here
- - - ))} - -
- - ); - }} - /> - ); - } - } - return ; -}; - -Playground.argTypes = { +Default.argTypes = { filterRows: { table: { disable: true, diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js index 9074bac72815..9f8e4b6dd9e9 100644 --- a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js +++ b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js @@ -45,8 +45,16 @@ export default { }, }; -export const Default = () => ( - +const sharedArgTypes = { + radio: { + table: { + disable: true, + }, + }, +}; + +export const Default = (args) => ( + {({ rows, headers, @@ -74,7 +82,9 @@ export const Default = () => ( {rows.map((row) => ( - + {row.cells.map((cell) => ( {cell.value} ))} @@ -95,8 +105,13 @@ export const Default = () => ( ); -export const BatchExpansion = () => ( +Default.argTypes = { + ...sharedArgTypes, +}; + +export const BatchExpansion = (args) => ( ( /> ); -export const Playground = (args) => ( - - {({ - rows, - headers, - getHeaderProps, - getRowProps, - getExpandedRowProps, - getTableProps, - getTableContainerProps, - }) => ( - - - - - - {headers.map((header, i) => ( - - {header.header} - - ))} - - - - {rows.map((row) => ( - - - {row.cells.map((cell) => ( - {cell.value} - ))} - - -
Expandable row content
-
Description here
- - - ))} - -
- - )} - -); - -Playground.argTypes = { - radio: { - table: { - disable: true, - }, - }, +BatchExpansion.argTypes = { + ...sharedArgTypes, }; diff --git a/packages/react/src/components/DataTable/tools/__tests__/__snapshots__/normalize-test.js.snap b/packages/react/src/components/DataTable/tools/__tests__/__snapshots__/normalize-test.js.snap index c7869b02b40f..6e8974538cfc 100644 --- a/packages/react/src/components/DataTable/tools/__tests__/__snapshots__/normalize-test.js.snap +++ b/packages/react/src/components/DataTable/tools/__tests__/__snapshots__/normalize-test.js.snap @@ -4,7 +4,7 @@ exports[`normalize should return a normalized map of cells by id 1`] = ` Object { "a:fieldA": Object { "errors": null, - "hasSlugHeader": false, + "hasAILabelHeader": false, "id": "a:fieldA", "info": Object { "header": "fieldA", @@ -16,7 +16,7 @@ Object { }, "a:fieldB": Object { "errors": null, - "hasSlugHeader": false, + "hasAILabelHeader": false, "id": "a:fieldB", "info": Object { "header": "fieldB", @@ -28,7 +28,7 @@ Object { }, "a:fieldC": Object { "errors": null, - "hasSlugHeader": false, + "hasAILabelHeader": false, "id": "a:fieldC", "info": Object { "header": "fieldC", @@ -40,7 +40,7 @@ Object { }, "b:fieldA": Object { "errors": null, - "hasSlugHeader": false, + "hasAILabelHeader": false, "id": "b:fieldA", "info": Object { "header": "fieldA", @@ -52,7 +52,7 @@ Object { }, "b:fieldB": Object { "errors": null, - "hasSlugHeader": false, + "hasAILabelHeader": false, "id": "b:fieldB", "info": Object { "header": "fieldB", @@ -64,7 +64,7 @@ Object { }, "b:fieldC": Object { "errors": null, - "hasSlugHeader": false, + "hasAILabelHeader": false, "id": "b:fieldC", "info": Object { "header": "fieldC", @@ -76,7 +76,7 @@ Object { }, "c:fieldA": Object { "errors": null, - "hasSlugHeader": false, + "hasAILabelHeader": false, "id": "c:fieldA", "info": Object { "header": "fieldA", @@ -88,7 +88,7 @@ Object { }, "c:fieldB": Object { "errors": null, - "hasSlugHeader": false, + "hasAILabelHeader": false, "id": "c:fieldB", "info": Object { "header": "fieldB", @@ -100,7 +100,7 @@ Object { }, "c:fieldC": Object { "errors": null, - "hasSlugHeader": false, + "hasAILabelHeader": false, "id": "c:fieldC", "info": Object { "header": "fieldC", diff --git a/packages/react/src/components/DataTable/tools/normalize.js b/packages/react/src/components/DataTable/tools/normalize.js index 3a182e6b3f78..eac5e1110e42 100644 --- a/packages/react/src/components/DataTable/tools/normalize.js +++ b/packages/react/src/components/DataTable/tools/normalize.js @@ -45,7 +45,7 @@ const normalize = (rows, headers, prevState = {}) => { rowsById[row.id].isExpanded = prevRowsByIds[row.id].isExpanded; } - headers.forEach(({ key, slug }, i) => { + headers.forEach(({ key, slug, decorator }, i) => { const id = getCellId(row.id, key); // Initialize the cell info and state values, namely for editing cellsById[id] = { @@ -55,7 +55,9 @@ const normalize = (rows, headers, prevState = {}) => { isEditing: false, isValid: true, errors: null, - hasSlugHeader: !!slug, + hasAILabelHeader: !!( + slug || decorator?.type?.displayName === 'AILabel' + ), info: { header: key, }, diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js index 54385af5de35..24990c0fe6ff 100644 --- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js +++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js @@ -23,25 +23,14 @@ export default { component: DataTableSkeleton, }; -export const Skeleton = () => { +export const Skeleton = (args) => { const { ...rest } = props(); - return ( -
- -
-
- ); -}; -export const Playground = (args) => { return (
@@ -50,7 +39,7 @@ export const Playground = (args) => { ); }; -Playground.argTypes = { +Skeleton.argTypes = { headers: { table: { disable: true, diff --git a/packages/react/src/components/DatePicker/DatePicker.mdx b/packages/react/src/components/DatePicker/DatePicker.mdx index 951870770afe..5340b36218d9 100644 --- a/packages/react/src/components/DatePicker/DatePicker.mdx +++ b/packages/react/src/components/DatePicker/DatePicker.mdx @@ -46,7 +46,7 @@ picker is best to use. Each picker’s format can be customized depending on location or need. The `DatePicker` component expects a `DatePickerInput` as a child. - + ### Simple DatePicker diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js index 8da60efe423e..11c54fd8d0d8 100644 --- a/packages/react/src/components/DatePicker/DatePicker.stories.js +++ b/packages/react/src/components/DatePicker/DatePicker.stories.js @@ -41,97 +41,258 @@ export default { }, }; -export const Simple = () => ( - +const sharedArgTypes = { + appendTo: { + table: { + disable: true, + }, + }, + datePickerType: { + table: { + disable: true, + }, + }, + children: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + disable: { + table: { + disable: true, + }, + }, + enable: { + table: { + disable: true, + }, + }, + inline: { + table: { + disable: true, + }, + }, + locale: { + table: { + disable: true, + }, + }, + onChange: { + action: 'onChange', + }, + onClose: { + action: 'onClose', + }, + onOpen: { + action: 'onOpen', + }, + readOnly: { + control: { + type: 'boolean', + }, + }, + value: { + table: { + disable: true, + }, + }, + size: { + options: ['sm', 'md', 'lg'], + control: { type: 'select' }, + table: { + category: 'DatePickerInput', + }, + }, + disabled: { + control: { type: 'boolean' }, + table: { + category: 'DatePickerInput', + }, + }, + invalid: { + control: { type: 'boolean' }, + table: { + category: 'DatePickerInput', + }, + }, + invalidText: { + control: { type: 'text' }, + table: { + category: 'DatePickerInput', + }, + }, + placeholder: { + control: { type: 'text' }, + table: { + category: 'DatePickerInput', + }, + }, + warn: { + control: { type: 'boolean' }, + table: { + category: 'DatePickerInput', + }, + }, + warnText: { + control: { type: 'text' }, + table: { + category: 'DatePickerInput', + }, + }, + helperText: { + control: { type: 'text' }, + table: { + category: 'DatePickerInput', + }, + }, +}; + +export const Default = ({ readOnly, ...args }) => { + return ( + + + {args.datePickerType === 'range' && ( + + )} + + ); +}; + +Default.argTypes = { + ...sharedArgTypes, + datePickerType: { + options: ['sigle', 'simple', 'range'], + control: { type: 'select' }, + }, +}; + +export const Simple = (args) => ( + ); -export const SingleWithCalendar = () => ( - +Simple.argTypes = { ...sharedArgTypes }; + +export const SingleWithCalendar = (args) => ( + ); -export const RangeWithCalendar = () => { +SingleWithCalendar.argTypes = { ...sharedArgTypes }; + +export const RangeWithCalendar = (args) => { return ( - + ); }; -export const SimpleWithLayer = () => ( +RangeWithCalendar.argTypes = { ...sharedArgTypes }; + +export const SimpleWithLayer = (args) => ( {(layer) => ( - + )} ); -export const SingleWithCalendarWithLayer = () => ( +SimpleWithLayer.argTypes = { ...sharedArgTypes }; + +export const SingleWithCalendarWithLayer = (args) => ( {(layer) => ( - + )} ); -export const RangeWithCalendarWithLayer = () => ( +SingleWithCalendarWithLayer.argTypes = { ...sharedArgTypes }; + +export const RangeWithCalendarWithLayer = (args) => ( {(layer) => ( - + )} ); +RangeWithCalendarWithLayer.argTypes = { ...sharedArgTypes }; + export const Skeleton = () => ; const aiLabel = ( @@ -165,144 +326,19 @@ const aiLabel = ( ); -export const withAILabel = () => ( +export const withAILabel = (args) => (
- +
); -export const Playground = ({ readOnly, ...args }) => { - return ( - - - {args.datePickerType === 'range' && ( - - )} - - ); -}; - -Playground.argTypes = { - appendTo: { - table: { - disable: true, - }, - }, - children: { - table: { - disable: true, - }, - }, - className: { - table: { - disable: true, - }, - }, - disable: { - table: { - disable: true, - }, - }, - enable: { - table: { - disable: true, - }, - }, - inline: { - table: { - disable: true, - }, - }, - locale: { - table: { - disable: true, - }, - }, - onChange: { - action: 'onChange', - }, - onClose: { - action: 'onClose', - }, - onOpen: { - action: 'onOpen', - }, - readOnly: { - control: { - type: 'boolean', - }, - }, - value: { - table: { - disable: true, - }, - }, - size: { - options: ['sm', 'md', 'lg'], - control: { type: 'select' }, - table: { - category: 'DatePickerInput', - }, - }, - disabled: { - control: { type: 'boolean' }, - table: { - category: 'DatePickerInput', - }, - }, - invalid: { - control: { type: 'boolean' }, - table: { - category: 'DatePickerInput', - }, - }, - invalidText: { - control: { type: 'text' }, - table: { - category: 'DatePickerInput', - }, - }, - placeholder: { - control: { type: 'text' }, - table: { - category: 'DatePickerInput', - }, - }, - warn: { - control: { type: 'boolean' }, - table: { - category: 'DatePickerInput', - }, - }, - warnText: { - control: { type: 'text' }, - table: { - category: 'DatePickerInput', - }, - }, - helperText: { - control: { type: 'text' }, - table: { - category: 'DatePickerInput', - }, - }, -}; +withAILabel.argTypes = { ...sharedArgTypes }; diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.js b/packages/react/src/components/Dropdown/Dropdown.stories.js index 0fed948f478c..2c845a78a23c 100644 --- a/packages/react/src/components/Dropdown/Dropdown.stories.js +++ b/packages/react/src/components/Dropdown/Dropdown.stories.js @@ -87,40 +87,7 @@ const items = [ }, ]; -export const ExperimentalAutoAlign = () => ( -
-
- (item ? item.text : '')} - direction="top" - /> -
-
-); - -export const Playground = (args) => ( -
- (item ? item.text : '')} - {...args} - /> -
-); - -Playground.args = { +const sharedArgs = { invalid: false, invalidText: 'invalid selection', disabled: false, @@ -132,7 +99,7 @@ Playground.args = { type: 'default', }; -Playground.argTypes = { +const sharedArgTypes = { invalid: { control: { type: 'boolean', @@ -188,9 +155,34 @@ Playground.argTypes = { }, }; -export const Default = () => ( +export const Default = (args) => ( +
+ (item ? item.text : '')} + {...args} + /> +
+); + +Default.args = { + ...sharedArgs, +}; + +Default.argTypes = { + ...sharedArgTypes, +}; + +export const ExperimentalAutoAlign = (args) => (
+
( label="Option 1" items={items} itemToString={(item) => (item ? item.text : '')} + direction="top" + {...args} /> +
); -export const Inline = () => ( +ExperimentalAutoAlign.argTypes = { + ...sharedArgTypes, +}; + +export const Inline = (args) => (
( type="inline" items={items} itemToString={(item) => (item ? item.text : '')} + {...args} />
); -export const _WithLayer = () => ( +Inline.argTypes = { + ...sharedArgTypes, +}; + +export const _WithLayer = (args) => ( {(layer) => (
@@ -228,13 +232,18 @@ export const _WithLayer = () => ( label="Option 1" items={items} itemToString={(item) => (item ? item.text : '')} + {...args} />
)} ); -export const InlineWithLayer = () => ( +_WithLayer.argTypes = { + ...sharedArgTypes, +}; + +export const InlineWithLayer = (args) => ( {(layer) => (
@@ -246,12 +255,17 @@ export const InlineWithLayer = () => ( type="inline" items={items} itemToString={(item) => (item ? item.text : '')} + {...args} />
)} ); +InlineWithLayer.argTypes = { + ...sharedArgTypes, +}; + export const Skeleton = () => (
@@ -289,7 +303,7 @@ const aiLabel = ( ); -export const withAILabel = () => ( +export const withAILabel = (args) => (
( items={items} itemToString={(item) => (item ? item.text : '')} decorator={aiLabel} + {...args} />
); + +withAILabel.argTypes = { + ...sharedArgTypes, +}; diff --git a/packages/react/src/components/FileUploader/FileUploader.stories.js b/packages/react/src/components/FileUploader/FileUploader.stories.js index f19f241e92c7..39a450c6b0a0 100644 --- a/packages/react/src/components/FileUploader/FileUploader.stories.js +++ b/packages/react/src/components/FileUploader/FileUploader.stories.js @@ -32,26 +32,6 @@ export default { }, }; -export const Default = () => { - return ( -
- -
- ); -}; - export const _FileUploaderItem = (args) => { return ( (
); -export const Playground = (args) => { +export const Default = (args) => { return (
); }; -Playground.args = { +Default.args = { labelTitle: 'Upload files', labelDescription: 'Max file size is 500 MB. Only .jpg files are supported.', buttonLabel: 'Add file', @@ -197,7 +177,7 @@ Playground.args = { iconDescription: 'Delete file', name: '', }; -Playground.argTypes = { +Default.argTypes = { onChange: { action: 'onChange' }, onClick: { action: 'onClick' }, onDelete: { action: 'onDelete' }, diff --git a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js b/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js index aefd4f0794aa..ceb92f7fb836 100644 --- a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js +++ b/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js @@ -54,6 +54,90 @@ const items = [ }, ]; +const sharedArgTypes = { + className: { + control: { + type: 'text', + }, + }, + isCondensed: { + control: { + type: 'boolean', + }, + }, + disabled: { + control: { + type: 'boolean', + }, + }, + invalid: { + control: { + type: 'boolean', + }, + }, + invalidText: { + control: { + type: 'text', + }, + }, + label: { + control: { + type: 'text', + }, + }, + titleText: { + control: { + type: 'text', + }, + }, + warn: { + control: { + type: 'boolean', + }, + }, + warnText: { + control: { + type: 'text', + }, + }, +}; + +export const Default = (args) => ( +
+ {}} + id="default" + titleText="Label" + label="Choose an option" + items={items} + itemToString={(item) => (item ? item.text : '')} + {...args} + /> +
+); + +Default.args = { + defaultWidth: 400, + className: 'test-class', + isCondensed: false, + disabled: false, + invalid: false, + invalidText: + 'Error message that is really long can wrap to more lines but should not be excessively long.', + label: 'Choose an option', + titleText: 'Label', + warn: false, + warnText: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', +}; + +Default.argTypes = { + ...sharedArgTypes, + defaultWidth: { + control: { type: 'range', min: 300, max: 800, step: 50 }, + }, +}; + const ToggleTip = ( <> Label @@ -68,19 +152,6 @@ const ToggleTip = ( ); -export const Default = () => ( -
- {}} - id="default" - titleText="Label" - label="Choose an option" - items={items} - itemToString={(item) => (item ? item.text : '')} - /> -
-); - export const Condensed = () => (
); -export const withAILabel = () => ( +export const withAILabel = (args) => (
{}} @@ -136,102 +207,17 @@ export const withAILabel = () => ( items={items} itemToString={(item) => (item ? item.text : '')} decorator={aiLabel} - /> -
-); - -export const Playground = (args) => ( -
- {}} - id="default" - titleText="Label" - label="Choose an option" - items={items} - itemToString={(item) => (item ? item.text : '')} {...args} /> -
- {}} - id="default-3" - titleText={ToggleTip} - label="Choose an option" - items={items} - itemToString={(item) => (item ? item.text : '')} - />
); +withAILabel.argTypes = { + ...sharedArgTypes, +}; + export const Skeleton = () => (
); - -Playground.args = { - playgroundWidth: 400, - className: 'test-class', - isCondensed: false, - disabled: false, - invalid: false, - invalidText: - 'Error message that is really long can wrap to more lines but should not be excessively long.', - label: 'Choose an option', - titleText: 'Label', - warn: false, - warnText: - 'Warning message that is really long can wrap to more lines but should not be excessively long.', -}; - -Playground.argTypes = { - playgroundWidth: { - control: { type: 'range', min: 300, max: 800, step: 50 }, - }, - className: { - control: { - type: 'text', - }, - }, - isCondensed: { - control: { - type: 'boolean', - }, - }, - disabled: { - control: { - type: 'boolean', - }, - }, - invalid: { - control: { - type: 'boolean', - }, - }, - invalidText: { - control: { - type: 'text', - }, - }, - label: { - control: { - type: 'text', - }, - }, - titleText: { - control: { - type: 'text', - }, - }, - warn: { - control: { - type: 'boolean', - }, - }, - warnText: { - control: { - type: 'text', - }, - }, -}; diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js index e992d8e91fb5..ef6849c289df 100644 --- a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js +++ b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js @@ -25,143 +25,14 @@ export default { }, }; -const ToggleTip = ( - <> - Label - - - - - -

Additional field information here.

- - - -); - -export const Simple = () => ( -
- - - -
-); - -export const Single = () => ( -
- - - -
-); - -export const RangeWithCalendar = () => { - return ( -
- - - - -
- ); -}; - -export const Skeleton = () => ( -
- -
-
- -
-
- -
-); - -export const Playground = (args) => { - const { invalid, invalidText, warn, warnText, disabled, readOnly } = args; - return ( -
- - - - -
-
- - - -
- ); -}; - -Playground.args = { +const sharedArgs = { invalidText: 'Error message that is really long can wrap to more lines but should not be excessively long.', warnText: 'Warning message that is really long can wrap to more lines but should not be excessively long.', }; -Playground.argTypes = { +const sharedArgTypes = { appendTo: { table: { disable: true, @@ -263,3 +134,103 @@ Playground.argTypes = { }, }, }; + +const ToggleTip = ( + <> + Label + + + + + +

Additional field information here.

+ + + +); + +export const Simple = (args) => ( +
+ + + +
+); + +Simple.args = { ...sharedArgs }; +Simple.argTypes = { ...sharedArgTypes }; + +export const Single = (args) => ( +
+ + + +
+); + +Single.args = { ...sharedArgs }; +Single.argTypes = { ...sharedArgTypes }; + +export const RangeWithCalendar = (args) => { + return ( +
+ + + + +
+ ); +}; + +RangeWithCalendar.args = { ...sharedArgs }; +RangeWithCalendar.argTypes = { ...sharedArgTypes }; + +export const Skeleton = () => ( +
+ +
+
+ +
+
+ +
+); diff --git a/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js b/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js index fa4d1cf440f8..c5923a0dd70c 100644 --- a/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js +++ b/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js @@ -54,6 +54,90 @@ const items = [ }, ]; +const sharedArgTypes = { + className: { + control: { + type: 'text', + }, + }, + isCondensed: { + control: { + type: 'boolean', + }, + }, + disabled: { + control: { + type: 'boolean', + }, + }, + invalid: { + control: { + type: 'boolean', + }, + }, + invalidText: { + control: { + type: 'text', + }, + }, + label: { + control: { + type: 'text', + }, + }, + titleText: { + control: { + type: 'text', + }, + }, + warn: { + control: { + type: 'boolean', + }, + }, + warnText: { + control: { + type: 'text', + }, + }, +}; + +export const Default = (args) => ( +
+ (item ? item.text : '')} + {...args} + /> +
+); + +Default.args = { + defaultWidth: 400, + className: 'test-class', + isCondensed: false, + disabled: false, + invalid: false, + invalidText: + 'Error message that is really long can wrap to more lines but should not be excessively long.', + label: 'Choose an option', + titleText: 'Label', + warn: false, + warnText: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', +}; + +Default.argTypes = { + ...sharedArgTypes, + defaultWidth: { + control: { type: 'range', min: 300, max: 800, step: 50 }, + }, +}; + const ToggleTip = ( <> Label @@ -68,19 +152,6 @@ const ToggleTip = ( ); -export const Default = () => ( -
- (item ? item.text : '')} - /> -
-); - export const Condensed = () => (
); -export const withAILabel = () => ( +export const withAILabel = (args) => (
( items={items} itemToString={(item) => (item ? item.text : '')} decorator={aiLabel} - /> -
-); - -export const Playground = (args) => ( -
- (item ? item.text : '')} - {...args} - /> -
- (item ? item.text : '')} />
); +withAILabel.argTypes = { + ...sharedArgTypes, +}; + export const Skeleton = () => (
); - -Playground.args = { - playgroundWidth: 400, - className: 'test-class', - isCondensed: false, - disabled: false, - invalid: false, - invalidText: - 'Error message that is really long can wrap to more lines but should not be excessively long.', - label: 'Choose an option', - titleText: 'Label', - warn: false, - warnText: - 'Warning message that is really long can wrap to more lines but should not be excessively long.', -}; - -Playground.argTypes = { - playgroundWidth: { - control: { type: 'range', min: 300, max: 800, step: 50 }, - }, - className: { - control: { - type: 'text', - }, - }, - isCondensed: { - control: { - type: 'boolean', - }, - }, - disabled: { - control: { - type: 'boolean', - }, - }, - invalid: { - control: { - type: 'boolean', - }, - }, - invalidText: { - control: { - type: 'text', - }, - }, - label: { - control: { - type: 'text', - }, - }, - titleText: { - control: { - type: 'text', - }, - }, - warn: { - control: { - type: 'boolean', - }, - }, - warnText: { - control: { - type: 'text', - }, - }, -}; diff --git a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js index e06050611ab9..f435ace3d56e 100644 --- a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js +++ b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js @@ -59,6 +59,96 @@ const items = [ }, ]; +export const Default = (args) => ( +
+ {}} + id="default" + titleText="Label" + label="Choose an option" + items={items} + itemToString={(item) => (item ? item.text : '')} + {...args} + /> +
+); + +const sharedArgTypes = { + className: { + control: { + type: 'text', + }, + }, + isCondensed: { + control: { + type: 'boolean', + }, + }, + isFilterable: { + control: { + type: 'boolean', + }, + }, + disabled: { + control: { + type: 'boolean', + }, + }, + invalid: { + control: { + type: 'boolean', + }, + }, + invalidText: { + control: { + type: 'text', + }, + }, + label: { + control: { + type: 'text', + }, + }, + titleText: { + control: { + type: 'text', + }, + }, + warn: { + control: { + type: 'boolean', + }, + }, + warnText: { + control: { + type: 'text', + }, + }, +}; + +Default.args = { + defaultWidth: 400, + className: 'test-class', + isCondensed: false, + isFilterable: false, + disabled: false, + invalid: false, + invalidText: + 'Error message that is really long can wrap to more lines but should not be excessively long.', + label: 'Choose an option', + titleText: 'Label', + warn: false, + warnText: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', +}; + +Default.argTypes = { + ...sharedArgTypes, + defaultWidth: { + control: { type: 'range', min: 300, max: 800, step: 50 }, + }, +}; + const ToggleTip = ( <> Label @@ -73,20 +163,6 @@ const ToggleTip = ( ); -export const Default = () => ( -
- {}} - initialSelectedItem={items[2]} - id="default" - titleText="Label" - label="Choose an option" - items={items} - itemToString={(item) => (item ? item.text : '')} - /> -
-); - export const Filterable = () => (
); -export const withAILabel = () => ( +export const withAILabel = (args) => (
{}} @@ -175,108 +251,17 @@ export const withAILabel = () => ( items={items} itemToString={(item) => (item ? item.text : '')} decorator={aiLabel} - /> -
-); - -export const Playground = (args) => ( -
- {}} - id="default" - titleText="Label" - label="Choose an option" - items={items} - itemToString={(item) => (item ? item.text : '')} {...args} /> -
- {}} - id="default-3" - titleText={ToggleTip} - label="Choose an option" - items={items} - itemToString={(item) => (item ? item.text : '')} - />
); +withAILabel.argTypes = { + ...sharedArgTypes, +}; + export const Skeleton = () => (
); - -Playground.args = { - playgroundWidth: 400, - className: 'test-class', - isCondensed: false, - isFilterable: false, - disabled: false, - invalid: false, - invalidText: - 'Error message that is really long can wrap to more lines but should not be excessively long.', - label: 'Choose an option', - titleText: 'Label', - warn: false, - warnText: - 'Warning message that is really long can wrap to more lines but should not be excessively long.', -}; - -Playground.argTypes = { - playgroundWidth: { - control: { type: 'range', min: 300, max: 800, step: 50 }, - }, - className: { - control: { - type: 'text', - }, - }, - isCondensed: { - control: { - type: 'boolean', - }, - }, - isFilterable: { - control: { - type: 'boolean', - }, - }, - disabled: { - control: { - type: 'boolean', - }, - }, - invalid: { - control: { - type: 'boolean', - }, - }, - invalidText: { - control: { - type: 'text', - }, - }, - label: { - control: { - type: 'text', - }, - }, - titleText: { - control: { - type: 'text', - }, - }, - warn: { - control: { - type: 'boolean', - }, - }, - warnText: { - control: { - type: 'text', - }, - }, -}; diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js b/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js index bb1b94407630..4cce1ee3a592 100644 --- a/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js +++ b/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js @@ -37,77 +37,32 @@ const ToggleTip = ( ); -export const Default = () => ( -
- -
-
- -
-
- -
-); - -export const Skeleton = () => ( -
- -
-); - -export const Playground = (args) => ( -
+export const Default = (args) => ( +
); -Playground.args = { - playgroundWidth: 400, +Default.args = { + max: 100, + min: 0, + step: 10, + id: 'input-default', + placeholder: 'Placeholder text', + defaultWidth: 400, defaultValue: 50, invalid: false, invalidText: 'Error message that is really long can wrap to more lines but should not be excessively long.', disabled: false, - label: 'Label', + label: ToggleTip, warn: false, warnText: 'Warning message that is really long can wrap to more lines but should not be excessively long.', }; -Playground.argTypes = { - playgroundWidth: { +Default.argTypes = { + defaultWidth: { control: { type: 'range', min: 300, max: 800, step: 50 }, }, defaultValue: { @@ -146,3 +101,13 @@ Playground.argTypes = { }, }, }; + +export const Skeleton = () => ( +
+ +
+); diff --git a/packages/react/src/components/FluidSearch/FluidSearch.stories.js b/packages/react/src/components/FluidSearch/FluidSearch.stories.js index 32fc233402d0..d41a3e14fc28 100644 --- a/packages/react/src/components/FluidSearch/FluidSearch.stories.js +++ b/packages/react/src/components/FluidSearch/FluidSearch.stories.js @@ -16,40 +16,28 @@ export default { }, }; -export const Default = () => ( -
- -
-); - export const Skeleton = () => (
); -export const Playground = (args) => ( -
+export const Default = (args) => ( +
); -Playground.args = { - playgroundWidth: 400, +Default.args = { + defaultWidth: 400, closeButtonLabelText: 'Clear search input', disabled: false, labelText: 'Search', placeholder: 'Prompt text', }; -Playground.argTypes = { - playgroundWidth: { +Default.argTypes = { + defaultWidth: { control: { type: 'range', min: 300, max: 800, step: 50 }, }, className: { diff --git a/packages/react/src/components/FluidSelect/FluidSelect.stories.js b/packages/react/src/components/FluidSelect/FluidSelect.stories.js index 633e9308ab08..f3507d116388 100644 --- a/packages/react/src/components/FluidSelect/FluidSelect.stories.js +++ b/packages/react/src/components/FluidSelect/FluidSelect.stories.js @@ -66,6 +66,44 @@ export default { }, }; +const sharedArgTypes = { + className: { + control: { + type: 'text', + }, + }, + disabled: { + control: { + type: 'boolean', + }, + }, + invalid: { + control: { + type: 'boolean', + }, + }, + invalidText: { + control: { + type: 'text', + }, + }, + labelText: { + control: { + type: 'text', + }, + }, + warn: { + control: { + type: 'boolean', + }, + }, + warnText: { + control: { + type: 'text', + }, + }, +}; + const ToggleTip = ( <> Select an option @@ -80,33 +118,9 @@ const ToggleTip = ( ); -export const Default = () => ( -
- - - - - - - -

- - - - - - - -

- +export const Default = (args) => ( +
+ @@ -116,6 +130,26 @@ export const Default = () => (
); +Default.args = { + labelText: ToggleTip, + defaultWidth: 400, + className: 'test-class', + disabled: false, + invalid: false, + invalidText: + 'Error message that is really long can wrap to more lines but should not be excessively long.', + warn: false, + warnText: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', +}; + +Default.argTypes = { + ...sharedArgTypes, + defaultWidth: { + control: { type: 'range', min: 300, max: 800, step: 50 }, + }, +}; + const aiLabel = ( @@ -147,9 +181,13 @@ const aiLabel = ( ); -export const withAILabel = () => ( +export const withAILabel = (args) => (
- + (
); -export const Playground = (args) => ( -
- - - - - - - -
-); +withAILabel.argTypes = { ...sharedArgTypes }; export const Skeleton = () => (
); - -Playground.args = { - playgroundWidth: 400, - className: 'test-class', - disabled: false, - invalid: false, - invalidText: - 'Error message that is really long can wrap to more lines but should not be excessively long.', - warn: false, - warnText: - 'Warning message that is really long can wrap to more lines but should not be excessively long.', -}; - -Playground.argTypes = { - playgroundWidth: { - control: { type: 'range', min: 300, max: 800, step: 50 }, - }, - className: { - control: { - type: 'text', - }, - }, - disabled: { - control: { - type: 'boolean', - }, - }, - invalid: { - control: { - type: 'boolean', - }, - }, - invalidText: { - control: { - type: 'text', - }, - }, - labelText: { - control: { - type: 'text', - }, - }, - warn: { - control: { - type: 'boolean', - }, - }, - warnText: { - control: { - type: 'text', - }, - }, -}; diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js index b60f4c9360e9..2685bb7507b1 100644 --- a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js +++ b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js @@ -59,75 +59,7 @@ export default { }, }; -export const Default = () => ( - -); - -export const DefaultWithLayers = () => ( - - {(layer) => ( - - )} - -); - -const ToggleTip = ( - <> - Text Area label - - - - - -

Additional field information here.

- - - -); - -export const DefaultWithTooltip = () => ( - -); - -export const Skeleton = () => ( -
- -
-); - -export const Playground = (args) => ( -
- -
-); - -Playground.args = { - playgroundWidth: 300, - className: 'test-class', - placeholder: 'Placeholder text', - invalid: false, - invalidText: - 'Error message that is really long can wrap to more lines but should not be excessively long.', - disabled: false, - enableCounter: false, - labelText: 'Text Area label', - maxCount: 500, - warn: false, - warnText: 'This is a warning message.', -}; - -Playground.argTypes = { - playgroundWidth: { - control: { type: 'range', min: 300, max: 800, step: 50 }, - }, +const sharedArgTypes = { className: { control: { type: 'text', @@ -179,3 +111,67 @@ Playground.argTypes = { }, }, }; + +export const Default = (args) => ( +
+ +
+); + +Default.args = { + defaultWidth: 300, + className: 'test-class', + placeholder: 'Placeholder text', + invalid: false, + invalidText: + 'Error message that is really long can wrap to more lines but should not be excessively long.', + disabled: false, + enableCounter: false, + labelText: 'Text Area label', + maxCount: 500, + warn: false, + warnText: 'This is a warning message.', +}; + +Default.argTypes = { + ...sharedArgTypes, + defaultWidth: { + control: { type: 'range', min: 300, max: 800, step: 50 }, + }, +}; + +export const DefaultWithLayers = () => ( + + {(layer) => ( + + )} + +); + +const ToggleTip = ( + <> + Text Area label + + + + + +

Additional field information here.

+ + + +); + +export const DefaultWithTooltip = () => ( + +); + +export const Skeleton = () => ( +
+ +
+); diff --git a/packages/react/src/components/FluidTextInput/FluidPasswordInput.stories.js b/packages/react/src/components/FluidTextInput/FluidPasswordInput.stories.js index f226380d2526..5db3a124f170 100644 --- a/packages/react/src/components/FluidTextInput/FluidPasswordInput.stories.js +++ b/packages/react/src/components/FluidTextInput/FluidPasswordInput.stories.js @@ -15,16 +15,8 @@ export default { component: FluidPasswordInput, }; -export const Default = () => ( - -); - -export const Playground = (args) => ( -
+export const Default = (args) => ( +
(
); -Playground.args = { - playgroundWidth: 300, +Default.args = { + defaultWidth: 300, className: 'test-class', placeholder: 'Placeholder text', showPasswordLabel: 'Show password label', @@ -51,8 +43,8 @@ Playground.args = { 'Warning message that is really long can wrap to more lines but should not be excessively long.', }; -Playground.argTypes = { - playgroundWidth: { +Default.argTypes = { + defaultWidth: { control: { type: 'range', min: 300, max: 800, step: 50 }, }, className: { diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js b/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js index c95298da0f4f..5a9145bdb082 100644 --- a/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js +++ b/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js @@ -25,14 +25,6 @@ export default { }, }; -export const Default = () => ( - -); - const ToggleTip = ( <> Label @@ -47,28 +39,14 @@ const ToggleTip = ( ); -export const DefaultWithTooltip = () => ( - -); - -export const Skeleton = () => ( -
- -
-); - -export const Playground = (args) => ( -
+export const Default = (args) => ( +
); -Playground.args = { - playgroundWidth: 300, +Default.args = { + defaultWidth: 300, className: 'test-class', placeholder: 'Placeholder text', invalid: false, @@ -81,8 +59,8 @@ Playground.args = { 'Warning message that is really long can wrap to more lines but should not be excessively long.', }; -Playground.argTypes = { - playgroundWidth: { +Default.argTypes = { + defaultWidth: { control: { type: 'range', min: 300, max: 800, step: 50 }, }, className: { @@ -141,3 +119,17 @@ Playground.argTypes = { }, }, }; + +export const DefaultWithTooltip = () => ( + +); + +export const Skeleton = () => ( +
+ +
+); diff --git a/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js b/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js index 82b8ed096f2e..819c884fbaff 100644 --- a/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js +++ b/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js @@ -41,101 +41,6 @@ const ToggleTip = ( ); -export const Default = () => ( -
-
- - - - - - - - - - - - -
-
- - - - - - -
-
-
-
- - - - - - - - - - - - -
-
- - - - - - -
-
-
-
- - - - - - - - - - - - -
-
- - - - - - -
-
-); - export const Skeleton = () => (
@@ -145,7 +50,7 @@ export const Skeleton = () => (
); -export const Playground = (args) => { +export const Default = (args) => { return (
@@ -176,7 +81,7 @@ export const Playground = (args) => { ); }; -Playground.args = { +Default.args = { labelText: 'Time', invalidText: 'Error message that is really long can wrap to more lines but should not be excessively long.', @@ -185,7 +90,7 @@ Playground.args = { 'Warning message that is really long can wrap to more lines but should not be excessively long.', }; -Playground.argTypes = { +Default.argTypes = { children: { table: { disable: true, diff --git a/packages/react/src/components/Form/Form.stories.js b/packages/react/src/components/Form/Form.stories.js index ac7d51780a1f..b13468eb39c8 100644 --- a/packages/react/src/components/Form/Form.stories.js +++ b/packages/react/src/components/Form/Form.stories.js @@ -390,7 +390,7 @@ export const withAILabel = (args) => { labelText="Date Picker label" size="md" id="fluid-date-picker" - slug={aiLabel} + decorator={aiLabel} {...rest} /> @@ -544,7 +544,7 @@ withAILabel.argTypes = { type: 'boolean', }, table: { - category: 'Slug', + category: 'AILabel', }, }, }; diff --git a/packages/react/src/components/FormGroup/FormGroup.stories.js b/packages/react/src/components/FormGroup/FormGroup.stories.js index 6b5018367bbd..c5b626de5058 100644 --- a/packages/react/src/components/FormGroup/FormGroup.stories.js +++ b/packages/react/src/components/FormGroup/FormGroup.stories.js @@ -40,32 +40,14 @@ export default { }, }; -export const Default = () => ( - - - - - - - - - - - - -); - -export const Playground = (args) => ( +export const Default = (args) => ( @@ -76,7 +58,7 @@ export const Playground = (args) => ( ); -Playground.argTypes = { +Default.argTypes = { legendId: { control: { type: 'text', @@ -99,7 +81,7 @@ Playground.argTypes = { }, }; -Playground.args = { +Default.args = { legendId: 'form-group-1', legendText: 'FormGroup Legend', message: false, diff --git a/packages/react/src/components/Grid/FlexGrid.stories.js b/packages/react/src/components/Grid/FlexGrid.stories.js index 94580021c584..4613aaaf16bb 100644 --- a/packages/react/src/components/Grid/FlexGrid.stories.js +++ b/packages/react/src/components/Grid/FlexGrid.stories.js @@ -297,7 +297,7 @@ export const MixedGutterModes = () => ( ); -export const Playground = (args) => ( +export const Default = (args) => ( @@ -316,14 +316,14 @@ export const Playground = (args) => ( ); -Playground.args = { +Default.args = { as: 'div', fullWidth: false, narrow: false, condensed: false, }; -Playground.argTypes = { +Default.argTypes = { as: { control: { type: 'text', diff --git a/packages/react/src/components/Grid/Grid.stories.js b/packages/react/src/components/Grid/Grid.stories.js index db6e7b489751..d802dd0a5367 100644 --- a/packages/react/src/components/Grid/Grid.stories.js +++ b/packages/react/src/components/Grid/Grid.stories.js @@ -36,15 +36,49 @@ export default { ], }; -export const Default = () => { - return ( - - - - - - - ); +export const Default = (args) => ( + + + + + + +); + +Default.args = { + as: 'div', + fullWidth: false, + narrow: false, + condensed: false, +}; + +Default.argTypes = { + as: { + control: { + type: 'text', + }, + }, + children: { + control: false, + }, + className: { + control: false, + }, + fullWidth: { + control: { + type: 'boolean', + }, + }, + narrow: { + control: { + type: 'boolean', + }, + }, + condensed: { + control: { + type: 'boolean', + }, + }, }; export const Narrow = () => { @@ -110,49 +144,97 @@ export const Responsive = () => ( export const Subgrid = () => { return ( - - -

Small: Span 2 of 4

-

Medium: Span 4 of 8

-

Large: Span 3 of 16

- - -

Small: Span 2 of 4

-

Medium: Span 4 of 8

-

Large: Span 10 of 16

- - -

sm={1}

md={1}

lg={2}

- - -

sm={1}

md={1}

lg={2}

- - -

sm={0}

md={1}

lg={1}

- - -

sm={0}

md={1}

lg={1}

- - -

sm={0}

md={0}

lg={1}

- - -

sm={0}

md={0}

lg={1}

- - -

sm={0}

md={0}

lg={1}

- - -

sm={0}

md={0}

lg={1}

- - - - -

Small: Span 0 of 4

-

Medium: Span 0 of 8

-

Large: Span 3 of 16

- - + <> + + +

Small: Span 2 of 4

+

Medium: Span 4 of 8

+

Large: Span 3 of 16

+ + +

Small: Span 2 of 4

+

Medium: Span 4 of 8

+

Large: Span 10 of 16

+ + +

sm={1}

md={1}

lg={2}

+ + +

sm={1}

md={1}

lg={2}

+ + +

sm={0}

md={1}

lg={1}

+ + +

sm={0}

md={1}

lg={1}

+ + +

sm={0}

md={0}

lg={1}

+ + +

sm={0}

md={0}

lg={1}

+ + +

sm={0}

md={0}

lg={1}

+ + +

sm={0}

md={0}

lg={1}

+ + + + +

Small: Span 0 of 4

+

Medium: Span 0 of 8

+

Large: Span 3 of 16

+ + + +
Wide
+ + + + + + + + + + + + + + +
Narrow
+ + + + + + + + + + + + + + +
Condensed
+ + + + + + + + + + + + + + + ); }; @@ -272,48 +354,3 @@ export const Offset = () => ( /> ); - -export const Playground = (args) => ( - - - - - - -); - -Playground.args = { - as: 'div', - fullWidth: false, - narrow: false, - condensed: false, -}; - -Playground.argTypes = { - as: { - control: { - type: 'text', - }, - }, - children: { - control: false, - }, - className: { - control: false, - }, - fullWidth: { - control: { - type: 'boolean', - }, - }, - narrow: { - control: { - type: 'boolean', - }, - }, - condensed: { - control: { - type: 'boolean', - }, - }, -}; diff --git a/packages/react/src/components/IconButton/IconButton.stories.js b/packages/react/src/components/IconButton/IconButton.stories.js index 7a7406d506ee..526d7d9f93cf 100644 --- a/packages/react/src/components/IconButton/IconButton.stories.js +++ b/packages/react/src/components/IconButton/IconButton.stories.js @@ -36,15 +36,7 @@ export default { }, }; -export const Default = () => ( -
- - - -
-); - -const PlaygroundStory = (props) => { +const DefaultStory = (props) => { const { align, defaultOpen, disabled, kind, label, size } = props; return (
@@ -61,9 +53,9 @@ const PlaygroundStory = (props) => { ); }; -export const Playground = PlaygroundStory.bind({}); +export const Default = DefaultStory.bind({}); -Playground.args = { +Default.args = { align: 'bottom', defaultOpen: true, disabled: false, @@ -71,7 +63,7 @@ Playground.args = { kind: 'primary', }; -Playground.argTypes = { +Default.argTypes = { align: { options: [ 'top', diff --git a/packages/react/src/components/IconButton/docs/overview.mdx b/packages/react/src/components/IconButton/docs/overview.mdx index 46c41d769fbd..5a23db6b247a 100644 --- a/packages/react/src/components/IconButton/docs/overview.mdx +++ b/packages/react/src/components/IconButton/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-iconbutton--playground' - } + variant: 'components-iconbutton--default', + }, ]} /> diff --git a/packages/react/src/components/Icons/Icons.stories.js b/packages/react/src/components/Icons/Icons.stories.js index 32751beb249d..953d396234fa 100644 --- a/packages/react/src/components/Icons/Icons.stories.js +++ b/packages/react/src/components/Icons/Icons.stories.js @@ -14,36 +14,22 @@ export default { title: 'Elements/Icons', }; -export const Default = () => { +export const Default = (args) => { return ( - <> -
-

16 pixel (default)

- -
- -
-

20 pixel

- -
- -
-

32 pixel

- -
- +
+

+ {args.size} pixel {args.size === 16 ? '(default)' : ''} +

+ +
); }; -export const Playground = (args) => { - return ; -}; - -Playground.args = { +Default.args = { size: 16, }; -Playground.argTypes = { +Default.argTypes = { size: { options: ['16', '20', '32'], control: { type: 'select' }, diff --git a/packages/react/src/components/InlineLoading/InlineLoading.stories.js b/packages/react/src/components/InlineLoading/InlineLoading.stories.js index 5b999ffbadd3..b0cd2f0b1f45 100644 --- a/packages/react/src/components/InlineLoading/InlineLoading.stories.js +++ b/packages/react/src/components/InlineLoading/InlineLoading.stories.js @@ -20,14 +20,6 @@ export default { }, }; -export const Default = () => ( - -); - export const UxExample = () => { function MockSubmission({ children }) { const [isSubmitting, setIsSubmitting] = useState(false); @@ -85,14 +77,14 @@ export const UxExample = () => { ); }; -export const Playground = (args) => ; +export const Default = (args) => ; -Playground.args = { +Default.args = { description: 'Loading', iconDescription: 'Loading data...', }; -Playground.argTypes = { +Default.argTypes = { className: { table: { disable: true, diff --git a/packages/react/src/components/Layer/Layer.stories.js b/packages/react/src/components/Layer/Layer.stories.js index 19feb908072b..f3f588f48187 100644 --- a/packages/react/src/components/Layer/Layer.stories.js +++ b/packages/react/src/components/Layer/Layer.stories.js @@ -61,18 +61,22 @@ export const Default = () => { ); }; -export const CustomLevel = () => { +export const CustomLevel = (args) => { function TestComponent() { return
Test component
; } return ( - + ); }; +CustomLevel.args = { + level: 2, +}; + export const UseLayer = () => { function ExampleComponent() { const { level } = useLayer(); @@ -96,17 +100,3 @@ export const UseLayer = () => { UseLayer.story = { name: 'useLayer', }; - -const PlaygroundStory = (args) => { - function TestComponent() { - return
Test component
; - } - - return ( - - - - ); -}; - -export const Playground = PlaygroundStory.bind({}); diff --git a/packages/react/src/components/Layout/Layout.stories.js b/packages/react/src/components/Layout/Layout.stories.js index cb04f7260631..ee7a29cf6caf 100644 --- a/packages/react/src/components/Layout/Layout.stories.js +++ b/packages/react/src/components/Layout/Layout.stories.js @@ -50,7 +50,7 @@ const Demo = () => ( ); -export const Playground = (args) => { +export const Default = (args) => { return (

Layout demo

diff --git a/packages/react/src/components/Link/Link.stories.js b/packages/react/src/components/Link/Link.stories.js index 38afe5a4198c..60f9811495a5 100644 --- a/packages/react/src/components/Link/Link.stories.js +++ b/packages/react/src/components/Link/Link.stories.js @@ -40,7 +40,11 @@ export default { }, }; -export const Default = () => Link; +export const Default = (args) => ( + + Link + +); export const Inline = () => ( <> @@ -64,14 +68,11 @@ export const Inline = () => ( ); -export const PairedWithIcon = () => ( - }> +export const PairedWithIcon = (args) => ( + } + {...args}> Carbon Docs ); - -export const Playground = (args) => ( - - Link - -); diff --git a/packages/react/src/components/Loading/Loading.stories.js b/packages/react/src/components/Loading/Loading.stories.js index fabd7d250680..501b699bb4a2 100644 --- a/packages/react/src/components/Loading/Loading.stories.js +++ b/packages/react/src/components/Loading/Loading.stories.js @@ -19,22 +19,18 @@ export default { }, }; -export const Default = () => { - return ; -}; - -export const Playground = (args) => { +export const Default = (args) => { return ; }; -Playground.args = { +Default.args = { active: true, withOverlay: false, small: false, description: 'Loading', }; -Playground.argTypes = { +Default.argTypes = { children: { table: { disable: true, diff --git a/packages/react/src/components/Menu/Menu.stories.js b/packages/react/src/components/Menu/Menu.stories.js index ca8350754de4..80a9ca1bf264 100644 --- a/packages/react/src/components/Menu/Menu.stories.js +++ b/packages/react/src/components/Menu/Menu.stories.js @@ -40,7 +40,7 @@ export default { }, }; -export const Playground = (args) => { +export const Default = (args) => { const itemOnClick = action('onClick (MenuItem)'); const selectableOnChange = action('onChange (MenuItemSelectable)'); const radioOnChange = action('onChange (MenuItemRadioGroup)'); @@ -88,12 +88,12 @@ export const Playground = (args) => { ); }; -Playground.args = { +Default.args = { onClose: action('onClose'), open: true, }; -Playground.argTypes = { +Default.argTypes = { target: { table: { disable: true, diff --git a/packages/react/src/components/Menu/docs/overview.mdx b/packages/react/src/components/Menu/docs/overview.mdx index c8f73a762157..e0684a3751f8 100644 --- a/packages/react/src/components/Menu/docs/overview.mdx +++ b/packages/react/src/components/Menu/docs/overview.mdx @@ -7,7 +7,7 @@ variants={[ { label: 'Default', - variant: 'components-menu--playground' + variant: 'components-menu--default', }, ]} /> diff --git a/packages/react/src/components/MenuButton/MenuButton.mdx b/packages/react/src/components/MenuButton/MenuButton.mdx index 1c7598923520..d23f87892316 100644 --- a/packages/react/src/components/MenuButton/MenuButton.mdx +++ b/packages/react/src/components/MenuButton/MenuButton.mdx @@ -38,16 +38,18 @@ If it seems your specified `menuAlignment` isn't working, it's because we prioritize ensuring the Menu remains visible. We calculate the optimal position to display the Menu in case the provided `menuAlignment` obscures it. -We encourage you to play around in the Storybook playground to better understand -the `menuAlignment` prop. - +We encourage you to play around in the Storybook Default stories to better +understand the `menuAlignment` prop. ## menuTarget Prop -The `menuTarget` prop specifies where the `Menu` should render, which is particularly useful when using `MenuButton` inside a modal. By default, the menu renders in `document.body`, but this can disrupt focus order in modals or other components with focus management. - -Pass the `menuTarget` prop to render the `Menu` inside the modal or any specific element where you want it to render: +The `menuTarget` prop specifies where the `Menu` should render, which is +particularly useful when using `MenuButton` inside a modal. By default, the menu +renders in `document.body`, but this can disrupt focus order in modals or other +components with focus management. +Pass the `menuTarget` prop to render the `Menu` inside the modal or any specific +element where you want it to render: ## Component API diff --git a/packages/react/src/components/MenuButton/MenuButton.stories.js b/packages/react/src/components/MenuButton/MenuButton.stories.js index 6c9d0eb932e2..18ffd5b36900 100644 --- a/packages/react/src/components/MenuButton/MenuButton.stories.js +++ b/packages/react/src/components/MenuButton/MenuButton.stories.js @@ -29,21 +29,51 @@ export default { }, }; -export const Default = () => ( - - - - - -); -export const ExperimentalAutoAlign = () => ( +const sharedArgTypes = { + children: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + menuTarget: { + table: { + disable: true, + }, + }, +}; + +export const Default = (args) => { + const onClick = action('onClick (MenuItem)'); + + return ( + + + + + + ); +}; + +Default.args = { label: 'Actions' }; + +Default.argTypes = { ...sharedArgTypes }; + +export const ExperimentalAutoAlign = (args) => (
- + @@ -51,8 +81,11 @@ export const ExperimentalAutoAlign = () => (
); -export const WithDanger = () => ( - + +ExperimentalAutoAlign.argTypes = { ...sharedArgTypes }; + +export const WithDanger = (args) => ( + @@ -61,8 +94,10 @@ export const WithDanger = () => ( ); -export const WithDividers = () => ( - +WithDanger.argTypes = { ...sharedArgTypes }; + +export const WithDividers = (args) => ( + @@ -74,14 +109,18 @@ export const WithDividers = () => ( ); -export const WithIcons = () => ( - +WithDividers.argTypes = { ...sharedArgTypes }; + +export const WithIcons = (args) => ( + ); +WithIcons.argTypes = { ...sharedArgTypes }; + export const WithMenuAlignment = () => ( <>
@@ -130,40 +169,3 @@ export const WithMenuAlignment = () => (
); - -export const Playground = (args) => { - const onClick = action('onClick (MenuItem)'); - - return ( - - - - - - ); -}; - -Playground.args = { - label: 'Actions', -}; - -Playground.argTypes = { - children: { - table: { - disable: true, - }, - }, - className: { - table: { - disable: true, - }, - }, - menuTarget: { - table: { - disable: true, - }, - }, -}; diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js index 176c3049aa25..c30eb8fe57be 100644 --- a/packages/react/src/components/Modal/Modal.stories.js +++ b/packages/react/src/components/Modal/Modal.stories.js @@ -44,294 +44,13 @@ export default { }, }; -export const Default = () => { - const [open, setOpen] = useState(true); - const [openPopover, setOpenPopover] = useState(false); - const menuTargetref = useRef(null); - return ( - <> - - setOpen(false)} - modalHeading="Add a custom domain" - modalLabel="Account resources" - primaryButtonText="Add" - secondaryButtonText="Cancel"> -

- Custom domains direct requests for your apps in this Cloud Foundry - organization to a URL that you own. A custom domain can be a shared - domain, a shared subdomain, or a shared domain and host. -

- -
- { - setOpenPopover(!openPopover); - }} - /> -
- -
-

This popover uses autoAlign

-

- Scroll the container up, down, left or right to observe how the - popover will automatically change its position in attempt to - stay within the viewport. This works on initial render in - addition to on scroll. -

-
- - - - - -
-
- - - - - - -
-
- (item ? item.text : '')} - /> - - - ); -}; - -export const FullWidth = () => { - const [open, setOpen] = useState(true); - return ( - <> - - setOpen(false)} - isFullWidth - modalHeading="Full Width Modal" - modalLabel="An example of a modal with no padding" - primaryButtonText="Add" - secondaryButtonText="Cancel"> - - - - - Column A - - - Column B - - - Column C - - - - - - Row 1 - Row 1 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc - dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean - posuere sem vel euismod dignissim. Nulla ut cursus dolor. - Pellentesque vulputate nisl a porttitor interdum. - - - - Row 2 - Row 2 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc - dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean - posuere sem vel euismod dignissim. Nulla ut cursus dolor. - Pellentesque vulputate nisl a porttitor interdum. - - - - Row 3 - Row 3 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc - dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean - posuere sem vel euismod dignissim. Nulla ut cursus dolor. - Pellentesque vulputate nisl a porttitor interdum. - - - - - - - ); -}; - -export const DangerModal = () => { - const [open, setOpen] = useState(true); - return ( - <> - - setOpen(false)} - danger - modalHeading="Are you sure you want to delete this custom domain?" - modalLabel="Account resources" - primaryButtonText="Delete" - secondaryButtonText="Cancel" - /> - - ); -}; - const buttons = { 'One (1)': '1', 'Two (2)': '2', 'Three (3)': '3', }; -const modalFooter = (numberOfButtons) => { - const secondaryButtons = () => { - switch (numberOfButtons) { - case '1': - return { - secondaryButtons: [], - }; - case '2': - return { - secondaryButtonText: 'Cancel', - }; - case '3': - return { - secondaryButtons: [ - { - buttonText: 'Keep both', - onClick: action('onClick'), - }, - { - buttonText: 'Rename', - onClick: action('onClick'), - }, - ], - }; - default: - return null; - } - }; - return { - ...secondaryButtons(), - }; -}; - -export const WithScrollingContent = () => { - const [open, setOpen] = useState(true); - return ( - <> - - setOpen(false)} - hasScrollingContent - modalHeading="Add a custom domain" - modalLabel="Account resources" - primaryButtonText="Add" - secondaryButtonText="Cancel"> -

- Custom domains direct requests for your apps in this Cloud Foundry - organization to a URL that you own. A custom domain can be a shared - domain, a shared subdomain, or a shared domain and host. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu - nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae leo - vitae orci tincidunt auctor eget eget libero. Ut tincidunt ultricies - fringilla. Aliquam erat volutpat. Aenean arcu odio, elementum vel - vehicula vitae, porttitor ac lorem. Sed viverra elit ac risus - tincidunt fermentum. Ut sollicitudin nibh id risus ornare ornare. - Etiam gravida orci ut lectus dictum, quis ultricies felis mollis. - Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante quis - pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at elit. - Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales magna. - Proin ornare tellus quis hendrerit egestas. Donec pharetra leo nec - molestie sollicitudin.{' '} -

- -
- -
- - (item ? item.text : '')} - /> - - - ); -}; -export const Playground = ({ numberOfButtons, ...args }) => { +export const Default = ({ numberOfButtons, ...args }) => { const [open, setOpen] = useState(true); const [popoverOpen, setPopoverOpen] = useState(false); return ( @@ -465,7 +184,7 @@ export const Playground = ({ numberOfButtons, ...args }) => {

-
+
{ setPopoverOpen(!popoverOpen); @@ -555,11 +274,11 @@ export const Playground = ({ numberOfButtons, ...args }) => { ); }; -Playground.args = { +Default.args = { numberOfButtons: 'Two (2)', }; -Playground.argTypes = { +Default.argTypes = { children: { table: { disable: true, @@ -628,6 +347,198 @@ Playground.argTypes = { }, }; +export const FullWidth = () => { + const [open, setOpen] = useState(true); + return ( + <> + + setOpen(false)} + isFullWidth + modalHeading="Full Width Modal" + modalLabel="An example of a modal with no padding" + primaryButtonText="Add" + secondaryButtonText="Cancel"> + + + + + Column A + + + Column B + + + Column C + + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc + dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean + posuere sem vel euismod dignissim. Nulla ut cursus dolor. + Pellentesque vulputate nisl a porttitor interdum. + + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc + dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean + posuere sem vel euismod dignissim. Nulla ut cursus dolor. + Pellentesque vulputate nisl a porttitor interdum. + + + + Row 3 + Row 3 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc + dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean + posuere sem vel euismod dignissim. Nulla ut cursus dolor. + Pellentesque vulputate nisl a porttitor interdum. + + + + + + + ); +}; + +export const DangerModal = () => { + const [open, setOpen] = useState(true); + return ( + <> + + setOpen(false)} + danger + modalHeading="Are you sure you want to delete this custom domain?" + modalLabel="Account resources" + primaryButtonText="Delete" + secondaryButtonText="Cancel" + /> + + ); +}; + +const modalFooter = (numberOfButtons) => { + const secondaryButtons = () => { + switch (numberOfButtons) { + case '1': + return { + secondaryButtons: [], + }; + case '2': + return { + secondaryButtonText: 'Cancel', + }; + case '3': + return { + secondaryButtons: [ + { + buttonText: 'Keep both', + onClick: action('onClick'), + }, + { + buttonText: 'Rename', + onClick: action('onClick'), + }, + ], + }; + default: + return null; + } + }; + return { + ...secondaryButtons(), + }; +}; + +export const WithScrollingContent = () => { + const [open, setOpen] = useState(true); + return ( + <> + + setOpen(false)} + hasScrollingContent + modalHeading="Add a custom domain" + modalLabel="Account resources" + primaryButtonText="Add" + secondaryButtonText="Cancel"> +

+ Custom domains direct requests for your apps in this Cloud Foundry + organization to a URL that you own. A custom domain can be a shared + domain, a shared subdomain, or a shared domain and host. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu + nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae leo + vitae orci tincidunt auctor eget eget libero. Ut tincidunt ultricies + fringilla. Aliquam erat volutpat. Aenean arcu odio, elementum vel + vehicula vitae, porttitor ac lorem. Sed viverra elit ac risus + tincidunt fermentum. Ut sollicitudin nibh id risus ornare ornare. + Etiam gravida orci ut lectus dictum, quis ultricies felis mollis. + Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante quis + pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at elit. + Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales magna. + Proin ornare tellus quis hendrerit egestas. Donec pharetra leo nec + molestie sollicitudin.{' '} +

+ +
+ +
+ + (item ? item.text : '')} + /> + + + ); +}; + export const WithStateManager = () => { /** * Simple state manager for modals. diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js index 819d32671c8c..ff22380feb1e 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js +++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js @@ -116,37 +116,7 @@ const items = [ }, ]; -export const Playground = (args) => { - const ref = useRef(); - useEffect(() => { - ref?.current?.scrollIntoView({ block: 'center', inline: 'center' }); - }); - return ( -
-
- (item ? item.text : '')} - selectionFeedback="top-after-reopen" - ref={ref} - {...args} - /> -
-
- ); -}; - -Playground.args = { +const sharedArgs = { size: 'md', autoAlign: false, type: 'default', @@ -166,7 +136,7 @@ Playground.args = { selectAllItemText: 'All options', }; -Playground.argTypes = { +const sharedArgTypes = { selectionFeedback: { options: ['top', 'fixed', 'top-after-reopen'], control: { type: 'select' }, @@ -243,7 +213,7 @@ Playground.argTypes = { }, }; -export const Default = () => { +export const Default = (args) => { return (
{ items={items} itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" + {...args} />
); }; -export const WithInitialSelectedItems = () => { +Default.args = { ...sharedArgs }; +Default.argTypes = { ...sharedArgTypes }; + +export const WithInitialSelectedItems = (args) => { return (
{ itemToString={(item) => (item ? item.text : '')} initialSelectedItems={[items[0], items[1]]} selectionFeedback="top-after-reopen" + {...args} />
); @@ -310,7 +285,7 @@ Filterable.argTypes = { }, }; -export const WithLayerMultiSelect = () => ( +export const WithLayerMultiSelect = (args) => ( {(layer) => (
@@ -322,13 +297,14 @@ export const WithLayerMultiSelect = () => ( items={items} itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" + {...args} />
)} ); -export const _FilterableWithLayer = () => ( +export const _FilterableWithLayer = (args) => ( {(layer) => (
@@ -339,13 +315,14 @@ export const _FilterableWithLayer = () => ( items={items} itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" + {...args} />
)} ); -export const _Controlled = () => { +export const _Controlled = (args) => { const [selectedItems, setSelectedItems] = useState( items.filter((item) => item.id === 'downshift-1-item-0') ); @@ -366,6 +343,7 @@ export const _Controlled = () => { onChange={(data) => onSelectionChanged(data.selectedItems)} itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" + {...args} />
@@ -412,7 +390,7 @@ const itemsWithSelectAll = [ }, ]; -export const SelectAll = () => { +export const SelectAll = (args) => { const [label, setLabel] = useState('Choose options'); const onChange = (value) => { @@ -436,6 +414,7 @@ export const SelectAll = () => { itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" onChange={onChange} + {...args} />
); @@ -487,7 +466,7 @@ export const withAILabel = () => (
); -export const FilterableWithAILabel = () => ( +export const FilterableWithAILabel = (args) => (
( itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" decorator={aiLabel} + {...args} />
); -export const ExperimentalAutoAlign = () => { +export const ExperimentalAutoAlign = (args) => { const ref = useRef(); useEffect(() => { ref?.current?.scrollIntoView({ block: 'center', inline: 'center' }); @@ -526,8 +506,11 @@ export const ExperimentalAutoAlign = () => { selectionFeedback="top-after-reopen" ref={ref} autoAlign + {...args} />
); }; + +ExperimentalAutoAlign.argTypes = { ...sharedArgTypes }; diff --git a/packages/react/src/components/Notification/Notification.mdx b/packages/react/src/components/Notification/Notification.mdx index 1e08c67932d6..bf3b42d818a0 100644 --- a/packages/react/src/components/Notification/Notification.mdx +++ b/packages/react/src/components/Notification/Notification.mdx @@ -63,15 +63,15 @@ an `aria-describedby` on the interactive element with a value that matches the ## Actionable - + ## Inline - + ## Toast - + ## Feedback diff --git a/packages/react/src/components/Notification/stories/ActionableNotification.stories.js b/packages/react/src/components/Notification/stories/ActionableNotification.stories.js index 5000132db918..d08eecff68d5 100644 --- a/packages/react/src/components/Notification/stories/ActionableNotification.stories.js +++ b/packages/react/src/components/Notification/stories/ActionableNotification.stories.js @@ -23,34 +23,16 @@ export default { kind: 'error', lowContrast: false, hideCloseButton: false, - ['aria-label']: 'closes notification', + ['aria-label']: 'close notification', statusIconDescription: 'notification', onClose: action('onClose'), onCloseButtonClick: action('onCloseButtonClick'), }, }; -export const Default = () => ( - -); +export const Default = (args) => ; Default.argTypes = { - hasFocus: { - table: { - disable: true, - }, - }, -}; - -export const Playground = (args) => ; - -Playground.argTypes = { ['aria-label']: { table: { disable: true, @@ -86,9 +68,10 @@ Playground.argTypes = { }, }, }; -Playground.args = { +Default.args = { actionButtonLabel: 'Action', inline: false, + closeOnEscape: true, title: 'Notification title', subtitle: 'Subtitle text goes here', }; diff --git a/packages/react/src/components/Notification/stories/Callout.stories.js b/packages/react/src/components/Notification/stories/Callout.stories.js index 47e5ea747e6f..af770f8e12af 100644 --- a/packages/react/src/components/Notification/stories/Callout.stories.js +++ b/packages/react/src/components/Notification/stories/Callout.stories.js @@ -25,9 +25,9 @@ export default { }, }; -export const Default = () => ( - -); +// export const Default = () => ( +// +// ); export const WithInteractiveElements = () => ( ( ); -export const Playground = (args) => ; +export const Default = (args) => ( + +); -Playground.argTypes = { +Default.argTypes = { children: { table: { disable: true, @@ -62,7 +68,3 @@ Playground.argTypes = { control: { type: 'select' }, }, }; -Playground.args = { - title: 'Notification title', - subtitle: 'Subtitle text goes here', -}; diff --git a/packages/react/src/components/Notification/stories/InlineNotification.stories.js b/packages/react/src/components/Notification/stories/InlineNotification.stories.js index 029e283b07e9..5ebda2cc0424 100644 --- a/packages/react/src/components/Notification/stories/InlineNotification.stories.js +++ b/packages/react/src/components/Notification/stories/InlineNotification.stories.js @@ -30,16 +30,9 @@ export default { }, }; -export const Default = () => ( - -); +export const Default = (args) => ; -export const Playground = (args) => ; - -Playground.argTypes = { +Default.argTypes = { actionButtonLabel: { table: { disable: true, @@ -77,7 +70,7 @@ Playground.argTypes = { }, }, }; -Playground.args = { +Default.args = { title: 'Notification title', subtitle: 'Subtitle text goes here', }; diff --git a/packages/react/src/components/Notification/stories/ToastNotification.stories.js b/packages/react/src/components/Notification/stories/ToastNotification.stories.js index 222908698645..ea37a4b1efe8 100644 --- a/packages/react/src/components/Notification/stories/ToastNotification.stories.js +++ b/packages/react/src/components/Notification/stories/ToastNotification.stories.js @@ -30,19 +30,9 @@ export default { }, }; -export const Default = () => ( - -); +export const Default = (args) => ; -export const Playground = (args) => ; - -Playground.argTypes = { +Default.argTypes = { actionButtonLabel: { table: { disable: true, @@ -80,7 +70,7 @@ Playground.argTypes = { }, }, }; -Playground.args = { +Default.args = { role: 'status', caption: '00:00:00 AM', timeout: 0, diff --git a/packages/react/src/components/NumberInput/NumberInput.mdx b/packages/react/src/components/NumberInput/NumberInput.mdx index 87d94ed5aaa2..27bd8b1795a6 100644 --- a/packages/react/src/components/NumberInput/NumberInput.mdx +++ b/packages/react/src/components/NumberInput/NumberInput.mdx @@ -20,7 +20,7 @@ import * as NumberInputStories from './NumberInput.stories'; ## Overview - + ## Skeleton State diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js index 94e87ce75881..0b2b754174bb 100644 --- a/packages/react/src/components/NumberInput/NumberInput.stories.js +++ b/packages/react/src/components/NumberInput/NumberInput.stories.js @@ -23,20 +23,88 @@ export default { }, }; -export const Default = () => { +const sharedArgTypes = { + className: { + table: { + disable: true, + }, + }, + min: { control: { type: 'number' } }, + max: { control: { type: 'number' } }, + step: { control: { type: 'number' } }, + disabled: { control: { type: 'boolean' } }, + invalid: { control: { type: 'boolean' } }, + invalidText: { control: { type: 'text' } }, + warn: { control: { type: 'boolean' } }, + warnText: { control: { type: 'text' } }, + size: { + options: ['sm', 'md', 'lg'], + control: { type: 'select' }, + }, + label: { control: { type: 'text' } }, + helperText: { control: { type: 'text' } }, + id: { + table: { + disable: true, + }, + }, + defaultValue: { + table: { + disable: true, + }, + }, + light: { + table: { + disable: true, + }, + }, + slug: { + table: { + disable: true, + }, + }, + translateWithId: { + table: { + disable: true, + }, + }, +}; + +export const Default = ({ ...args }) => { + const [value, setValue] = React.useState(50); + + const handleChange = (event, { value }) => { + setValue(value); + }; + return ( ); }; +Default.args = { + step: 1, + disabled: false, + invalid: false, + invalidText: 'Number is not valid', + helperText: 'Optional helper text.', + warn: false, + warnText: + 'Warning message that is really long can wrap to more lines but should not be excessively long.', + size: 'md', +}; + +Default.argTypes = { ...sharedArgTypes }; + const aiLabel = ( @@ -68,7 +136,7 @@ const aiLabel = ( ); -export const withAILabel = () => ( +export const withAILabel = (args) => (
( helperText="Optional helper text." invalidText="Number is not valid" decorator={aiLabel} + {...args} />
); -export const Skeleton = () => ; -export const Playground = ({ ...args }) => { - const [value, setValue] = React.useState(50); - const handleChange = (event, { value }) => { - setValue(value); - }; - - return ( - - ); -}; - -Playground.args = { - step: 1, - disabled: false, - invalid: false, - invalidText: 'Number is not valid', - helperText: 'Optional helper text.', - warn: false, - warnText: - 'Warning message that is really long can wrap to more lines but should not be excessively long.', - size: 'md', -}; +withAILabel.argTypes = { ...sharedArgTypes }; -Playground.argTypes = { - className: { - table: { - disable: true, - }, - }, - min: { control: { type: 'number' } }, - max: { control: { type: 'number' } }, - step: { control: { type: 'number' } }, - disabled: { control: { type: 'boolean' } }, - invalid: { control: { type: 'boolean' } }, - invalidText: { control: { type: 'text' } }, - warn: { control: { type: 'boolean' } }, - warnText: { control: { type: 'text' } }, - size: { - options: ['sm', 'md', 'lg'], - control: { type: 'select' }, - }, - label: { control: { type: 'text' } }, - helperText: { control: { type: 'text' } }, - id: { - table: { - disable: true, - }, - }, - defaultValue: { - table: { - disable: true, - }, - }, - light: { - table: { - disable: true, - }, - }, - slug: { - table: { - disable: true, - }, - }, - translateWithId: { - table: { - disable: true, - }, - }, -}; +export const Skeleton = () => ; diff --git a/packages/react/src/components/OrderedList/OrderedList.mdx b/packages/react/src/components/OrderedList/OrderedList.mdx index 15fe53768bf2..3e1d81e8a417 100644 --- a/packages/react/src/components/OrderedList/OrderedList.mdx +++ b/packages/react/src/components/OrderedList/OrderedList.mdx @@ -16,7 +16,7 @@ import * as OrderedListStories from './OrderedList.stories'; ## Overview
- +
## Component API diff --git a/packages/react/src/components/OrderedList/OrderedList.stories.js b/packages/react/src/components/OrderedList/OrderedList.stories.js index 8e0a51978638..49f2da52c1d2 100644 --- a/packages/react/src/components/OrderedList/OrderedList.stories.js +++ b/packages/react/src/components/OrderedList/OrderedList.stories.js @@ -16,8 +16,8 @@ export default { }, }; -export const Default = () => ( - +export const Default = (args) => ( + Ordered List level 1 Ordered List level 1 Ordered List level 1 @@ -34,6 +34,40 @@ export const Default = () => ( ); +Default.args = { + isExpressive: false, + native: false, + nested: false, +}; + +Default.argTypes = { + children: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + isExpressive: { + control: { + type: 'boolean', + }, + }, + native: { + control: { + type: 'boolean', + }, + }, + nested: { + control: { + type: 'boolean', + }, + }, +}; + export const Nested = () => { return ( @@ -82,55 +116,3 @@ export const NativeListStyles = () => { ); }; - -export const Playground = (args) => ( - - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - Ordered List level 1 - -); - -Playground.args = { - isExpressive: false, - native: false, - nested: false, -}; - -Playground.argTypes = { - children: { - table: { - disable: true, - }, - }, - className: { - table: { - disable: true, - }, - }, - isExpressive: { - control: { - type: 'boolean', - }, - }, - native: { - control: { - type: 'boolean', - }, - }, - nested: { - control: { - type: 'boolean', - }, - }, -}; diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.DynamicStyles.featureflag.mdx b/packages/react/src/components/OverflowMenu/OverflowMenu.DynamicStyles.featureflag.mdx index b0ced447d795..7a958799083d 100644 --- a/packages/react/src/components/OverflowMenu/OverflowMenu.DynamicStyles.featureflag.mdx +++ b/packages/react/src/components/OverflowMenu/OverflowMenu.DynamicStyles.featureflag.mdx @@ -18,7 +18,7 @@ import { Meta } from '@storybook/blocks'; This version of the `OverflowMenu` can be enabled by using the `enable-v12-overflowmenu` feature flag and supports all -[subcomponents of `Menu`](/docs/components-menu--playground#subcomponents). +[subcomponents of `Menu`](/docs/components-menu--default#subcomponents). ```jsx @@ -42,8 +42,8 @@ If it seems your specified `menuAlignment` isn't working, it's because we prioritize ensuring the Menu remains visible. We calculate the optimal position to display the Menu in case the provided `menuAlignment` obscures it. -We encourage you to play around in the Storybook playground to better understand -the `menuAlignment` prop. +We encourage you to play around in the Storybook Default stories to better +understand the `menuAlignment` prop. ## menuTarget Prop diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js index f8b77a99e5fe..ef2d9a33252a 100644 --- a/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js +++ b/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js @@ -160,7 +160,7 @@ export const FloatingStyles = () => { ); }; -export const Playground = (args) => { +export const Default = (args) => { return ( @@ -173,11 +173,11 @@ export const Playground = (args) => { ); }; -Playground.args = { +Default.args = { label: 'Options', }; -Playground.argTypes = { +Default.argTypes = { children: { table: { disable: true, diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js index a392f665a166..ab0066baee09 100644 --- a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js +++ b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js @@ -24,17 +24,6 @@ export default { }, }; -export const Default = () => ( - - - - - - - - -); - export const RenderCustomIcon = () => ( @@ -42,7 +31,7 @@ export const RenderCustomIcon = () => ( ); -export const Playground = (args) => ( +export const Default = (args) => ( @@ -53,13 +42,13 @@ export const Playground = (args) => ( ); -Playground.args = { +Default.args = { flipped: document?.dir === 'rtl', focusTrap: false, open: false, }; -Playground.argTypes = { +Default.argTypes = { ariaLabel: { table: { disable: true, diff --git a/packages/react/src/components/Pagination/Pagination.stories.js b/packages/react/src/components/Pagination/Pagination.stories.js index e42e9870fe07..ec897dd7c7a5 100644 --- a/packages/react/src/components/Pagination/Pagination.stories.js +++ b/packages/react/src/components/Pagination/Pagination.stories.js @@ -39,59 +39,9 @@ export default { decorators: [(story) =>
{story()}
], }; -export const Default = (args) => ; +export const Default = (args) => ; -export const MultiplePaginationComponents = (args) => { - return ( -
- - -
- ); -}; - -MultiplePaginationComponents.storyName = 'Multiple Pagination components'; - -export const PaginationWithCustomPageSizesLabel = (args) => { - return ( -
- -
- ); -}; - -PaginationWithCustomPageSizesLabel.storyName = - 'Pagination with custom page sizes label'; - -export const PaginationUnknownPages = (args) => { - return ( -
- -
- ); -}; - -PaginationUnknownPages.storyName = 'Unknown pages and items'; - -export const Playground = (args) => ; - -Playground.args = { +Default.args = { backwardText: 'Previous page', forwardText: 'Next page', disabled: false, @@ -107,7 +57,7 @@ Playground.args = { totalItems: 103, }; -Playground.argTypes = { +Default.argTypes = { className: { control: false, }, @@ -187,3 +137,51 @@ Playground.argTypes = { }, }, }; + +export const MultiplePaginationComponents = (args) => { + return ( +
+ + +
+ ); +}; + +MultiplePaginationComponents.storyName = 'Multiple Pagination components'; + +export const PaginationWithCustomPageSizesLabel = (args) => { + return ( +
+ +
+ ); +}; + +PaginationWithCustomPageSizesLabel.storyName = + 'Pagination with custom page sizes label'; + +export const PaginationUnknownPages = (args) => { + return ( +
+ +
+ ); +}; + +PaginationUnknownPages.storyName = 'Unknown pages and items'; diff --git a/packages/react/src/components/PaginationNav/PaginationNav.stories.js b/packages/react/src/components/PaginationNav/PaginationNav.stories.js index 4f6f1e601fec..fa02273c3b9e 100644 --- a/packages/react/src/components/PaginationNav/PaginationNav.stories.js +++ b/packages/react/src/components/PaginationNav/PaginationNav.stories.js @@ -16,19 +16,13 @@ export default { parameters: {}, }; -export const Default = () => ( -
- -
-); - -export const Playground = (args) => ( +export const Default = (args) => (
); -Playground.args = { +Default.args = { size: 'lg', loop: false, itemsShown: 10, @@ -37,7 +31,7 @@ Playground.args = { disableOverflow: false, }; -Playground.argTypes = { +Default.argTypes = { size: { options: ['sm', 'md', 'lg'], control: { type: 'select' }, diff --git a/packages/react/src/components/Popover/Popover.stories.js b/packages/react/src/components/Popover/Popover.stories.js index 605975370660..069945e67e8e 100644 --- a/packages/react/src/components/Popover/Popover.stories.js +++ b/packages/react/src/components/Popover/Popover.stories.js @@ -26,28 +26,6 @@ export default { subcomponents: { PopoverContent, }, - argTypes: { - as: { - table: { - disable: true, - }, - }, - children: { - table: { - disable: true, - }, - }, - className: { - table: { - disable: true, - }, - }, - relative: { - table: { - disable: true, - }, - }, - }, parameters: { controls: { hideNoControlsWarning: true, @@ -58,7 +36,30 @@ export default { }, }; -const PlaygroundStory = (props) => { +const sharedArgTypes = { + as: { + table: { + disable: true, + }, + }, + children: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + relative: { + table: { + disable: true, + }, + }, +}; + +const DefaultStory = (props) => { const { align, caret, dropShadow, highContrast, open } = props; return ( { caret={caret} dropShadow={dropShadow} highContrast={highContrast} - open={open}> + open={open} + {...props}>
@@ -80,7 +82,9 @@ const PlaygroundStory = (props) => { ); }; -export const TabTip = () => { +DefaultStory.argTypes = { ...sharedArgTypes }; + +export const TabTip = (args) => { const [open, setOpen] = useState(true); const [openTwo, setOpenTwo] = useState(false); const align = document?.dir === 'rtl' ? 'bottom-right' : 'bottom-left'; @@ -96,7 +100,8 @@ export const TabTip = () => { } }} isTabTip - onRequestClose={() => setOpen(false)}> + onRequestClose={() => setOpen(false)} + {...args}> + + + ); + + await waitForPosition(); + const caretContainer = + screen.getByTestId('test').lastChild.lastChild.firstChild; + expect(caretContainer).toHaveStyle({ left: '0px', top: '-6px' }); + }); + + it('should change caret height in case of ai-label', async () => { + render( + + + + + ); + + await waitForPosition(); + const caretContainer = + screen.getByTestId('test').lastChild.lastChild.firstChild; + expect(caretContainer).toHaveStyle({ left: '0px', top: '-7px' }); + }); + it('should forward additional props on the outermost element', () => { const { container } = render( diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx index 36e59ea3c1a3..bd2a7168fa63 100644 --- a/packages/react/src/components/Popover/index.tsx +++ b/packages/react/src/components/Popover/index.tsx @@ -179,6 +179,7 @@ export const Popover: PopoverComponent = React.forwardRef( highContrast = false, onRequestClose, open, + alignmentAxisOffset, ...rest }: PopoverProps, forwardRef: ForwardedRef @@ -209,7 +210,10 @@ export const Popover: PopoverComponent = React.forwardRef( // needs to be placed 1px further outside the popover content. To do so, // we look to see if any of the children has a className containing "slug" const initialCaretHeight = React.Children.toArray(children).some((x) => { - return (x as any)?.props?.className?.includes('slug'); + return ( + (x as any)?.props?.className?.includes('slug') || + (x as any)?.props?.className?.includes('ai-label') + ); }) ? 7 : 6; @@ -250,7 +254,6 @@ export const Popover: PopoverComponent = React.forwardRef( } } }); - const { refs, floatingStyles, placement, middlewareData } = useFloating( enableFloatingStyles ? { @@ -264,7 +267,14 @@ export const Popover: PopoverComponent = React.forwardRef( // Middleware order matters, arrow should be last middleware: [ - offset(!isTabTip ? popoverDimensions?.current?.offset : 0), + offset( + !isTabTip + ? { + alignmentAxis: alignmentAxisOffset, + mainAxis: popoverDimensions?.current?.offset, + } + : 0 + ), autoAlign && flip({ fallbackPlacements: align.includes('bottom') diff --git a/packages/react/src/components/ProgressBar/ProgressBar.stories.js b/packages/react/src/components/ProgressBar/ProgressBar.stories.js index 1c0d7c77525c..c057a17fd947 100644 --- a/packages/react/src/components/ProgressBar/ProgressBar.stories.js +++ b/packages/react/src/components/ProgressBar/ProgressBar.stories.js @@ -15,16 +15,7 @@ export default { title: 'Components/ProgressBar', component: ProgressBar, }; - -export const Default = () => ( - -); - -const PlaygroundStory = (args) => ( +const DefaultStory = (args) => ( ( /> ); -export const Playground = PlaygroundStory.bind({}); +export const Default = DefaultStory.bind({}); -Playground.argTypes = { +Default.argTypes = { className: { table: { disable: true, diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js index 42f7976d112e..f1eaa4cc58b1 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js @@ -23,37 +23,6 @@ export default { }, }; -export const Default = () => ( - - - - - - - -); - export const Interactive = () => ( alert('Clicked')}> ( export const Skeleton = () => ; -export const Playground = (args) => ( +export const Default = (args) => ( ( ); -Playground.args = { +Default.args = { currentIndex: 0, spaceEqually: false, vertical: false, }; -Playground.argTypes = { +Default.argTypes = { children: { table: { disable: true, diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js index 664b14843297..15862880fbdd 100644 --- a/packages/react/src/components/RadioButton/RadioButton.stories.js +++ b/packages/react/src/components/RadioButton/RadioButton.stories.js @@ -41,31 +41,6 @@ export default { }, }; -export const Default = () => { - return ( - - - - - - ); -}; - export const Vertical = () => { return ( { +export const Default = (args) => { return ( { ); }; -Playground.args = { +Default.args = { defaultSelected: 'radio-2', helperText: 'Helper text', invalidText: 'Invalid selection', @@ -238,7 +213,7 @@ Playground.args = { warnText: 'Please notice the warning', }; -Playground.argTypes = { +Default.argTypes = { defaultSelected: { description: 'Specify the `` to be selected by default', options: ['radio-1', 'radio-2', 'radio-3'], diff --git a/packages/react/src/components/Search/Search.stories.js b/packages/react/src/components/Search/Search.stories.js index 68571b73d9df..532bb30c64ef 100644 --- a/packages/react/src/components/Search/Search.stories.js +++ b/packages/react/src/components/Search/Search.stories.js @@ -28,18 +28,6 @@ export default { }, }; -export const Default = () => ( - {}} - onKeyDown={() => {}} - /> -); - export const Disabled = () => ( ( ); -export const Playground = (args) => ( -
- +export const Default = (args) => ( +
+
); -Playground.args = { - playgroundWidth: 300, +Default.args = { closeButtonLabelText: 'Clear search input', disabled: false, - defaultValue: 'Default value', labelText: 'Label text', placeholder: 'Placeholder text', role: 'searchbox', @@ -114,8 +100,8 @@ Playground.args = { type: 'text', }; -Playground.argTypes = { - playgroundWidth: { +Default.argTypes = { + defaultWidth: { control: { type: 'range', min: 300, max: 800, step: 50 }, }, className: { diff --git a/packages/react/src/components/Select/Select.stories.js b/packages/react/src/components/Select/Select.stories.js index baf83ad3a3ac..1179aa621f12 100644 --- a/packages/react/src/components/Select/Select.stories.js +++ b/packages/react/src/components/Select/Select.stories.js @@ -77,34 +77,15 @@ export default { }, }; -export const Default = () => { - return ( -
- -
- ); -}; - -export const Inline = () => { +export const Inline = (args) => { return (
+ helperText="Optional helper text" + {...args}> ( ); +_WithLayer.argTypes = { + inline: { + control: false, + }, +}; + const aiLabel = ( @@ -166,13 +158,14 @@ const aiLabel = ( ); -export const withAILabel = () => ( +export const withAILabel = (args) => (
{ ); }; -Playground.argTypes = { +Default.argTypes = { helperText: { control: 'text', }, diff --git a/packages/react/src/components/SkeletonText/SkeletonText.stories.js b/packages/react/src/components/SkeletonText/SkeletonText.stories.js index 16eb8b71782c..9657e35f5ee3 100644 --- a/packages/react/src/components/SkeletonText/SkeletonText.stories.js +++ b/packages/react/src/components/SkeletonText/SkeletonText.stories.js @@ -22,18 +22,16 @@ export default { }, }; -export const Default = () => ; +export const Default = (args) => ; -export const Playground = (args) => ; - -Playground.args = { +Default.args = { heading: false, paragraph: false, width: '100%', lineCount: 3, }; -Playground.argTypes = { +Default.argTypes = { className: { control: false, }, diff --git a/packages/react/src/components/Slider/Slider.mdx b/packages/react/src/components/Slider/Slider.mdx index 4a3680652e26..f87a21114e1e 100644 --- a/packages/react/src/components/Slider/Slider.mdx +++ b/packages/react/src/components/Slider/Slider.mdx @@ -23,7 +23,7 @@ import * as SliderStories from './Slider.stories'; Sliders provide a visual indication of adjustable content, where the user can increase or decrease the value by moving the handle along a horizontal track. - + ## Component API @@ -44,7 +44,7 @@ bound of the range in addition to the `value` prop, which specifies the lower bound. When in two handle mode, both `value` and `valueUpper` are provided as keys to `onChange` function prop that is passed to the component. - + ## Feedback diff --git a/packages/react/src/components/Slider/Slider.stories.js b/packages/react/src/components/Slider/Slider.stories.js index d84b88d39f0b..8c85ef220d81 100644 --- a/packages/react/src/components/Slider/Slider.stories.js +++ b/packages/react/src/components/Slider/Slider.stories.js @@ -26,153 +26,14 @@ export default { }, }; -export const Default = () => ( - -); - -export const SliderWithHiddenInputs = () => ( - -); - -export const SliderWithCustomValueLabel = () => ( - { - if (val < 25) { - return 'Low'; - } else if (val > 75) { - return 'High'; - } - return 'Medium'; - }} - /> -); - -export const ControlledSlider = () => { - const [val, setVal] = useState(87); - return ( - <> - - setVal(value)} - /> -

{val}

- - ); -}; - -export const _WithLayer = () => ( - - - -); - -export const ControlledSliderWithLayer = () => { - const [val, setVal] = useState(87); - return ( - - - setVal(value)} - /> -

{val}

- - ); -}; - -export const TwoHandleSlider = () => ( - -); - -export const TwoHandleSliderWithHiddenInputs = () => ( - -); - -export const Skeleton = () => ; - -export const TwoHandleSkeleton = () => ; - -export const Playground = (args) => ( +export const Default = (args) => ( ); -Playground.argTypes = { +Default.argTypes = { ariaLabelInput: { control: { type: 'text' }, }, @@ -292,7 +153,7 @@ Playground.argTypes = { }, }; -Playground.args = { +Default.args = { ariaLabelInput: 'Lower bound', unstable_ariaLabelInputUpper: 'Upper bound', disabled: false, @@ -310,3 +171,129 @@ Playground.args = { warn: false, warnText: 'Warning message goes here', }; + +export const SliderWithHiddenInputs = () => ( + +); + +export const SliderWithCustomValueLabel = () => ( + { + if (val < 25) { + return 'Low'; + } else if (val > 75) { + return 'High'; + } + return 'Medium'; + }} + /> +); + +export const ControlledSlider = () => { + const [val, setVal] = useState(87); + return ( + <> + + setVal(value)} + /> +

{val}

+ + ); +}; + +export const _WithLayer = () => ( + + + +); + +export const ControlledSliderWithLayer = () => { + const [val, setVal] = useState(87); + return ( + + + setVal(value)} + /> +

{val}

+ + ); +}; + +export const TwoHandleSlider = () => ( + +); + +export const TwoHandleSliderWithHiddenInputs = () => ( + +); + +export const Skeleton = () => ; + +export const TwoHandleSkeleton = () => ; diff --git a/packages/react/src/components/Stack/Stack.stories.js b/packages/react/src/components/Stack/Stack.stories.js index 1e4989c6a95a..fa3698482af3 100644 --- a/packages/react/src/components/Stack/Stack.stories.js +++ b/packages/react/src/components/Stack/Stack.stories.js @@ -25,16 +25,6 @@ export default { }, }; -export const Default = () => { - return ( - -
Item 1
-
Item 2
-
Item 3
- - ); -}; - export const Horizontal = () => { return ( @@ -45,7 +35,7 @@ export const Horizontal = () => { ); }; -export const Playground = (args) => { +export const Default = (args) => { return (
Item 1
@@ -55,11 +45,11 @@ export const Playground = (args) => { ); }; -Playground.args = { +Default.args = { as: 'div', }; -Playground.argTypes = { +Default.argTypes = { as: { control: { type: 'text', diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx index 1c56f266dca2..53667c363672 100644 --- a/packages/react/src/components/Tabs/Tabs.mdx +++ b/packages/react/src/components/Tabs/Tabs.mdx @@ -2,6 +2,7 @@ import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs'; import * as TabsStories from './Tabs.stories'; import { Grid, Column } from '../Grid'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; diff --git a/packages/react/src/components/Tabs/Tabs.stories.js b/packages/react/src/components/Tabs/Tabs.stories.js index 18fc473b20fb..f296b10449cf 100644 --- a/packages/react/src/components/Tabs/Tabs.stories.js +++ b/packages/react/src/components/Tabs/Tabs.stories.js @@ -64,39 +64,70 @@ export default { }, }; -export const Default = () => ( - - +export const Default = ({ dismissable, ...args }) => ( + {}}> + Dashboard Monitoring Activity - Settings + Settings Tab Panel 1 - -
- Validation example - - - - -
+ Tab Panel 2 Tab Panel 3 Tab Panel 4 ); +Default.args = { + contained: false, + dismissable: false, + scrollDebounceWait: 200, +}; + +Default.argTypes = { + activation: { + control: { type: 'select' }, + options: ['automatic', 'manual'], + }, + contained: { + control: { + type: 'boolean', + }, + }, + dismissable: { + control: { + type: 'boolean', + }, + }, + iconSize: { + control: { type: 'select' }, + options: ['default', 'lg'], + }, + leftOverflowButtonProps: { + control: { + type: 'object', + }, + }, + rightOverflowButtonProps: { + control: { + type: 'object', + }, + }, + scrollDebounceWait: { + control: { + type: 'number', + }, + }, + scrollIntoView: { + control: { + type: 'boolean', + }, + }, +}; + export const Dismissable = () => { const tabs = [ { @@ -655,67 +686,3 @@ export const Skeleton = () => {
); }; - -export const Playground = ({ dismissable, ...args }) => ( - {}}> - - Dashboard - Monitoring - Activity - Settings - - - Tab Panel 1 - Tab Panel 2 - Tab Panel 3 - Tab Panel 4 - - -); - -Playground.args = { - contained: false, - dismissable: false, - scrollDebounceWait: 200, -}; - -Playground.argTypes = { - activation: { - control: { type: 'select' }, - options: ['automatic', 'manual'], - }, - contained: { - control: { - type: 'boolean', - }, - }, - dismissable: { - control: { - type: 'boolean', - }, - }, - iconSize: { - control: { type: 'select' }, - options: ['default', 'lg'], - }, - leftOverflowButtonProps: { - control: { - type: 'object', - }, - }, - rightOverflowButtonProps: { - control: { - type: 'object', - }, - }, - scrollDebounceWait: { - control: { - type: 'number', - }, - }, - scrollIntoView: { - control: { - type: 'boolean', - }, - }, -}; diff --git a/packages/react/src/components/TextArea/TextArea.stories.js b/packages/react/src/components/TextArea/TextArea.stories.js index 39139a06ce44..440a0f32fd0a 100644 --- a/packages/react/src/components/TextArea/TextArea.stories.js +++ b/packages/react/src/components/TextArea/TextArea.stories.js @@ -35,74 +35,7 @@ export default { }, }; -export const Default = () => ( -