Add a menu title for floating menu (#319)

* feat: extract menu title from FloatingMenu

* feat: use `MenuTitle` in `FloatingMenu`

* feat: add `MenuTitle` to `Menu` story

src/components/Menu/FloatingMenu.module.css

@@ -72,9 +72,6 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .title {
-  color: var(--cpd-color-text-secondary);
-  padding-inline: var(--cpd-space-4x);
-  padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));
-  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
-  margin-block: 0 var(--cpd-space-2x);
+  /** Override MenuTitle margin top **/
+  margin-block-start: 0 !important;
 }

src/components/Menu/FloatingMenu.tsx

@@ -13,18 +13,7 @@ import React, {
   useId,
 } from "react";
 import styles from "./FloatingMenu.module.css";
-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>
-);
+import { MenuTitle } from "./MenuTitle.tsx";
 
 interface Props extends ComponentPropsWithoutRef<"div"> {
   /**
@@ -62,7 +51,9 @@ export const FloatingMenu = forwardRef<HTMLDivElement, Props>(
         className={classnames(className, styles.menu)}
         {...props}
       >
-        {showTitle && <MenuTitle title={title} id={titleId} />}
+        {showTitle && (
+          <MenuTitle className={styles.title} title={title} id={titleId} />
+        )}
         {children}
       </div>
     );

src/components/Menu/Menu.stories.tsx

@@ -16,6 +16,7 @@ import { Menu as MenuComponent } from "./Menu";
 import { MenuItem } from "./MenuItem";
 import { Separator } from "../Separator/Separator";
 import { Button } from "../Button/Button";
+import { MenuTitle } from "./MenuTitle.tsx";
 
 type Props = Omit<
   React.ComponentProps<typeof MenuComponent>,
@@ -39,6 +40,12 @@ const Template: React.FC<Props> = (args) => {
         label="Notifications"
         onSelect={() => {}}
       />
+      <MenuTitle title="Other section" />
+      <MenuItem
+        Icon={NotificationsIcon}
+        label="Other Notifications"
+        onSelect={() => {}}
+      />
       <MenuItem Icon={ChatProblemIcon} label="Feedback" onSelect={() => {}} />
       <Separator />
       <MenuItem

src/components/Menu/MenuTitle.module.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.menu-title {
+  color: var(--cpd-color-text-secondary);
+  padding-inline: var(--cpd-space-4x);
+  padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));
+  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
+  margin-block: var(--cpd-space-2x);
+}

src/components/Menu/MenuTitle.stories.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { MenuTitle as MenuTitleComponent } from "./MenuTitle";
+import { Meta, StoryFn } from "@storybook/react";
+import React, { ComponentProps } from "react";
+
+export default {
+  title: "Menu/MenuTitle",
+  component: MenuTitleComponent,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {
+    title: "Title",
+  },
+} as Meta<typeof MenuTitleComponent>;
+
+const Template: StoryFn<typeof MenuTitleComponent> = (
+  args: ComponentProps<typeof MenuTitleComponent>,
+) => {
+  return <MenuTitleComponent {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {};

src/components/Menu/MenuTitle.test.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { MenuTitle } from "./MenuTitle.tsx";
+import React from "react";
+
+describe("MenuTitle", () => {
+  it("renders", () => {
+    const { asFragment } = render(<MenuTitle title="Title" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/Menu/MenuTitle.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { Text } from "../Typography/Text.tsx";
+import styles from "./MenuTitle.module.css";
+import classnames from "classnames";
+
+interface MenuTitleProps {
+  /**
+   * The title of the menu.
+   */
+  title: string;
+  /**
+   * The id of the menu title.
+   */
+  id?: string;
+  /**
+   * The CSS class.
+   */
+  className?: string;
+}
+
+export const MenuTitle: React.FC<MenuTitleProps> = ({
+  title,
+  id,
+  className,
+}) => {
+  const classes = classnames(styles["menu-title"], className);
+
+  return (
+    <Text as="h3" id={id} className={classes} size="sm" weight="semibold">
+      {title}
+    </Text>
+  );
+};

src/components/Menu/__snapshots__/FloatingMenu.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`FloatingMenu > renders 1`] = `
     role="menu"
   >
     <h3
-      class="_typography_489030 _font-body-sm-semibold_489030 _title_3295a1"
+      class="_typography_489030 _font-body-sm-semibold_489030 _menu-title_7bbc38 _title_3295a1"
       id=":r0:"
     >
       Settings

src/components/Menu/__snapshots__/MenuTitle.test.tsx.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MenuTitle > renders 1`] = `
+<DocumentFragment>
+  <h3
+    class="_typography_489030 _font-body-sm-semibold_489030 _menu-title_7bbc38"
+  >
+    Title
+  </h3>
+</DocumentFragment>
+`;