Remove all submenu code

cultureamp · Jul 18, 2024 · 68f941e · 68f941e
1 parent d02a04e
commit 68f941e
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 155 deletions.
diff --git a/packages/components/src/__actions__/Menu/v3/MenuItem.module.scss b/packages/components/src/__actions__/Menu/v3/MenuItem.module.scss
@@ -10,6 +10,7 @@
     var(--border-focus-ring-border-style) transparent;
   border-radius: 4px;
   display: flex;
+  gap: 0 var(--spacing-8);
   align-items: center;
   margin-inline: var(--spacing-6);
   text-decoration: none;
@@ -21,16 +22,6 @@
   align-items: center;
 }
 
-.submenuTriggerInner {
-  flex-grow: 1;
-  display: flex;
-}
-
-.item,
-.submenuTriggerInner {
-  gap: 0 var(--spacing-8);
-}
-
 .item[data-focused] {
   background-color: var(--color-blue-100);
   color: var(--color-blue-500);

diff --git a/packages/components/src/__actions__/Menu/v3/MenuItem.tsx b/packages/components/src/__actions__/Menu/v3/MenuItem.tsx
@@ -1,11 +1,9 @@
-import React, { forwardRef, ReactNode, useContext } from "react"
+import React, { forwardRef, ReactNode } from "react"
 import {
   MenuItem as RACMenuItem,
   MenuItemProps as RACMenuItemProps,
 } from "react-aria-components"
-import { ChevronRightIcon } from "~components/Icon"
 import { mergeClassNames } from "~utils/mergeClassNames"
-import { SubmenuTriggerContext } from "./SubmenuTrigger"
 import styles from "./MenuItem.module.scss"
 
 export type MenuItemProps = RACMenuItemProps & {
@@ -23,43 +21,20 @@ export type MenuItemProps = RACMenuItemProps & {
  * A MenuItem represents an individual action in a Menu.
  */
 export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
-  ({ className, icon, children, variant, ...props }, ref): JSX.Element => {
-    const submenuTriggerContext = useContext(SubmenuTriggerContext)
-    if (submenuTriggerContext !== null) {
-      return (
-        <RACMenuItem
-          className={mergeClassNames(styles.item, className)}
-          ref={ref}
-          {...props}
-        >
-          {(...renderProps) => (
-            <>
-              <div className={styles.submenuTriggerInner}>
-                {typeof children === "function"
-                  ? children(...renderProps)
-                  : children}
-              </div>
-              <ChevronRightIcon role="presentation" />
-            </>
-          )}
-        </RACMenuItem>
-      )
-    }
-
-    return (
-      <RACMenuItem
-        className={mergeClassNames(
-          styles.item,
-          variant === "destructive" && styles.destructive,
-          className
-        )}
-        {...props}
-      >
-        <>
-          {icon && <span className={styles.iconWrapper}>{icon}</span>}
-          {children}
-        </>
-      </RACMenuItem>
-    )
-  }
+  ({ className, icon, children, variant, ...props }, ref): JSX.Element => (
+    <RACMenuItem
+      ref={ref}
+      className={mergeClassNames(
+        styles.item,
+        variant === "destructive" && styles.destructive,
+        className
+      )}
+      {...props}
+    >
+      <>
+        {icon && <span className={styles.iconWrapper}>{icon}</span>}
+        {children}
+      </>
+    </RACMenuItem>
+  )
 )
diff --git a/packages/components/src/__actions__/Menu/v3/SubmenuTrigger.tsx b/packages/components/src/__actions__/Menu/v3/SubmenuTrigger.tsx
diff --git a/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx b/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx
@@ -87,12 +87,6 @@ Menu items can be disabled with the `isDisabled` prop.
 
 <Canvas className="mb-24" of={exampleStories.DisabledItems}  />
 
-{/* ## Submenus
-
-You can create a second layer of menu using the `SubmenuTrigger` component.
-
-<Canvas className="mb-24" of={exampleStories.Submenu}  /> */}
-
 ## Controlled
 
 By default, the open/closed state of the menu is handled under the hood. In cases where you need control over the open state, use the `isOpen` and `onOpenChange` props on the `MenuTrigger` component (both props must be used for this to work).

diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx
@@ -87,18 +87,6 @@ export const KitchenSink: Story = {
             >
               Delete but disabled
             </MenuItem>
-            {/* <SubmenuTrigger>
-              <MenuItem>
-                <DuplicateIcon role="presentation" />
-                Submenu trigger with a long label
-              </MenuItem>
-              <Popover>
-                <Menu>
-                  <MenuItem>Submenu item 1</MenuItem>
-                  <MenuItem>Submenu item 2</MenuItem>
-                </Menu>
-              </Popover>
-            </SubmenuTrigger> */}
             <MenuItem>Other action</MenuItem>
             <MenuItem>Other action</MenuItem>
             <MenuItem>Other action</MenuItem>
@@ -297,65 +285,3 @@ export const Controlled: Story = {
     })
   },
 }
