refactor(projectcard): use menu component over buttondropdown (#1647)

* refactor(projectcard): use menu component over buttondropdown * refactor(courseplanneredit): address pr comments
chanzuckerberg · Jun 2, 2023 · 201c95f · 201c95f
1 parent 0e505a9
commit 201c95f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 89 deletions.
diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.module.css b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.module.css
@@ -16,6 +16,15 @@
   }
 }
 
+/**
+ * Destructive variant of the Menu item.
+ *
+ * For indicating deletion of the project.
+ */
+.menu-item--destructive {
+  color: var(--eds-theme-color-text-utility-error);
+}
+
 /*------------------------------------*\
     # TABLE CARD
 \*------------------------------------*/

diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx
@@ -5,35 +5,35 @@ import type { ReactNode } from 'react';
 import ProjectCard from './ProjectCard';
 
 import {
-  PageHeader,
-  Panel,
-  ButtonGroup,
   Button,
-  Heading,
-  LayoutContainer,
-  Layout,
-  LayoutSection,
+  ButtonGroup,
+  Card,
+  CardBody,
+  CardFooter,
+  DataBar,
   DragDrop,
   DragDropContainerHeader,
-  Icon,
-  HorizontalStepper,
-  DataBar,
-  Toolbar,
-  ToolbarItem,
   Grid,
   GridItem,
-  Text,
-  DropdownMenuItem,
-  Card,
-  CardBody,
+  Heading,
+  HorizontalStepper,
+  Icon,
+  Layout,
+  LayoutContainer,
+  LayoutSection,
+  Menu,
   NumberIcon,
-  TableHeader,
-  TableRow,
+  PageHeader,
+  Panel,
   Table,
   TableBody,
   TableCell,
+  TableHeader,
   TableHeaderCell,
-  CardFooter,
+  TableRow,
+  Text,
+  Toolbar,
+  ToolbarItem,
 } from '../../../src';
 
 import type { NewState } from '../../../src/components/DragDrop/DragDrop';
