Skip to content

[toolbar] Implement Toolbar #661

@colmtuite

Description

@colmtuite

Toolbar pattern: https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/

API

<Toolbar.Root>
  <Toolbar.Group>
    <Toolbar.Button />
    {/* Focusability of disabled controls is handled via a focusableWhenDisabled prop (default true) */}
    <Toolbar.Button focusableWhenDisabled={false} />
  </Toolbar.Group>
  <Toolbar.Separator />
  <Toolbar.Link />
  <Toolbar.Separator />
  <ToggleGroup>
    <Toolbar.Button render={<Toggle />} />
    <Toolbar.Button render={<Toggle />} />
  </ToggleGroup>
  <Toolbar.Separator />
  <Menu.Root>
    <Toolbar.Button render={<Menu.Trigger />} />
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup></Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
  <Toolbar.Separator />
  <NumberField.Root>
    <NumberField.Group>
      <NumberField.Decrement />
      <Toolbar.Input render={<NumberField.Input />} />
      <NumberField.Increment />
    </NumberField.Group>
  </NumberField.Root>
  <Toolbar.Separator /> 
  <Select.Root>
    <Toolbar.Button render={<Select.Trigger />} />
    <Select.Portal>
      <Select.Positioner>
        <Select.Popup></Select.Popup>
      </Select.Positioner>
    </Select.Portal>
  </Select.Root>
  <Toolbar.Separator />
  <Dialog.Root>
    <Toolbar.Button render={<Dialog.Trigger />} />
    <Dialog.Portal>
      <Dialog.Positioner>
        <Dialog.Popup></Dialog.Popup>
      </Dialog.Positioner>
    </Dialog.Portal>
  </Dialog.Root>
  <Toolbar.Separator />
  <Toolbar.Button render={<Switch.Root/>}/>
    <Switch.Thumb />
  </Toolbar.Button>
</Toolbar.Root>

Dependencies

Metadata

Metadata

Assignees

Labels

component: toolbarChanges related to the toolbar component.type: new featureExpand the scope of the product to solve a new problem.

Projects

Status

Recently completed

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions