@workday/canvas-kit-docs 17.0.0-alpha.0619-next.0 → 17.0.0-alpha.0623-next.0

package/dist/es6/lib/specs.js

@@ -7077,6 +7077,68 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Toolbar",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Toolbar",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the Text Formatting toolbar is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              },
+              {
+                "type": "describe",
+                "name": "when focus is on the Text Style select",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should move focus through the toolbar with the arrow keys"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the down arrow key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the text style options"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when the Bold button is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should toggle the button on"
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when the Link button is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the link dialog with its text fields"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Tooltip",

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "16.1.4",
-    "@workday/canvas-kit-preview-react": "16.1.4",
-    "@workday/canvas-kit-react": "16.1.4",
-    "@workday/canvas-kit-react-fonts": "^16.1.4",
-    "@workday/canvas-kit-styling": "16.1.4",
+    "@workday/canvas-kit-labs-react": "16.1.5",
+    "@workday/canvas-kit-preview-react": "16.1.5",
+    "@workday/canvas-kit-react": "16.1.5",
+    "@workday/canvas-kit-react-fonts": "^16.1.5",
+    "@workday/canvas-kit-styling": "16.1.5",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -19,11 +19,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "16.1.4",
-    "@workday/canvas-kit-preview-react": "16.1.4",
-    "@workday/canvas-kit-react": "16.1.4",
-    "@workday/canvas-kit-react-fonts": "^16.1.4",
-    "@workday/canvas-kit-styling": "16.1.4",
+    "@workday/canvas-kit-labs-react": "16.1.5",
+    "@workday/canvas-kit-preview-react": "16.1.5",
+    "@workday/canvas-kit-react": "16.1.5",
+    "@workday/canvas-kit-react-fonts": "^16.1.5",
+    "@workday/canvas-kit-styling": "16.1.5",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/mdx/react/button/Toolbar.mdx

@@ -0,0 +1,54 @@
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
+import TextFormattingToolbar from './examples/TextFormattingToolbar';
+
+
+# Canvas Kit Toolbar
+
+Canvas Kit does not ship a Toolbar component. Build one by composing
+[`ToolbarIconButton`](?path=/docs/components-buttons--docs),
+[Select](?path=/docs/components-inputs-select--docs),
+[Tooltip](?path=/docs/components-popups-tooltip--docs), and
+[Dialog](?path=/docs/components-popups-dialog--docs) inside a group that uses the
+[collection system](?path=/docs/features-collections--docs) for keyboard navigation.
+
+The example below follows the
+[W3C Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/): one tab stop for the
+group, and arrow keys to move between controls.
+
+## Basic Example
+
+The Text Formatting toolbar is a horizontal group of five controls:
+
+1. **Text Style** — a `Select` with Normal Text, Heading 1, Heading 2, and Heading 3. Normal Text
+   starts selected.
+2. **Bold, Italic, and Underline** — `ToolbarIconButton` toggles. `toggled` sets `aria-pressed`. The
+   example adds a brand border while a toggle is on, on top of the button's pressed background.
+3. **Insert Link** — a `ToolbarIconButton` used as `Dialog.Target`. The dialog is non-modal and
+   contains Link Text and URL fields. Focus moves to Link Text when it opens.
+
+Each control is the single child of a `Tooltip`. The default tooltip type is `label`, so the `title`
+becomes that control's accessible name. Do not also set `aria-label` on the control.
+
+The group itself is named with `aria-label="Text Formatting"` on an element with `role="toolbar"`.
+
+Keyboard movement comes from `useListModel` with `orientation="horizontal"` and
+`navigation={navigationManager}`. `navigationManager` stops at the first and last control instead of
+wrapping. Each control registers with `useListItemRovingFocus` and `useListItemRegister`, which
+keeps a single tab stop and moves it with the arrow keys. Give every control a stable `data-id`.
+
+The Text Style `Select` has its own arrow-key behavior. Left and Right move through the toolbar only
+while its menu is closed. While the menu is open, Left and Right do nothing, and Home and End move
+within the menu.
+
+<ExampleCodeBlock code={TextFormattingToolbar} />
+
+## Component API
+
+`ToolbarIconButton` is the icon button used inside the example. The toolbar container, roving tab
+stop, and link dialog are composed in the example. They are not separate exported components.
+
+<SymbolDoc name="ToolbarIconButton" fileName="/react/" />
+
+## Specifications
+
+<Specifications file="./cypress/component/Toolbar.spec.tsx" name="Toolbar" />

package/dist/mdx/react/button/examples/TextFormattingToolbar.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+
+import {
+  PrimaryButton,
+  ToolbarIconButton,
+  ToolbarIconButtonProps,
+} from '@workday/canvas-kit-react/button';
+import {
+  navigationManager,
+  useListItemRegister,
+  useListItemRovingFocus,
+  useListModel,
+} from '@workday/canvas-kit-react/collection';
+import {
+  composeHooks,
+  createContainer,
+  createSubcomponent,
+  useUniqueId,
+} from '@workday/canvas-kit-react/common';
+import {Dialog, useDialogModel} from '@workday/canvas-kit-react/dialog';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {CSProps, createStyles, handleCsProp} from '@workday/canvas-kit-styling';
+import {boldIcon, italicsIcon, linkIcon, underlineIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const textStyles = [
+  {id: 'normal', text: 'Normal Text'},
+  {id: 'heading-1', text: 'Heading 1'},
+  {id: 'heading-2', text: 'Heading 2'},
+  {id: 'heading-3', text: 'Heading 3'},
+];
+
+const toolbarStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: system.gap.sm,
+  padding: system.padding.sm,
+});
+
+const toggledToolbarButtonStyles = createStyles({
+  "&[aria-pressed='true'], &[aria-pressed='true']:hover, &[aria-pressed='true']:active, &[aria-pressed='true']:focus-visible":
+    {
+      borderColor: system.color.brand.border.primary,
+    },
+});
+
+const useToolbarItem = composeHooks(useListItemRovingFocus, useListItemRegister);
+
+const Toolbar = createContainer('div')({
+  displayName: 'TextFormattingToolbar',
+  modelHook: useListModel,
+})<CSProps>((elemProps, Element) => {
+  return (
+    <Element
+      {...handleCsProp(elemProps, toolbarStyles)}
+      role="toolbar"
+      aria-label="Text Formatting"
+    />
+  );
+});
+
+const ToolbarButton = createSubcomponent(ToolbarIconButton)({
+  displayName: 'TextFormattingToolbar.Button',
+  modelHook: useListModel,
+  elemPropsHook: useToolbarItem,
+})<ToolbarIconButtonProps>((elemProps, Element) => {
+  return <Element {...elemProps} />;
+});
+
+const TextStyleSelect = ({toolbarModel}: {toolbarModel: ReturnType<typeof useListModel>}) => {
+  const selectModel = useSelectModel({
+    items: textStyles,
+    initialSelectedIds: ['normal'],
+  });
+  const {onKeyDown: onToolbarKeyDown, ...toolbarItemProps} = useToolbarItem(toolbarModel, {
+    'data-id': 'text-style',
+  });
+
+  return (
+    <Select model={selectModel}>
+      <Tooltip title="Text Style">
+        <Select.Input
+          {...toolbarItemProps}
+          onKeyDown={event => {
+            if (selectModel.state.visibility === 'hidden') {
+              onToolbarKeyDown(event);
+            }
+          }}
+        />
+      </Tooltip>
+      <Select.Popper>
+        <Select.Card>
+          <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>
+        </Select.Card>
+      </Select.Popper>
+    </Select>
+  );
+};
+
+export default () => {
+  const toolbarModel = useListModel({
+    orientation: 'horizontal',
+    navigation: navigationManager,
+  });
+  const linkButtonId = useUniqueId();
+  const linkTextRef = React.useRef<HTMLInputElement>(null);
+  const dialogModel = useDialogModel({initialFocusRef: linkTextRef});
+  const [formats, setFormats] = React.useState({
+    bold: false,
+    italic: false,
+    underline: false,
+  });
+
+  return (
+    <Toolbar model={toolbarModel}>
+      <TextStyleSelect toolbarModel={toolbarModel} />
+      <Tooltip title="Bold">
+        <ToolbarButton
+          cs={toggledToolbarButtonStyles}
+          data-id="bold"
+          icon={boldIcon}
+          toggled={formats.bold}
+          onClick={() => setFormats(formats => ({...formats, bold: !formats.bold}))}
+        />
+      </Tooltip>
+      <Tooltip title="Italic">
+        <ToolbarButton
+          cs={toggledToolbarButtonStyles}
+          data-id="italic"
+          icon={italicsIcon}
+          toggled={formats.italic}
+          onClick={() => setFormats(formats => ({...formats, italic: !formats.italic}))}
+        />
+      </Tooltip>
+      <Tooltip title="Underline">
+        <ToolbarButton
+          cs={toggledToolbarButtonStyles}
+          data-id="underline"
+          icon={underlineIcon}
+          toggled={formats.underline}
+          onClick={() => setFormats(formats => ({...formats, underline: !formats.underline}))}
+        />
+      </Tooltip>
+      <Dialog model={dialogModel}>
+        <Tooltip title="Insert Link">
+          <Dialog.Target as={ToolbarButton} id={linkButtonId} data-id="link" icon={linkIcon} />
+        </Tooltip>
+        <Dialog.Popper>
+          <Dialog.Card aria-labelledby={linkButtonId}>
+            <Dialog.Body>
+              <FormField>
+                <FormField.Label>Link Text</FormField.Label>
+                <FormField.Input as={TextInput} ref={linkTextRef} />
+              </FormField>
+              <FormField>
+                <FormField.Label>URL</FormField.Label>
+                <FormField.Input as={TextInput} type="url" />
+              </FormField>
+            </Dialog.Body>
+            <Dialog.ButtonGroup>
+              <Dialog.CloseButton>Cancel</Dialog.CloseButton>
+              <Dialog.CloseButton as={PrimaryButton}>Apply</Dialog.CloseButton>
+            </Dialog.ButtonGroup>
+          </Dialog.Card>
+        </Dialog.Popper>
+      </Dialog>
+    </Toolbar>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "17.0.0-alpha.0619-next.0",
+  "version": "17.0.0-alpha.0623-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -47,10 +47,10 @@
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-labs-react": "^17.0.0-alpha.0619-next.0",
-    "@workday/canvas-kit-preview-react": "^17.0.0-alpha.0619-next.0",
-    "@workday/canvas-kit-react": "^17.0.0-alpha.0619-next.0",
-    "@workday/canvas-kit-styling": "^17.0.0-alpha.0619-next.0",
+    "@workday/canvas-kit-labs-react": "^17.0.0-alpha.0623-next.0",
+    "@workday/canvas-kit-preview-react": "^17.0.0-alpha.0623-next.0",
+    "@workday/canvas-kit-react": "^17.0.0-alpha.0623-next.0",
+    "@workday/canvas-kit-styling": "^17.0.0-alpha.0623-next.0",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-tokens-web": "^4.4.0",
     "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "ba328694a792ddcde9af773b023266cc890f0afd"
+  "gitHead": "b46b831711d2b28326c53f1c40977910bce706e5"
 }