diff --git a/CHANGELOG.md b/CHANGELOG.md index 24ed02a8cd..3f2d8ba1fb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [v16.0.5](https://github.com/Workday/canvas-kit/releases/tag/v16.0.5) (2026-08-07) + +### Documentation + +- docs: Update readme for v16 ([#4127](https://github.com/Workday/canvas-kit/pull/4127)) ([@sheelah](https://github.com/sheelah)) + + ## [v16.0.4](https://github.com/Workday/canvas-kit/releases/tag/v16.0.4) (2026-08-05) ### Documentation diff --git a/README.md b/README.md index 8c8387d0b5..59cb1454b9 100644 --- a/README.md +++ b/README.md @@ -198,6 +198,8 @@ recommend against using it in production until the first stable version has been - [v12.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v12-0--docs) - [v13.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v13-0--docs) - [v14.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v14-0-overview--docs) + - [v15.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v15-0-overview--docs) + - [v16.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v16-0-overview--docs) - Code Style / Best Practices: - [API & Pattern Guidelines](https://workday.github.io/canvas-kit/?path=/docs/guides-api-pattern-guidelines--docs) - [Compound Components](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--docs) diff --git a/lerna.json b/lerna.json index ea77bd30a0..cc3bafa7d7 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "modules/**" ], - "version": "16.0.4", + "version": "16.0.5", "npmClient": "yarn", "command": { "version": { diff --git a/modules/codemod/package.json b/modules/codemod/package.json index c65624e492..a0f5e33347 100644 --- a/modules/codemod/package.json +++ b/modules/codemod/package.json @@ -2,7 +2,7 @@ "name": "@workday/canvas-kit-codemod", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", - "version": "16.0.4", + "version": "16.0.5", "description": "A collection of codemods for use on Workday Canvas Kit packages.", "main": "dist/es6/index.js", "sideEffects": false, diff --git a/modules/css/package.json b/modules/css/package.json index 0a6fec6900..3516649d44 100644 --- a/modules/css/package.json +++ b/modules/css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-css", - "version": "16.0.4", + "version": "16.0.5", "type": "module", "description": "The parent module that contains all Workday Canvas Kit CSS components", "author": "Workday, Inc. (https://www.workday.com)", diff --git a/modules/docs/mdx/FONTS.mdx b/modules/docs/mdx/FONTS.mdx index 171f84ec0d..c7192aaf35 100644 --- a/modules/docs/mdx/FONTS.mdx +++ b/modules/docs/mdx/FONTS.mdx @@ -105,8 +105,8 @@ is set. ## Roboto If your application doesn't have the Sana Canvas theme enabled, install -`@workday/canvas-kit-react-fonts` to load Roboto instead. This module also includes Roboto Mono, -used for `system.fontFamily.mono`. +[`@workday/canvas-kit-react-fonts`](https://github.com/Workday/canvas-kit/blob/master/modules/react-fonts/README.md) +to load Roboto instead. This module also includes Roboto Mono, used for `system.fontFamily.mono`. ### Installation diff --git a/modules/docs/package.json b/modules/docs/package.json index c88e17dc30..4fda802aaf 100644 --- a/modules/docs/package.json +++ b/modules/docs/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-docs", - "version": "16.0.4", + "version": "16.0.5", "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": "^16.0.4", - "@workday/canvas-kit-preview-react": "^16.0.4", - "@workday/canvas-kit-react": "^16.0.4", - "@workday/canvas-kit-styling": "^16.0.4", + "@workday/canvas-kit-labs-react": "^16.0.5", + "@workday/canvas-kit-preview-react": "^16.0.5", + "@workday/canvas-kit-react": "^16.0.5", + "@workday/canvas-kit-styling": "^16.0.5", "@workday/canvas-system-icons-web": "^5.0.3", "@workday/canvas-tokens-web": "^4.4.0", "markdown-to-jsx": "^7.2.0", diff --git a/modules/labs-css/package.json b/modules/labs-css/package.json index f557f2b109..7b79f1dc9d 100644 --- a/modules/labs-css/package.json +++ b/modules/labs-css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-labs-css", - "version": "16.0.4", + "version": "16.0.5", "type": "module", "description": "The parent module that contains all Workday Canvas Kit Labs CSS components", "author": "Workday, Inc. (https://www.workday.com)", diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json index fd457fd73e..060e43fb10 100644 --- a/modules/labs-react/package.json +++ b/modules/labs-react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-labs-react", - "version": "16.0.4", + "version": "16.0.5", "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -48,8 +48,8 @@ "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^16.0.4", - "@workday/canvas-kit-styling": "^16.0.4", + "@workday/canvas-kit-react": "^16.0.5", + "@workday/canvas-kit-styling": "^16.0.5", "@workday/canvas-system-icons-web": "^5.0.3", "@workday/canvas-tokens-web": "^4.4.0", "@workday/design-assets-types": "^0.3.0", diff --git a/modules/mcp/package.json b/modules/mcp/package.json index 139065c232..e68eb3b663 100644 --- a/modules/mcp/package.json +++ b/modules/mcp/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-mcp", - "version": "16.0.4", + "version": "16.0.5", "description": "MCP package for Canvas Kit", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/popup-stack/package.json b/modules/popup-stack/package.json index 1163676bf2..fa34861b75 100644 --- a/modules/popup-stack/package.json +++ b/modules/popup-stack/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-popup-stack", - "version": "16.0.4", + "version": "16.0.5", "description": "Stack for managing popup UIs to coordinate global concerns like escape key handling and rendering order", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/preview-css/package.json b/modules/preview-css/package.json index 84309a82e3..72f3b5ab49 100644 --- a/modules/preview-css/package.json +++ b/modules/preview-css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-preview-css", - "version": "16.0.4", + "version": "16.0.5", "description": "The parent module that contains all Workday Canvas Kit Preview CSS components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json index c4cd6d6c7b..4712797470 100644 --- a/modules/preview-react/package.json +++ b/modules/preview-react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-preview-react", - "version": "16.0.4", + "version": "16.0.5", "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -48,8 +48,8 @@ "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^16.0.4", - "@workday/canvas-kit-styling": "^16.0.4", + "@workday/canvas-kit-react": "^16.0.5", + "@workday/canvas-kit-styling": "^16.0.5", "@workday/canvas-system-icons-web": "^5.0.3", "@workday/canvas-tokens-web": "^4.4.0", "@workday/design-assets-types": "^0.3.0" diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json index 399bc44ba6..6801f05432 100644 --- a/modules/react-fonts/package.json +++ b/modules/react-fonts/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-react-fonts", - "version": "16.0.4", + "version": "16.0.5", "description": "Fonts for canvas-kit-react", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/react/dialog/stories/Dialog.mdx b/modules/react/dialog/stories/Dialog.mdx index ae40dbf5b4..ac652181bb 100644 --- a/modules/react/dialog/stories/Dialog.mdx +++ b/modules/react/dialog/stories/Dialog.mdx @@ -62,7 +62,10 @@ For blocking tasks, use Prefer **Dialog** for the standard non-modal dialog; use [**Popup**](https://workday.github.io/canvas-kit/?path=/docs/components-popups-popup--docs) with composed hooks when you need a custom popup stack or behavior (for example omitting -**`useInitialFocus`**). +**`useInitialFocus`**). The W3C +[Dialog (Modal) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) applies to +[**Modal**](https://workday.github.io/canvas-kit/?path=/docs/components-popups-modal--docs); Dialog is +intentionally non-modal. ### Minimum Accessible Structure @@ -74,7 +77,6 @@ The following matches the [Basic Example](#basic-example) layout: **`Dialog.Clos import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {Dialog} from '@workday/canvas-kit-react/dialog'; import {FormField} from '@workday/canvas-kit-react/form-field'; -import {Flex} from '@workday/canvas-kit-react/layout'; import {TextInput} from '@workday/canvas-kit-react/text-input'; @@ -89,10 +91,10 @@ import {TextInput} from '@workday/canvas-kit-react/text-input'; - - Submit + Cancel - + Submit + ; @@ -100,9 +102,8 @@ import {TextInput} from '@workday/canvas-kit-react/text-input'; Include a dismiss control: **`Dialog.CloseButton`** with visible text (for example "Cancel" or "Close"), and/or **`Dialog.CloseIcon`** when the design uses an icon-only dismiss (requires -**`aria-label`** or **`Tooltip`**). Use **`Dialog.CloseButton`** for primary actions that should -also close the dialog (for example "Submit"). Add other actions with **`Dialog.CloseButton`** or -buttons as needed. +**`aria-label`** or **`Tooltip`**). Use **`Dialog.CloseButton`** for actions that should also close +the dialog (for example "Submit"). ### Built-in Behaviors @@ -123,18 +124,20 @@ duplicate them** in consuming code. **ARIA and DOM** (_applied by hooks/subcomponents_): -- `Dialog.Card`: `role="dialog"`, `aria-labelledby` referencing the heading `id`(non-modal; page +- `Dialog.Card`: `role="dialog"`, `aria-labelledby` referencing the heading `id` (non-modal; page content is not hidden with `aria-hidden`) - `Dialog.Popper`: sibling wrapper rendered when open with `aria-owns` pointing at `Dialog.Card` to remap the accessibility tree for sequential reading order in supported browsers - `Dialog.Heading`: `id` wired to `Dialog.Card`'s `aria-labelledby` +- `Dialog.CloseIcon` / `Dialog.CloseButton`: `onClick` that calls `model.events.hide()` +- `Dialog.Target`: `ref` and `onClick` to open and to receive return focus **Keyboard** (_trigger is `Dialog.Target`, default `SecondaryButton`_): - Enter / Space on the trigger opens the dialog (standard button behavior) - On open and close, focus is managed by **`useInitialFocus`** and **`useReturnFocus`** (application overrides: see **Focus management** in Accessibility Requirements) -- Tab / Shift + Tab move focus forward and backward through +- Tab / Shift+Tab move focus forward and backward through interactive elements inside the dialog (standard sequential focus behavior) - Escape closes the dialog and returns focus per `useReturnFocus` @@ -151,93 +154,48 @@ duplicate them** in consuming code. ### Accessibility Requirements Required in application code for an accessible Dialog. Hoist **`useDialogModel`** when you need to -configure focus targets or open without **`Dialog.Target`**. Rows marked _(conditional)_ apply only -when the situation matches—otherwise omit. +configure focus targets. Rows marked _(conditional)_ apply only when the situation matches—otherwise +omit. **If no design spec is provided:** use default focus behavior; omit **`initialFocusRef`**, -**`returnFocusRef`**, **`aria-expanded`**, and **`aria-haspopup`**. +**`returnFocusRef`**, **`aria-describedby`**, **`aria-expanded`**, and **`aria-haspopup`**. **Focus management — defaults and developer prompts:** Canvas Kit handles open and close focus automatically. **State the default to the developer first.** Only set **`initialFocusRef`** or **`returnFocusRef`** after the developer (or an explicit design spec) chooses a non-default target. **Do not generate focus refs by default.** -| When | Default behavior | Ask the developer before overriding | -| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Dialog **opens** | **`useInitialFocus`** moves focus to the **first focusable element** in DOM order inside the dialog (often **`Dialog.CloseIcon`** or **`Dialog.CloseButton`**). Omit **`initialFocusRef`**. | _Which element should receive focus when the dialog opens?_ (Only when the default first focusable element is wrong for the design.) Attach **`initialFocusRef`** to that element on **`useDialogModel`**. | -| Dialog **closes** | **`useReturnFocus`** moves focus to **`Dialog.Target`**. Omit **`returnFocusRef`**. | _Which element should receive focus when the dialog closes?_ (When there is no **`Dialog.Target`**, set **`returnFocusRef`** on **`useDialogModel({returnFocusRef})`**, or when return focus should land elsewhere.) | +| When | Default behavior | Ask the developer before overriding | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Dialog **opens** | **`useInitialFocus`** moves focus to the **first focusable element** in DOM order inside the dialog (often **`Dialog.CloseIcon`** or **`Dialog.CloseButton`**). Omit **`initialFocusRef`**. | _Which element should receive focus when the dialog opens?_ (Only when the default first focusable element is wrong for the design.) Attach **`initialFocusRef`** to that element on **`useDialogModel`**. | +| Dialog **closes** | **`useReturnFocus`** moves focus to **`Dialog.Target`**. Omit **`returnFocusRef`**. | _Which element should receive focus when the dialog closes?_ (Only when return focus should land somewhere other than **`Dialog.Target`**.) | If close **removes the trigger from the DOM**, **`returnFocusRef`** alone is not enough—move focus after the UI updates (for example with **`useLayoutEffect`**). See [Modal > Return Focus](https://workday.github.io/canvas-kit/?path=/docs/components-popups-modal--docs#return-focus). -**Custom targets and programmatic open** _(conditional)_: Apply when using a custom **`as`** -component on **`Dialog.Target`**, opening via **`model.events.show()`**, or opening without -**`Dialog.Target`**. **`Dialog.Target`** adds **`onClick`** and **`ref`** to the rendered control. -Custom targets must forward both to a **keyboard-focusable** element (prefer a native **` -)); - - - - {/* ... */} -; -``` +**Custom targets** _(conditional)_: Apply when using a custom **`as`** component on +**`Dialog.Target`**. **`Dialog.Target`** adds **`onClick`** and **`ref`**. Custom targets must +forward both to a **keyboard-focusable** element (prefer a native **`