@workday/canvas-kit-docs 12.3.7 → 12.4.0-1019-next.0

package/dist/es6/lib/docs.js

@@ -138158,7 +138158,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/hideMouseFocus.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "`hideMouseFocus` is deprecated and will be removed in a future major version. Please use [`focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) when applying focus styles to elements."
+    },
     "type": {
       "kind": "symbol",
       "name": "CSSProperties",
@@ -138168,14 +138170,16 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "mouseFocusBehavior",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/hideMouseFocus.ts",
-    "description": "",
+    "description": "A utility that simplifies focus selectors since you can't use nested syntax for some reason. Example:\n[`[data-whatinput=\"mouse\"],\n  [data-whatinput=\"touch\"],\n  [data-whatinput=\"pointer\"]: {\n    '& .my-selector': {\n       ...\n    }\n},",
     "declarations": [
       {
         "name": "mouseFocusBehavior",
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/hideMouseFocus.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "`mouseFocusBehavior` is deprecated and will be removed in a future major version. Please use [`focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) when applying focus styles to elements."
+    },
     "type": {
       "kind": "function",
       "parameters": [
@@ -300235,7 +300239,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 +300335,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 +300848,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 +300988,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/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.7",
+  "version": "12.4.0-1019-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.3.7",
-    "@workday/canvas-kit-preview-react": "^12.3.7",
-    "@workday/canvas-kit-react": "^12.3.7",
-    "@workday/canvas-kit-styling": "^12.3.7",
+    "@workday/canvas-kit-labs-react": "^12.4.0-1019-next.0",
+    "@workday/canvas-kit-preview-react": "^12.4.0-1019-next.0",
+    "@workday/canvas-kit-react": "^12.4.0-1019-next.0",
+    "@workday/canvas-kit-styling": "^12.4.0-1019-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "b2e77e342788ae17ef1da20f480e71bcc205f32f"
+  "gitHead": "76614cb77b6d16bd953592bc7d288a2a71c8f732"
 }