feat: add toolbar component (microsoft#4535)

* update tabbable

* add key constants

* add toolbar component to fast-foundation

* add toolbar component to fast-components

* set fast-combobox to delegate focus

* add toolbar component definition

* allow other keypresses to pass through radio components

* allow foundation toolbar to handle foundation radio group interactions

Co-authored-by: Chris Holt <chhol@microsoft.com>

change/@microsoft-fast-components-8e1ee184-ecaf-4ab2-b356-b8c1a63d7c76.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add toolbar component",
+  "packageName": "@microsoft/fast-components",
+  "email": "john.kreitlow@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@microsoft-fast-foundation-5320083e-f688-42d5-90d5-2ce89e139936.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add toolbar component",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "john.kreitlow@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@microsoft-fast-web-utilities-dcd289ed-20f4-4ef6-add6-8873c64c3a65.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add key string constants",
+  "packageName": "@microsoft/fast-web-utilities",
+  "email": "john.kreitlow@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/utilities/fast-web-utilities/src/key-codes.ts

@@ -143,3 +143,26 @@ export const keyCodeTilde: number = 192;
 export const keyCodeWindowsLeft: number = 91;
 export const keyCodeWindowsOpera: number = 219; // Opera
 export const keyCodeWindowsRight: number = 92;
+
+/**
+ * String values for use with KeyboardEvent.key
+ */
+export const keyArrowDown: "ArrowDown" = "ArrowDown";
+export const keyArrowLeft: "ArrowLeft" = "ArrowLeft";
+export const keyArrowRight: "ArrowRight" = "ArrowRight";
+export const keyArrowUp: "ArrowUp" = "ArrowUp";
+export const keyEnter: "Enter" = "Enter";
+export const keyEscape: "Escape" = "Escape";
+export const keyHome: "Home" = "Home";
+export const keyEnd: "End" = "End";
+export const keySpace: " " = " ";
+export const keyTab: "Tab" = "Tab";
+
+export const ArrowKeys = {
+    ArrowDown: keyArrowDown,
+    ArrowLeft: keyArrowLeft,
+    ArrowRight: keyArrowRight,
+    ArrowUp: keyArrowUp,
+} as const;
+
+export type ArrowKeys = typeof ArrowKeys[keyof typeof ArrowKeys];

packages/web-components/fast-components/docs/api-report.md

@@ -24,6 +24,7 @@ import { Dialog } from '@microsoft/fast-foundation';
 import { Direction } from '@microsoft/fast-web-utilities';
 import { Disclosure } from '@microsoft/fast-foundation';
 import { Divider } from '@microsoft/fast-foundation';
+import { ElementStyles } from '@microsoft/fast-element';
 import { Flipper } from '@microsoft/fast-foundation';
 import { HorizontalScroll } from '@microsoft/fast-foundation';
 import { Listbox } from '@microsoft/fast-foundation';
@@ -43,6 +44,7 @@ import { TabPanel } from '@microsoft/fast-foundation';
 import { Tabs } from '@microsoft/fast-foundation';
 import { TextArea } from '@microsoft/fast-foundation';
 import { TextField } from '@microsoft/fast-foundation';
+import { Toolbar } from '@microsoft/fast-foundation';
 import { Tooltip } from '@microsoft/fast-foundation';
 import { TreeItem } from '@microsoft/fast-foundation';
 import { TreeView } from '@microsoft/fast-foundation';
@@ -662,6 +664,10 @@ export class FASTTextField extends TextField {
     connectedCallback(): void;
 }
 
+// @public
+export class FASTToolbar extends Toolbar {
+}
+
 // @public
 export class FASTTooltip extends Tooltip {
 }
@@ -1167,6 +1173,9 @@ export type TextFieldAppearance = "filled" | "outline";
 // @public
 export const TextFieldStyles: import("@microsoft/fast-element").ElementStyles;
 
+// @public
+export const ToolbarStyles: ElementStyles;
+
 // @public
 export const TreeItemStyles: import("@microsoft/fast-element").ElementStyles;
 

packages/web-components/fast-components/src/combobox/index.ts

@@ -15,6 +15,9 @@ import { ComboboxStyles as styles } from "./combobox.styles";
     name: "fast-combobox",
     template,
     styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
 })
 export class FASTCombobox extends Combobox {}
 

packages/web-components/fast-components/src/component-definitions.js

@@ -74,6 +74,8 @@ import fastTextAreaDefinition from "./text-area/text-area.vscode.definition.json
 export { fastTextAreaDefinition };
 import fastTextFieldDefinition from "./text-field/text-field.vscode.definition.json";
 export { fastTextFieldDefinition };
