From df3d3b14591e5a7c2875430b1f7b7ad7925f49a9 Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Thu, 16 Apr 2020 17:28:10 -0500
Subject: [PATCH] docs(OverflowMenu): display storybook prop tables (#5878)

---
 .../OverflowMenu/OverflowMenu-story.js        | 124 ++++++++++++------
 1 file changed, 84 insertions(+), 40 deletions(-)

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js
index fa052018e053..b783038e54b0 100644
--- 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: {