@workday/canvas-kit-docs 6.3.6 → 7.0.0-alpha.0-next.4

package/dist/mdx/react/modal/examples/BodyOverflow.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {Modal} from '@workday/canvas-kit-react/modal';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {HStack, VStack, Stack, Box} from '@workday/canvas-kit-labs-react';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const handleDelete = () => {
+    console.log('Deleted item');
+  };
+
+  return (
+    <Modal>
+      <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+      <Modal.Overlay>
+        <Modal.Card>
+          <Modal.CloseIcon aria-label="Close" />
+          <Modal.Heading>Delete Item</Modal.Heading>
+          <Modal.Body>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+          </Modal.Body>
+          <HStack spacing="s" paddingTop="s">
+            <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
+              Delete
+            </Modal.CloseButton>
+            <Modal.CloseButton>Cancel</Modal.CloseButton>
+          </HStack>
+        </Modal.Card>
+      </Modal.Overlay>
+    </Modal>
+  );
+};

package/dist/mdx/react/modal/examples/CustomFocus.tsx

@@ -3,7 +3,8 @@ import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import FormField from '@workday/canvas-kit-react/form-field';
 import TextInput from '@workday/canvas-kit-react/text-input';
-import {HStack} from '@workday/canvas-kit-labs-react';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {Box} from '@workday/canvas-kit-labs-react/common';
 
 export default () => {
   const ref = React.useRef<HTMLInputElement>(null);
@@ -24,7 +25,9 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
-            <p>Enter name to confirm deletion</p>
+            <Box as="p" marginTop={0} marginBottom="m">
+              Enter name to confirm deletion
+            </Box>
             <FormField label="Item name">
               <TextInput ref={ref} value={value} onChange={e => setValue(e.currentTarget.value)} />
             </FormField>

package/dist/mdx/react/modal/examples/FullOverflow.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {Modal} from '@workday/canvas-kit-react/modal';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react';
+
+export default () => {
+  const handleDelete = () => {
+    console.log('Deleted item');
+  };
+
+  return (
+    <Modal>
+      <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+      <Modal.OverflowOverlay>
+        <Modal.Card maxHeight="inherit" height="inherit">
+          <Modal.CloseIcon aria-label="Close" />
+          <Modal.Heading>Delete Item</Modal.Heading>
+          <Modal.Body>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+          </Modal.Body>
+          <HStack spacing="s">
+            <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
+              Delete
+            </Modal.CloseButton>
+            <Modal.CloseButton>Cancel</Modal.CloseButton>
+          </HStack>
+        </Modal.Card>
+      </Modal.OverflowOverlay>
+    </Modal>
+  );
+};

package/dist/mdx/react/modal/examples/ReturnFocus.tsx

@@ -3,6 +3,7 @@ import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {Box} from '@workday/canvas-kit-labs-react/common';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 
 export default () => {
@@ -39,7 +40,9 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
-            <p>Are you sure you want to delete the item?</p>
+            <Box as="p" marginTop={0} marginBottom="m">
+              Are you sure you want to delete the item?
+            </Box>
             <HStack spacing="s">
               <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete

package/dist/mdx/react/modal/examples/WithoutCloseIcon.tsx

@@ -10,7 +10,8 @@ import {
   useDisableBodyScroll,
 } from '@workday/canvas-kit-react/popup';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {Box} from '@workday/canvas-kit-labs-react/common';
 
 export default () => {
   const model = usePopupModel();
@@ -32,7 +33,9 @@ export default () => {
         <Modal.Card>
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
-            <p>Are you sure you want to delete the item?</p>
+            <Box as="p" marginTop={0} marginBottom="m">
+              Are you sure you want to delete the item?
+            </Box>
             <HStack spacing="s">
               <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete

package/dist/mdx/react/skeleton/examples/Simulation.tsx

@@ -1,6 +1,5 @@
-/** @jsx jsx */
 import React from 'react';
-import {jsx, keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/core';
 
 import {
   Card,
@@ -9,6 +8,7 @@ import {
   SecondaryButton,
   SystemIconCircle,
   TextInput,
+  styled,
 } from '@workday/canvas-kit-react';
 
 import {Box, Flex} from '@workday/canvas-kit-labs-react';
@@ -16,6 +16,7 @@ import {Box, Flex} from '@workday/canvas-kit-labs-react';
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
 import {borderRadius, space, type} from '@workday/canvas-kit-react/tokens';
 import {patternIcon} from '@workday/canvas-system-icons-web';
+import {StyledType} from '@workday/canvas-kit-react/common';
 
 const fadeOut = keyframes`
   from {
@@ -27,6 +28,10 @@ const fadeOut = keyframes`
   }
 `;
 
+const StyledSimulation = styled(Box)<StyledType>({
+  pointerEvents: 'none',
+});
+
 export default () => {
   const [loading, setLoading] = React.useState(true);
   const [loadTime, setLoadTime] = React.useState('3000');
@@ -96,16 +101,12 @@ export default () => {
               </Box>
             )}
 
-            <Box
+            <StyledSimulation
               position="absolute"
               top={0}
               left={0}
               width="100%"
-              css={{
-                pointerEvents: 'none',
-                animation: !loading ? `${fadeOut} 150ms ease-out` : undefined,
-                animationFillMode: !loading ? 'forwards' : undefined,
-              }}
+              animation={!loading ? `${fadeOut} 150ms ease-out forwards` : undefined}
             >
               <Skeleton>
                 <Flex alignItems="center">
@@ -120,7 +121,7 @@ export default () => {
                 </Flex>
                 <Skeleton.Text lineCount={3} />
               </Skeleton>
-            </Box>
+            </StyledSimulation>
           </Box>
         </Card.Body>
       </Card>

package/dist/mdx/react/status-indicator/StatusIndicator.mdx

@@ -3,6 +3,7 @@ import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
 import Basic from './examples/Basic';
 import Icon from './examples/Icon';
 import Emphasis from './examples/Emphasis';
+import MaxWidth from './examples/MaxWidth';
 
 
 # Canvas Kit Status Indicator
@@ -54,6 +55,17 @@ label.
 
 <ExampleCodeBlock code={Icon} />
 
+### Max Width
+
+By default, the maximum width of a Status Indicator is `200px`. When the text in the StatusIndicator
+exceeds the max width, it will be truncated with an ellipsis. This maxWidth can be customized.
+
+Avoid truncation wherever possible by using shorter text in Status Indicators. In the case where
+truncation is necessary, you should use an `OverflowTooltip`. For the full text to be accessible
+when you do this, you should make the tooltip focusable with `tabIndex`.
+
+<ExampleCodeBlock code={MaxWidth} />
+
 ## Props
 
 Undocumented props are spread to the outermost element rendered by Status Indicator.

package/dist/mdx/react/status-indicator/examples/MaxWidth.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
+import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+const StatusIndicators = styled('div')({
+  '& > *': {
+    margin: space.xxs,
+  },
+});
+
+export default () => {
+  return (
+    <StatusIndicators>
+      <StatusIndicator
+        label="Longer Than Normal Ellipsized Status"
+        type={StatusIndicator.Type.Blue}
+        maxWidth={250}
+      />
+      <OverflowTooltip>
+        <StatusIndicator
+          label="Overflow Tooltip On Hover/Focus Status"
+          type={StatusIndicator.Type.Green}
+          tabIndex={0}
+        />
+      </OverflowTooltip>
+    </StatusIndicators>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.3.6",
+  "version": "7.0.0-alpha.0-next.4+bdd1ec94",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^6.3.6"
+    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.4+bdd1ec94"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -58,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "3322ef6ba113940373412840edd14d35a7a3093c"
+  "gitHead": "bdd1ec9493a5a2dc4d67e4cc33adcba13efee4b7"
 }

package/dist/mdx/preview-react/_examples/SelectWithFormik.mdx

@@ -1,8 +0,0 @@
-import SelectWithFormik from './examples/SelectWithFormik';
-
-
-# Canvas Kit Examples
-
-## Select With Formik
-
-<ExampleCodeBlock code={SelectWithFormik} />

package/dist/mdx/preview-react/_examples/TextInputWithFormik.mdx

@@ -1,8 +0,0 @@
-import TextInputWithFormik from './examples/TextInputWithFormik';
-
-
-# Canvas Kit Examples
-
-## Text Input With Formik
-
-<ExampleCodeBlock code={TextInputWithFormik} />

package/dist/mdx/preview-react/_examples/examples/SelectWithFormik.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import {useFormik} from 'formik';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {
-  FormField,
-  useFormFieldInput,
-  useFormFieldModel,
-} from '@workday/canvas-kit-preview-react/form-field';
-
-export default () => {
-  const formik = useFormik({
-    initialValues: {
-      selectedBook: '',
-    },
-    onSubmit: data => {
-      console.log(data);
-    },
-  });
-
-  const model = useFormFieldModel();
-  const formFieldInputProps = useFormFieldInput(model);
-
-  return (
-    <form onSubmit={formik.handleSubmit}>
-      <FormField orientation="vertical" alignItems="stretch">
-        <FormField.Label>Choose a book</FormField.Label>
-        <Select
-          name="selectedBook"
-          options={bookList}
-          onChange={event => formik.setFieldValue('selectedBook', event.currentTarget.value)}
-          value={formik.values.selectedBook}
-          grow
-          {...formFieldInputProps}
-        />
-      </FormField>
-    </form>
-  );
-};
-
-const bookList = [
-  {label: 'Dessert Person by Claire Saffitz', value: 'dessert person'},
-  {label: 'Elements of Pizza by Ken Forkish', value: 'the elements of pizza'},
-  {label: 'Flour Water Salt Yeast by Ken Forkish', value: 'flour water salt yeast'},
-  {label: 'Mastering Pasta by Marc Verti', value: 'mastering pasta'},
-  {label: 'Patisserie by Christophe Felder', value: 'patisserie'},
-  {label: 'Tartine by Elisabeth Prueitt & Chad Robertson', value: 'tartine'},
-];

package/dist/mdx/preview-react/form-field/examples/Select.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import {
-  FormField,
-  useFormFieldInput,
-  useFormFieldModel,
-} from '@workday/canvas-kit-preview-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-
-export default () => {
-  const [selected, setSelected] = React.useState(wineList[0].value);
-  // Hoist the FormField model so we can pass it to `useFormFieldInput`
-  const model = useFormFieldModel({isRequired: true});
-  // Get all the FormField-related input props to pass to `Select`
-  const formFieldInputProps = useFormFieldInput(model);
-
-  return (
-    <FormField orientation="vertical" model={model}>
-      <FormField.Label>Choose a wine</FormField.Label>
-      <Select
-        options={wineList}
-        value={selected}
-        onChange={event => setSelected(event.currentTarget.value)}
-        {...formFieldInputProps}
-      />
-      <FormField.Hint>When in doubt, go with the Chianti.</FormField.Hint>
-    </FormField>
-  );
-};
-
-export default [
-  {label: 'Beaujolais', value: 'beaujolais'},
-  {label: 'Bordeaux', value: 'bordeaux'},
-  {label: 'Cabernet Sauvignon', value: 'cabernet sauvignon'},
-  {label: 'Champagne', value: 'champagne'},
-  {label: 'Chardonnay', value: 'chardonnay'},
-  {label: 'Chianti', value: 'chianti'},
-  {label: 'Malbec', value: 'malbec'},
-  {label: 'Merlot', value: 'merlot'},
-  {label: 'Pinot Grigio', value: 'pinot grigio'},
-  {label: 'Pinot Gris', value: 'pinot gris'},
-  {label: 'Pinot Noir', value: 'pinot noir'},
-  {label: 'Primitivo', value: 'primitivo'},
-  {label: 'Prosecco', value: 'prosecco'},
-  {label: 'Riesling', value: 'riesling'},
-  {label: 'Rioja', value: 'rioja'},
-  {label: 'Rosé', value: 'rosé'},
-  {label: 'Sauvignon Blanc', value: 'sauvignon blanc'},
-  {label: 'Syrah', value: 'syrah'},
-  {label: 'Zinfandel', value: 'zinfandel'},
-];