Merge pull request #791 from glints-dev/feature/menu-fix-no-title

fix: Menu conditionally render title

Author: ninariccimarie

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

@@ -75,12 +75,7 @@ const BasicTemplate: Story<MenuProps> = args => {
       onClose={() => setPopoverActive(false)}
     >
       <Popover.Pane>
-        <Menu
-          {...args}
-          title="Basic Menu"
-          onChange={setSelected}
-          selectedValues={selected}
-        />
+        <Menu {...args} onChange={setSelected} selectedValues={selected} />
       </Popover.Pane>
     </Popover>
   );
@@ -90,4 +85,5 @@ export const Basic = BasicTemplate.bind({});
 
 Basic.args = {
   options,
+  title: 'Basic Menu',
 };

src/@next/Menu/Menu.tsx

@@ -35,11 +35,13 @@ export const Menu = ({
 
   return (
     <StyledMenu id={menuId}>
-      <TitleContainer>
-        <Typography variant="subtitle2" as="span" color={Neutral.B40}>
-          {title}
-        </Typography>
-      </TitleContainer>
+      {title && (
+        <TitleContainer>
+          <Typography variant="subtitle2" as="span" color={Neutral.B40}>
+            {title}
+          </Typography>
+        </TitleContainer>
+      )}
       {options.map(option => {
         const { value, label, disabled, id } = option;
         const isSelected = selectedValues?.includes(value);

test/e2e/menu/menu.spec.ts

@@ -1,9 +1,18 @@
 import { test, expect } from '@playwright/test';
 import { MenuPage } from './menuPage';
 
+test('Menu - basic without title', async ({ page }) => {
+  const menuPage = new MenuPage(page);
+  await menuPage.goto('args=title:');
+  await expect(menuPage.canvas).toHaveScreenshot(
+    'menu-basic-without-title.png'
+  );
+});
+
 test('Menu - basic with disabled option', async ({ page }) => {
   const menuPage = new MenuPage(page);
   await menuPage.goto();
+  await menuPage.options.first().waitFor();
   await expect(menuPage.canvas).toHaveScreenshot(
     'menu-basic-with-disabled-option.png'
   );

test/e2e/menu/menu.spec.ts-snapshots/menu-basic-without-title-chromium-linux.png

@@ -2,9 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import { StoryBookPage } from '../storybookPage';
 
 export class MenuPage extends StoryBookPage {
-  readonly menuActivator: Locator;
   readonly options: Locator;
-  readonly pendingOption: Locator;
 
   constructor(page: Page) {
     super(page, '?path=/story/next-menu--basic');