@workday/canvas-kit-docs 12.3.6 → 12.4.0-1015-next.0

package/dist/es6/lib/docs.js

@@ -139368,6 +139368,24 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                   }
                 ],
                 "tags": {}
+              },
+              {
+                "kind": "property",
+                "name": "action",
+                "required": true,
+                "type": {
+                  "kind": "symbol",
+                  "name": "CanvasThemePalette",
+                  "value": "CanvasThemePalette"
+                },
+                "description": "",
+                "declarations": [
+                  {
+                    "name": "action",
+                    "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
+                  }
+                ],
+                "tags": {}
               }
             ]
           },
@@ -300235,7 +300253,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "name": "ReactNode",
             "url": "https://reactjs.org/docs/rendering-elements.html"
           },
-          "description": "This should be a string in most cases. HTML is supported, but only text is understood\nby assistive technology. This is true for both `label` and `describe` modes.",
+          "description": "This should be a string in most cases. HTML is supported, but only text is understood\nby assistive technology. This is true for both `label` and `describe` modes.\n\n**Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly translated.\n\n```jsx\n// The text will be understood as: You must accept terms and conditions\n<Tooltip type=\"description\" title={<span>You<i>must</i> accept terms and conditions</span>}/>\n\n// This will render a string including the html and will not be properly understood by voice over.\nconst MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>\n<Tooltip type=\"description\" title={MyComponent/>\n```",
           "declarations": [
             {
               "name": "title",
@@ -300331,10 +300349,14 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               {
                 "kind": "string",
                 "value": "muted"
+              },
+              {
+                "kind": "string",
+                "value": "description"
               }
             ]
           },
-          "description": "Determines the tooltip type for accessibility.\n\n- `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip\n  `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or\n  Ellipsis tooltips.\n- `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional\n  information about the target.\n- `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the\n  tooltip contents are not useful to a screen reader or if you have handled accessibility of\n  the tooltip yourself.\n\n**Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.\nConsider an alternate way to inform a user of additional important information.",
+          "description": "Determines the tooltip type for accessibility.\n\n- `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip\n  `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or\n  Ellipsis tooltips.\n- **Deprecated: `describe` is deprecated, please use `description`**.`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional\n  information about the target.\n- `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the\n  tooltip contents are not useful to a screen reader or if you have handled accessibility of\n  the tooltip yourself.\n\n**Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.\nConsider an alternate way to inform a user of additional important information.",
           "declarations": [
             {
               "name": "type",
@@ -300840,10 +300862,14 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                     {
                       "kind": "string",
                       "value": "muted"
+                    },
+                    {
+                      "kind": "string",
+                      "value": "description"
                     }
                   ]
                 },
-                "description": "Determines the tooltip type for accessibility.\n\n- `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip\n  `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or\n  Ellipsis tooltips.\n- `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional\n  information about the target.\n- `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the\n  tooltip contents are not useful to a screen reader or if you have handled accessibility of\n  the tooltip yourself.\n\n**Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.\nConsider an alternate way to inform a user of additional important information.",
+                "description": "Determines the tooltip type for accessibility.\n\n- `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip\n  `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or\n  Ellipsis tooltips.\n- **Deprecated: `describe` is deprecated, please use `description`.**`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional information about the target\n- `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the\n  tooltip contents are not useful to a screen reader or if you have handled accessibility of\n  the tooltip yourself.\n- `description`: Sets `aria-description` strings for the wrapped element. Use if the tooltip has additional about the target\n\n**Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.\nConsider an alternate way to inform a user of additional important information.",
                 "declarations": [
                   {
                     "name": "type",
@@ -300976,6 +301002,37 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                   ],
                   "tags": {}
                 },
