@workday/canvas-kit-docs 11.0.0-alpha.657-next.0 → 11.0.0-alpha.662-next.0

package/dist/es6/lib/docs.js

@@ -109497,6 +109497,551 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     }
   },
+  {
+    "name": "accessibleHide",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx",
+    "description": "A utility to visually hide content, while still making accessible to screen readers\nSee https://a11y-101.com/development/skip-link",
+    "declarations": [
+      {
+        "name": "accessibleHide",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "object",
+      "properties": [
+        {
+          "kind": "property",
+          "name": "clip",
+          "defaultValue": {
+            "kind": "string",
+            "value": "rect(1px, 1px, 1px, 1px)"
+          },
+          "type": {
+            "kind": "string",
+            "value": "rect(1px, 1px, 1px, 1px)"
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "clip",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "clipPath",
+          "defaultValue": {
+            "kind": "string",
+            "value": "polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)"
+          },
+          "type": {
+            "kind": "string",
+            "value": "polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)"
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "clipPath",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "position",
+          "defaultValue": {
+            "kind": "string",
+            "value": "absolute"
+          },
+          "type": {
+            "kind": "string",
+            "value": "absolute"
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "position",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "overflow",
+          "defaultValue": {
+            "kind": "string",
+            "value": "hidden"
+          },
+          "type": {
+            "kind": "string",
+            "value": "hidden"
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "overflow",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "whiteSpace",
+          "defaultValue": {
+            "kind": "string",
+            "value": "nowrap"
+          },
+          "type": {
+            "kind": "string",
+            "value": "nowrap"
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "whiteSpace",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "height",
+          "defaultValue": {
+            "kind": "string",
+            "value": "1px"
+          },
+          "type": {
+            "kind": "string",
+            "value": "1px"
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "height",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "width",
+          "defaultValue": {
+            "kind": "string",
+            "value": "1px"
+          },
+          "type": {
+            "kind": "string",
+            "value": "1px"
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "width",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "margin",
+          "defaultValue": {
+            "kind": "string",
+            "value": "-1px"
+          },
+          "type": {
+            "kind": "string",
+            "value": "-1px"
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "margin",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "padding",
+          "defaultValue": {
+            "kind": "number",
+            "value": 0
+          },
+          "type": {
+            "kind": "number",
+            "value": 0
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "padding",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "border",
+          "defaultValue": {
+            "kind": "number",
+            "value": 0
+          },
+          "type": {
+            "kind": "number",
+            "value": 0
+          },
+          "required": true,
+          "description": "",
+          "declarations": [
+            {
+              "name": "border",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
+            }
+          ],
+          "tags": {}
+        }
+      ]
+    }
+  },
+  {
+    "name": "AccessibleHide",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx",
+    "description": "A convenient component wrapper to visually hide content, while still making it accessible to screen readers",
+    "declarations": [
+      {
+        "name": "AccessibleHide",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AccessibleHide.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "enhancedComponent",
+      "componentType": "regular",
+      "displayName": "AccessibleHide",
+      "props": [
+        {
+          "kind": "property",
+          "name": "cs",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "CSToPropsInput",
+            "value": "CSToPropsInput"
+          },
+          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
+          "declarations": [
+            {
+              "name": "cs",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "children",
+          "description": "",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.ReactNode",
+            "url": "https://reactjs.org/docs/rendering-elements.html"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "as",
+          "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.ElementType",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
+          },
+          "defaultValue": {
+            "kind": "external",
+            "name": "div",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "ref",
+          "description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.Ref",
+            "url": "https://reactjs.org/docs/refs-and-the-dom.html",
+            "typeParameters": [
+              {
+                "kind": "typeParameter",
+                "name": "R",
+                "required": true,
+                "defaultValue": {
+                  "kind": "external",
+                  "name": "div",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
+                }
+              }
+            ]
+          }
+        }
+      ],
+      "baseElement": {
+        "kind": "external",
+        "name": "div",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
+      }
+    }
+  },
+  {
+    "name": "AriaLiveRegionProps",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "AriaLiveRegionProps",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "alias",
+      "name": "AriaLiveRegion"
+    }
+  },
+  {
+    "name": "AriaLiveRegion",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx",
+    "description": "A convenient wrapper for creating an [aria-live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)",
+    "declarations": [
+      {
+        "name": "AriaLiveRegion",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "enhancedComponent",
+      "componentType": "regular",
+      "displayName": "AriaLiveRegion",
+      "props": [
+        {
+          "kind": "property",
+          "name": "aria-atomic",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "boolean",
+                "value": true
+              },
+              {
+                "kind": "boolean",
+                "value": false
+              },
+              {
+                "kind": "string",
+                "value": "true"
+              },
+              {
+                "kind": "string",
+                "value": "false"
+              }
+            ]
+          },
+          "description": "set the [aria-atomic](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) attribute",
+          "declarations": [
+            {
+              "name": "aria-atomic",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx"
+            }
+          ],
+          "tags": {
+            "default": "true"
+          },
+          "defaultValue": {
+            "kind": "boolean",
+            "value": true
+          }
+        },
+        {
+          "kind": "property",
+          "name": "aria-live",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "polite"
+              },
+              {
+                "kind": "string",
+                "value": "assertive"
+              },
+              {
+                "kind": "string",
+                "value": "off"
+              }
+            ]
+          },
+          "description": "set the [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) attribute",
+          "declarations": [
+            {
+              "name": "aria-live",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx"
+            }
+          ],
+          "tags": {
+            "default": "'polite'"
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "polite"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "role",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "status"
+              },
+              {
+                "kind": "string",
+                "value": "alert"
+              },
+              {
+                "kind": "string",
+                "value": "log"
+              }
+            ]
+          },
+          "description": "set the live region's [aria role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role)",
+          "declarations": [
+            {
+              "name": "role",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/AriaLiveRegion.tsx"
+            }
+          ],
+          "tags": {
+            "default": "'status'"
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "status"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "cs",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "CSToPropsInput",
+            "value": "CSToPropsInput"
+          },
+          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
+          "declarations": [
+            {
+              "name": "cs",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "children",
+          "description": "",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.ReactNode",
+            "url": "https://reactjs.org/docs/rendering-elements.html"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "as",
+          "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.ElementType",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
+          },
+          "defaultValue": {
+            "kind": "external",
+            "name": "div",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "ref",
+          "description": "Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.Ref",
+            "url": "https://reactjs.org/docs/refs-and-the-dom.html",
+            "typeParameters": [
+              {
+                "kind": "typeParameter",
+                "name": "R",
+                "required": true,
+                "defaultValue": {
+                  "kind": "external",
+                  "name": "div",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
+                }
+              }
+            ]
+          }
+        }
+      ],
+      "baseElement": {
+        "kind": "external",
+        "name": "div",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
+      }
+    }
+  },
   {
     "name": "CanvasProviderProps",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/CanvasProvider.tsx",
@@ -110665,23 +111210,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     }
   },
-  {
-    "name": "accessibleHide",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/accessibleHide.ts",
-    "description": "A utility to visually hide content, while still making accessible to screenreaders\nSee https://a11y-101.com/development/skip-link",
-    "declarations": [
-      {
-        "name": "accessibleHide",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/accessibleHide.ts"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "symbol",
-      "name": "CSSProperties",
-      "value": "CSSProperties"
-    }
-  },
   {
     "name": "getErrorColors",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/errorRing.ts",

package/dist/mdx/preview-react/loading-sparkles/LoadingSparkles.mdx

@@ -19,8 +19,21 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-`LoadingSparkles` is designed to work out-of-the-box, but you'll need to add `aria-live="polite"`
-and a descriptive `aria-label` for screen reader accesibility.
+`LoadingSparkles` is designed to work out-of-the-box, but you'll need to add some wiring for screen
+readers. In the example below, we're simulating a loading state with a `setTimeout` that's triggered
+when the "Generate Quote" button is clicked.
+
+The ARIA live region uses the `aria-label` on `LoadingSparkles` to announce the loading state. And
+it uses the text in `AccessibleHide` to announce when loading is complete. In a real-world
+application, you would probably add another state for loading failures. Also note that generated
+text should live outside the live region. This content doesn't need to be announced to screen
+readers.
+
+#### Consolidating ARIA Live Regions
+
+In the example, we wrapped `LoadingSparkles` inside our `AriaLiveRegion` component, but in general
+you should not have multiple ARIA live regions on the page at once. If you already have a live
+region, consider sending these loading messages there instead of adding another region.
 
 <ExampleCodeBlock code={Basic} />
 

package/dist/mdx/preview-react/loading-sparkles/examples/Basic.tsx

@@ -1,6 +1,64 @@
 import React from 'react';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Text} from '@workday/canvas-kit-react/text';
 import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
+import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const containerStyles = createStyles({
+  minHeight: '3.5rem',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+});
 
 export default () => {
-  return <LoadingSparkles aria-live="polite" aria-label="Generating content" />;
+  const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');
+  const [quote, setQuote] = React.useState('');
+
+  React.useEffect(() => {
+    if (loadingStatus === 'loading') {
+      const mockLoading = setTimeout(() => {
+        setLoadingStatus('success');
+        setQuote(getQuote());
+      }, 3000);
+
+      return () => {
+        clearTimeout(mockLoading);
+      };
+    }
+  }, [loadingStatus]);
+
+  const handleClick = () => {
+    setQuote('');
+    setLoadingStatus('loading');
+  };
+
+  return (
+    <>
+      <div className={containerStyles}>
+        {quote && <Text cs={{maxWidth: '60ch'}}>{quote}</Text>}
+        <AriaLiveRegion>
+          {loadingStatus === 'loading' && <LoadingSparkles aria-label="loading" />}
+          {loadingStatus === 'success' && (
+            <AccessibleHide role="status">loading complete</AccessibleHide>
+          )}
+        </AriaLiveRegion>
+      </div>
+      <SecondaryButton onClick={handleClick}>Generate Quote</SecondaryButton>
+    </>
+  );
+};
+
+const robotQuotes = [
+  'The Zeroth Law: A robot may not harm humanity, or, by inaction, allow humanity to come to harm.',
+  'Law 1: A robot may not injure a human being or, through inaction, allow a human being to come to harm.',
+  'Law 2: A robot must obey the orders given it by human beings except where such orders would conflict with the First Law.',
+  'Law 3: A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.',
+  'There is nothing so eternally adhesive as the memory of power.',
+];
+
+const getQuote = () => {
+  const index = Math.floor(Math.random() * robotQuotes.length);
+  return robotQuotes[index];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.0-alpha.657-next.0",
+  "version": "11.0.0-alpha.662-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": "^11.0.0-alpha.657-next.0",
-    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.657-next.0",
-    "@workday/canvas-kit-react": "^11.0.0-alpha.657-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.657-next.0",
+    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.662-next.0",
+    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.662-next.0",
+    "@workday/canvas-kit-react": "^11.0.0-alpha.662-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.662-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.2",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "524bc66bc3431b68ff6340f66a53f30a8b83e541"
+  "gitHead": "ffa75d9e1edd782bf454f8a88dffdc6fca2695fa"
 }