@workday/canvas-kit-docs 11.1.0-833-next.0 → 11.1.0-864-next.0

package/dist/es6/lib/specs.js

@@ -285,6 +285,10 @@ module.exports = {specifications: [
                     "type": "it",
                     "name": "should not have activedescendant set"
                   },
+                  {
+                    "type": "it",
+                    "name": "should not have visual focus on any element"
+                  },
                   {
                     "type": "it",
                     "name": "should not have aria-selected=true on any elements"
@@ -297,6 +301,10 @@ module.exports = {specifications: [
                         "type": "it",
                         "name": "should clear activedescendant"
                       },
+                      {
+                        "type": "it",
+                        "name": "should not have visual focus on the first item"
+                      },
                       {
                         "type": "it",
                         "name": "should not set aria-selected to the first option"
@@ -305,7 +313,7 @@ module.exports = {specifications: [
                   },
                   {
                     "type": "describe",
-                    "name": "when a value is entered",
+                    "name": "when \"Red\" is typed",
                     "children": [
                       {
                         "type": "it",
@@ -353,7 +361,7 @@ module.exports = {specifications: [
                           },
                           {
                             "type": "it",
-                            "name": "should set aria-selected to the first option"
+                            "name": "should set visual focus to the first option"
                           },
                           {
                             "type": "describe",
@@ -369,7 +377,7 @@ module.exports = {specifications: [
                               },
                               {
                                 "type": "describe",
-                                "name": "when the use hits the \"2\" key",
+                                "name": "when the user hits the \"2\" key",
                                 "children": [
                                   {
                                     "type": "it",
@@ -378,6 +386,10 @@ module.exports = {specifications: [
                                   {
                                     "type": "it",
                                     "name": "should change the combobox value to reflect the key entered"
+                                  },
+                                  {
+                                    "type": "it",
+                                    "name": "should set aria-selected to the first option"
                                   }
                                 ]
                               }
@@ -437,7 +449,11 @@ module.exports = {specifications: [
                           },
                           {
                             "type": "it",
-                            "name": "should set aria-selected to the second option"
+                            "name": "should set visual focus on the second option"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should not have aria-selected=true on any elements"
                           }
                         ]
                       },
@@ -455,7 +471,11 @@ module.exports = {specifications: [
                               },
                               {
                                 "type": "it",
-                                "name": "should set aria-selected to the first option"
+                                "name": "should set visual focus on the first option"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should not have aria-selected=true on any elements"
                               }
                             ]
                           },
@@ -469,7 +489,11 @@ module.exports = {specifications: [
                               },
                               {
                                 "type": "it",
-                                "name": "should set aria-selected to the last option"
+                                "name": "should set visual focus on the last option"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should not have aria-selected=true on any elements"
                               }
                             ]
                           },
@@ -483,7 +507,11 @@ module.exports = {specifications: [
                               },
                               {
                                 "type": "it",
-                                "name": "should set aria-selected to the third option"
+                                "name": "should set visual focus on the third option"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should not have aria-selected=true on any elements"
                               }
                             ]
                           },
@@ -497,7 +525,11 @@ module.exports = {specifications: [
                               },
                               {
                                 "type": "it",
-                                "name": "should set aria-selected to the first option"
+                                "name": "should set visual focus on the first option"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should not have aria-selected=true on any elements"
                               }
                             ]
                           }
@@ -2351,7 +2383,7 @@ module.exports = {specifications: [
                       },
                       {
                         "type": "it",
-                        "name": "should have an aria-modal=true"
+                        "name": "should have an aria-modal=false"
                       },
                       {
                         "type": "it",
@@ -2621,7 +2653,7 @@ module.exports = {specifications: [
                       },
                       {
                         "type": "it",
-                        "name": "should have an aria-modal=true"
+                        "name": "should have an aria-modal=false"
                       },
                       {
                         "type": "it",
@@ -2701,7 +2733,7 @@ module.exports = {specifications: [
                       },
                       {
                         "type": "it",
-                        "name": "should have an aria-modal=true"
+                        "name": "should have an aria-modal=false"
                       },
                       {
                         "type": "it",
@@ -4504,6 +4536,10 @@ module.exports = {specifications: [
                                   {
                                     "type": "it",
                                     "name": "should scroll so that the \"San Francisco (United States)\" option is fully visible"
+                                  },
+                                  {
+                                    "type": "it",
+                                    "name": "should not have any item selected"
                                   }
                                 ]
                               }
@@ -4520,6 +4556,10 @@ module.exports = {specifications: [
                                   {
                                     "type": "it",
                                     "name": "should scroll so that the \"San Mateo (United States)\" option is fully visible"
+                                  },
+                                  {
+                                    "type": "it",
+                                    "name": "should not have any item selected"
                                   }
                                 ]
                               }
@@ -4536,6 +4576,10 @@ module.exports = {specifications: [
                                   {
                                     "type": "it",
                                     "name": "should scroll so that the \"Dallas (United States)\" option is fully visible"
+                                  },
+                                  {
+                                    "type": "it",
+                                    "name": "should not have any item selected"
                                   }
                                 ]
                               }
@@ -4558,6 +4602,10 @@ module.exports = {specifications: [
                                   {
                                     "type": "it",
                                     "name": "should set assistive focus to the \"San Francisco (United States)\" option"
+                                  },
+                                  {
+                                    "type": "it",
+                                    "name": "should not have any item selected"
                                   }
                                 ]
                               }
@@ -4574,6 +4622,10 @@ module.exports = {specifications: [
                                   {
                                     "type": "it",
                                     "name": "should set assistive focus to the \"San Francisco (United States)\" option"
+                                  },
+                                  {
+                                    "type": "it",
+                                    "name": "should not have any item selected"
                                   }
                                 ]
                               }
@@ -4590,6 +4642,10 @@ module.exports = {specifications: [
                                   {
                                     "type": "it",
                                     "name": "should set assistive focus to the \"San Mateo (United States)\" option"
+                                  },
+                                  {
+                                    "type": "it",
+                                    "name": "should not have any item selected"
                                   }
                                 ]
                               }
@@ -4614,6 +4670,10 @@ module.exports = {specifications: [
                               {
                                 "type": "it",
                                 "name": "should scroll so that the \"Dallas (United States)\" option is centered in view"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should set assistive focus to the \"Dallas (United States)\" option"
                               }
                             ]
                           }
@@ -4656,6 +4716,10 @@ module.exports = {specifications: [
                       {
                         "type": "it",
                         "name": "should set assistive focus to the first option (\"E-mail\")"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should not have any item selected"
                       }
                     ]
                   },
@@ -4670,6 +4734,10 @@ module.exports = {specifications: [
                           {
                             "type": "it",
                             "name": "should set assistive focus to the second option (\"Phone\")"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should not have any item selected"
                           }
                         ]
                       },
@@ -4681,6 +4749,10 @@ module.exports = {specifications: [
                             "type": "it",
                             "name": "should not have an aria-activedescendant attribute"
                           },
+                          {
+                            "type": "it",
+                            "name": "should not have any item selected"
+                          },
                           {
                             "type": "describe",
                             "name": "when the menu is re-opened AFTER it has fully closed",
@@ -4692,6 +4764,10 @@ module.exports = {specifications: [
                                   {
                                     "type": "it",
                                     "name": "should set assistive focus to the second option (\"Phone\") that is where the cursor was"
+                                  },
+                                  {
+                                    "type": "it",
+                                    "name": "should not have any item selected"
                                   }
                                 ]
                               }
@@ -4734,6 +4810,10 @@ module.exports = {specifications: [
                           {
                             "type": "it",
                             "name": "should set assistive focus to second enabled option (\"Phone\")"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should not have any item selected"
                           }
                         ]
                       },
@@ -4748,6 +4828,10 @@ module.exports = {specifications: [
                               {
                                 "type": "it",
                                 "name": "should set assistive focus to the fourth option down (\"Mail\") since focus will have skipped one disabled option (\"Fax\")"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should not have any item selected"
                               }
                             ]
                           }
@@ -4810,6 +4894,10 @@ module.exports = {specifications: [
                       {
                         "type": "it",
                         "name": "should show Boulder (United States)"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should not have any item selected"
                       }
                     ]
                   }
@@ -4867,7 +4955,11 @@ module.exports = {specifications: [
                     "children": [
                       {
                         "type": "it",
-                        "name": "should have an aria-selected attribute set to \"true\""
+                        "name": "should set accessible focus on the \"E-Mail\" option"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should not have any item selected"
                       }
                     ]
                   },
@@ -4910,6 +5002,10 @@ module.exports = {specifications: [
                               {
                                 "type": "it",
                                 "name": "should set assistive focus to the \"Phone\" option"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should set assistive selection on the \"Phone\" option"
                               }
                             ]
                           }
@@ -4968,6 +5064,10 @@ module.exports = {specifications: [
                               {
                                 "type": "it",
                                 "name": "should set assistive focus to the \"Mail\" option and skip disabled fax"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should not have any item selected"
                               }
                             ]
                           }
@@ -4979,7 +5079,7 @@ module.exports = {specifications: [
               },
               {
                 "type": "describe",
-                "name": "when the enter key is pressed",
+                "name": "when the down arrow key is pressed",
                 "children": [
                   {
                     "type": "describe",
@@ -4991,7 +5091,7 @@ module.exports = {specifications: [
                       },
                       {
                         "type": "it",
-                        "name": "should have E-Mail selected"
+                        "name": "should set accessible focus on the \"E-Mail\" option"
                       }
                     ]
                   },

package/dist/mdx/preview-react/divider/Divider.mdx

@@ -0,0 +1,36 @@
+import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import Basic from './examples/Basic';
+import CustomSpace from './examples/CustomSpace';
+
+
+# Divider
+
+A `Divider` segments and visually organizes content.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+Use a `Divider` to separate content and create visual hierarchy. Typically they are used between paragraph sections to indicate a break or shift in content. However, they can also be used as decorative elements to provide greater emphasis and visual hierarchy.
+
+### Basic Example
+
+By default, `Divider` renders a `<hr>` (horizontal rule) element with `0.5rem` of margin on top and bottom. The `space` prop allows you to adjust the vertical margin evenly. In the example below, the `Divider`s provide a subtle deliniation between each profile card without being as visually prominent as a `Card`. The `space` is adjusted to `0.25rem` which applied `0.125rem` to the top and bottom margin.
+
+<ExampleCodeBlock code={Basic} />
+
+### Custom Space
+
+You might also want to apply custom space to `Divider` where the top and bottom margin are not equal. The best way to achieve this is with `createStyles` and the `cs` property. In the example below, the `Divider` is applied as a decorative element to add emphasis to the section heading. Custom styles are defined in the `createStyles` function outside the component and are passed to `Divider`'s `cs` prop. These styles remove the top margin and set the bottom margin to `1rem`.
+
+<ExampleCodeBlock code={CustomSpace} />
+
+## Component API
+
+<SymbolDoc name="Divider" hideDescription />

package/dist/mdx/preview-react/divider/examples/Basic.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+const sectionStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.space.x4,
+  maxWidth: '40rem',
+});
+
+export default () => {
+  const lastIndex = maintainerList.length - 1;
+  return (
+    <section className={sectionStyles}>
+      {maintainerList.map((maintainerData, index) => (
+        <>
+          <ProfileCard {...maintainerData} />
+          {index !== lastIndex && <Divider space={system.space.x1} />}
+        </>
+      ))}
+    </section>
+  );
+};
+
+const maintainerList = [
+  {
+    id: '44883293',
+    name: 'Josh Bagwell',
+    bio: 'Software Development Engineer',
+  },
+  {
+    id: '338257',
+    name: 'Nicholas Boll',
+    bio: 'Principal Software Development Engineer',
+  },
+  {
+    id: '7966550',
+    name: 'Manuel Carrera',
+    bio: 'Sr. Software Development Engineer',
+  },
+  {
+    id: '146020',
+    name: 'James Fan',
+    bio: 'Sr. Software Development Engineer',
+  },
+  {
+    id: '48605821',
+    name: 'Raisa Primerova',
+    bio: 'Software Development Engineer',
+  },
+  {
+    id: '4818182',
+    name: 'Alan Smith',
+    bio: 'Principal Software Development Engineer',
+  },
+];
+
+const profileCardStyles = createStyles({
+  display: 'grid',
+  gridGap: '0.5rem',
+  gridTemplateColumns: '5rem 1fr',
+  gridTemplateRows: '1fr 1fr',
+});
+
+const profileCardAvatarStyles = createStyles({
+  gridColumn: '1',
+  gridRow: '1 / 3',
+});
+
+const profileCardHeadingStyles = createStyles({
+  ...system.type.body.large,
+  fontWeight: system.fontWeight.bold,
+  gridColumn: '2/3',
+  gridRow: '1',
+  margin: 0,
+});
+
+const profileCardBodyStyles = createStyles({
+  ...system.type.body.small,
+  gridColumn: '2',
+  gridRow: '2',
+  margin: 0,
+});
+
+interface ProfileCardProps {
+  id: string;
+  name: string;
+  bio: string;
+}
+
+const ProfileCard = ({id, name, bio}: ProfileCardProps) => (
+  <div className={profileCardStyles}>
+    <Avatar
+      size={Avatar.Size.xl}
+      url={`https://avatars.githubusercontent.com/u/${id}?v=4`}
+      altText={`${name}'s avatar`}
+      className={profileCardAvatarStyles}
+    />
+    <h3 className={profileCardHeadingStyles}>{name}</h3>
+    <p className={profileCardBodyStyles}>{bio}</p>
+  </div>
+);

package/dist/mdx/preview-react/divider/examples/CustomSpace.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const headingStyles = createStyles({
+  ...system.type.body.large,
+  fontWeight: system.fontWeight.bold,
+  margin: 0,
+});
+
+const bodyStyles = createStyles({
+  ...system.type.body.small,
+  margin: 0,
+});
+
+const customDividerSpace = createStyles({
+  margin: `0 0 ${system.space.x4}`,
+});
+
+export default () => {
+  return (
+    <section>
+      <h3 className={headingStyles}>Quote of the Day</h3>
+      <Divider cs={customDividerSpace} />
+      <p className={bodyStyles}>
+        "It is not our differences that divide us. It is our inability to recognize, accept, and
+        celebrate those differences." – Audre Lorde
+      </p>
+    </section>
+  );
+};

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>
+    </>
+  );
+};