Merge pull request #1496 from carbon-design-system/hierarchy-menu-pos…

…itioning fix(hierarchy-list): add prop for hierarchy menus
carbon-design-system · Aug 19, 2020 · ba657a2 · ba657a2
2 parents cb9fbf1 + 894a957
commit ba657a2
Show file tree

Hide file tree

Showing 5 changed files with 5,184 additions and 4,063 deletions.
diff --git a/src/components/List/HierarchyList/HierarchyList.story.jsx b/src/components/List/HierarchyList/HierarchyList.story.jsx
@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { text, select, boolean } from '@storybook/addon-knobs';
 import { Add16 } from '@carbon/icons-react';
+import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
 
 import { Button } from '../../..';
 import { sampleHierarchy } from '../List.story';
@@ -105,4 +106,72 @@ storiesOf('Watson IoT Experimental/HierarchyList', module)
         isLoading={boolean('isLoading', false)}
       />
     </div>
+  ))
+  .add('With OverflowMenu', () => (
+    <div style={{ width: 400, height: 400 }}>
+      <HierarchyList
+        title={text('Title', 'MLB Expanded List')}
+        items={[
+          ...Object.keys(sampleHierarchy.MLB['American League']).map(team => ({
+            id: team,
+            isCategory: true,
+            content: {
+              value: team,
+            },
+            children: Object.keys(sampleHierarchy.MLB['American League'][team]).map(player => ({
+              id: `${team}_${player}`,
+              content: {
+                value: player,
+                rowActions: [
+                  <OverflowMenu title="data-item-menu" flipped>
+                    <OverflowMenuItem
+                      itemText="Configure"
+                      onClick={() => console.log('Configure')}
+                    />
+                    <OverflowMenuItem
+                      itemText="Delete"
+                      onClick={() => console.log('Delete')}
+                      isDelete
+                      hasDivider
+                    />
+                  </OverflowMenu>,
+                ],
+              },
+              isSelectable: true,
+            })),
+          })),
+          ...Object.keys(sampleHierarchy.MLB['National League']).map(team => ({
+            id: team,
+            isCategory: true,
+            content: {
+              value: team,
+            },
+            children: Object.keys(sampleHierarchy.MLB['National League'][team]).map(player => ({
+              id: `${team}_${player}`,
+              content: {
+                value: player,
+                rowActions: [
+                  <OverflowMenu title="data-item-menu" flipped>
+                    <OverflowMenuItem
+                      itemText="Configure"
+                      onClick={() => console.log('Configure')}
+                    />
+                    <OverflowMenuItem
+                      itemText="Delete"
+                      onClick={() => console.log('Delete')}
+                      isDelete
+                      hasDivider
+                    />
+                  </OverflowMenu>,
+                ],
+              },
+              isSelectable: true,
+            })),
+          })),
+        ]}
+        hasSearch
+        pageSize={select('Page Size', ['sm', 'lg', 'xl'], 'lg')}
+        isLoading={boolean('isLoading', false)}
+      />
+    </div>
   ));