Adds Fluent Toolbar Web Component

[halerankin]

Fluent Toolbar Web Component

What Toolbar Does

This is a bucket for buttons, icon buttons, dropdown buttons, split buttons, input, search field, divider.

• orientation: vertical or horizontal (default)
• size: small, medium (default), large. This does not apply when vertical.

What Toolbar Does Not

Items present in the Fluent UI Figma (MVP) but not implemented. These will be added in the next Sprint:

• Responsive toolbar which implements a More menu and ellipses
• Multiple toolbar groups server as tab stops within the toolbar

Storybook Screenshot

[size-auditor[bot]]

Asset size changes

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

Baseline commit: 07f3fe5fc625defc06f6ec5376a4ec96c2816e01 (build)

[codesandbox-ci[bot]]

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 5977cc5f5d820c10595c1d63fa8a38679af1ddb3:

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

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 07f3fe5fc625defc06f6ec5376a4ec96c2816e01}

[fabricteam]

🕵 FluentUI-web-components No visual regressions between this PR and main

[levithomason]

I just received a notice that the direction attribute on the Toolbar should handle RTL. I have not yet tested this. We will have a separate discussion about the use of direction vs the platform dir attribute in web components.

[halerankin]

I just received a notice that the direction attribute on the Toolbar should handle RTL. I have not yet tested this. We will have a separate discussion about the use of direction vs the platform dir attribute in web components.

@levithomason I provided a Storybook example of both LTR and RTL.