@workday/canvas-kit-docs 9.0.0-alpha.362-next.2 → 9.0.0-alpha.368-next.6

package/dist/es6/lib/docs.js

@@ -208738,7 +208738,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -208775,7 +208775,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -208812,7 +208812,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -208849,7 +208849,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -208886,7 +208886,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -208923,7 +208923,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -208998,7 +208998,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -209020,7 +209020,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -209042,7 +209042,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -209064,7 +209064,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -209086,7 +209086,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -209108,7 +209108,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [

package/dist/es6/lib/specs.js

@@ -6940,7 +6940,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the toast with no close icon or action button",
+            "name": "given the toast set to the default mode of \"status\"",
             "children": [
               {
                 "type": "it",
@@ -6976,7 +6976,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the toast with a close button and action button",
+            "name": "given the toast with a close button and action link",
             "children": [
               {
                 "type": "it",

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

@@ -14,6 +14,8 @@ any questions.
 	- [Toast](#toast)
 - [Utility Updates](#utility-updates)
   - [focusRing](#focusring)
+- [Token Updates](#token-updates)
+	- [Depth](#depth)
 
 ## Codemod
 
@@ -165,4 +167,14 @@ the correct props.
 
 We're removing memoization from focus ring. The `memoize` argument passed to `focusRing` is no
 longer valid and we've removed the exported `memoizedFocusRing`. There is no codemod for this
-change. We couldn't find any example of `memoize` or `memoizedFocusRing` being used.
+change. We couldn't find any example of `memoize` or `memoizedFocusRing` being used.
+
+## Token Updates
+
+### Depth
+
+In v7, we released an update to our depth tokens that was too bold and harsh for web applications.
+We've modified the depth token styles to be more subtle and improve visual design. This change
+affects all components which use depth tokens including `Card`, `Toast`, `Dialog`, `Popup`, `Modal`,
+and `Menu`. We have not changed which depth values each component references (i.e., `Card` remains
+at `depth[1]`).

package/dist/mdx/react/button/button/Button.mdx

@@ -82,7 +82,7 @@ on a dark or colorful background such as `blueberry400`.
 
 ### DeleteButton
 
-<SymbolDescription name="TertiaryButton" fileName="/react/" />
+<SymbolDescription name="DeleteButton" fileName="/react/" />
 
 <ExampleCodeBlock code={Delete} />
 

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

@@ -10,7 +10,7 @@ export default () => {
 
   return (
     <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
-      <Toast mode="dialog">
+      <Toast>
         <Toast.Icon icon={checkIcon} color="greenApple400" />
         <Toast.Body>
           <Toast.Message>Your workbook was successfully processed.</Toast.Message>

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

@@ -14,7 +14,7 @@ export default () => {
         <Toast.Message>Your workbook was successfully</Toast.Message>
         <Toast.Link href="#hyperlink">Custom Link</Toast.Link>
       </Toast.Body>
-      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+      <Toast.CloseIcon aria-label="Close notification" onClick={handleClose} />
     </Toast>
   );
 };

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

@@ -27,7 +27,7 @@ export default () => {
           <Toast.Body>
             <Toast.Message>Your workbook was successfully processed.</Toast.Message>
           </Toast.Body>
-          <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+          <Toast.CloseIcon aria-label="Close notification" onClick={handleClose} />
         </Toast>
       </Popper>
     </div>

package/dist/mdx/react/toast/toast.mdx

@@ -3,7 +3,6 @@ import {SymbolDoc} from '@workday/canvas-kit-docs';
 import {Toast} from '@workday/canvas-kit-react/toast';
 import Basic from './examples/Basic';
 import ToastAlert from './examples/ToastAlert';
-import WithCloseButton from './examples/WithCloseButton';
 import ToastDialog from './examples/ToastDialog';
 import WithActionLinkAndCloseIcon from './examples/WithActionLinkAndCloseIcon';
 import WithPopper from './examples/WithPopper';
@@ -57,22 +56,19 @@ An `alert` `Toast` will wrap the message within an `assertive` ARIA live region
 ### Dialog
 
 Set the `mode` prop to `dialog` to convey the presence of a follow-up action. If you use this
-`mode`, you need to add an `aria-label`. This `aria-label` should be like additional information for the
-`Toast`. The `Toast` will also add an `aria-describedby` that links the `Toast` to `Toast.Message`
+`mode`, you need to add an `aria-label`. This `aria-label` should be additional information for the
+`Toast` such as `notification`. The `Toast` will also add an `aria-describedby` that links the `Toast` to `Toast.Message`
 so that it is read out to screen readers. The `aria-label` should be different that the contents of
 the `Toast` so there is no duplication being read out by screen readers.
 
 <ExampleCodeBlock code={ToastDialog} />
 
-The `Toast` will be given a role of `dialog`. You need to provide an `aria-label` to add
-additional information regarding the contents.
-
-Screen readers will read it out in the following order: `"Notifcation: Your workbook was
+Screen readers will read the `Toast` out in the following order: "Notification: Your workbook was
 successfully processed."
 
 > **Note**: You must use the `Toast.Message` subcomponent when the `mode` is `dialog` so that `id`
 > is tied to the message for accessibility. You can also pass in a `model` with `useToastModel` to
-> provide a specific `id` for the `Toast.Message`:
+> provide a specific `id` for the `Toast.Message`
 
 ```tsx
 export const CustomIDToast = () => {
@@ -92,12 +88,6 @@ export const CustomIDToast = () => {
 };
 ```
 
-### Close Icon Button
-
-Include the `Toast.CloseIcon` subcomponent to display a close button within the Toast.
-
-<ExampleCodeBlock code={WithCloseButton} />
-
 `Toast.CloseIcon` may be included within a `dialog` `Toast` to create a `Toast` with both an action
 link and a close button.
 

package/dist/mdx/react/tokens/examples/Tokens.tsx

@@ -1,29 +1,48 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import {pickForegroundColor, StyledType} from '@workday/canvas-kit-react/common';
+import {pickForegroundColor} from '@workday/canvas-kit-react/common';
 
 import {colors, type, depth, space, borderRadius} from '@workday/canvas-kit-react/tokens';
+import {Text} from '@workday/canvas-kit-react/text';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 
-const StyledCard = styled(Box)<StyledType>({
-  width: 200,
-  height: 200,
-  margin: 20,
-  borderRadius: 4,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
+const DepthCard = ({depth, children}) => {
+  return (
+    <Flex
+      depth={depth}
+      width={200}
+      height={200}
+      borderRadius="s"
+      alignItems="center"
+      justifyContent="center"
+      backgroundColor="frenchVanilla100"
+    >
+      {children}
+    </Flex>
+  );
+};
 
 export default () => (
-  <Flex>
-    <StyledCard depth="none">Depth None</StyledCard>
-    <StyledCard depth={1}>Depth 1</StyledCard>
-    <StyledCard depth={2}>Depth 2</StyledCard>
-    <StyledCard depth={3}>Depth 3</StyledCard>
-    <StyledCard depth={4}>Depth 4</StyledCard>
-    <StyledCard depth={5}>Depth 5</StyledCard>
-    <StyledCard depth={6}>Depth 6</StyledCard>
+  <Flex gap="m" flexDirection="column">
+    <Flex gap="m" flexWrap="wrap">
+      <DepthCard depth="none">Depth None</DepthCard>
+      <DepthCard depth={1}>Depth 1</DepthCard>
+      <DepthCard depth={2}>Depth 2</DepthCard>
+      <DepthCard depth={3}>Depth 3</DepthCard>
+      <DepthCard depth={4}>Depth 4</DepthCard>
+      <DepthCard depth={5}>Depth 5</DepthCard>
+      <DepthCard depth={6}>Depth 6</DepthCard>
+    </Flex>
+    <Text>Depth on a colored background</Text>
+    <Flex backgroundColor="soap400" gap="m" padding="m" flexWrap="wrap">
+      <DepthCard depth="none">Depth None</DepthCard>
+      <DepthCard depth={1}>Depth 1</DepthCard>
+      <DepthCard depth={2}>Depth 2</DepthCard>
+      <DepthCard depth={3}>Depth 3</DepthCard>
+      <DepthCard depth={4}>Depth 4</DepthCard>
+      <DepthCard depth={5}>Depth 5</DepthCard>
+      <DepthCard depth={6}>Depth 6</DepthCard>
+    </Flex>
   </Flex>
 );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.0.0-alpha.362-next.2+ea2fe722",
+  "version": "9.0.0-alpha.368-next.6+63a2bafb",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.362-next.2+ea2fe722",
-    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.362-next.2+ea2fe722",
-    "@workday/canvas-kit-react": "^9.0.0-alpha.362-next.2+ea2fe722",
+    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.368-next.6+63a2bafb",
+    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.368-next.6+63a2bafb",
+    "@workday/canvas-kit-react": "^9.0.0-alpha.368-next.6+63a2bafb",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "ea2fe722d1176835120f765c4b9b88dcd5234fe5"
+  "gitHead": "63a2bafbfbf34c1f98b6db4128c4079a358af453"
 }

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

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import {Toast} from '@workday/canvas-kit-react/toast';
-import {checkIcon} from '@workday/canvas-system-icons-web';
-import {colors} from '@workday/canvas-kit-react/tokens';
-
-export default () => {
-  const handleClose = () => console.log('close button clicked');
-
-  return (
-    <Toast>
-      <Toast.Icon icon={checkIcon} color="greenApple400" />
-      <Toast.Body>
-        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
-      </Toast.Body>
-      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
-    </Toast>
-  );
-};