diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 910677d9c1d1..b92246026eff 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1269,7 +1269,12 @@ Map {
"type": "string",
},
"selectorsFloatingMenus": Object {
- "type": "string",
+ "args": Array [
+ Object {
+ "type": "string",
+ },
+ ],
+ "type": "arrayOf",
},
"size": Object {
"args": Array [
diff --git a/packages/react/src/components/ComposedModal/next/ComposedModal.js b/packages/react/src/components/ComposedModal/next/ComposedModal.js
index 9ea219ce08d8..adba8b2543d2 100644
--- a/packages/react/src/components/ComposedModal/next/ComposedModal.js
+++ b/packages/react/src/components/ComposedModal/next/ComposedModal.js
@@ -329,7 +329,7 @@ ComposedModal.propTypes = {
/**
* Specify the CSS selectors that match the floating menus
*/
- selectorsFloatingMenus: PropTypes.string,
+ selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
/**
* Specify the size variant.
diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
deleted file mode 100644
index de14f72b7111..000000000000
--- a/packages/react/src/components/Dropdown/Dropdown-story.js
+++ /dev/null
@@ -1,206 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import {
- withKnobs,
- boolean,
- object,
- select,
- text,
-} from '@storybook/addon-knobs';
-import Dropdown from '../Dropdown';
-import DropdownSkeleton from './Dropdown.Skeleton';
-import mdx from './Dropdown.mdx';
-import {
- ChartBubble,
- ChartColumnFloating,
- ChartVennDiagram,
-} from '@carbon/icons-react';
-
-const items = [
- {
- id: 'option-0',
- text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
- },
- {
- 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',
- },
-];
-
-const sizes = {
- 'Small (sm)': 'sm',
- 'Medium (md) - default': undefined,
- 'Large (lg)': 'lg',
-};
-
-const directions = {
- 'Bottom (default)': 'bottom',
- 'Top ': 'top',
-};
-
-const types = {
- Default: 'default',
- Inline: 'inline',
-};
-
-const props = () => ({
- id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
- size: select('Field size (size)', sizes, undefined) || undefined,
- direction: select('Dropdown direction (direction)', directions, 'bottom'),
- label: text('Label (label)', 'Dropdown menu options'),
- ariaLabel: text('Aria Label (ariaLabel)', 'Dropdown'),
- disabled: boolean('Disabled (disabled)', false),
- light: boolean('Light variant (light)', false),
- titleText: text('Title (titleText)', 'Dropdown label'),
- hideLabel: boolean('No title text shown (hideLabel)', false),
- helperText: text('Helper text (helperText)', 'This is some helper text.'),
- invalid: boolean('Show form validation UI (invalid)', false),
- invalidText: text(
- 'Form validation UI content (invalidText)',
- 'A valid value is required'
- ),
- type: select('Type (type)', types, 'default'),
- warn: boolean('Show warning state (warn)', false),
- warnText: text(
- 'Warning state text (warnText)',
- 'This mode may perform worse on older machines'
- ),
- listBoxMenuIconTranslationIds: object(
- 'Listbox menu icon translation IDs (for translateWithId callback)',
- {
- 'close.menu': 'Close menu',
- 'open.menu': 'Open menu',
- }
- ),
-});
-
-export default {
- title: 'Components/Dropdown',
- component: Dropdown,
- subcomponents: {
- DropdownSkeleton,
- },
- decorators: [withKnobs],
- parameters: {
- docs: {
- page: mdx,
- },
- },
-};
-
-export const Default = () => (
-
- (item ? item.text : '')}
- onChange={action('onChange')}
- />
-
-);
-export const RenderSelectedItem = () => (
-
- (item ? item.text : '')}
- itemToElement={(item) => (
- <>
- {React.createElement(item.icon)}
-
- {item.text}
-
-
- )}
- renderSelectedItem={(item) => (
- <>
- {React.createElement(item.icon)}
-
- {item.text}
-
-
- )}
- onChange={action('onChange')}
- />
-
-);
-
-export const Inline = () => (
-
- (item ? item.text : '')}
- onChange={action('onChange')}
- />
-
-);
-
-export const Playground = () => {
- const { listBoxMenuIconTranslationIds, ...dropdownProps } = props();
- return (
-
- (item ? item.text : '')}
- translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
- />
-
- );
-};
-
-export const Skeleton = () => (
-
-
-
-);
diff --git a/packages/react/src/components/Dropdown/next/Dropdown.stories.js b/packages/react/src/components/Dropdown/Dropdown.stories.js
similarity index 60%
rename from packages/react/src/components/Dropdown/next/Dropdown.stories.js
rename to packages/react/src/components/Dropdown/Dropdown.stories.js
index e78168493da7..4fb7009bef49 100644
--- a/packages/react/src/components/Dropdown/next/Dropdown.stories.js
+++ b/packages/react/src/components/Dropdown/Dropdown.stories.js
@@ -1,14 +1,14 @@
/**
* Copyright IBM Corp. 2016, 2018
- *
+ *dropdow.stor
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
-import { default as Dropdown, DropdownSkeleton } from '../';
-import { Layer } from '../../Layer';
-import mdx from '../Dropdown.mdx';
+import { default as Dropdown, DropdownSkeleton } from './';
+import { Layer } from '../Layer';
+import mdx from './Dropdown.mdx';
export default {
title: 'Components/Dropdown',
@@ -17,9 +17,20 @@ export default {
DropdownSkeleton,
},
argTypes: {
- size: {
- options: ['sm', 'md', 'lg'],
- control: { type: 'select' },
+ items: {
+ table: { disable: true },
+ },
+ initialSelectedItem: {
+ table: { disable: true },
+ },
+ itemToElement: {
+ table: { disable: true },
+ },
+ className: {
+ table: { disable: true },
+ },
+ id: {
+ table: { disable: true },
},
},
parameters: {
@@ -57,7 +68,7 @@ const items = [
},
];
-export const Default = (args) => (
+export const Playground = (args) => (
(
);
-export const Inline = (args) => (
+Playground.argTypes = {
+ invalid: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ invalidText: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'invalid selection',
+ },
+ disabled: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ hideLabel: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ helperText: {
+ control: {
+ type: 'text',
+ },
+ },
+ label: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'this is an example label',
+ },
+ warn: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ warnText: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'please notice the warning',
+ },
+ titleText: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'this is an example title',
+ },
+ size: {
+ options: ['sm', 'md', 'lg'],
+ control: { type: 'select' },
+ },
+ type: {
+ control: { type: 'select' },
+ options: ['default', 'inline'],
+ defaultValue: 'default',
+ },
+};
+
+export const Default = () => (
+
+ (item ? item.text : '')}
+ />
+
+);
+
+export const Inline = () => (
(
type="inline"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
);
-export const WithLayer = (args) => (
+export const WithLayer = () => (
(
label="Dropdown menu options"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
(
label="Dropdown menu options"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
(
label="Dropdown menu options"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
);
-export const InlineWithLayer = (args) => (
+export const InlineWithLayer = () => (
(
type="inline"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
(
type="inline"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
(
type="inline"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
);
-export const Skeleton = (args) => (
+export const Skeleton = () => (
-
+
);