packages/react-components/react-toolbar/library/docs/Spec.md
Toolbar is a surface that houses commands that operate on the content of the window, panel, or parent region it resides above. Toolbar is one of the most visible and recognizable way to surface commands, and can be an intuitive method for interacting with content on the page; however, if overloaded or poorly organized, they can be difficult to use and hide valuable commands from your user. Toolbar can also display a search box for finding content, hold simple commands as well as menus, or display the status of ongoing actions.
As a part of the spec definitions in Fluent UI, a research effort has been made through Open UI. The current research proposal is available as an open source contribution undergoing review (research proposal)
@fluentui/react and @fluentui/react-northstar@fluentui/react (docsite)@fluentui/react-northstar (docsite)The main difference between @fluentui/react's CommandBar and @fluentui/react-northstar's Toolbar is the right group of commands present in CommandBar.
v0 Toolbar has support to children API with static components in Toolbar as Toolbar.Button etc...
The only layout variation is size differences, there are 2 sizes medium which is the default and small.
The Toolbar will implement a children based API and will leverage the use of context in the interaction and data flows of child components. To achieve overflow items once used inside CommandBar the component will leavarage from priority-overflow
The root level component serves as a simple container for all possible ToolbarComponents
type ToolbarProps = {
/**
* Defines toolbar size
* @default medium
*/
size?: 'small' | 'medium';
};
It serves as an override on top of Button limiting the possible props only to size, appearance, disabled and disabledFocusable
type type ToolbarButtonProps = ComponentProps<ButtonSlots> &
Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {
/**
* A button can have its content and borders styled for greater emphasis or to be subtle.
* - 'primary': Emphasizes the button as a primary action.
* - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
*/
appearance?: 'primary' | 'subtle';
;
It's based on the Divider containing few styles overrides
type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>>;
It serves as an override on top of ToggleButton limiting the possible props only to size, appearance, disabled and disabledFocusable
type ToolbarToggleButtonProps = ComponentProps<Partial<ToggleButtonSlots>>;
It's based on the Checkbox containing few styles overrides
type ToolbarCheckboxProps = ComponentProps<Partial<CheckboxSlots>>;
It serves as general container for ToolbarCheckbox or ToolbarRadio hosting events for controls, when regarding ToolbarCheckbox the usage of ToolbarItemGroup is optional but if used should contain only checkboxes that has the same name attribute and share the onChange callback.
type ToolbarItemGroupProps = {
onChange?: (itemName: string, value: boolean) => void;
value?: boolean;
disabled?: boolean;
};
<Toolbar>
<ToolbarButton />
<ToolbarDivider />
<ToolbarButton />
<ToolbarButton />
<ToolbarCheckbox />
<ToolbarItemGroup>
<ToolbarRadio value="A" label="Option A" />
<ToolbarRadio value="B" label="Option B" />
<ToolbarRadio value="C" label="Option C" />
<ToolbarRadio value="D" label="Option D" />
</ToolbarItemGroup>
<ToolbarItemGroup>
<ToolbarCheckbox name="typo" />
<ToolbarCheckbox name="typo" />
</ToolbarItemGroup>
</Toolbar>
<div role="toolbar">
<button />
<div />
<button />
<button />
</div>
The Toolbar will support the prescribed ARIA keyboard interaction.