@workday/canvas-kit-docs 14.3.9 → 14.3.11

package/dist/mdx/react/popup/examples/InlinePopup.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {
+  Popup,
+  usePopupModel,
+  useCloseOnEscape,
+  useCloseOnOutsideClick,
+  useInitialFocus,
+  useReturnFocus,
+  useFocusRedirect,
+} from '@workday/canvas-kit-react/popup';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Heading} from '@workday/canvas-kit-react/text';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const headingStyles = createStyles({
+  marginTop: system.space.zero,
+});
+
+const cardStyles = createStyles({
+  width: px2rem(320),
+});
+
+const flexStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x2,
+});
+
+const clipContainerStyles = createStyles({
+  padding: system.space.x4,
+  border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
+  height: px2rem(200),
+  position: 'relative',
+  overflow: 'clip',
+});
+
+const visibleContainerStyles = createStyles({
+  padding: system.space.x4,
+  border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
+  height: px2rem(200),
+  position: 'relative',
+  overflow: 'visible',
+});
+
+const scrollContainerStyles = createStyles({
+  padding: system.space.x4,
+  border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
+  height: px2rem(200),
+  position: 'relative',
+  overflow: 'scroll',
+});
+
+const comparisonLayoutStyles = createStyles({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+  gap: system.space.x6,
+  marginBottom: system.space.x4,
+});
+
+function SingleInlinePopup({
+  overflowLabel,
+  containerStyles,
+}: {
+  overflowLabel: string;
+  containerStyles: string;
+}) {
+  const initialFocusRef = React.useRef(null);
+  const model = usePopupModel({
+    initialFocusRef,
+  });
+
+  useCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useInitialFocus(model);
+  useReturnFocus(model);
+  useFocusRedirect(model);
+
+  return (
+    <Box cs={containerStyles}>
+      <Heading size="small" as="h4" cs={headingStyles}>
+        {overflowLabel}
+      </Heading>
+      <Popup model={model}>
+        <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
+        <Popup.Popper placement="top" portal={false}>
+          <Popup.Card cs={cardStyles}>
+            <Popup.Heading>Delete Item</Popup.Heading>
+            <Popup.Body>
+              <Box as="p">Are you sure you'd like to delete the item titled 'My Item'?</Box>
+            </Popup.Body>
+            <Flex cs={flexStyles}>
+              <Popup.CloseButton ref={initialFocusRef}>Cancel</Popup.CloseButton>
+              <Popup.CloseButton as={DeleteButton}>Delete</Popup.CloseButton>
+            </Flex>
+          </Popup.Card>
+        </Popup.Popper>
+      </Popup>
+    </Box>
+  );
+}
+
+export default () => {
+  return (
+    <>
+      <Flex cs={comparisonLayoutStyles}>
+        <SingleInlinePopup overflowLabel="overflow: clip" containerStyles={clipContainerStyles} />
+        <SingleInlinePopup
+          overflowLabel="overflow: scroll"
+          containerStyles={scrollContainerStyles}
+        />
+        <SingleInlinePopup
+          overflowLabel="overflow: visible"
+          containerStyles={visibleContainerStyles}
+        />
+      </Flex>
+      <p>
+        With <code>overflow: visible</code>, the popup can extend past the dashed border. With{' '}
+        <code>overflow: scroll</code> (or <code>hidden</code> / <code>clip</code>), the popup is
+        constrained and any overflow is clipped. The container uses <code>position: relative</code>{' '}
+        so it establishes a containing block for the positioned popup.
+      </p>
+    </>
+  );
+};

package/dist/mdx/react/popup/examples/MultiplePopups.tsx

