base-ui icon indicating copy to clipboard operation
base-ui copied to clipboard

[menu] Allow `Menu.RadioGroup` to be labelled by a `Menu.GroupLabel`

Open benface opened this issue 8 months ago • 1 comments

Feature request

Summary

The Group Labels example is great, but it can be even better IMO: Menu.RadioGroup is nested inside a Menu.Group whose sole purpose seems to be providing a label. I might be missing something, but since both Menu.Group and Menu.RadioGroup render a role="group" div, couldn't we combine them in this example so that a single group is used both for the label, and as the radio items container/provider? It would look like this:

<Menu.RadioGroup value={value} onValueChange={setValue}>
  <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-sm leading-4 text-gray-600 select-none">
    Sort
  </Menu.GroupLabel>
  <Menu.RadioItem
    value="date"
    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
  >
    <Menu.RadioItemIndicator className="col-start-1">
      <CheckIcon className="size-3" />
    </Menu.RadioItemIndicator>
    <span className="col-start-2">Date</span>
  </Menu.RadioItem>
  {/* other radio items... */}
</Menu.RadioGroup>

Unfortunately, that currently crashes because Menu.GroupLabel expects a Menu.Group parent:

Base UI: Missing MenuGroupRootContext provider

Thanks for your consideration!

Motivation

benface avatar Apr 16 '25 01:04 benface

Makes sense!

In mean time, this seems to work as a workaround: https://codesandbox.io/p/sandbox/dank-cookies-44t3z7

<Menu.Group render={<Menu.RadioGroup />} value={value} onValueChange={setValue} />
  <Menu.GroupLabel>
    Sort
  </Menu.GroupLabel>
  {/* Menu.RadioItems */}
</Menu.Group>

mj12albert avatar Apr 16 '25 09:04 mj12albert