[Toolbar] Add Toolbar components

[mj12albert]

Docs:

https://deploy-preview-1349--base-ui.netlify.app/react/components/toolbar

Demos:

• https://deploy-preview-1349--base-ui.netlify.app/experiments/toolbar/basic
• https://deploy-preview-1349--base-ui.netlify.app/experiments/toolbar/text-editor
• https://deploy-preview-1349--base-ui.netlify.app/experiments/toolbar/triggers

Summary

• parts: Root, Button, Input, Link, Group, Separator
• focusableWhenDisabled prop on Button & Input
• orientation prop
• roving focus, loop prop
• hotkey prop on Root [toolbar] Support an optional hotkey #1454
• grid layout with cols prop

Component integrations

The three demos linked above show all of these:

• Dialog/AlertDialog
• Menu
• Menu with submenu
• Popover
• Select
• Toggle/ToggleGroup
• Tooltip
• NumberField using Toolbar.Input
• DirectionProvider
• Input this will be a Toolbar.Input instead
• Switch

Closes #661

• I have followed (at least) the PR section of the contributing guide.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	7ce819e
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/67d9335865c5a4000825fa8e
😎 Deploy Preview	https://deploy-preview-1349--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mj12albert]

This is to work around using Select.Trigger as a composite item by letting CompositeItem's tabIndex override the internal one in useButton

Like Menu.Trigger, select trigger manually sets tabIndex to keep a consistent "trigger remains focused after a select/menu item is select" behavior across browsers (Safari on iPadOS and iOS): https://github.com/mui/base-ui/blob/master/packages/react/src/select/trigger/useSelectTrigger.ts#L80

[michaldudak]

I wonder if this could cause problems with buttons nested inside other components within a toolbar (for example, a button inside a dialog opened from a toolbar would have this set to true, even though it's not a composite item).

[mj12albert]

for example, a button inside a dialog opened from a toolbar

Only if that button happened to use useButton as well, so in this case, a disabled Dialog.Close isn't affected, but a MenuTrigger in that dialog would be

What this affects is that when disabled, the HTML disabled attribute is never applied. Generally I think our components that use useButton already don't rely on the disabled attr to disable functionality anyway in order to support component/element replacement so it should be OK in most cases

[mj12albert]

@michaldudak I also tried making it a isCompositeItem param instead of a check but it wasn't enough to handle this more common case: 575dc96

[aarongarciah]

I found a strange behavior: the menu won't close when a submenu is open and you move the roving focus to the next toolbar element by pressing ➡️. Only the submenu is closed. See attached video.

Kapture.2025-02-07.at.07.45.58.mp4

[mj12albert]

I've made the demo smaller and removed the icons/input @colmtuite

[colmtuite]

@mj12albert

Content

• Change "Auto" and "Text" toggles to "Align Left" and "Align Right".
• Remove the "Using with Toggles" example, that's covered in the hero example.
• Change "Using with popups" to "Using with Menu", and remove the Select example.
• Add a Select menu into the hero demo. Just 2 options: "Arial" and "Helvetica".

Styling

• Computed font-size on all text in the hero example should be 14px.
• Add font-family: inherit to controls/buttons, so it inherits the font stack.
• Add font-weight: 500 to controls/buttons.
• Change parent from inline-flex to flex. Add align-items: center to it.
• Remove align-self: stretch from separators. Give separators height: 16px. Set their margin to 0 .25rem.
• Remove cursor: pointer from controls/buttons.

[mj12albert]

@colmtuite Updated the demo and docs: https://deploy-preview-1349--base-ui.netlify.app/react/components/toolbar

If this is ok I'll add the tailwind version as well