feat(multi-select): update story to Storybook v7 (#11327)

* chore(multi-select): rename story files for sb v7 * chore(multi-select): update file-uploader to sb v7 * chore(multi-select): include sb layer components, remove unused import * fix(multi-select): controls for disabled, readOnly and invalid --------- Co-authored-by: kennylam <[email protected]>
carbon-design-system · Jan 10, 2024 · 9705c48 · 9705c48
1 parent a9ba214
commit 9705c48
Show file tree

Hide file tree

Showing 4 changed files with 372 additions and 295 deletions.
diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
@@ -45,6 +45,8 @@ const stories = glob.sync(
     '../src/**/modal.stories.ts',
     '../src/**/modal.mdx',
     '../src/**/file-uploader.stories.ts',
+    '../src/**/multi-select.mdx',
+    '../src/**/multi-select.stories.ts',
     '../src/**/notification.mdx',
     '../src/**/actionable-notification.stories.ts',
     '../src/**/inline-notification.stories.ts',

diff --git a/packages/carbon-web-components/src/components/multi-select/multi-select-story.ts b/packages/carbon-web-components/src/components/multi-select/multi-select-story.ts
diff --git a/...nents/multi-select/multi-select-story.mdx → .../components/multi-select/multi-select.mdx b/...nents/multi-select/multi-select-story.mdx → .../components/multi-select/multi-select.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as MultiSelectStories from './multi-select.stories';
+
+<Meta of={MultiSelectStories} />
 
 # Multi select
 
@@ -103,12 +106,12 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-multi-select open>`) and `false` means not setting the attribute (e.g.
 `<cds-multi-select>` without `open` attribute).
 
-<Props of="cds-multi-select" />
+<ArgsTable of="cds-multi-select" />
 
 ## `<cds-multi-select-item>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-multi-select-item disabled>`) and `false` means not setting the attribute
 (e.g. `<cds-multi-select-item>` without `disabled` attribute).
 
-<Props of="cds-multi-select-item" />
+<ArgsTable of="cds-multi-select-item" />