Make title optional on Menu

src/components/Menu/DrawerMenu.tsx

@@ -23,7 +23,7 @@ interface Props extends ComponentPropsWithoutRef<"div"> {
   /**
    * The menu title.
    */
-  title: string;
+  title?: string;
   /**
    * The menu contents.
    */

src/components/Menu/FloatingMenu.tsx

@@ -20,11 +20,22 @@ import styles from "./FloatingMenu.module.css";
 import useId from "../../utils/useId";
 import { Text } from "../Typography/Text";
 
+interface TitleProps {
+  title: string;
+  id: string;
+}
+
+const MenuTitle: React.FC<TitleProps> = ({ title, id }) => (
+  <Text as="h3" id={id} className={styles.title} size="sm" weight="semibold">
+    {title}
+  </Text>
+);
+
 interface Props extends ComponentPropsWithoutRef<"div"> {
   /**
    * The menu title.
    */
-  title: string;
+  title?: string;
   /**
    * The CSS class.
    */
@@ -47,19 +58,11 @@ export const FloatingMenu = forwardRef<HTMLDivElement, Props>(
       <div
         role="menu"
         ref={ref}
-        aria-labelledby={titleId}
+        aria-labelledby={title ? titleId : undefined}
         className={classnames(className, styles.menu)}
         {...props}
       >
-        <Text
-          as="h3"
-          id={titleId}
-          className={styles.title}
-          size="sm"
-          weight="semibold"
-        >
-          {title}
-        </Text>
+        {title && <MenuTitle title={title} id={titleId} />}
         {children}
       </div>
     );

src/components/Menu/Menu.stories.tsx

@@ -40,7 +40,6 @@ const Template: StoryFn<typeof MenuComponent> = (args) => {
   return (
     <MenuComponent
       {...args}
-      title="Settings"
       open={open}
       onOpenChange={setOpen}
       trigger={<Button>Open menu</Button>}
@@ -65,4 +64,11 @@ const Template: StoryFn<typeof MenuComponent> = (args) => {
 };
 
 export const Menu = Template.bind({});
-Menu.args = {};
+Menu.args = {
+  title: "Today's Menu",
+};
+
+export const WithoutTitle = Template.bind({});
+WithoutTitle.args = {
+  title: undefined,
+};

src/components/Menu/Menu.test.tsx

@@ -150,4 +150,18 @@ describe("Menu", () => {
       expect(onOpenChange).not.toHaveBeenCalledWith(false);
     });
   });
+
+  it("renders without title if none supplied", async () => {
+    render(
+      <Menu
+        open={true}
+        onOpenChange={vi.fn()}
+        trigger={<Button>Open menu</Button>}
+      >
+        <MenuItem Icon={UserProfileIcon} label="Profile" onSelect={() => {}} />
+      </Menu>,
+    );
+
+    expect(screen.queryByRole("heading")).toBe(null);
+  });
 });

src/components/Menu/Menu.tsx

@@ -34,7 +34,7 @@ interface Props {
   /**
    * The menu title.
    */
-  title: string;
+  title?: string;
   /**
    * Whether the menu is open.
    */