Creates spec for fluent toolbar web component.

[halerankin]

Create Spec for Toolbar Component

Toolbar

Component Description

A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.

When a set of controls is visually presented as a group, the toolbar role can be used to communicate the presence and purpose of the grouping to screen reader users. Grouping controls into toolbars can also be an effective way of reducing the number of tab stops in the keyboard interface.

Design Spec

Link to Design Spec in Figma

Link to Fluent 2 Storybook

Engineering Spec

Inputs

• @attr orientation: "horizontal" "vertical" | "horizontal"
• @attr size: "small" "medium" "large" | "medium"

Outputs

Slots

• label: Content which appears as the label for the toolbar.
• start: Content which appears at the start of the toolbar, before the default slotted items.
• default: Content which appears in the default location of the toolbar, left-aligned.
• end: Content which appears at the end of the toolbar, right aligned.

CSS Variables

None

Interactions

Interactions are inherited from FAST Toolbar component.

Name	Description
clickHandler	Sets the active index
focusinHandler	Sets focus on element with active index
keydownHandler	Handles keydown events on the toolbar

Accessibility

• Find the matching component through WCAG's patterns: https://www.w3.org/WAI/ARIA/apg/patterns/
  • https://www.w3.org/WAI/ARIA/apg/patterns/toolbar.html
• Are there any accessibility elements unique to this component?
• List ARIA attributes
  • role="toolbar" in FAST
  • aria-orientation="vertical" in FAST
• Does the component support 400% zoom?
• What keyboard behaviors does the component support?
  • Tab : Moves focus to the next focusable element in the toolbar.
  • Shift + Tab : Moves focus to the previous focusable element in the toolbar.
  • Arrow keys : Moves focus to the next/previous focusable element in the toolbar.

Preparation

• Find the base FAST Component

  • This component will inherit from FAST Toolbar

• Check the Fluent UI React V9 Component Spec for differences and document:

  • Differences between FAST Toolbar component and Fluent Toolbar component spec:

    • React Toolbar component contains custom components: ToolbarButton, ToolbarDivider, ToolbarGroup, ToolbarRadioButton, ToolbarRadioGroup, ToolbarToggleButton; whereas FASTToolbar does not.
    • React Toolbar component has a size attribute that can be set to "small", "medium", or "large". FASTToolbar does not have this attribute.
    • React Toolbar component has a component: ToolbarItemGroup. This looks like it is made to contain radio buttons and checkbox elements. FASTToolbar does not have this component.

• Fluent UI React V9 Storybook for implementation differences and document:

  • Fluent React Toolbar has Overflow Items and corresponding More (ellipses) button. This aligns with the Fluent Toolbar spec. The FASTToolbar component however does not implement this. We could either work to include this feature or leave it up to the developer to implement.

    • If we exclude this feature, the burden goes to developers to implement. This gives the developer more flexibility.
    • If we include this feature, we are committing to an increased degree of complexity to account for layout and content scenarios outside our control. Therefore, this has potential to become brittle.

• Open GitHub issues related to component

  • Toolbar overflow menu is misaligned/shifting rest of a page when clicked
  • Toolbar with menu: trigger button always opens menu instead of toggling it
  • RFC: move components to functional components
  • Popup clinging to left border of background for trigger components close to border
  • Popped out example is broken
  • PropTypes errors when ToolbarItem children is used
  • ShorthandCollection does not contain proper definition
  • Focusable components should expose a public focus method

• Component Spec authored

  • And reviewed

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against cad93648a2ce28e99935d4ab36089d770fa06a53}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 913efdb:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: cad93648a2ce28e99935d4ab36089d770fa06a53 (build)

[ling1726]

This feature is already in the Fluent monorepo and is a vanilla JS package, there is no dependency on React at all, just simple DOM https://github.com/microsoft/fluentui/tree/master/packages/react-components/priority-overflow

That overflow feature already implements all the requirements for all Office and Teams

You can demo the feature set using the react docs, https://react.fluentui.dev/?path=/docs/components-overflow--default

Those examples are powered by the same vanilla js code, with react bindings on top https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-overflow

From the feedback we have gotten from product, they see overflow as an integral feature of the toolbar component (and others) due to the fact that it is actually non-trivial to implement. We should cover this delta in the web component library, or users will see a noticeable difficulty if they ever want to move from React to web components

[halerankin]

@ling1726 Thanks for the added context! I agree. I think this should be added as part of the component.

[halerankin]

After talking about this topic with my team, I think it should be added but in a separate task. This is non-trivial and I want to do it right.

[halerankin]

@chrisdholt Is this comprehensive enough to get started on the component?