@workday/canvas-kit-docs 11.0.16 → 11.0.18

package/dist/mdx/react/_examples/AriaLiveRegions.mdx

@@ -1,9 +1,8 @@
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
-import FilterListWithLiveStatus from './examples/common/FilterListWithLiveStatus';
-import VisibleLiveRegion from './examples/common/VisibleLiveRegion';
-import HiddenLiveRegion from './examples/common/HiddenLiveRegion';
-import TextInputWithLiveError from './examples/common/TextInputWithLiveError';
-import IconButtonsWithLiveBadges from './examples/common/IconButtonsWithLiveBadges';
+import FilterListWithLiveStatus from './examples/AriaLiveRegions/FilterListWithLiveStatus';
+import VisibleLiveRegion from './examples/AriaLiveRegions/VisibleLiveRegion';
+import HiddenLiveRegion from './examples/AriaLiveRegions/HiddenLiveRegion';
+import TextInputWithLiveError from './examples/AriaLiveRegions/TextInputWithLiveError';
 
 
 # ARIA Live Regions
@@ -56,7 +55,7 @@ experience when moving the keyboard focus to a new element on screen isn't feasi
 
 In this example, a live region is applied to a short UI text describing the number of items shown in
 the list. As you type characters into the input, listen for the screen reader to automatically
-describe how many items in the list or shown.
+describe how many items in the list are shown.
 
 <ExampleCodeBlock code={FilterListWithLiveStatus} />
 
@@ -72,4 +71,9 @@ of error conditions. As forms increase in complexity, live regions on each error
 increasingly distracting and disruptive to the experience, especially if users are trying to first
 understand the information that is required of them to complete the task.
 
+**Note:** The `<AriaLiveRegion>` component is used inside of the `Hint` to ensure the live
+region remains in the browser DOM at all times. The `Hint` is only rendered in the DOM when it
+contains content, so it will not work reliably as a live region for screen readers using the
+`as={AriaLiveRegion}` prop.
+
 <ExampleCodeBlock code={TextInputWithLiveError} />

package/dist/mdx/react/_examples/examples/{common → AriaLiveRegions}/FilterListWithLiveStatus.tsx

@@ -1,10 +1,12 @@
 import React, {useState} from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {BodyText, Heading} from '@workday/canvas-kit-react/text';
