Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Toolbar] Add Toolbar components #1349

Draft
wants to merge 10 commits into
base: master
Choose a base branch
from

Conversation

mj12albert
Copy link
Member

@mj12albert mj12albert commented Jan 21, 2025

Demo: https://deploy-preview-1349--base-ui.netlify.app/experiments/toolbar

TODO

  • Components: Root, Button, Link, Group, Separator
  • focusableWhenDisabled prop on Button
  • expose the loop prop on Root
  • hotkey prop on Root
  • grid layout with cols prop
  • orientation prop

Component integrations

  • Dialog
  • Menu
  • Menu with submenu
  • Popover
  • Select
  • Toggle/ToggleGroup
  • Tooltip
  • NumberField
  • DirectionProvider
  • Input ?
  • Switch ?

Closes #661

@mj12albert mj12albert added the component: toolbar The React component. label Jan 21, 2025
Copy link

netlify bot commented Jan 21, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 9408b1d
🔍 Latest deploy log https://app.netlify.com/sites/base-ui/deploys/67a0a1cbc12f2900081cbfbc
😎 Deploy Preview https://deploy-preview-1349--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

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 mj12albert force-pushed the feat/toolbar branch 2 times, most recently from f2b6d91 to 9c3111f Compare January 27, 2025 08:45
@mj12albert mj12albert changed the title feat/toolbar [Toolbar] Add Toolbar components Jan 28, 2025
@@ -22,6 +23,8 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
rootElementName: elementNameProp,
});

const isCompositeItem = useCompositeRootContext(true) !== undefined;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: toolbar The React component.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Toolbar] Implement Toolbar
1 participant