+                {
+                  "kind": "property",
+                  "name": "aria-description",
+                  "defaultValue": {
+                    "kind": "unknown",
+                    "value": "unknown",
+                    "text": "type === 'description' ? titleText : undefined"
+                  },
+                  "type": {
+                    "kind": "union",
+                    "value": [
+                      {
+                        "kind": "primitive",
+                        "value": "string"
+                      },
+                      {
+                        "kind": "primitive",
+                        "value": "undefined"
+                      }
+                    ]
+                  },
+                  "required": false,
+                  "description": "",
+                  "declarations": [
+                    {
+                      "name": "aria-description",
+                      "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tooltip/lib/useTooltip.tsx"
+                    }
+                  ],
+                  "tags": {}
+                },
                 {
                   "kind": "property",
                   "name": "aria-label",

package/dist/mdx/react/_examples/Tooltips.mdx

@@ -0,0 +1,15 @@
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import ListOfUploadedFiles from './examples/Tooltips/ListOfUploadedFiles';
+
+
+# Accessible Tooltip Examples
+
+## Using descriptive tooltips for repeated text buttons
+
+In this example, the "Delete" buttons are used repeatedly to reference the multiple files that have
+been uploaded to the web app. The text buttons already have an accessible name (a.k.a. label)
+derived from the button's inner text. The `describe` tooltip can be useful for providing more
+in-context description for both low vision sighted users and screen reader users without overriding
+the button name "Delete".
+
+<ExampleCodeBlock code={ListOfUploadedFiles} />

package/dist/mdx/react/_examples/examples/Tooltips/ListOfUploadedFiles.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {trashIcon} from '@workday/canvas-system-icons-web';
+
+const files = ['Cover Letter.docx', 'Resume.docx', 'Portfolio.pptx', 'Portrait.png'];
+
+const listStyles = {
+  alignItems: 'center',
+  width: '35rem',
+};
+
+const deleteBtnStyle = {
+  marginLeft: 'auto',
+};
+
+export default () => {
+  return (
+    <>
+      <Heading size="medium">Uploaded Files:</Heading>
+      <Flex as="ul" gap="1rem" flexDirection="column">
+        {files.map(i => (
+          <Flex as="li" style={listStyles}>
+            <Text>{i}</Text>
+            <Tooltip type="description" title={i}>
+              <DeleteButton icon={trashIcon} style={deleteBtnStyle}>
+                Delete
+              </DeleteButton>
+            </Tooltip>
+          </Flex>
+        ))}
+      </Flex>
+    </>
+  );
+};

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

@@ -94,11 +94,7 @@ or view the example below.
 
 ### Theme Overrides
 
-The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`. 
-
-> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all `PrimaryButton` theme colors set at the `CanvasProvider` level.
-
-> **Note:** You should **not** individually theme components wrapping them with the `CanvasProvider`, but rather theme at the root level of the application.
+The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`.
 
 <ExampleCodeBlock code={ThemeOverrides} />
 

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

@@ -8,7 +8,7 @@ import {
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
 import {createStyles} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Heading} from '@workday/canvas-kit-react/text';
 
@@ -17,24 +17,17 @@ const parentContainerStyles = createStyles({
   padding: system.space.x4,
 });
 
-const customActionTheme = createStyles({
-  [brand.action.base]: 'teal',
-  [brand.action.accent]: 'white',
-  [brand.action.dark]: 'hsla(180, 100%, 20%)',
-  [brand.action.darkest]: 'hsla(180, 100%, 16%)',
-});
-
 export default () => (
   <div>
     <Heading size="medium" as="h3">
-      Override Primary Color Via Canvas Provider
+      Override Primary Color
     </Heading>
     <CanvasProvider
       theme={{
         canvas: {
           palette: {
-            primary: {
-              main: 'navy',
+            action: {
+              main: 'teal',
             },
           },
         },
@@ -52,9 +45,19 @@ export default () => (
       </Flex>
     </CanvasProvider>
     <Heading size="medium" as="h3">
-      Override Action Color Via CSS Action Token
+      Override Action Color
     </Heading>
-    <div className={customActionTheme}>
+    <CanvasProvider
+      theme={{
+        canvas: {
+          palette: {
+            primary: {
+              main: 'navy',
+            },
+          },
+        },
+      }}
+    >
       <Flex cs={parentContainerStyles}>
         <PrimaryButton>Primary</PrimaryButton>
         <PrimaryButton icon={plusIcon} iconPosition="start">
@@ -65,6 +68,6 @@ export default () => (
         </PrimaryButton>
         <PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
       </Flex>
-    </div>
+    </CanvasProvider>
   </div>
 );

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -1,6 +1,9 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';import Default from './examples/Default';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight'
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator'import Default from './examples/Default';
 import CustomContent from './examples/CustomContent';
 import DelayedTooltip from './examples/DelayedTooltip';
+import DescriptionType from './examples/DescriptionType';
 import DescribeType from './examples/DescribeType';
 import Muted from './examples/Muted';
 import Placements from './examples/Placements';
@@ -62,6 +65,14 @@ and focus events.
 
 ### Describing an Element
 
+<InformationHighlight variant={'caution'} className='sb-unstyled'>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading> Caution: Describe type has been deprecated </InformationHighlight.Heading>
+  <InformationHighlight.Body>
+     Assistive technology may ignore <StatusIndicator variant='gray'><StatusIndicator.Label cs={{textTransform: 'lowercase'}}>type="describe"</StatusIndicator.Label></StatusIndicator> techniques based on verbosity settings. Please use <StatusIndicator cs={{textTransform: 'lowercase'}} variant='gray'><StatusIndicator.Label cs={{textTransform: 'lowercase'}}>type="description"</StatusIndicator.Label></StatusIndicator> on Tooltips.
+  </InformationHighlight.Body>
+</InformationHighlight>
+
 The default mode for a tooltip is to label content via `aria-label`. If a tooltip is meant to
 provide ancillary information, the `type` can be set to `describe`. This will add `aria-describedby`
 to the target element. This will allow screen reader users to hear the name of the control that is
@@ -69,6 +80,25 @@ being focused and the ancillary tooltip information.
 
 <ExampleCodeBlock code={DescribeType} />
 
+### Description of an Element
+
+The default mode for a tooltip is to assign a name to the target element with an `aria-label`
+string. If a tooltip is meant to provide ancillary information, the `type` can be set to `description`.
+This will add `aria-description` strings to the target element instead. This variant is useful on
+text buttons and other components that already have a label or name. Use this type instead of `describe` to ensure proper aria attributes are added to the dom regardless if the tooltip is visible. 
+
+> **Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly read by voiceover.
+>
+> ```jsx
+> // The text will be understood as: You must accept terms and conditions
+> <Tooltip type="description" title={<span>You<i>must</i> accept terms and conditions</span>}/>
+>
+> // This will render a string including the html and will not be properly understood by voice over.
+> const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>
+> <Tool
+
+<ExampleCodeBlock code={DescriptionType} />
+
 ### Muted Tooltips
 
 If a tooltip does not need to be visible to screen reader users, or you handle accessibility of the

package/dist/mdx/react/tooltip/examples/DescriptionType.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {DeleteButton, SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {chartConfigIcon} from '@workday/canvas-system-icons-web';
+
+export default () => {
+  return (
+    <Flex gap="s">
+      <Tooltip type="description" title="Search using additional criteria">
+        <TertiaryButton icon={chartConfigIcon}>Advanced Search</TertiaryButton>
+      </Tooltip>
+      <Tooltip type="description" title="Create saved search">
+        <SecondaryButton>Save</SecondaryButton>
+      </Tooltip>
+      <Tooltip type="description" title="The service will restart after this action">
+        <DeleteButton>Delete</DeleteButton>
+      </Tooltip>
+    </Flex>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.3.6",
+  "version": "12.4.0-1015-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,12 +44,12 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.3.6",
-    "@workday/canvas-kit-preview-react": "^12.3.6",
-    "@workday/canvas-kit-react": "^12.3.6",
-    "@workday/canvas-kit-styling": "^12.3.6",
+    "@workday/canvas-kit-labs-react": "^12.4.0-1015-next.0",
+    "@workday/canvas-kit-preview-react": "^12.4.0-1015-next.0",
+    "@workday/canvas-kit-react": "^12.4.0-1015-next.0",
+    "@workday/canvas-kit-styling": "^12.4.0-1015-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.1.1",
+    "@workday/canvas-tokens-web": "^2.1.0",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "20a9a33c6a1b54b37959d5523881f633e377ddda"
+  "gitHead": "d2351f7f9b4ef85afeaaf40ce7100fefb9f2d27b"
 }