@@ -1,42 +1,54 @@
-import {
-  Popup,
-  useCloseOnOutsideClick,
-  useCloseOnEscape,
-  usePopupModel,
-} from '@workday/canvas-kit-react/popup';
+import {Popup} from '@workday/canvas-kit-react/popup';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {useDialogModel} from '@workday/canvas-kit-react/dialog';
+import {useModalModel} from '@workday/canvas-kit-react/modal';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-export default () => {
-  const popup1 = usePopupModel();
-  const popup2 = usePopupModel();
+const flexStyles = createStyles({
+  gap: system.space.x4,
+});
 
-  useCloseOnOutsideClick(popup1);
-  useCloseOnEscape(popup1);
+const popupStyles = createStyles({
+  width: px2rem(400),
+});
 
-  useCloseOnOutsideClick(popup2);
-  useCloseOnEscape(popup2);
+export default () => {
+  const dialogModel = useDialogModel();
+  const modalModel = useModalModel();
 
   return (
-    <Flex gap="s">
-      <Popup model={popup1}>
-        <Popup.Target>Open Popup 1</Popup.Target>
+    <Flex cs={flexStyles}>
+      <Popup model={dialogModel}>
+        <Popup.Target>Focus Redirect Popup</Popup.Target>
         <Popup.Popper>
-          <Popup.Card aria-label="Popup 1">
+          <Popup.Card cs={popupStyles}>
             <Popup.CloseIcon aria-label="Close" size="small" />
+            <Popup.Heading>Focus Redirect Popup</Popup.Heading>
             <Popup.Body>
-              <p>Contents of Popup 1</p>
+              <p>
+                This popup uses the dialog model and will allow keyboard focus to escape when users
+                press Tab or Shift + Tab.
+              </p>
             </Popup.Body>
           </Popup.Card>
         </Popup.Popper>
       </Popup>
-      <Popup model={popup2}>
-        <Popup.Target>Open Popup 2</Popup.Target>
+      <Popup model={modalModel}>
+        <Popup.Target>Focus Trap Popup</Popup.Target>
         <Popup.Popper>
-          <Popup.Card aria-label="Popup 2">
+          <Popup.Card cs={popupStyles}>
             <Popup.CloseIcon aria-label="Close" size="small" />
+            <Popup.Heading>Focus Trap Popup</Popup.Heading>
             <Popup.Body>
-              <p>Contents of Popup 2</p>
+              <p>
+                This popup uses the modal model and will trap keyboard focus when users press Tab or
+                Shift + Tab.
+              </p>
             </Popup.Body>
+            <Flex>
+              <Popup.CloseButton>OK</Popup.CloseButton>
+            </Flex>
           </Popup.Card>
         </Popup.Popper>
       </Popup>

package/lib/ExampleCodeBlock.tsx

@@ -3,7 +3,7 @@ import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Card} from '@workday/canvas-kit-react/card';
-import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 import {vscDarkPlus} from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import {checkCircleIcon, copyIcon} from '@workday/canvas-system-icons-web';
@@ -22,14 +22,20 @@ import {CanvasProvider, defaultBranding} from '@workday/canvas-kit-react/common'
 
 const cardStencil = createStencil({
   base: {
+    // Lets the block shrink inside flex/grid doc layouts so content width does not force overflow.
+    minWidth: 0,
+    maxWidth: '100%',
     '[data-part="example-block"]': {
       boxShadow: system.depth[1],
       borderRadius: system.shape.x1,
       position: 'relative',
+      minWidth: 0,
       overflow: 'auto', // This allows for the entire ExampleCodeBlock to scroll on smaller viewports
     },
     '[data-part="example-block-container"]': {
+      minWidth: 0,
       overflow: 'auto',
+      padding: system.space.x1,
     },
     '[data-part="code-block"]': {
       display: 'none',
@@ -38,8 +44,9 @@ const cardStencil = createStencil({
     },
     '[data-part="code-toggle-stackblitz-btn-container"]': {
       position: 'absolute',
-      right: calc.negate(px2rem(1)),
-      bottom: calc.negate(px2rem(1)),
+      // Keep inside the padding box; negative inset was expanding scroll overflow by ~1px.
+      right: system.space.zero,
+      bottom: system.space.zero,
       display: 'flex',
       gap: system.space.x2,
     },
@@ -161,6 +168,8 @@ export const ExampleCodeBlock = ({code}: any) => {
                     lineHeight: cssVar(system.lineHeight.subtext.large),
                     margin: '0',
                     padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
+                    boxSizing: 'border-box',
+                    maxWidth: '100%',
                   }}
                   children={code.__RAW__}
                 />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.3.9",
+  "version": "14.3.11",
   "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.3.9",
-    "@workday/canvas-kit-preview-react": "^14.3.9",
-    "@workday/canvas-kit-react": "^14.3.9",
-    "@workday/canvas-kit-styling": "^14.3.9",
+    "@workday/canvas-kit-labs-react": "^14.3.11",
+    "@workday/canvas-kit-preview-react": "^14.3.11",
+    "@workday/canvas-kit-react": "^14.3.11",
+    "@workday/canvas-kit-styling": "^14.3.11",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "^3.1.6",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "8ee9cf8e0702ff053049eaee7ac2f86e5dd3ff31"
+  "gitHead": "0a0ab9c73205f581f7a50d7a2e7b7ca2af6345c1"
 }