-
-// export const Submenu: Story = {
-//   render: () => (
-//     <MenuTrigger>
-//       {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
-//       <RACButton className="bg-white border border-gray-500 rounded p-8 flex">
-//         <MeatballsIcon role="img" aria-label="Additional actions" />
-//       </RACButton>
-//       <Popover>
-//         <Menu>
-//           <MenuItem>
-//             <DuplicateIcon role="presentation" />
-//             Item 1
-//           </MenuItem>
-//           <MenuItem>Item 2</MenuItem>
-//           <MenuItem>Item 3</MenuItem>
-//           <MenuItem>Item 4</MenuItem>
-//           <MenuItem>Item 5</MenuItem>
-//           <SubmenuTrigger>
-//             <MenuItem>
-//               <DuplicateIcon role="presentation" />
-//               Submenu trigger
-//             </MenuItem>
-//             <Popover>
-//               <Menu>
-//                 <MenuItem>Submenu item 1</MenuItem>
-//                 <MenuItem>Submenu item 2</MenuItem>
-//               </Menu>
-//             </Popover>
-//           </SubmenuTrigger>
-//         </Menu>
-//       </Popover>
-//     </MenuTrigger>
-//   ),
-//   play: async ({ canvasElement, step }) => {
-//     const canvas = within(canvasElement.parentElement!)
-//     const menuButton = canvas.getByRole("button")
-
-//     await step("Submenu opens on click of trigger", async () => {
-//       await userEvent.click(menuButton)
-//       await userEvent.hover(
-//         canvas.getByRole("menuitem", { name: "Submenu trigger" })
-//       )
-//       await waitFor(() =>
-//         expect(
-//           canvas.getByRole("menuitem", { name: "Submenu item 1" })
-//         ).toBeVisible()
-//       )
-//       await userEvent.keyboard("[Escape]")
-//     })
-
-//     await step("Submenu opens on right arrow press", async () => {
-//       await userEvent.keyboard("[ArrowUp]")
-//       await userEvent.keyboard("[ArrowRight]")
-//       await waitFor(() =>
-//         expect(
-//           canvas.getByRole("menuitem", { name: "Submenu item 1" })
-//         ).toHaveFocus()
-//       )
-//     })
-//   },
-// }
diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx
@@ -71,7 +71,3 @@ export const Controlled: Story = {
   ...testStories.Controlled,
   play: undefined,
 }
-// export const Submenu: Story = {
-//   ...testStories.Submenu,
-//   play: undefined,
-// }
diff --git a/packages/components/src/__actions__/Menu/v3/index.ts b/packages/components/src/__actions__/Menu/v3/index.ts
@@ -1,4 +1,3 @@
 export * from "./Menu"
 export * from "./MenuItem"
 export * from "./MenuTrigger"
-// export * from "./SubmenuTrigger"