docs(OverflowMenu): display storybook prop tables (#5878)

carbon-design-system · Apr 23, 2020 · 42e7ddd · 42e7ddd
1 parent ff5cc44
commit 42e7ddd
Showing 1 changed file with 84 additions and 40 deletions.
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js
@@ -43,40 +43,33 @@ const props = {
  }),
 };
 
-const OverflowMenuExample = ({ overflowMenuProps, overflowMenuItemProps }) => (
- <>
- <OverflowMenu {...overflowMenuProps}>
- <OverflowMenuItem
- {...overflowMenuItemProps}
- itemText="Option 1"
- primaryFocus
- />
- <OverflowMenuItem
- {...overflowMenuItemProps}
- itemText="Option 2 is an example of a really long string and how we recommend handling this"
- requireTitle
- />
- <OverflowMenuItem {...overflowMenuItemProps} itemText="Option 3" />
- <OverflowMenuItem {...overflowMenuItemProps} itemText="Option 4" />
- <OverflowMenuItem
- {...overflowMenuItemProps}
- itemText="Danger option"
- hasDivider
- isDelete
- />
- </OverflowMenu>
- </>
-);
+OverflowMenu.displayName = 'OverflowMenu';
 
 storiesOf('OverflowMenu', module)
  .addDecorator(withKnobs)
  .add(
  'basic',
  withReadme(OverflowREADME, () => (
- <OverflowMenuExample
- overflowMenuProps={props.menu()}
- overflowMenuItemProps={props.menuItem()}
- />
+ <OverflowMenu {...props.menu()}>
+ <OverflowMenuItem
+ {...props.menuItem()}
+ itemText="Option 1"
+ primaryFocus
+ />
+ <OverflowMenuItem
+ {...props.menuItem()}
+ itemText="Option 2 is an example of a really long string and how we recommend handling this"
+ requireTitle
+ />
+ <OverflowMenuItem {...props.menuItem()} itemText="Option 3" />
+ <OverflowMenuItem {...props.menuItem()} itemText="Option 4" />
+ <OverflowMenuItem
+ {...props.menuItem()}
+ itemText="Danger option"
+ hasDivider
+ isDelete
+ />
+ </OverflowMenu>
  )),
  {
  info: {
@@ -90,13 +83,47 @@ storiesOf('OverflowMenu', module)
  .add(
  'with links',
  withReadme(OverflowREADME, () => (
- <OverflowMenuExample
- overflowMenuProps={props.menu()}
- overflowMenuItemProps={{
- ...props.menuItem(),
- href: 'https://www.ibm.com',
- }}
- />
+ <OverflowMenu {...props.menu()}>
+ <OverflowMenuItem
+ {...{
+ ...props.menuItem(),
+ href: 'https://www.ibm.com',
+ }}
+ itemText="Option 1"
+ primaryFocus
+ />
+ <OverflowMenuItem
+ {...{
+ ...props.menuItem(),
+ href: 'https://www.ibm.com',
+ }}
+ itemText="Option 2 is an example of a really long string and how we recommend handling this"
+ requireTitle
+ />
+ <OverflowMenuItem
+ {...{
+ ...props.menuItem(),
+ href: 'https://www.ibm.com',
+ }}
+ itemText="Option 3"
+ />
+ <OverflowMenuItem
+ {...{
+ ...props.menuItem(),
+ href: 'https://www.ibm.com',
+ }}
+ itemText="Option 4"
+ />
+ <OverflowMenuItem
+ {...{
+ ...props.menuItem(),
+ href: 'https://www.ibm.com',
+ }}
+ itemText="Danger option"
+ hasDivider
+ isDelete
+ />
+ </OverflowMenu>
  )),
  {
  info: {
@@ -112,15 +139,32 @@ storiesOf('OverflowMenu', module)
  .add(
  'custom trigger',
  withReadme(OverflowREADME, () => (
- <OverflowMenuExample
- overflowMenuProps={{
+ <OverflowMenu
+ {...{
  ...props.menu(),
  ariaLabel: null,
  style: { width: 'auto' },
  renderIcon: () => <div style={{ padding: '0 1rem' }}>Menu</div>,
- }}
- overflowMenuItemProps={props.menuItem()}
- />
+ }}>
+ <OverflowMenuItem
+ {...props.menuItem()}
+ itemText="Option 1"
+ primaryFocus
+ />
+ <OverflowMenuItem
+ {...props.menuItem()}
+ itemText="Option 2 is an example of a really long string and how we recommend handling this"
+ requireTitle
+ />
+ <OverflowMenuItem {...props.menuItem()} itemText="Option 3" />
+ <OverflowMenuItem {...props.menuItem()} itemText="Option 4" />
+ <OverflowMenuItem
+ {...props.menuItem()}
+ itemText="Danger option"
+ hasDivider
+ isDelete
+ />
+ </OverflowMenu>
  )),
  {
  info: {