@workday/canvas-kit-docs 14.1.4 → 14.1.6

package/dist/es6/lib/docs.js

@@ -391523,6 +391523,32 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             }
           ],
           "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "className",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "primitive",
+                "value": "string"
+              },
+              {
+                "kind": "primitive",
+                "value": "undefined"
+              }
+            ]
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "className",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/testing/lib/StaticStates.tsx"
+            }
+          ],
+          "tags": {}
         }
       ]
     }

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "14.1.4",
-    "@workday/canvas-kit-preview-react": "14.1.4",
-    "@workday/canvas-kit-react": "14.1.4",
-    "@workday/canvas-kit-react-fonts": "^14.1.4",
-    "@workday/canvas-kit-styling": "14.1.4",
+    "@workday/canvas-kit-labs-react": "14.1.6",
+    "@workday/canvas-kit-preview-react": "14.1.6",
+    "@workday/canvas-kit-react": "14.1.6",
+    "@workday/canvas-kit-react-fonts": "^14.1.6",
+    "@workday/canvas-kit-styling": "14.1.6",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "14.1.4",
-    "@workday/canvas-kit-preview-react": "14.1.4",
-    "@workday/canvas-kit-react": "14.1.4",
-    "@workday/canvas-kit-react-fonts": "^14.1.4",
-    "@workday/canvas-kit-styling": "14.1.4",
+    "@workday/canvas-kit-labs-react": "14.1.6",
+    "@workday/canvas-kit-preview-react": "14.1.6",
+    "@workday/canvas-kit-react": "14.1.6",
+    "@workday/canvas-kit-react-fonts": "^14.1.6",
+    "@workday/canvas-kit-styling": "14.1.6",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

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