@@ -403,45 +403,23 @@ export const CoursePlannerEdit = () => {
   const projectCardMenuItems = () => {
     return (
       <>
-        <DropdownMenuItem>
-          <Icon name="schedule" purpose="decorative" size="1.25rem" />
-          Move to other section
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <Icon name="schedule" purpose="decorative" size="1.25rem" />
-          Move up
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <Icon name="schedule" purpose="decorative" size="1.25rem" />
-          Move down
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <Icon name="schedule" purpose="decorative" size="1.25rem" />
-          Move view details
-        </DropdownMenuItem>
+        <Menu.Item icon="schedule">Move to other section</Menu.Item>
+        <Menu.Item icon="schedule">Move up</Menu.Item>
+        <Menu.Item icon="schedule">Move down</Menu.Item>
+        <Menu.Item icon="schedule">Move view details</Menu.Item>
       </>
     );
   };
 
   const projectCardMenuItemsWithDelete = () => {
     return (
       <>
-        <DropdownMenuItem>
-          <Icon name="schedule" purpose="decorative" size="1.25rem" />
-          Move to other section
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <Icon name="schedule" purpose="decorative" size="1.25rem" />
-          Move up
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <Icon name="schedule" purpose="decorative" size="1.25rem" />
-          Move down
-        </DropdownMenuItem>
-        <DropdownMenuItem status="error">
-          <Icon name="delete" purpose="decorative" size="1.25rem" />
+        <Menu.Item icon="schedule">Move to other section</Menu.Item>
+        <Menu.Item icon="schedule">Move up</Menu.Item>
+        <Menu.Item icon="schedule">Move down</Menu.Item>
+        <Menu.Item className={styles['menu-item--destructive']} icon="delete">
           Delete item
-        </DropdownMenuItem>
+        </Menu.Item>
       </>
     );
   };
@@ -497,7 +475,7 @@ export const CoursePlannerEdit = () => {
       children: (
         <ProjectCard
           behavior="draggable"
-          buttonDropdownItems={projectCardMenuItemsWithDelete()}
+          menuItems={projectCardMenuItemsWithDelete()}
           meta="12 days"
           metaIconName="event-note"
           number={1}
@@ -511,7 +489,7 @@ export const CoursePlannerEdit = () => {
       children: (
         <ProjectCard
           behavior="draggable"
-          buttonDropdownItems={projectCardMenuItems()}
+          menuItems={projectCardMenuItems()}
           meta="12 days"
           metaIconName="event-note"
           number={indexState}
@@ -525,7 +503,7 @@ export const CoursePlannerEdit = () => {
       children: (
         <ProjectCard
           behavior="draggable"
-          buttonDropdownItems={projectCardMenuItems()}
+          menuItems={projectCardMenuItems()}
           meta="12 days"
           metaIconName="event-note"
           number={3}
@@ -539,7 +517,7 @@ export const CoursePlannerEdit = () => {
       children: (
         <ProjectCard
           behavior="draggable"
-          buttonDropdownItems={projectCardMenuItems()}
+          menuItems={projectCardMenuItems()}
           meta="12 days"
           metaIconName="event-note"
           number={4}
@@ -553,8 +531,7 @@ export const CoursePlannerEdit = () => {
       children: (
         <ProjectCard
           behavior="draggable"
-          buttonDropdownItems={projectCardMenuItems()}
-          buttonDropdownPosition="top-left"
+          menuItems={projectCardMenuItems()}
           meta="12 days"
           metaIconName="event-note"
           number={5}
@@ -568,8 +545,7 @@ export const CoursePlannerEdit = () => {
       children: (
         <ProjectCard
           behavior="draggable"
-          buttonDropdownItems={projectCardMenuItems()}
-          buttonDropdownPosition="top-left"
+          menuItems={projectCardMenuItems()}
           meta="12 days"
           metaIconName="event-note"
           number={6}

diff --git a/.storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.tsx b/.storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.tsx
@@ -7,9 +7,8 @@ import {
   CardHeader,
   Heading,
   Icon,
-  Button,
+  Menu,
   NumberIcon,
-  ButtonDropdown,
 } from '../../../../src';
 import type { HeadingElement } from '../../../../src/components/Heading';
 
@@ -23,19 +22,11 @@ export interface Props {
    */
   behavior?: 'draggable';
   /**
-   * Button dropdown items
+   * Menu items
    *
-   * If not declared, the button dropdown does not render.
+   * If not declared, the menu does not render.
    */
-  buttonDropdownItems?: ReactNode;
-  /**
-   * Determines type of clickable
-   * - default renders a dropdown menu to the bottom left of the button
-   * - **top-left** renders a dropdown menu to the top left of the button
-   * - **top-right** renders a dropdown menu to the top right of the button
-   * - **bottom-right** renders a dropdown menu to the bottom right of the button
-   */
-  buttonDropdownPosition?: 'top-left' | 'top-right' | 'bottom-right';
+  menuItems?: ReactNode;
   /**
    * CSS class names that can be appended to the component.
    */
@@ -82,8 +73,7 @@ export const ProjectCard = ({
   metaIconName,
   number,
   headingAs = 'h3',
-  buttonDropdownItems,
-  buttonDropdownPosition,
+  menuItems,
   numberAriaLabel,
   isDragging,
   ...other
@@ -139,24 +129,28 @@ export const ProjectCard = ({
           </div>
         )}
       </Card.Body>
-      {buttonDropdownItems && (
+      {menuItems && (
         <Card.Footer className={styles['project-card__footer']}>
-          <ButtonDropdown
-            dropdownMenuTrigger={
-              <Button
-                aria-label="Open project dropdown"
-                className={styles['project-card__menu-button']}
-                size="sm"
-                status="neutral"
-                variant="icon"
-              >
-                <Icon name="dots-vertical" purpose="decorative" />
-              </Button>
-            }
-            position={buttonDropdownPosition}
+          <Menu
+            modifiers={[
+              // Brings the Menu closer to the dots-vertical icon trigger button
+              {
+                name: 'offset',
+                options: { offset: [0, 0] },
+              },
+            ]}
+            placement="bottom-end"
           >
-            {buttonDropdownItems}
-          </ButtonDropdown>
+            <Menu.PlainButton>
+              <Icon
+                name="dots-vertical"
+                purpose="informative"
+                size="1.5rem"
+                title="Open project dropdown"
+              />
+            </Menu.PlainButton>
+            <Menu.Items>{menuItems}</Menu.Items>
+          </Menu>
         </Card.Footer>
       )}
     </Card>