Revert "Enhances MenuGroup [LG-4346] (#2403)"

This reverts commit b74aeec.
mongodb · Jun 25, 2024 · bd6572b · bd6572b
1 parent b74aeec
commit bd6572b
Show file tree

Hide file tree

Showing 19 changed files with 128 additions and 407 deletions.
diff --git a/.changeset/shaggy-carrots-talk.md b/.changeset/shaggy-carrots-talk.md
diff --git a/packages/menu/package.json b/packages/menu/package.json
@@ -27,13 +27,11 @@
     "@leafygreen-ui/hooks": "^8.1.3",
     "@leafygreen-ui/icon": "^12.5.4",
     "@leafygreen-ui/icon-button": "^15.0.21",
-    "@leafygreen-ui/input-option": "^1.1.4",
     "@leafygreen-ui/lib": "^13.6.0",
     "@leafygreen-ui/palette": "^4.0.9",
     "@leafygreen-ui/popover": "^11.4.0",
     "@leafygreen-ui/polymorphic": "^2.0.0",
     "@leafygreen-ui/tokens": "^2.9.0",
-    "@leafygreen-ui/typography": "^19.2.0",
     "lodash": "^4.17.21",
     "polished": "^4.3.1",
     "react-transition-group": "^4.4.5"

diff --git a/packages/menu/src/Menu.stories.tsx b/packages/menu/src/Menu.stories.tsx
@@ -20,14 +20,7 @@ import { TestUtils } from '@leafygreen-ui/popover';
 const { getAlign, getJustify } = TestUtils;
 
 import { Size } from './types';