@@ -38,6 +38,7 @@ visual reference of what's changed.**
   - [Expandable](#expandable)
   - [Hyperlink and External Hyperlink](#hyperlink-and-external-hyperlink)
   - [Loading Dots](#loading-dots)
+  - [Modals and Dialogs](#modals-and-dialogs)
   - [Pill (Preview)](#pill-preview)
   - [Search Form (Labs)](#search-form-labs-)
   - [Status Indicator (Preview)](#status-indicator-preview-)
@@ -650,6 +651,36 @@ instead.
 </Pill>
 ```
 
+### Modals and Dialogs
+
+Previously, the `usePopupStack` hook created a CSS class name that was passed to our Popups. We attached those theme styles to that class name. This allowed the theme to be available in our Popups. But it also created a cascade barrier that blocked the global theme from being applied to our Popup components.
+Because we now use global CSS variables, we no longer need this class name to provide the global theme to Popups. But we have to remove this generated class name to allow the global theme to be applied to Popups.
+
+
+> **Important:** Passing a `theme` to the `CanvasProvider` **will not** theme components in Modals
+> and Dialogs. You can either pass a `className` or define CSS variables at the root.
+
+**Before in v13**
+
+```tsx
+// When passing a theme to the Canvas Provider, the `usePopupStack` would grab the theme and generate a class to forward the theme to Modals and Dialogs. This would create a cascade barrier for any CSS variables deinfed at the root.
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'blue'}}}}}>
+  <Modal>//... rest of modal code</Modal>
+</CanvasProvider>
+```
+
+**After in v14**
+
+```tsx
+// If you wish to still theme you application and Modals, you can either define the CSS variables at the root level of your application or define a className and pass it to the CanvasProvider.
+:root {
+ --cnvs-brand-primary-base: blue;
+}
+
+<CanvasProvider>
+  <Modal>//... rest of modal code</Modal>
+</CanvasProvider>
+```
 ### Search Form (Labs) 🚨
 
 **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)

package/dist/mdx/react/_examples/mdx/ContextualHelp.mdx

@@ -0,0 +1,36 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import ContextualHelpTooltip from './examples/ContextualHelp/ContextualHelpTooltip';
+import ContextualHelpDialogFocusRedirect from './examples/ContextualHelp/ContextualHelpDialogFocusRedirect';
+import ContextualHelpDialogFocusTrap from './examples/ContextualHelp/ContextualHelpDialogFocusTrap';
+
+
+
+## Contextual Help
+
+### Tooltip
+A Canvas Kit `Tooltip` can be used to provide additional information about why an element is disabled. 
+We should not, however, put one directly onto a disabled element because disabled elements do not receive focus
+(meaning the tooltip content is not accessible to keyboard users). Instead, we should provide a button next to the disabled
+element and apply the `Tooltip` to the button.
+
+**Note: We should avoid passing the `type` prop to the `Tooltip`. The default behavior is to assign an `aria-label` to the button
+(which is what we want)**
+<ExampleCodeBlock code={ContextualHelpTooltip} />
+
+### Contextual Help Popup Without Focus Trap
+If one would like to provide a bit more content than a `Tooltip` will allow (such as buttons or links) a popup should be used.
+In this example, a `Dialog` is used in conjunction with the `useFocusRedirect` hook to display some text and a link. It will
+not trap focus; instead, it will close and focus the next element if the user tabs out or clicks away. A `Tooltip` is still
+used on the `Dialog.Target` component so that it remains accessible for screen readers.
+
+`Dialog` inserts an invisible `<div>` element right after the button with an `aria-owns` attribute pointing to the 
+`Dialog.Card`. This allows screen readers to read the popup contents in a logical order with the target. In other words, the 
+screen reader will announce the `Dialog` right after the open button instead of out of order.
+
+Additionally, we apply `aria-describedby` to our `Dialog.Target` to associate it with the `FormField.Label`.
+<ExampleCodeBlock code={ContextualHelpDialogFocusRedirect} />
+
+### Contextual Help Dialog With Focus Trap
+The `useFocusTrap` hook can be used in contextual help where trapping focus within the `Dialog` is the goal. In this case, 
+focus will remain in the `Dialog` until it is closed. This example is otherwise identical to the one above.
+<ExampleCodeBlock code={ContextualHelpDialogFocusTrap} />

package/dist/mdx/react/_examples/mdx/examples/ContextualHelp/ContextualHelpDialogFocusRedirect.tsx

@@ -0,0 +1,75 @@
+import {Hyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {infoIcon} from '@workday/canvas-system-icons-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+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 {system} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {Dialog, useDialogModel} from '@workday/canvas-kit-react/dialog';
+import {
+  useCloseOnEscape,
+  useCloseOnOutsideClick,
+  useFocusRedirect,
+  useInitialFocus,
+  useReturnFocus,
+} from '@workday/canvas-kit-react/popup';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+
+const containerStyles = createStyles({
+  flexDirection: 'row',
+  gap: system.space.x2,
+});
+
+const labelStyles = createStyles({
+  minWidth: 'unset',
+  width: '100%',
+});
+
+export function ContextualHelpDialogFocusRedirect() {
+  const dialogModel = useDialogModel();
+  useCloseOnOutsideClick(dialogModel);
+  useCloseOnEscape(dialogModel);
+  useInitialFocus(dialogModel);
+  useFocusRedirect(dialogModel);
+  useReturnFocus(dialogModel);
+
+  const labelId = useUniqueId();
+
+  return (
+    <Flex>
+      <FormField>
+        <Flex className={containerStyles}>
+          <FormField.Label className={labelStyles} id={labelId}>
+            Country
+          </FormField.Label>
+          <Dialog model={dialogModel}>
+            <Tooltip title="More Info">
+              <Dialog.Target
+                as={TertiaryButton}
+                size="small"
+                icon={infoIcon}
+                aria-describedby={labelId}
+              />
+            </Tooltip>
+            <Dialog.Popper placement="right">
+              <Dialog.Card>
+                <Dialog.CloseIcon aria-label="Close" />
+                <Dialog.Heading paddingTop={system.space.x6}>Information</Dialog.Heading>
+                <Dialog.Body>
+                  This dialog does not trap focus, so tabbing out of it will cause it to close
+                </Dialog.Body>
+                <Flex gap={system.space.x4} padding={system.space.x2} marginTop={system.space.x2}>
+                  <Hyperlink href="/">Link</Hyperlink>
+                </Flex>
+              </Dialog.Card>
+            </Dialog.Popper>
+          </Dialog>
+        </Flex>
+        <FormField.Field>
+          <FormField.Input as={TextInput} />
+        </FormField.Field>
+      </FormField>
+    </Flex>
+  );
+}

package/dist/mdx/react/_examples/mdx/examples/ContextualHelp/ContextualHelpDialogFocusTrap.tsx

@@ -0,0 +1,77 @@
+import {Hyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {infoIcon} from '@workday/canvas-system-icons-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+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 {system} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {
+  useCloseOnEscape,
+  useCloseOnOutsideClick,
+  useFocusTrap,
+  useInitialFocus,
+  usePopupModel,
+  useReturnFocus,
+} from '@workday/canvas-kit-react/popup';
+import {Dialog} from '@workday/canvas-kit-react/dialog';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+
+const containerStyles = createStyles({
+  flexDirection: 'row',
+  gap: system.space.x2,
+});
+
+const labelStyles = createStyles({
+  minWidth: 'unset',
+  width: '100%',
+});
+
+export function ContextualHelpDialogFocusTrap() {
+  const dialogModel = usePopupModel();
+  useCloseOnOutsideClick(dialogModel);
+  useCloseOnEscape(dialogModel);
+  useInitialFocus(dialogModel);
+  useFocusTrap(dialogModel);
+  useReturnFocus(dialogModel);
+
+  const labelId = useUniqueId();
+
+  return (
+    <Flex>
+      <FormField>
+        <Flex className={containerStyles}>
+          <FormField.Label className={labelStyles} id={labelId}>
+            Name
+          </FormField.Label>
+          <Dialog model={dialogModel}>
+            <Tooltip title="More Info">
+              <Dialog.Target
+                as={TertiaryButton}
+                size="small"
+                icon={infoIcon}
+                aria-describedby={labelId}
+              />
+            </Tooltip>
+            <Dialog.Popper placement="right">
+              <Dialog.Card>
+                <Dialog.CloseIcon aria-label="Close" />
+                <Dialog.Heading paddingTop={system.space.x6}>Information</Dialog.Heading>
+                <Dialog.Body>
+                  This dialog traps focus. Focus will only return to the rest of the page when the
+                  dialog is closed
+                </Dialog.Body>
+                <Flex gap={system.space.x4} padding={system.space.x2} marginTop={system.space.x2}>
+                  <Hyperlink href="/">Link</Hyperlink>
+                </Flex>
+              </Dialog.Card>
+            </Dialog.Popper>
+          </Dialog>
+        </Flex>
+        <FormField.Field>
+          <FormField.Input as={TextInput} />
+        </FormField.Field>
+      </FormField>
+    </Flex>
+  );
+}

package/dist/mdx/react/_examples/mdx/examples/ContextualHelp/ContextualHelpTooltip.tsx

@@ -0,0 +1,42 @@
+import {PrimaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {infoIcon} from '@workday/canvas-system-icons-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+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 {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import React from 'react';
+
+const outerContainerStyles = createStyles({
+  flexDirection: 'column',
+});
+
+const buttonContainerStyles = createStyles({
+  flexDirection: 'row',
+  gap: system.space.x1,
+  alignItems: 'center',
+});
+
+export function ContextualHelpTooltip() {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex className={outerContainerStyles}>
+      <FormField isRequired>
+        <FormField.Label>Favorite Food</FormField.Label>
+        <FormField.Input as={TextInput} onChange={handleChange}></FormField.Input>
+      </FormField>
+      <Flex className={buttonContainerStyles}>
+        <PrimaryButton disabled={!value}>Submit</PrimaryButton>
+        <Tooltip title="All fields must be filled before submitting" placement="right">
+          <TertiaryButton icon={infoIcon} size="small" aria-label="Info" disabled={!!value} />
+        </Tooltip>
+      </Flex>
+    </Flex>
+  );
+}

package/dist/mdx/react/common/mdx/Theming.mdx

@@ -134,6 +134,36 @@ const themedBrand = createStyles({
 </CanvasProvider>
 ```
 
+### Theming Modals and Dialogs
+
+Previously, the `usePopupStack` hook created a CSS class name that was passed to our Popups. We attached those theme styles to that class name. This allowed the theme to be available in our Popups. But it also created a cascade barrier that blocked the global theme from being applied to our Popup components.
+Because we now use global CSS variables, we no longer need this class name to provide the global theme to Popups. But we have to remove this generated class name to allow the global theme to be applied to Popups.
+
+> **Important:** Passing a `theme` to the `CanvasProvider` **will not** theme components in Modals
+> and Dialogs. You can either pass a `className` or define CSS variables at the root.
+
+**Before in v13**
+
+```tsx
+// When passing a theme to the Canvas Provider, the `usePopupStack` would grab the theme and generate a class to forward the theme to Modals and Dialogs. This would create a cascade barrier for any CSS variables deinfed at the root.
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'blue'}}}}}>
+  <Modal>//... rest of modal code</Modal>
+</CanvasProvider>
+```
+
+**After in v14**
+
+```tsx
+// If you wish to still theme you application and Modals, you can either define the CSS variables at the root level of your application or define a className and pass it to the CanvasProvider.
+:root {
+ --cnvs-brand-primary-base: blue;
+}
+
+<CanvasProvider>
+  <Modal>//... rest of modal code</Modal>
+</CanvasProvider>
+```
+
 ## CSS Token Structure
 
 Canvas Kit provides three layers of CSS variables.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.1.4",
+  "version": "14.1.6",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.1.4",
-    "@workday/canvas-kit-preview-react": "^14.1.4",
-    "@workday/canvas-kit-react": "^14.1.4",
-    "@workday/canvas-kit-styling": "^14.1.4",
+    "@workday/canvas-kit-labs-react": "^14.1.6",
+    "@workday/canvas-kit-preview-react": "^14.1.6",
+    "@workday/canvas-kit-react": "^14.1.6",
+    "@workday/canvas-kit-styling": "^14.1.6",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "^3.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "855de2d98a25417e8068eab7a4b65efb6a6b8c6f"
+  "gitHead": "74a7a93b6735770faecf184e4d74a4d0b1f04d86"
 }