@workday/canvas-kit-docs 16.0.0-alpha.0462-next.0 → 16.0.0-alpha.0464-next.0

package/dist/mdx/16.0-UPGRADE-GUIDE.mdx

@@ -15,9 +15,12 @@ Soon to be...
 - [New Components](#new-components)
   - [KBD](#kbd)
 - [Component Updates](#component-updates)
+  - [Action Bar](#action-bar)
   - [Avatar](#avatar)
-  - [Buttons](#buttons) - [Delete Button Outline Variant](#delete-button-outline-variant)
+  - [Buttons](#buttons)
+    - [Delete Button Outline Variant](#delete-button-outline-variant)
   - [Card](#card)
+  - [Form Field](#form-field)
   - [Inputs](#inputs)
     - [Accessibility: Checked-State Contrast](#accessibility-checked-state-contrast)
     - [Checkbox](#checkbox)
@@ -29,6 +32,9 @@ Soon to be...
     - [Text Area](#text-area)
     - [Text Input](#text-input)
   - [Menu](#menu)
+  - [Segmented Control](#segmented-control)
+	- [Toast](#toast)
+	- [Tooltip](#tooltip)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)
 - [Deprecations](#deprecations)
@@ -131,6 +137,14 @@ functional shortcuts, refer to the storybook documentation and our example stori
 
 ## Component Updates
 
+### Action Bar
+
+**PR:** [#4048](https://github.com/Workday/canvas-kit/pull/4048)
+
+#### Visual Updates
+
+- `ActionBar` padding has been updated to `padding.md` (16px).
+
 ### Avatar
 
 **PR:** [#3981](https://github.com/Workday/canvas-kit/pull/3981)
@@ -331,6 +345,36 @@ If you customize `brand.success.base` in your theme, please verify the following
 - Error and caution states no longer display a status background color; only the standard background
   is shown.
 
+### Toast
+
+**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
+
+#### Visual Updates
+
+- Padding is now applied to the `Toast` container itself instead of being distributed across
+  `Toast.Body` and `Toast.Icon`.
+- Gap between the icon, body, and close icon is now `base.size150` (12px).
+- Shape uses `system.shape.xl`.
+- `Toast.Body` no longer has a gap between text and link.
+- `Toast.CloseIcon` is set to have absolute positioning and aligned with the top-right corner (in
+  LTR).
+- `Toast.CloseIcon` was changed to be `extraSmall` tertiary button.
+
+### Tooltip
+
+**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
+
+#### Visual Updates
+
+- The default tooltip has been restyled from a dark surface to a light surface.
+- A visible border (`system.color.border.default`) is now applied to the container, replacing the
+  previous transparent outline.
+- Tooltip boundaries remain visible in Windows High Contrast mode: when High Contrast is detected,
+  Tooltip uses a solid outline (`outline: solid 1px CanvasText`) to ensure clear visibility.
+- Shape is now fully rounded using `system.shape.full`.
+- Type level is now `subtext.lg` (previously `subtext.md`).
+- Padding and spacing have been adjusted to accommodate the new styling.
+
 ### Menu
 
 **PR:** [#3987](https://github.com/Workday/canvas-kit/pull/3987)
@@ -404,6 +448,25 @@ Used in `Select`, `Combobox`, and other listbox menus. Selected states apply whe
 | Disabled + Focus (`aria-disabled="true"`) | Solid blue fill and white text with disabled opacity (dims focus style) | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) with disabled opacity (dims focus indicator) |
 | Disabled + Selected               | Solid blue fill and white text with disabled opacity                         | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) with disabled opacity                            |
 
+### Segmented Control
+
+**PR:** [#4048](https://github.com/Workday/canvas-kit/pull/4048)
+
+
+#### Visual Updates
+
+- Container background changed from `surface.alt.strong` to `surface.alt.default` (a lighter background color).
+- Border radius changed to `shape.full` (full rounded corners) on the container.
+- Grid gap reduced from `gap.sm` (8px) to `gap.xs` (4px).
+- Selected/pressed item now uses boxShadow: system.depth[2] instead of a visible border.
+- Font weight changed from bold to medium (base and small sizes);
+- Medium size now uses semi-bold font weight.
+- Size adjustments: large height shrunk to size.sm (32px) (was size.md (40px));
+- Medium size is now 28px in height (was 32px).
+- Hover and pressed states now use `surface.overlay.hover.default` and `surface.overlay.pressed.default` respectively for the item.
+- Container padding changed to `padding.md` (16px) including for mobile devices.
+- On mobile devices, the container padding remains `padding.md` (16px).
+
 ## New Utilities
 
 ### cornerShapeStencil

package/dist/mdx/labs-react/kbd/KBD.mdx

@@ -2,6 +2,7 @@ import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import {KBD} from '@workday/canvas-kit-labs-react/kbd';
 import Basic from './examples/Basic';
+import InTooltip from './examples/InTooltip';
 import Items from './examples/Items';
 import RTL from './examples/RTL';
 import Size from './examples/Size';
@@ -66,6 +67,13 @@ standard style or `plain` for a more minimal appearance. The `variant` is shared
 
 <ExampleCodeBlock code={Variant} />
 
+### In Tooltip
+
+`KBD` can be used inside a `Tooltip` to communicate the keyboard shortcut associated with an
+interactive control. Pair it with descriptive text so the shortcut is easy to understand.
+
+<ExampleCodeBlock code={InTooltip} />
+
 ## Accessibility
 
 `KBD` is **presentational and semantic text**. It renders a `kbd` element so assistive technology
@@ -73,6 +81,11 @@ can recognize the content as keyboard input, but it does **not** make a keyboard
 expose it to the browser. It is the visual/semantic representation of a key, not the accessibility
 contract for a functioning shortcut.
 
+- `aria-keyshortcuts` isn't supposed to go on the presentational KBD wrapper, it should be on the interactive control with the key listener.
+- The `<KBD.Item>` components that use glyphs need translated aria-label strings. (E.g. "Command", "Control", etc.)
+
+
+
 ### Provide spoken labels for symbolic or abbreviated keys
 
 Glyphs and abbreviations such as <kbd>⌘</kbd>, <kbd>⌥</kbd>, <kbd>⇧</kbd>, and arrow keys are **not

package/dist/mdx/labs-react/kbd/examples/InTooltip.tsx

@@ -0,0 +1,38 @@
+import {KBD} from '@workday/canvas-kit-labs-react/kbd';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Subtext} from '@workday/canvas-kit-react/text';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {copyIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const flexContainer = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: system.gap.xs,
+  p: {
+    margin: 0,
+  },
+});
+
+export default () => {
+  return (
+    <Tooltip
+      title={
+        <div className={flexContainer}>
+          <Subtext size="large">Copy to clipboard</Subtext>
+          <KBD>
+            <KBD.Item>
+              <KBD variant="plain">
+                <KBD.Item aria-label="Command">⌘</KBD.Item>
+                <KBD.Item>C</KBD.Item>
+              </KBD>
+            </KBD.Item>
+          </KBD>
+        </div>
+      }
+    >
+      <SecondaryButton icon={copyIcon} aria-keyshortcuts="Command+C" />
+    </Tooltip>
+  );
+};

package/dist/mdx/react/segmented-control/SegmentedControl.mdx

@@ -66,8 +66,7 @@ When users interact with a `SegmentedControl` using screen readers:
   `aria-label="View options"`)
 - Each button announces its text/label, "toggle button" role, and pressed/unpressed state (e.g.,
   "List view, toggle button, pressed" or "Grid view, toggle button, not pressed")
-- For icon-only buttons with tooltips, the tooltip text is announced along with the button role and
-  state
+- icon-only items must have an accessible name, supplied by visible text, aria-label, or a Tooltip in label mode.
 - When a button is activated, screen readers should announce the new state
 
 Refer to [Button](?path=/docs/components-buttons--docs#accessibility) for more information about

package/dist/mdx/react/toast/examples/Basic.tsx

@@ -5,7 +5,7 @@ import {system} from '@workday/canvas-tokens-web';
 export default () => {
   return (
     <Toast>
-      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+      <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
       <Toast.Body>
         <Toast.Message>Your workbook was successfully processed.</Toast.Message>
       </Toast.Body>

package/dist/mdx/react/toast/examples/RTL.tsx

@@ -9,7 +9,7 @@ export default () => {
   return (
     <CanvasProvider dir="rtl">
       <Toast>
-        <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+        <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
         <Toast.Body>
           <Toast.Message>Your workbook was successfully processed.</Toast.Message>
         </Toast.Body>

package/dist/mdx/react/toast/examples/ToastAlert.tsx

@@ -4,7 +4,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 export default () => (
   <Toast mode="alert">
-    <Toast.Icon icon={exclamationCircleIcon} color={system.color.fg.warning.default} />
+    <Toast.Icon icon={exclamationCircleIcon} color={system.color.brand.fg.caution.default} />
     <Toast.Body>
       <Toast.Message>There was an error with your workbook.</Toast.Message>
     </Toast.Body>

package/dist/mdx/react/toast/examples/ToastDialog.tsx

@@ -4,7 +4,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 export default () => (
   <Toast mode="dialog" aria-label="notification">
-    <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+    <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
     <Toast.Body>
       <Toast.Message>Your workbook was successfully processed.</Toast.Message>
       <Toast.Link href="#hreflink">Custom Link</Toast.Link>

package/dist/mdx/react/toast/examples/WithActionLinkAndCloseIcon.tsx

@@ -7,7 +7,7 @@ export default () => {
 
   return (
     <Toast mode="dialog" aria-label="notification">
-      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+      <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
       <Toast.Body>
         <Toast.Message>Your workbook was successfully</Toast.Message>
         <Toast.Link href="#hyperlink">Custom Link</Toast.Link>

package/dist/mdx/react/toast/examples/WithPopper.tsx

@@ -23,7 +23,7 @@ export default () => {
       <SecondaryButton onClick={handleOpen}>Show Toast</SecondaryButton>
       <Popper placement="bottom-end" open={open} anchorElement={containerRef}>
         <Toast mode="dialog" aria-label="notification">
-          <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+          <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
           <Toast.Body>
             <Toast.Message>Your workbook was successfully processed.</Toast.Message>
           </Toast.Body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "16.0.0-alpha.0462-next.0",
+  "version": "16.0.0-alpha.0464-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": "^16.0.0-alpha.0462-next.0",
-    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0462-next.0",
-    "@workday/canvas-kit-react": "^16.0.0-alpha.0462-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0462-next.0",
+    "@workday/canvas-kit-labs-react": "^16.0.0-alpha.0464-next.0",
+    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0464-next.0",
+    "@workday/canvas-kit-react": "^16.0.0-alpha.0464-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0464-next.0",
     "@workday/canvas-system-icons-web": "4.0.4",
     "@workday/canvas-tokens-web": "4.4.0-beta.6",
     "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "d80e8648cba4c3445351b3277c46f5c418f0de93"
+  "gitHead": "e91ae68242623c9e4d24b9fbdc3ce7ea8368c425"
 }