@workday/canvas-kit-docs 12.0.0-alpha.862-next.0 → 12.0.0-alpha.899-next.0

package/dist/mdx/react/text-input/examples/Icons.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {mailIcon} from '@workday/canvas-system-icons-web';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {InputGroup} from '@workday/canvas-kit-react/text-input';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 
@@ -9,7 +9,9 @@ export default () => {
   return (
     <FormField>
       <FormField.Label>Email</FormField.Label>
-      <InputGroupFormFieldForwarder />
+      <FormField.Field>
+        <InputGroupFormFieldForwarder />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/text-input/examples/LabelPosition.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export default () => {
@@ -10,9 +10,12 @@ export default () => {
   };
 
   return (
-    <FormField orientation="horizontal">
+    <FormField orientation="horizontalStart">
       <FormField.Label>Email</FormField.Label>
-      <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+      <FormField.Field>
+        <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+        <FormField.Hint>Add a valid email</FormField.Hint>
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/text-input/examples/Placeholder.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export default () => {
@@ -12,12 +12,14 @@ export default () => {
   return (
     <FormField>
       <FormField.Label>Email</FormField.Label>
-      <FormField.Input
-        as={TextInput}
-        onChange={handleChange}
-        placeholder="user@email.com"
-        value={value}
-      />
+      <FormField.Field>
+        <FormField.Input
+          as={TextInput}
+          onChange={handleChange}
+          placeholder="user@email.com"
+          value={value}
+        />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/text-input/examples/RefForwarding.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export default () => {
@@ -19,7 +19,9 @@ export default () => {
     <>
       <FormField>
         <FormField.Label>Email</FormField.Label>
-        <FormField.Input as={TextInput} onChange={handleChange} ref={ref} value={value} />
+        <FormField.Field>
+          <FormField.Input as={TextInput} onChange={handleChange} ref={ref} value={value} />
+        </FormField.Field>
       </FormField>
       <PrimaryButton onClick={handleClick}>Focus Text Input</PrimaryButton>
     </>

package/dist/mdx/react/text-input/examples/Required.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export default () => {
@@ -12,7 +12,9 @@ export default () => {
   return (
     <FormField isRequired={true}>
       <FormField.Label>Email</FormField.Label>
-      <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+      <FormField.Field>
+        <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/toast/toast.mdx

@@ -1,5 +1,4 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import {Toast} from '@workday/canvas-kit-react/toast';
 import Basic from './examples/Basic';
 import ToastAlert from './examples/ToastAlert';
@@ -8,7 +7,6 @@ import WithActionLinkAndCloseIcon from './examples/WithActionLinkAndCloseIcon';
 import WithPopper from './examples/WithPopper';
 import RTL from './examples/RTL';
 
-
 # Canvas Kit Toast
 
 `Toast` is a [compound component](/getting-started/for-developers/resources/compound-components/)
@@ -57,9 +55,10 @@ An `alert` `Toast` will wrap the message within an `assertive` ARIA live region
 
 Set the `mode` prop to `dialog` to convey the presence of a follow-up action. If you use this
 `mode`, you need to add an `aria-label`. This `aria-label` should be additional information for the
-`Toast` such as `notification`. The `Toast` will also add an `aria-describedby` that links the `Toast` to `Toast.Message`
-so that it is read out to screen readers. The `aria-label` should be different that the contents of
-the `Toast` so there is no duplication being read out by screen readers.
+`Toast` such as `notification`. The `Toast` will also add an `aria-describedby` that links the
+`Toast` to `Toast.Message` so that it is read out to screen readers. The `aria-label` should be
+different that the contents of the `Toast` so there is no duplication being read out by screen
+readers.
 
 <ExampleCodeBlock code={ToastDialog} />
 

package/dist/mdx/react/tokens/Tokens.mdx

@@ -1,5 +1,4 @@
-import {InformationHighlight} from '@workday/canvas-kit-docs';
-import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
+import {ExampleCodeBlock, InformationHighlight} from '@workday/canvas-kit-docs';import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
 import Overview from './examples/Overview';
 
 

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -1,8 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-
-import Default from './examples/Default';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';import Default from './examples/Default';
 import CustomContent from './examples/CustomContent';
 import DelayedTooltip from './examples/DelayedTooltip';
 import DescribeType from './examples/DescribeType';

package/dist/mdx/style-props/STYLE_PROPS.mdx

@@ -1,5 +1,5 @@
-import {StylePropsTable} from '@workday/canvas-kit-docs';
-// style props for tables
+import {ExampleCodeBlock, StylePropsTable} from '@workday/canvas-kit-docs';
+
 import {
   backgroundStyleFnConfigs,
   borderStyleFnConfigs,
@@ -15,20 +15,20 @@ import {
   spaceStyleFnConfigs,
   textStyleFnConfigs,
 } from '@workday/canvas-kit-react/layout';
-// examples
-import BackgroundExample from './examples/Background';
-import BorderExample from './examples/Border';
-import ColorExample from './examples/Color';
-import DepthExample from './examples/Depth';
+
+import Background from './examples/Background';
+import Border from './examples/Border';
+import Color from './examples/Color';
+import Depth from './examples/Depth';
 import FlexExample from './examples/Flex';
-import FlexItemExample from './examples/FlexItem';
+import FlexItem from './examples/FlexItem';
 import GridExample from './examples/Grid';
-import GridItemExample from './examples/GridItem';
-import LayoutExample from './examples/Layout';
-import OtherExample from './examples/Other';
-import PositionExample from './examples/Position';
-import SpaceExample from './examples/Space';
-import TextExample from './examples/Text';
+import GridItem from './examples/GridItem';
+import Layout from './examples/Layout';
+import Other from './examples/Other';
+import Position from './examples/Position';
+import Space from './examples/Space';
+import Text from './examples/Text';
 
 
 # Style Props
@@ -59,7 +59,7 @@ supported.
 
 Background style props allow you to adjust the background styles of components.
 
-<ExampleCodeBlock code={BackgroundExample} />
+<ExampleCodeBlock code={Background} />
 
 <StylePropsTable styleProps={backgroundStyleFnConfigs} />
 
@@ -67,7 +67,7 @@ Background style props allow you to adjust the background styles of components.
 
 Border style props allow you to adjust the border styles of components.
 
-<ExampleCodeBlock code={BorderExample} />
+<ExampleCodeBlock code={Border} />
 
 <StylePropsTable styleProps={borderStyleFnConfigs} />
 
@@ -75,7 +75,7 @@ Border style props allow you to adjust the border styles of components.
 
 Color style props allow you to adjust the color styles of components.
 
-<ExampleCodeBlock code={ColorExample} />
+<ExampleCodeBlock code={Color} />
 
 <StylePropsTable styleProps={colorStyleFnConfigs} />
 
@@ -83,7 +83,7 @@ Color style props allow you to adjust the color styles of components.
 
 Depth style props allow you to adjust the depth styles of components.
 
-<ExampleCodeBlock code={DepthExample} />
+<ExampleCodeBlock code={Depth} />
 
 <StylePropsTable styleProps={depthStyleFnConfigs} />
 
@@ -99,7 +99,7 @@ Flex style props allow you to adjust the flex styles of components.
 
 Flex item style props allow you to adjust the flex item styles of components.
 
-<ExampleCodeBlock code={FlexItemExample} />
+<ExampleCodeBlock code={FlexItem} />
 
 <StylePropsTable styleProps={flexItemStyleFnConfigs} />
 
@@ -115,7 +115,7 @@ Grid style props allow you to adjust the grid styles of components.
 
 Grid item style props allow you to adjust the grid item styles of components.
 
-<ExampleCodeBlock code={GridItemExample} />
+<ExampleCodeBlock code={GridItem} />
 
 <StylePropsTable styleProps={gridItemStyleFnConfigs} />
 
@@ -123,7 +123,7 @@ Grid item style props allow you to adjust the grid item styles of components.
 
 Layout style props allow you to adjust the layout styles of components.
 
-<ExampleCodeBlock code={LayoutExample} />
+<ExampleCodeBlock code={Layout} />
 
 <StylePropsTable styleProps={layoutStyleFnConfigs} />
 
@@ -131,7 +131,7 @@ Layout style props allow you to adjust the layout styles of components.
 
 Other style props allow you to adjust the other, miscellaneous styles of components.
 
-<ExampleCodeBlock code={OtherExample} />
+<ExampleCodeBlock code={Other} />
 
 <StylePropsTable styleProps={otherStyleFnConfigs} />
 
@@ -139,7 +139,7 @@ Other style props allow you to adjust the other, miscellaneous styles of compone
 
 Position style props allow you to adjust the position styles of components.
 
-<ExampleCodeBlock code={PositionExample} />
+<ExampleCodeBlock code={Position} />
 
 <StylePropsTable styleProps={positionStyleFnConfigs} />
 
@@ -147,7 +147,7 @@ Position style props allow you to adjust the position styles of components.
 
 Space style props allow you to adjust the space styles of components.
 
-<ExampleCodeBlock code={SpaceExample} />
+<ExampleCodeBlock code={Space} />
 
 <StylePropsTable styleProps={spaceStyleFnConfigs} />
 
@@ -155,6 +155,6 @@ Space style props allow you to adjust the space styles of components.
 
 Text style props allow you to adjust the text styles of components.
 
-<ExampleCodeBlock code={TextExample} />
+<ExampleCodeBlock code={Text} />
 
 <StylePropsTable styleProps={textStyleFnConfigs} />

package/dist/mdx/style-props/examples/Background.tsx

@@ -10,25 +10,18 @@ const baseStyles = {
   padding: 'xs',
 };
 
-export default () => (
-  <>
-  <Box
-    backgroundColor="cinnamon300"
-    {...baseStyles}
-  >
-    Cinnamon 300
-  </Box>
-  <Box
-    backgroundColor="sourLemon300"
-    {...baseStyles}
-  >
-    Sour Lemon 300
-  </Box>
-  <Box
-    backgroundColor="blueberry300"
-    {...baseStyles}
-  >
-    Blueberry 300
-  </Box>
-  </>
-);
+export default () => {
+  return (
+    <>
+      <Box backgroundColor="cinnamon300" {...baseStyles}>
+        Cinnamon 300
+      </Box>
+      <Box backgroundColor="sourLemon300" {...baseStyles}>
+        Sour Lemon 300
+      </Box>
+      <Box backgroundColor="blueberry300" {...baseStyles}>
+        Blueberry 300
+      </Box>
+    </>
+  );
+};

package/dist/mdx/style-props/examples/Border.tsx

@@ -12,28 +12,13 @@ const baseStyles = {
 
 export default () => (
   <>
-    <Box
-      borderRadius="m"
-      border="solid 4px"
-      borderColor="cinnamon300"
-      {...baseStyles}
-    >
+    <Box borderRadius="m" border="solid 4px" borderColor="cinnamon300" {...baseStyles}>
       Cinnamon 300
     </Box>
-    <Box
-      borderRadius="m"
-      border="solid 4px"
-      borderColor="sourLemon300"
-      {...baseStyles}
-    >
+    <Box borderRadius="m" border="solid 4px" borderColor="sourLemon300" {...baseStyles}>
       Sour Lemon 300
     </Box>
-    <Box
-      borderRadius="m"
-      border="solid 4px"
-      borderColor="blueberry300"
-      {...baseStyles}
-    >
+    <Box borderRadius="m" border="solid 4px" borderColor="blueberry300" {...baseStyles}>
       Blueberry 300
     </Box>
   </>

package/dist/mdx/style-props/examples/Color.tsx

@@ -11,26 +11,14 @@ const baseStyles = {
 
 export default () => (
   <>
-  <Box
-    backgroundColor="cinnamon300"
-    color="blackPepper500"
-    {...baseStyles}
-  >
-    Cinnamon 300
-  </Box>
-  <Box
-    backgroundColor="sourLemon300"
-    color="blackPepper500"
-    {...baseStyles}
-  >
-    Sour Lemon 300
-  </Box>
-  <Box
-    backgroundColor="blueberry300"
-    color="blackPepper500"
-    {...baseStyles}
-  >
-    Blueberry 300
-  </Box>
+    <Box backgroundColor="cinnamon300" color="blackPepper500" {...baseStyles}>
+      Cinnamon 300
+    </Box>
+    <Box backgroundColor="sourLemon300" color="blackPepper500" {...baseStyles}>
+      Sour Lemon 300
+    </Box>
+    <Box backgroundColor="blueberry300" color="blackPepper500" {...baseStyles}>
+      Blueberry 300
+    </Box>
   </>
 );

package/dist/mdx/style-props/examples/Flex.tsx

@@ -11,19 +11,37 @@ const baseStyles = {
 export default () => (
   <Flex columnGap="xs">
     <Flex flexDirection="column" rowGap="xs" flex={1}>
-      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>1</Flex.Item>
-      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>1</Flex.Item>
-      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>1</Flex.Item>
+      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
+      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
+      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
     </Flex>
     <Flex flexDirection="column" rowGap="xs" flex={2}>
-      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>2</Flex.Item>
-      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>2</Flex.Item>
-      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>2</Flex.Item>
+      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>
+        2
+      </Flex.Item>
+      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>
+        2
+      </Flex.Item>
+      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>
+        2
+      </Flex.Item>
     </Flex>
     <Flex flexDirection="column" rowGap="xs" flex={1}>
-      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>1</Flex.Item>
-      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>1</Flex.Item>
-      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>1</Flex.Item>
+      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
+      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
+      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
     </Flex>
   </Flex>
 );

package/dist/mdx/style-props/examples/FlexItem.tsx

@@ -11,18 +11,34 @@ const baseStyles = {
 export default () => (
   <Flex flexDirection="column" rowGap="xs">
     <Flex columnGap="xs">
-      <Flex.Item backgroundColor="cinnamon300" flex={1} textAlign="center" {...baseStyles}>1</Flex.Item>
-      <Flex.Item backgroundColor="sourLemon300" flex={2} textAlign="center" {...baseStyles}>2</Flex.Item>
-      <Flex.Item backgroundColor="blueberry300" flex={1} textAlign="center" {...baseStyles}>1</Flex.Item>
+      <Flex.Item backgroundColor="cinnamon300" flex={1} textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
+      <Flex.Item backgroundColor="sourLemon300" flex={2} textAlign="center" {...baseStyles}>
+        2
+      </Flex.Item>
+      <Flex.Item backgroundColor="blueberry300" flex={1} textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
     </Flex>
     <Flex columnGap="xs">
-      <Flex.Item backgroundColor="cinnamon300" flex={2} textAlign="center" {...baseStyles}>2</Flex.Item>
-      <Flex.Item backgroundColor="sourLemon300" flex={1} textAlign="center" {...baseStyles}>1</Flex.Item>
-      <Flex.Item backgroundColor="blueberry300" flex={2} textAlign="center" {...baseStyles}>2</Flex.Item>
+      <Flex.Item backgroundColor="cinnamon300" flex={2} textAlign="center" {...baseStyles}>
+        2
+      </Flex.Item>
+      <Flex.Item backgroundColor="sourLemon300" flex={1} textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
+      <Flex.Item backgroundColor="blueberry300" flex={2} textAlign="center" {...baseStyles}>
+        2
+      </Flex.Item>
     </Flex>
     <Flex columnGap="xs">
-      <Flex.Item backgroundColor="cinnamon300" flex={1} textAlign="center" {...baseStyles}>1</Flex.Item>
-      <Flex.Item backgroundColor="blueberry300" flex={1} textAlign="center" {...baseStyles}>1</Flex.Item>
+      <Flex.Item backgroundColor="cinnamon300" flex={1} textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
+      <Flex.Item backgroundColor="blueberry300" flex={1} textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
     </Flex>
   </Flex>
 );

package/dist/mdx/style-props/examples/Position.tsx

@@ -47,4 +47,4 @@ export default () => {
       </Box>
     </>
   );
-};
+};

package/dist/mdx/style-props/examples/Space.tsx

@@ -11,13 +11,19 @@ const baseStyles = {
 export default () => (
   <>
     <Box backgroundColor="cinnamon300" margin="xxs" padding="s" textAlign="center" {...baseStyles}>
-      <Box border="dotted 2px" borderColor="blackPepper500">Small</Box>
+      <Box border="dotted 2px" borderColor="blackPepper500">
+        Small
+      </Box>
     </Box>
     <Box backgroundColor="sourLemon300" margin="xxs" padding="m" textAlign="center" {...baseStyles}>
-      <Box border="dotted 2px" borderColor="blackPepper500">Medium</Box>
+      <Box border="dotted 2px" borderColor="blackPepper500">
+        Medium
+      </Box>
     </Box>
     <Box backgroundColor="blueberry300" margin="xxs" padding="l" textAlign="center" {...baseStyles}>
-      <Box border="dotted 2px" borderColor="blackPepper500">Large</Box>
+      <Box border="dotted 2px" borderColor="blackPepper500">
+        Large
+      </Box>
     </Box>
   </>
 );

package/dist/mdx/welcome.mdx

@@ -0,0 +1,48 @@
+import Readme from '../../../README.md';
+import Markdown from '../../../utils/storybook/Markdown.tsx';
+import {WelcomePage} from './welcomePage';
+import {InstallBlock} from './installBlock';
+import {version} from '../../../lerna.json';
+
+
+<WelcomePage />
+
+### Canvas Provider
+
+The `<CanvasProvider>` is required for proper branding support. Furthermore, if you use Emotion for
+styling your components, the `<CanvasProvider>` ensures your styles will merge as expected. Note:
+Custom use of `<CacheProvider>` provided by Emotion is not supported. `@workday/canvas-kit-styling`
+owns the creating of the cache reference. This ensures both static styling and Emotion’s dynamic
+styling solutions work together. In most cases you'll want to wrap your application at the root
+level in `<CanvasProvider>`.
+
+```tsx
+import * as React from 'react';
+import {
+  CanvasProvider,
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
+// Ensure CSS variables are defined. You Can also do this at the root index.css
+import '@workday/canvas-tokens-web/css/base/_variables.css';
+import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/system/_variables.css';
+
+export const App = () => {
+  // useTheme is filling in the Canvas theme object if any keys are missing
+  const canvasTheme: PartialEmotionCanvasTheme = useTheme({
+    canvas: {
+      // Switch to `ContentDirection.RTL` to change direction
+      direction: ContentDirection.LTR,
+    },
+  });
+  return (
+    <CanvasProvider theme={canvasTheme}>
+        <main>
+          <p>Get Started With Canvas Kit</p>
+        </main>
+    </CanvasProvider>
+  );
+};
+```

package/index.ts

@@ -1,3 +1,4 @@
+export {ExampleCodeBlock} from './lib/ExampleCodeBlock';
 export * from './lib/specs';
 export * from './lib/InformationHighlight';
 export * from './lib/Specifications';