+
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {system, base} from '@workday/canvas-tokens-web';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {createStyles, cssVar, px2rem} from '@workday/canvas-kit-styling';
 
 const fruits = [
   'Apples',
@@ -23,13 +25,19 @@ const liveRegionStyle = createStyles({
   padding: system.space.x2,
 });
 
-const listStyles = {paddingLeft: '0px'};
+const listStyles = createStyles({
+  paddingLeft: system.space.zero,
+});
 
 const listItemStyles = createStyles({
   listStyle: 'none',
   paddingLeft: system.space.zero,
 });
 
+const flexStyles = createStyles({
+  gap: system.space.x4,
+});
+
 let filteredFruits = fruits;
 
 export default () => {
@@ -41,7 +49,7 @@ export default () => {
 
   return (
     <>
-      <Flex gap="1rem">
+      <Flex cs={flexStyles}>
         <Heading size="small">Fruits</Heading>
         <AriaLiveRegion>
           <BodyText size="small" cs={liveRegionStyle}>
@@ -49,11 +57,11 @@ export default () => {
           </BodyText>
         </AriaLiveRegion>
       </Flex>
-      <TextInput orientation="vertical">
-        <TextInput.Label>Filter Items:</TextInput.Label>
-        <TextInput.Field value={filter} onChange={handleFilter} />
-      </TextInput>
-      <ul style={listStyles}>
+      <FormField>
+        <FormField.Label>Filter Items:</FormField.Label>
+        <FormField.Input as={TextInput} value={filter} onChange={handleFilter} />
+      </FormField>
+      <ul className={listStyles}>
         {filteredFruits.map(i => (
           <BodyText size="small" as="li" cs={listItemStyles} key={i}>
             {i}

package/dist/mdx/react/_examples/examples/AriaLiveRegions/HiddenLiveRegion.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+let liveRegionStr = '';
+
+const flexStyles = createStyles({
+  gap: system.space.x4,
+  alignItems: 'center',
+});
+
+export default () => {
+  const [message, setMessage] = React.useState('');
+
+  function handleChange(e) {
+    setMessage(e.target.value);
+  }
+
+  function handleSendMessage(e) {
+    e.preventDefault();
+    liveRegionStr = message;
+    setMessage('');
+  }
+
+  return (
+    <>
+      <Flex as="form" aria-label="Hidden Live Region" onSubmit={handleSendMessage} cs={flexStyles}>
+        <FormField>
+          <FormField.Label>Type your message:</FormField.Label>
+          <FormField.Input as={TextInput} onChange={handleChange} value={message} />
+        </FormField>
+        <PrimaryButton type="submit">Send Message</PrimaryButton>
+      </Flex>
+      <AriaLiveRegion>
+        <Text as={AccessibleHide}>{liveRegionStr}</Text>
+      </AriaLiveRegion>
+    </>
+  );
+};

package/dist/mdx/react/_examples/examples/AriaLiveRegions/TextInputWithLiveError.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const hintStyles = createStyles({
+  height: system.space.x6,
+});
+export default () => {
+  const errMsg = 'Error: First name is required.';
+  const [hasError, setHasError] = React.useState('no');
+  const inputRef = React.useRef(null);
+  const handleBlur = e => setHasError(e.target.value.trim().length === 0 ? 'error' : 'no');
+  const handleSubmit = () => hasError && changeFocus(inputRef.current);
+
+  return (
+    <>
+      <FormField error={hasError === 'error' ? 'error' : undefined} isRequired={true}>
+        <FormField.Label>First Name:</FormField.Label>
+        <FormField.Input as={TextInput} onBlur={handleBlur} ref={inputRef} />
+        <FormField.Hint cs={hintStyles}>
+          <AriaLiveRegion>{hasError === 'error' && errMsg}</AriaLiveRegion>
+        </FormField.Hint>
+      </FormField>
+      <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
+    </>
+  );
+};

package/dist/mdx/react/_examples/examples/AriaLiveRegions/VisibleLiveRegion.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {system, base} from '@workday/canvas-tokens-web';
+import {createStyles, px2rem, calc} from '@workday/canvas-kit-styling';
+
+const liveRegionStyle = createStyles({
+  border: `${px2rem(1)} solid ${system.color.border.caution.default}`,
+  backgroundColor: system.color.bg.caution.default,
+  padding: system.space.x4,
+  display: 'block',
+  marginBlockStart: system.space.x4,
+  marginBlockEnd: system.space.x4,
+  width: calc.multiply(system.space.x16, 7),
+});
+
+const flexGapStyles = createStyles({
+  gap: system.space.x4,
+  alignItems: 'center',
+});
+
+let liveRegionStr = 'This is an ARIA Live Region!';
+
+export default () => {
+  const [message, setMessage] = React.useState('');
+
+  function handleChange(e) {
+    setMessage(e.target.value);
+  }
+
+  function handleSendMessage(e) {
+    e.preventDefault();
+    liveRegionStr = message;
+    setMessage('');
+  }
+
+  return (
+    <>
+      <AriaLiveRegion>
+        <Text cs={liveRegionStyle}>{liveRegionStr}</Text>
+      </AriaLiveRegion>
+      <Flex
+        as="form"
+        aria-label="Visible Live Region"
+        onSubmit={handleSendMessage}
+        cs={flexGapStyles}
+      >
+        <FormField>
+          <FormField.Label>Type your message:</FormField.Label>
+          <FormField.Input as={TextInput} onChange={handleChange} value={message} />
+        </FormField>
+        <PrimaryButton type="submit">Send Message</PrimaryButton>
+      </Flex>
+    </>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.16",
+  "version": "11.0.18",
   "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.16",
-    "@workday/canvas-kit-preview-react": "^11.0.16",
-    "@workday/canvas-kit-react": "^11.0.16",
-    "@workday/canvas-kit-styling": "^11.0.16",
+    "@workday/canvas-kit-labs-react": "^11.0.18",
+    "@workday/canvas-kit-preview-react": "^11.0.18",
+    "@workday/canvas-kit-react": "^11.0.18",
+    "@workday/canvas-kit-styling": "^11.0.18",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "markdown-to-jsx": "^7.2.0",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "cd483dc8550dde1cf57d6fe73d0f464004588a8e"
+  "gitHead": "b8919f552eadd3b280dffd8e6c4d445a275d2ee5"
 }

package/dist/mdx/react/_examples/examples/common/HiddenLiveRegion.tsx

@@ -1,30 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {AriaLiveRegion, AccessibleHide} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {system} from '@workday/canvas-tokens-web';
-
-export default () => {
-  const [message, setMessage] = useState('This is an ARIA Live Region!');
-  const inputRef = useRef();
-  function handleSendMessage() {
-    setMessage(inputRef.current.value);
-    inputRef.current.value = '';
-  }
-
-  return (
-    <>
-      <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <TextInput orientation="vertical">
-          <TextInput.Label>Type your message:</TextInput.Label>
-          <TextInput.Field ref={inputRef} />
-        </TextInput>
-        <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
-      </Flex>
-      <AriaLiveRegion>
-        <AccessibleHide>{message}</AccessibleHide>
-      </AriaLiveRegion>
-    </>
-  );
-};

package/dist/mdx/react/_examples/examples/common/TextInputWithLiveError.tsx

@@ -1,25 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-
-export default () => {
-  const errMsg = 'Error: First name is required.';
-  const [hasError, setHasError] = useState(false);
-  const inputRef = useRef();
-  const handleBlur = e => setHasError(e.target.value.trim().length === 0);
-  const handleSubmit = () => hasError && changeFocus(inputRef.current);
-
-  return (
-    <>
-      <TextInput orientation="vertical" hasError={hasError} isRequired={true}>
-        <TextInput.Label>First Name:</TextInput.Label>
-        <TextInput.Field onBlur={handleBlur} ref={inputRef} />
-        <TextInput.Hint height={'16px'}>
-          <AriaLiveRegion>{hasError && errMsg}</AriaLiveRegion>
-        </TextInput.Hint>
-      </TextInput>
-      <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
-    </>
-  );
-};

package/dist/mdx/react/_examples/examples/common/VisibleLiveRegion.tsx

@@ -1,40 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
-import {system, base} from '@workday/canvas-tokens-web';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-
-const liveRegionStyle = createStyles({
-  border: `${px2rem(1)} solid ${base.cantaloupe400}`,
-  backgroundColor: base.cantaloupe100,
-  padding: system.space.x4,
-  display: 'block',
-  margin: system.space.x4 + ' 0',
-});
-
-export default () => {
-  const [message, setMessage] = useState('This is an ARIA Live Region!');
-  const inputRef = useRef();
-  function handleSendMessage() {
-    setMessage(inputRef.current.value);
-    inputRef.current.value = '';
-  }
-
-  return (
-    <>
-      <AriaLiveRegion>
-        <Text cs={liveRegionStyle}>{message}</Text>
-      </AriaLiveRegion>
-      <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <TextInput orientation="vertical">
-          <TextInput.Label>Type your message:</TextInput.Label>
-          <TextInput.Field ref={inputRef} />
-        </TextInput>
-        <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
-      </Flex>
-    </>
-  );
-};