@workday/canvas-kit-docs 9.0.0-alpha.411-next.13 → 9.0.0-alpha.413-next.15

package/dist/mdx/9.0-UPGRADE-GUIDE.mdx

@@ -8,7 +8,7 @@ any questions.
 - [New Components](#new-components)
   - [Table](#table)
 - [Updated Terms](#updated-terms)
-- [Removals](#Removals)
+- [Removals](#removals)
   - [Drawer](#drawer)
   - [Layout and Column](#layout-and-column)
   - [composeModelHooks](#composemodelhook)
@@ -22,6 +22,7 @@ any questions.
 - [Component Updates](#component-updates)
   - [Button](#button)
   - [Toast](#toast)
+  - [Collection](#collection)
 - [Utility Updates](#utility-updates)
   - [useTheme and getTheme](#usetheme-and-gettheme)
   - [useThemedRing](#usethemedring)
@@ -90,18 +91,15 @@ export default function App() {
           <Table.Header>Table Header</Table.Header>
           <Table.Header>Table Header</Table.Header>
         </Table.Row>
-        <Table.Divider />
         <Table.Row>
           <Table.Header>Table Header</Table.Header>
           <Table.Cell>Table Data Cell</Table.Cell>
         </Table.Row>
-        <Table.Divider />
         <Table.Row>
           <Table.Header>Table Header</Table.Header>
           <Table.Cell>Table Data Cell</Table.Cell>
         </Table.Row>
       </Table.Body>
-      <Table.Divider />
       <Table.Footer>
         <Table.Row>
           <Table.Header>Table Header</Table.Header>
@@ -287,6 +285,8 @@ return {
 `as const` instructs Typescript the type is `readonly`. Typescript knows readonly values or objects
 cannot be changed and will therefore narrow the type for you.
 
+---
+
 ## Token Updates
 
 ### Depth
@@ -374,6 +374,16 @@ previously used `actionText` or `onActionClick`. The codemod will also update im
 > **Note:** You will manually need to set `mode` to `alert` if your `Toast` conveys urgent and
 > important information such as an error.
 
+---
+
+### Collection
+
+Navigation was updated to use numerical indexes instead of string identifiers. The
+`model.state.cursorId` is left unchanged. The change is to support virtual lists where navigation
+knows where it needs to go, but the identifier may not be loaded yet. The mechanism for navigating
+is private and should not breaking anything. If you created a custom navigation manager, the
+signature has been changed.
+
 ## Utility Updates
 
 ### useTheme and getTheme

package/dist/mdx/react/dialog/Dialog.mdx

@@ -0,0 +1,54 @@
+import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+
+import {Dialog} from '@workday/canvas-kit-react/dialog';
+import Basic from './examples/Basic';
+import Focus from './examples/Focus';
+
+
+# Canvas Kit Dialog
+
+A Dialog component is a non-modal type of dialog that will not render the rest of the page inert
+while it is active. A Dialog should be used in situations where the task is not critical.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+### Basic Example
+
+[Modal](/components/popups/modal/) and Dialog are very similar: most of the examples from Modal can
+be adapted to Dialog by changing `Modal` to `Dialog` and replacing `Modal.Overlay` with
+`Dialog.Popper`.
+
+Unlike Modal, Dialog does _not_ render the rest of the page inert while it is active. Dialog should
+be used in situations where the task does not require immediate attention such as in the example
+below.
+
+<ExampleCodeBlock code={Basic} />
+
+### Focus Redirect
+
+Since Modal requires immediate attention, it will trap the keyboard focus inside the Modal until an
+action is taken. Dialog manages focus differently, however, since it does not require immediate
+attention.
+
+The following example shows how Dialog manages focus in and out of the component.
+
+<ExampleCodeBlock code={Focus} />
+
+Instead of trapping focus within the Dialog, it is effectively treated as an inline element next to
+its triggering `Dialog.Target` button. Tabbing out of the Dialog will close the popup and move focus
+to the next button.
+
+Dialog also adds an `aria-owns` to a `<div>` element which is rendered as a sibling of the
+`Dialog.Target` button. The `aria-owns` references the `Dialog.Card` and allows screen readers which
+[support aria-owns](/components/popups/popup/#focus-redirect) to navigate the Dialog as if it
+weren't portalled to the bottom of the document body.
+
+## Component API
+
+<SymbolDoc name="Dialog" fileName="/react/" />

package/dist/mdx/react/dialog/examples/Basic.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Dialog} from '@workday/canvas-kit-react/dialog';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const handleEmail = () => {
+    console.log('Email Submitted');
+  };
+  return (
+    <Dialog>
+      <Dialog.Target as={PrimaryButton}>Open for Offer</Dialog.Target>
+      <Dialog.Popper>
+        <Dialog.Card>
+          <Dialog.CloseIcon aria-label="Close" />
+          <Dialog.Heading paddingTop="m">Sign Up for 15% Off Your Next Order</Dialog.Heading>
+          <Dialog.Body>
+            <FormField label="Email">
+              <TextInput onChange={handleChange} value={value} />
+            </FormField>
+          </Dialog.Body>
+          <Flex gap="s" padding="xxs" marginTop="xxs">
+            <Dialog.CloseButton as={PrimaryButton} onClick={handleEmail}>
+              Submit
+            </Dialog.CloseButton>
+            <Dialog.CloseButton>Cancel</Dialog.CloseButton>
+          </Flex>
+        </Dialog.Card>
+      </Dialog.Popper>
+    </Dialog>
+  );
+};

package/dist/mdx/react/dialog/examples/Focus.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Dialog} from '@workday/canvas-kit-react/dialog';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const handleEmail = () => {
+    console.log('Email Submitted');
+  };
+  return (
+    <Flex gap="m">
+      <Dialog>
+        <Dialog.Target as={PrimaryButton}>Open for Offer</Dialog.Target>
+        <Dialog.Popper>
+          <Dialog.Card>
+            <Dialog.CloseIcon aria-label="Close" />
+            <Dialog.Heading paddingTop="m">Sign Up for 15% Off Your Next Order</Dialog.Heading>
+            <Dialog.Body>
+              <FormField label="Email">
+                <TextInput onChange={handleChange} value={value} />
+              </FormField>
+            </Dialog.Body>
+            <Flex gap="s" padding="xxs" marginTop="xxs">
+              <Dialog.CloseButton as={PrimaryButton} onClick={handleEmail}>
+                Submit
+              </Dialog.CloseButton>
+              <Dialog.CloseButton>Cancel</Dialog.CloseButton>
+            </Flex>
+          </Dialog.Card>
+        </Dialog.Popper>
+      </Dialog>
+      <PrimaryButton>Focus #1</PrimaryButton>
+      <PrimaryButton>Focus #2</PrimaryButton>
+    </Flex>
+  );
+};

package/dist/mdx/react/tabs/examples/DynamicTabs.tsx

@@ -69,7 +69,6 @@ export default () => {
           addTab
         );
       });
-      model.events.goTo({id: 'add'});
     }
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.0.0-alpha.411-next.13+45ee94ee",
+  "version": "9.0.0-alpha.413-next.15+76b571ed",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.411-next.13+45ee94ee",
-    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.411-next.13+45ee94ee",
-    "@workday/canvas-kit-react": "^9.0.0-alpha.411-next.13+45ee94ee",
+    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.413-next.15+76b571ed",
+    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.413-next.15+76b571ed",
+    "@workday/canvas-kit-react": "^9.0.0-alpha.413-next.15+76b571ed",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "45ee94ee899decb70dbf73bc22defa276f05899a"
+  "gitHead": "76b571ed215127f6badf7a3834a761709aac303d"
 }