+import fastToolbarDefinition from "./toolbar/toolbar.vscode.definition.json";
+export { fastToolbarDefinition };
 import fastTooltipDefinition from "./tooltip/tooltip.vscode.definition.json";
 export { fastTooltipDefinition };
 import fastTreeItemDefinition from "./tree-item/tree-item.vscode.definition.json";

packages/web-components/fast-components/src/index.ts

@@ -36,6 +36,7 @@ export * from "./switch/index";
 export * from "./tabs/index";
 export * from "./text-area/index";
 export * from "./text-field/index";
+export * from "./toolbar/index";
 export * from "./tooltip/index";
 export * from "./tree-view/index";
 export * from "./tree-item/index";

packages/web-components/fast-components/src/toolbar/README.md

@@ -0,0 +1,5 @@
+# fast-toolbar
+
+An implementation of a [toolbar](https://w3c.github.io/aria-practices/#toolbar) as a web-component.
+
+For more information view the [component specification](../../../fast-foundation/src/toolbar/toolbar.spec.md).

packages/web-components/fast-components/src/toolbar/fixtures/base.html

@@ -0,0 +1,163 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+    <defs>
+        <symbol id="icon" viewBox="0 0 16 16">
+            <path
+                d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z"
+            />
+        </symbol>
+    </defs>
+</svg>
+
+<h1>Toolbar</h1>
+
+<h2>Default</h2>
+<fast-toolbar>
+    <button>Button</button>
+    <select>
+        <option>Option 1</option>
+        <option>Second option</option>
+        <option>Option 3</option>
+    </select>
+    <label for="check-1">
+        <input type="checkbox" name="checkbox" id="check-1" />
+        Checkbox 1
+    </label>
+    <label for="check-2">
+        <input type="checkbox" name="checkbox" id="check-2" />
+        Checkbox 2
+    </label>
+    <label for="check-3">
+        <input type="checkbox" name="checkbox" id="check-3" />
+        Checkbox 3
+    </label>
+    <input type="text" name="text" id="text-input" />
+</fast-toolbar>
+
+<h2>Toolbar with slotted label</h2>
+<fast-toolbar id="toolbar-slotted-label">
+    <label slot="label">Slotted label</label>
+    <button>One</button>
+    <button>Two</button>
+    <button>Three</button>
+</fast-toolbar>
+
+<h2>Toolbar with external label</h2>
+<label id="toolbar-label" for="toolbar-external-label">External label</label>
+<fast-toolbar id="toolbar-external-label" aria-labelledby="toolbar-label">
+    <button>One</button>
+    <button>Two</button>
+    <button>Three</button>
+</fast-toolbar>
+
+<h2>Toolbar with invisible label</h2>
+<fast-toolbar id="toolbar-invisible-label" aria-label="Invisible label">
+    <button>One</button>
+    <button>Two</button>
+    <button>Three</button>
+</fast-toolbar>
+
+<h2>Vertical orientation</h2>
+<fast-toolbar id="toolbar-vertical-orientation" orientation="vertical">
+    <button>One</button>
+    <button>Two</button>
+    <button>Three</button>
+</fast-toolbar>
+
+<h2>FAST components</h2>
+<fast-toolbar id="toolbar-fast-components">
+    <fast-button>Button</fast-button>
+    <fast-radio-group>
+        <fast-radio checked>One</fast-radio>
+        <fast-radio>Two</fast-radio>
+        <fast-radio>Three</fast-radio>
+    </fast-radio-group>
+    <fast-combobox>
+        <fast-option>Please Please Me</fast-option>
+        <fast-option>With The Beatles</fast-option>
+        <fast-option>A Hard Day's Night</fast-option>
+        <fast-option>Beatles for Sale</fast-option>
+        <fast-option>Help!</fast-option>
+        <fast-option>Rubber Soul</fast-option>
+        <fast-option>Revolver</fast-option>
+        <fast-option>Sgt. Pepper's Lonely Hearts Club Band</fast-option>
+        <fast-option>Magical Mystery Tour</fast-option>
+        <fast-option>The Beatles</fast-option>
+        <fast-option>Yellow Submarine</fast-option>
+        <fast-option>Abbey Road</fast-option>
+        <fast-option>Let It Be</fast-option>
+    </fast-combobox>
+    <fast-button>Button</fast-button>
+    <fast-select>
+        <fast-option>Option 1</fast-option>
+        <fast-option>Second option</fast-option>
+        <fast-option>Option 3</fast-option>
+    </fast-select>
+    <fast-checkbox>Checkbox</fast-checkbox>
+</fast-toolbar>
+
+<h2>Disabled Elements</h2>
+<fast-toolbar id="toolbar-first-disabled" orientation="vertical">
+    <fast-checkbox disabled>One</fast-checkbox>
+    <fast-checkbox>Two</fast-checkbox>
+    <fast-checkbox>Three</fast-checkbox>
+</fast-toolbar>
+
+<fast-toolbar id="toolbar-second-disabled" orientation="vertical">
+    <fast-checkbox>One</fast-checkbox>
+    <fast-checkbox disabled>Two</fast-checkbox>
+    <fast-checkbox>Three</fast-checkbox>
+</fast-toolbar>
+
+<fast-toolbar id="toolbar-last-disabled" orientation="vertical">
+    <fast-checkbox>One</fast-checkbox>
+    <fast-checkbox>Two</fast-checkbox>
+    <fast-checkbox disabled>Three</fast-checkbox>
+</fast-toolbar>
+
+<fast-toolbar id="toolbar-last-two-disabled" orientation="vertical">
+    <fast-checkbox>One</fast-checkbox>
+    <fast-checkbox disabled>Two</fast-checkbox>
+    <fast-checkbox disabled>Three</fast-checkbox>
+</fast-toolbar>
+
+<fast-toolbar id="toolbar-first-last-disabled" orientation="vertical">
+    <fast-checkbox disabled>One</fast-checkbox>
+    <fast-checkbox>Two</fast-checkbox>
+    <fast-checkbox disabled>Three</fast-checkbox>
+</fast-toolbar>
+
+<fast-toolbar id="toolbar-first-two-disabled" orientation="vertical">
+    <fast-checkbox disabled>One</fast-checkbox>
+    <fast-checkbox disabled>Two</fast-checkbox>
+    <fast-checkbox>Three</fast-checkbox>
+</fast-toolbar>
+
+<fast-toolbar id="toolbar-disabled-all" orientation="vertical">
+    <fast-checkbox disabled>One</fast-checkbox>
+    <fast-checkbox disabled>Two</fast-checkbox>
+    <fast-checkbox disabled>Three</fast-checkbox>
+</fast-toolbar>
+
+<h2>RTL Mode</h2>
+<fast-toolbar id="toolbar-rtl" dir="rtl">
+    <fast-checkbox>One</fast-checkbox>
+    <fast-checkbox>Two</fast-checkbox>
+    <fast-checkbox>Three</fast-checkbox>
+</fast-toolbar>
+
+<fast-toolbar id="toolbar-rtl-vertical" dir="rtl" orientation="vertical">
+    <fast-checkbox>One</fast-checkbox>
+    <fast-checkbox>Two</fast-checkbox>
+    <fast-checkbox>Three</fast-checkbox>
+</fast-toolbar>
+
+<h2>Start/End Slots</h2>
+<fast-toolbar id="toolbar-start-end-slots">
+    <svg slot="start"><use href="#icon" /></svg>
+    <svg slot="end"><use href="#icon" /></svg>
+</fast-toolbar>
+
+<fast-toolbar id="toolbar-start-end-slots-vertical" orientation="vertical">
+    <svg slot="start"><use href="#icon" /></svg>
+    <svg slot="end"><use href="#icon" /></svg>
+</fast-toolbar>

packages/web-components/fast-components/src/toolbar/index.ts

@@ -0,0 +1,28 @@
+import { customElement } from "@microsoft/fast-element";
+import { Toolbar, ToolbarTemplate } from "@microsoft/fast-foundation";
+import { ToolbarStyles } from "./toolbar.styles";
+
+/**
+ * The FAST toolbar Custom Element. Implements {@link @microsoft/fast-foundation#Toolbar},
+ * {@link @microsoft/fast-foundation#ToolbarTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fast-toolbar>`
+ *
+ */
+@customElement({
+    name: "fast-toolbar",
+    template: ToolbarTemplate,
+    styles: ToolbarStyles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+})
+export class FASTToolbar extends Toolbar {}
+
+/**
+ * Styles for Toolbar.
+ * @public
+ */
+export { ToolbarStyles };

packages/web-components/fast-components/src/toolbar/scenarios/index.html

@@ -0,0 +1,8 @@
+<template title="Default">
+    <fast-toolbar>
+        <label slot="label">Toolbar</label>
+        <fast-checkbox>Checkbox</fast-checkbox>
+        <fast-checkbox>Checkbox</fast-checkbox>
+        <fast-checkbox>Checkbox</fast-checkbox>
+    </fast-toolbar>
+</template>

packages/web-components/fast-components/src/toolbar/toolbar.open-ui.definition.json

@@ -0,0 +1,4 @@
+{
+  "name": "Toolbar",
+  "url": "https://fast.design/docs/components/toolbar"
+}

packages/web-components/fast-components/src/toolbar/toolbar.stories.ts

@@ -0,0 +1,10 @@
+import "./index";
+import "../button";
+import "../select";
+import ToolbarTemplate from "./fixtures/base.html";
+
+export default {
+    title: "Toolbar",
+};
+
+export const Toolbar = () => ToolbarTemplate;