-import {
-  Menu,
-  MenuGroup,
-  MenuItem,
-  MenuProps,
-  MenuSeparator,
-  SubMenu,
-} from '.';
+import { Menu, MenuItem, MenuProps, MenuSeparator, SubMenu } from '.';
 
 const getDecoratorStyles = (args: Partial<MenuProps>) => {
   return css`
@@ -72,7 +65,7 @@ export default {
     align: 'bottom',
     usePortal: true,
     darkMode: false,
-    renderDarkMenu: false,
+    renderDarkMenu: true,
   },
   argTypes: {
     open: {
@@ -141,13 +134,14 @@ export const LiveExample = {
           Delete
         </MenuItem>
         <MenuSeparator />
-        <MenuGroup title="Lorem Ipsum">
-          <MenuItem>Lorem</MenuItem>
-          <MenuItem>Ipsum</MenuItem>
-          <MenuItem>Dolor</MenuItem>
-          <MenuItem>Sit</MenuItem>
-          <MenuItem>Amet</MenuItem>
-        </MenuGroup>
+        <MenuItem>Lorem</MenuItem>
+        <MenuItem>Ipsum</MenuItem>
+        <MenuItem>Adipiscing</MenuItem>
+        <MenuItem>Cursus</MenuItem>
+        <MenuItem>Ullamcorper</MenuItem>
+        <MenuItem>Vulputate</MenuItem>
+        <MenuItem>Inceptos</MenuItem>
+        <MenuItem>Risus</MenuItem>
       </Menu>
     );
   },

diff --git a/packages/menu/src/MenuContext/GroupContext.tsx b/packages/menu/src/MenuContext/GroupContext.tsx
diff --git a/packages/menu/src/MenuContext/MenuContext.tsx b/packages/menu/src/MenuContext/MenuContext.tsx
@@ -1,24 +1,8 @@
 import { createContext, useContext } from 'react';
 
 import { createDescendantsContext } from '@leafygreen-ui/descendants';
-import { Descendant } from '@leafygreen-ui/descendants';
-import { Theme } from '@leafygreen-ui/lib';
 
-import { HighlightReducerReturnType } from '../HighlightReducer/highlight.types';
-
-export interface MenuContextData {
-  theme: Theme;
-  darkMode: boolean;
-
-  /** The index of the currently highlighted (focused) item */
-  highlight?: Descendant;
-
-  /** Sets the current highlight by index or id */
-  setHighlight?: HighlightReducerReturnType['setHighlight'];
-
-  /** Whether to render a dark menu in light mode */
-  renderDarkMenu?: boolean;
-}
+import { MenuContextData } from './MenuContext.types';
 
 export const MenuDescendantsContext = createDescendantsContext(
   'MenuDescendantsContext',
@@ -31,3 +15,5 @@ export const MenuContext = createContext<MenuContextData>({
 });
 
 export const useMenuContext = () => useContext(MenuContext);
+
+export default MenuContext;
diff --git a/packages/menu/src/MenuContext/MenuContext.types.ts b/packages/menu/src/MenuContext/MenuContext.types.ts
@@ -0,0 +1,18 @@
+import { Descendant } from '@leafygreen-ui/descendants';
+import { Theme } from '@leafygreen-ui/lib';
+
+import { HighlightReducerReturnType } from '../HighlightReducer/highlight.types';
+
+export interface MenuContextData {
+  theme: Theme;
+  darkMode: boolean;
+
+  /** The index of the currently highlighted (focused) item */
+  // highlightIndex?: number;
+  highlight?: Descendant;
+
+  setHighlight?: HighlightReducerReturnType['setHighlight'];
+
+  /** Whether to a dark menu in light mode */
+  renderDarkMenu?: boolean;
+}
diff --git a/packages/menu/src/MenuContext/SubMenuContext.tsx b/packages/menu/src/MenuContext/SubMenuContext.tsx
diff --git a/packages/menu/src/MenuContext/index.ts b/packages/menu/src/MenuContext/index.ts
@@ -1,18 +1,5 @@
 export {
-  type MenuGroupContext,
-  MenuGroupContextData,
-  MenuGroupProvider,
-  useMenuGroupContext,
-} from './GroupContext';
-export {
-  MenuContext,
-  type MenuContextData,
+  default as MenuContext,
   MenuDescendantsContext,
   useMenuContext,
 } from './MenuContext';
-export {
-  SubMenuContext,
-  type SubMenuContextData,
-  SubMenuProvider,
-  useSubMenuContext,
-} from './SubMenuContext';
diff --git a/packages/menu/src/MenuGroup/MenuGroup.stories.tsx b/packages/menu/src/MenuGroup/MenuGroup.stories.tsx
diff --git a/packages/menu/src/MenuGroup/MenuGroup.styles.ts b/packages/menu/src/MenuGroup/MenuGroup.styles.ts
diff --git a/packages/menu/src/MenuGroup/MenuGroup.tsx b/packages/menu/src/MenuGroup/MenuGroup.tsx
@@ -1,74 +1,23 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIdAllocator } from '@leafygreen-ui/hooks';
-import { InputOption, InputOptionContent } from '@leafygreen-ui/input-option';
-import { Overline } from '@leafygreen-ui/typography';
-
-import {
-  MenuGroupProvider,
-  useMenuContext,
-  useMenuGroupContext,
-} from '../MenuContext';
-
-import {
-  getMenuGroupItemStyles,
-  getMenuGroupTitleStyles,
-  menuGroupULStyles,
-} from './MenuGroup.styles';
 import { MenuGroupProps } from './MenuGroup.types';
 
 /**
  * # MenuGroup
  *
  * ```
-<MenuGroup title="Hello World!">
-  <MenuItem>Item 1</MenuItem>
+<MenuGroup>
+  <MenuGroup>Hello World!</MenuGroup>
 </MenuGroup>
  * ```
  * @param props.children Content to appear inside of the MenuGroup.
  *
  */
-export function MenuGroup({
-  children,
-  className,
-  title,
-  glyph,
-  ...rest
-}: MenuGroupProps) {
-  const { theme, darkMode } = useMenuContext();
-  const id = useIdAllocator({ prefix: 'lg-menu-group' });
-  const { depth } = useMenuGroupContext();
-
-  const shouldRenderGroupHeader = !!title;
-  const hasIcon = shouldRenderGroupHeader && !!glyph;
-  // We only indent the child items if we render a title here,
-  // otherwise we just pass through
-  const nextGroupDepth = depth + (shouldRenderGroupHeader ? 1 : 0);
-
+export function MenuGroup({ children, className, ...rest }: MenuGroupProps) {
   return (
     <section {...rest} className={className}>
-      {title && (
-        <InputOption
-          id={id}
-          darkMode={darkMode}
-          as="div"
-          role="none"
-          isInteractive={false}
-          className={getMenuGroupItemStyles(theme)}
-        >
-          <InputOptionContent leftGlyph={glyph} preserveIconSpace={false}>
-            <Overline className={getMenuGroupTitleStyles(theme)}>
-              {title}
-            </Overline>
-          </InputOptionContent>
-        </InputOption>
-      )}
-      <MenuGroupProvider depth={nextGroupDepth} hasIcon={hasIcon}>
-        <ul role="menu" aria-labelledby={id} className={menuGroupULStyles}>
-          {children}
-        </ul>
-      </MenuGroupProvider>
+      {children}
     </section>
   );
 }

diff --git a/packages/menu/src/MenuGroup/MenuGroup.types.ts b/packages/menu/src/MenuGroup/MenuGroup.types.ts
@@ -1,15 +1,5 @@
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 export interface MenuGroupProps extends HTMLElementProps<'div'> {
-  /**
-   * Main text rendered in `MenuGroup`.
-   */
-  title?: string;
-
-  /**
-   * Slot to pass in an Icon rendered to the left of the text.
-   */
-  glyph?: React.ReactElement;
-
   /**
    * Content that will appear inside of MenuGroup component.
    * @type `<MenuItem />` | `<SubMenu />` | `<MenuGroup />` | `<MenuSeparator />`