Feature/menu updates

src/@next/Menu/Menu.stories.tsx

@@ -32,8 +32,12 @@ const options = [
     active: false,
     disabled: false,
     id: '2',
-    label: 'Completed',
-    value: 'Completed',
+    label: 'Tooltip Added',
+    value: 'Tooltip Added',
+    tooltip: {
+      content: 'Sample Tooltip',
+      preferredPosition: 'right-middle',
+    },
   },
   {
     active: false,
@@ -84,8 +88,12 @@ Basic.parameters = {
           active: false,
           disabled: false,
           id: '2',
-          label: 'Completed',
-          value: 'Completed',
+          label: 'Tooltip Added',
+          value: 'Tooltip Added',
+          tooltip: {
+            content: "Sample Tooltip",
+            preferredPosition: 'right-middle'
+          }
         },
         {
           active: false,
@@ -169,8 +177,12 @@ AllowMultiple.parameters = {
           active: false,
           disabled: false,
           id: '2',
-          label: 'Completed',
-          value: 'Completed',
+          label: 'Tooltip Added',
+          value: 'Tooltip Added',
+          tooltip: {
+            content: "Sample Tooltip",
+            preferredPosition: 'right-middle'
+          }
         },
         {
           active: false,

src/@next/Menu/Menu.tsx

@@ -2,21 +2,32 @@ import React from 'react';
 import nextId from 'react-id-generator';
 import { Typography } from '../Typography';
 import { Neutral } from '../utilities/colors';
-import { StyledMenu, StyledSections, TitleContainer } from './MenuStyle';
+import {
+  StyledMenu,
+  StyledSections,
+  StyledTooltip,
+  TitleContainer,
+  TitleNodeContainer,
+} from './MenuStyle';
 import { MenuOptionLabel } from './components/MenuOptionLabel';
 import { MenuOption } from './components/MenuOption';
 import { MenuOptionCheckbox } from './components/MenuOptionCheckbox';
+import { TooltipPosition } from '../Tooltip/Tooltip';
 
 export interface Option {
   disabled?: boolean;
   id?: string;
   label: string | React.ReactNode;
   sublabel?: React.ReactNode;
   value: string;
+  tooltip?: {
+    content: React.ReactNode;
+    preferredPosition?: TooltipPosition;
+  };
 }
 
 export interface Section {
-  title?: string;
+  title?: string | React.ReactNode;
   options: Option[];
 }
 export interface MenuProps {
@@ -25,7 +36,7 @@ export interface MenuProps {
   options?: Option[];
   /** Selected value based on Option.value */
   selectedValues?: string[];
-  title?: string;
+  title?: string | React.ReactNode;
   allowMultiple?: boolean;
   sections?: Section[];
 }
@@ -42,7 +53,10 @@ export const Menu = ({
   const randomId = nextId('glints-menu');
   const menuId = id ? id : randomId;
 
-  const renderTitle = ({ title }: { title: string }) => {
+  const renderTitle = ({ title }: { title: string | React.ReactNode }) => {
+    if (React.isValidElement(title)) {
+      return <TitleNodeContainer>{title}</TitleNodeContainer>;
+    }
     return (
       <TitleContainer>
         <Typography variant="subtitle2" as="span" color={Neutral.B40}>
@@ -56,12 +70,12 @@ export const Menu = ({
     return (
       <StyledMenu>
         {options?.map((option: Option) => {
-          const { value, label, sublabel, disabled, id } = option;
+          const { value, label, sublabel, disabled, id, tooltip } = option;
           const randomId = nextId('glints-menu-option');
           const menuOptionId = id ? id : randomId;
           const isSelected = selectedValues?.includes(value);
 
-          return (
+          const menuOption = (
             <MenuOption
               key={menuOptionId}
               value={value}
@@ -73,6 +87,17 @@ export const Menu = ({
               <MenuOptionLabel label={label} sublabel={sublabel} />
             </MenuOption>
           );
+
+          return tooltip ? (
+            <StyledTooltip
+              content={tooltip.content}
+              preferredPosition={tooltip.preferredPosition ?? 'left-middle'}
+            >
+              {menuOption}
+            </StyledTooltip>
+          ) : (
+            menuOption
+          );
         })}
       </StyledMenu>
     );
@@ -82,12 +107,12 @@ export const Menu = ({
     return (
       <StyledMenu>
         {options?.map((option: Option) => {
-          const { value, label, disabled, id } = option;
+          const { value, label, disabled, id, tooltip } = option;
           const randomId = nextId('glints-menu-option');
           const menuOptionId = id ? id : randomId;
           const isSelected = selectedValues?.includes(value);
 
-          return (
+          const menuOption = (
             <MenuOption
               key={menuOptionId}
               value={value}
@@ -103,6 +128,17 @@ export const Menu = ({
               />
             </MenuOption>
           );
+
+          return tooltip ? (
+            <StyledTooltip
+              content={tooltip.content}
+              preferredPosition={tooltip.preferredPosition ?? 'left-middle'}
+            >
+              {menuOption}
+            </StyledTooltip>
+          ) : (
+            menuOption
+          );
         })}
       </StyledMenu>
     );

src/@next/Menu/MenuStyle.ts

@@ -4,6 +4,7 @@ import { Blue, Neutral } from '../utilities/colors';
 import { space16, space4, space8 } from '../utilities/spacing';
 
 import { MenuProps } from './Menu';
+import { Tooltip } from '../Tooltip/Tooltip';
 
 export const StyledMenu = styled.ul<MenuProps>`
   list-style: none;
@@ -73,6 +74,13 @@ export const StyledMenu = styled.ul<MenuProps>`
   }
 `;
 
+export const StyledTooltip = styled(Tooltip).attrs({
+  zIndex: 500,
+})`
+  display: block;
+  width: 100%;
+`;
+
 export const TitleContainer = styled.div`
   margin: ${space8} 0 ${space4};
   padding: ${space8} ${space16};
@@ -82,6 +90,10 @@ export const TitleContainer = styled.div`
   }
 `;
 
+export const TitleNodeContainer = styled.div`
+  margin: ${space8} 0 ${space4};
+`;
+
 export const ListContainer = styled.div`
   padding: 0 ${space8};
 `;

test/e2e/menu/menu.spec.ts

@@ -3,7 +3,7 @@ import { MenuPage } from './menuPage';
 
 test('Menu - basic without title', async ({ page }) => {
   const menuPage = new MenuPage(page);
-  await menuPage.goto('args=title:');
+  await menuPage.goto('args=title:!null');
   await expect(menuPage.canvas).toHaveScreenshot(
     'menu-basic-without-title.png'
   );