feat: add non-selectable menu label

src/core/components/menu/__workshop__/index.ts

@@ -20,6 +20,11 @@ export default defineScope({
       title: 'Custom MenuItem',
       component: lazy(() => import('./customMenuItem')),
     },
+    {
+      name: 'label',
+      title: 'Label',
+      component: lazy(() => import('./label')),
+    },
     {
       name: 'groups',
       title: 'Groups',

src/core/components/menu/__workshop__/label.tsx

@@ -0,0 +1,49 @@
+import {
+  Button,
+  Card,
+  Container,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuItem,
+  MenuLabel,
+  Stack,
+} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function MenuLabelStory() {
+  const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
+
+  return (
+    <Card height="fill" tone="transparent">
+      <Flex align="center" height="fill" padding={4} sizing="border">
+        <Container width={1}>
+            <Card radius={3} shadow={3} padding={3} tone={layoutTone}>
+              <Flex justify="center">
+              <MenuButton
+                button={<Button text="Open" />}
+                id="label-example"
+                menu={
+                  <Menu>
+                    <Stack space={1}>
+                      <MenuLabel text="Label 1" />
+                      <MenuItem text="Item 1" />
+                      <MenuItem text="Item 2" />
+                    </Stack>
+                    <MenuDivider />
+                    <MenuLabel text="Label 2" />
+                    <MenuItem text="Item 3" />
+                  </Menu>
+                }
+              />
+
+              </Flex>
+            </Card>
+        </Container>
+      </Flex>
+    </Card>
+  )
+}

src/core/components/menu/index.ts

@@ -3,3 +3,4 @@ export * from './menuButton'
 export * from './menuDivider'
 export * from './menuGroup'
 export * from './menuItem'
+export * from './menuLabel'

src/core/components/menu/menuLabel.tsx

@@ -0,0 +1,60 @@
+import {forwardRef} from 'react'
+
+import {Box, Label} from '../../primitives'
+import {ResponsivePaddingProps} from '../../primitives/types'
+
+/**
+ * @public
+ */
+export interface MenuLabelProps extends ResponsivePaddingProps {
+  fontSize?: number | number[]
+  text?: React.ReactNode
+}
+
+/**
+ * The `MenuLabel` component is a non-interactive label for menus.
+ *
+ * @public
+ */
+export const MenuLabel = forwardRef(function MenuLabel(
+  props: MenuLabelProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    children,
+    fontSize = 1,
+    padding,
+    paddingX = 3,
+    paddingY,
+    paddingTop = 3,
+    paddingRight,
+    paddingBottom = 1,
+    paddingLeft,
+    text,
+    ...restProps
+  } = props
+
+  return (
+    <Box
+      data-ui="MenuLabel"
+      role="presentation"
+      {...restProps}
+      padding={padding}
+      paddingX={paddingX}
+      paddingY={paddingY}
+      paddingTop={paddingTop}
+      paddingRight={paddingRight}
+      paddingBottom={paddingBottom}
+      paddingLeft={paddingLeft}
+      ref={forwardedRef}
+    >
+      {text && (
+        <Label muted size={fontSize} weight="medium">
+          {text}
+        </Label>
+      )}
+      {children}
+    </Box>
+  )
+})
+MenuLabel.displayName = 'ForwardRef(MenuLabel)'

stories/components/MenuLabel.stories.tsx

@@ -0,0 +1,119 @@
+import type {Meta, StoryFn, StoryObj} from '@storybook/react'
+
+import {
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+} from '../../src/core/components'
+import {Button, Card, Container} from '../../src/core/primitives'
+import {LayerProvider} from '../../src/core/utils'
+import {getSpaceControls} from '../controls'
+
+const meta: Meta<typeof MenuLabel> = {
+  args: {
+    text: 'Menu label',
+  },
+  argTypes: {
+    padding: getSpaceControls(),
+    paddingX: getSpaceControls(),
+    paddingY: getSpaceControls(),
+    paddingBottom: getSpaceControls(),
+    paddingLeft: getSpaceControls(),
+    paddingRight: getSpaceControls(),
+    paddingTop: getSpaceControls(),
+  },
+  component: MenuLabel,
+  decorators: [
+    (Story): React.JSX.Element => (
+      <Container width={0}>
+        <Card radius={3} shadow={2}>
+          <LayerProvider>
+            <Menu>
+              <Story />
+            </Menu>
+          </LayerProvider>
+        </Card>
+      </Container>
+    ),
+  ],
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof MenuLabel>
+
+export const Default: Story = {
+  render: (props) => {
+    return <MenuLabel {...props} />
+  },
+}
+
+export const WithMultipleItems: Story = {
+  render: (props) => {
+    return (
+      <>
+        <MenuItem text="Item 1" />
+        <MenuItem text="Item 2" />
+        <MenuLabel {...props} />
+        <MenuItem text="Item 3" />
+        <MenuItem text="Item 4" />
+        <MenuDivider />
+        <MenuItem text="Item 5" />
+        <MenuItem text="Item 6" />
+      </>
+    )
+  },
+}
+
+export const WithNestedMenu: Story = {
+  render: (props) => {
+    return (
+      <>
+        <MenuItem text="Item 1" />
+        <MenuItem text="Item 2" />
+        <MenuLabel {...props} />
+        <MenuGroup text="Nested menu">
+          <MenuItem text="Item 3" />
+          <MenuItem text="Item 4" />
+        </MenuGroup>
+      </>
+    )
+  },
+}
+
+export const WithMenuButton: Story = {
+  decorators: [
+    (Story: StoryFn): React.JSX.Element => (
+      <Container width={0}>
+        <Card radius={3} shadow={2}>
+          <LayerProvider>
+            {/* @ts-expect-error fix later */}
+            <Story />
+          </LayerProvider>
+        </Card>
+      </Container>
+    ),
+  ],
+  render: (props) => {
+    return (
+      <>
+        <MenuButton
+          id="menu"
+          menu={
+            <Menu>
+              <MenuLabel text="Label 1" {...props} />
+              <MenuItem text="Item 1" />
+              <MenuItem text="Item 2" />
+              <MenuLabel text="Item 3" {...props} />
+              <MenuItem text="Item 4" />
+            </Menu>
+          }
+          button={<Button text="Open menu" />}
+        />
+      </>
+    )
+  },
+}