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

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

@@ -17,7 +17,8 @@ Soon to be...
 - [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)
@@ -32,6 +33,8 @@ Soon to be...
     - [Text Input](#text-input)
   - [Menu](#menu)
   - [Segmented Control](#segmented-control)
+	- [Toast](#toast)
+	- [Tooltip](#tooltip)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)
 - [Deprecations](#deprecations)
@@ -342,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)

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/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.0463-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.0463-next.0",
-    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0463-next.0",
-    "@workday/canvas-kit-react": "^16.0.0-alpha.0463-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0463-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": "f21d7cc4d8f56e8a7ffffbb5881aa903f852c025"
+  "gitHead": "e91ae68242623c9e4d24b9fbdc3ce7ea8368c425"
 }