@workday/canvas-kit-docs 11.0.0-alpha.790-next.0 → 11.0.0-alpha.793-next.0

package/dist/mdx/react/combobox/examples/Autocomplete.tsx

@@ -17,6 +17,8 @@ import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
 const fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];
@@ -44,6 +46,20 @@ const AutoCompleteInput = createSubcomponent(TextInput)({
   return <Combobox.Input as={Element} {...elemProps} />;
 });
 
+const styleOverrides = {
+  inputGroupInner: createStyles({
+    width: px2rem(20),
+    transition: 'opacity 100ms ease',
+  }),
+  loadingDots: createStyles({
+    display: 'flex',
+    transform: 'scale(0.3)',
+  }),
+  comboboxMenuList: createStyles({
+    maxHeight: px2rem(200),
+  }),
+};
+
 export default () => {
   const {model, loader} = useComboboxLoader(
     {
@@ -95,12 +111,12 @@ export default () => {
         <InputGroup>
           <InputGroup.Input as={FormField.Input.as(AutoCompleteInput)} />
           <InputGroup.InnerEnd
+            cs={styleOverrides.inputGroupInner}
             pointerEvents="none"
-            style={{opacity: loader.isLoading ? 1 : 0, transition: 'opacity 100ms ease'}}
-            width={20}
+            style={{opacity: loader.isLoading ? system.opacity.full : system.opacity.zero}}
             data-loading={loader.isLoading}
           >
-            <LoadingDots style={{display: 'flex', transform: 'scale(0.3)'}} />
+            <LoadingDots cs={styleOverrides.loadingDots} />
           </InputGroup.InnerEnd>
           <InputGroup.InnerEnd>
             <InputGroup.ClearButton data-testid="clear" />
@@ -112,7 +128,7 @@ export default () => {
               <StyledMenuItem as="span">No Results Found</StyledMenuItem>
             )}
             {model.state.items.length > 0 && (
-              <Combobox.Menu.List maxHeight={200}>
+              <Combobox.Menu.List cs={styleOverrides.comboboxMenuList}>
                 {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
               </Combobox.Menu.List>
             )}

package/dist/mdx/react/icon/examples/AccentIconList.tsx

@@ -3,11 +3,31 @@ import * as CanvasAccenttIcons from '@workday/canvas-accent-icons-web';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasAccenttIcons);
 
 const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAccenttIcons');
 
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.space.x6,
+  }),
+  iconGroupContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  individualIconContainer: createStyles({
+    alignItems: 'center',
+    width: `max(${px2rem(320)},20%)`,
+    flexDirection: 'row',
+    gap: system.space.x3,
+    padding: system.space.x3,
+  }),
+};
+
 export default () => {
   const [value, setValue] = React.useState('');
 
@@ -16,9 +36,9 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column" alignItems="center" gap="m">
+    <Flex cs={styleOverrides.parentContainer}>
       <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
-      <Flex flexWrap="wrap">
+      <Flex cs={styleOverrides.iconGroupContainer}>
         {allIcons
           .filter(icon => {
             if (value === '') {
@@ -29,14 +49,7 @@ export default () => {
           })
           .map((singleIcon, index) => {
             return (
-              <Flex
-                alignItems="center"
-                width={'max(320px,20%)'}
-                flexDirection="row"
-                gap="xs"
-                padding="xs"
-                key={index}
-              >
+              <Flex cs={styleOverrides.individualIconContainer} key={index}>
                 <Box>
                   <AccentIcon icon={CanvasAccenttIcons[singleIcon]} />
                 </Box>

package/dist/mdx/react/icon/examples/AppletIconList.tsx

@@ -3,11 +3,31 @@ import * as CanvasAppletIcons from '@workday/canvas-applet-icons-web';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {AppletIcon} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasAppletIcons);
 
 const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAppletIcons');
 
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.space.x6,
+  }),
+  iconGroupContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  individualIconContainer: createStyles({
+    alignItems: 'center',
+    width: `max(${px2rem(320)},20%)`,
+    flexDirection: 'row',
+    gap: system.space.x3,
+    padding: system.space.x3,
+  }),
+};
+
 export default () => {
   const [value, setValue] = React.useState('');
 
@@ -16,9 +36,9 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column" alignItems="center" gap="m">
+    <Flex cs={styleOverrides.parentContainer}>
       <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
-      <Flex flexWrap="wrap">
+      <Flex cs={styleOverrides.iconGroupContainer}>
         {allIcons
           .filter(icon => {
             if (value === '') {
@@ -29,14 +49,7 @@ export default () => {
           })
           .map((singleIcon, index) => {
             return (
-              <Flex
-                alignItems="center"
-                width={'max(320px,20%)'}
-                flexDirection="row"
-                gap="xs"
-                padding="xs"
-                key={index}
-              >
+              <Flex cs={styleOverrides.individualIconContainer} key={index}>
                 <Box>
                   <AppletIcon icon={CanvasAppletIcons[singleIcon]} />
                 </Box>

package/dist/mdx/react/icon/examples/IconList.tsx

@@ -3,10 +3,31 @@ import * as CanvasIcons from '@workday/canvas-system-icons-web';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasIcons);
 
 const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasSystemIcons');
+
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.space.x6,
+  }),
+  firstChildContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  secondChildContainer: createStyles({
+    alignItems: 'center',
+    width: `max(320px,20%)`,
+    flexDirection: 'row',
+    gap: system.space.x3,
+    padding: system.space.x3,
+  }),
+};
+
 export default () => {
   const [value, setValue] = React.useState('');
 
@@ -15,9 +36,9 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column" alignItems="center" gap="m">
+    <Flex cs={styleOverrides.parentContainer}>
       <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
-      <Flex flexWrap="wrap">
+      <Flex cs={styleOverrides.firstChildContainer}>
         {allIcons
           .filter(icon => {
             if (value === '') {
@@ -28,14 +49,7 @@ export default () => {
           })
           .map((singleIcon, index) => {
             return (
-              <Flex
-                alignItems="center"
-                width={'max(320px,20%)'}
-                flexDirection="row"
-                gap="xs"
-                padding="xs"
-                key={index}
-              >
+              <Flex cs={styleOverrides.secondChildContainer} key={index}>
                 <Box>
                   <SystemIcon icon={CanvasIcons[singleIcon]} />
                 </Box>

package/dist/mdx/react/icon/examples/Overview.tsx

@@ -8,6 +8,8 @@ import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
 
 import {AccentIcon, AppletIcon, SystemIcon, SystemIconCircle, Graphic} from '../../index';
 import {activityStreamIcon} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const graphicExample: CanvasGraphic = {
   name: 'badgeAchievement',
@@ -18,11 +20,22 @@ const graphicExample: CanvasGraphic = {
   tags: [],
 };
 
+const styleOverrides = {
+  container: createStyles({
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: system.space.x4,
+  }),
+  systemIconStyles: createStyles({
+    background: base.berrySmoothie100,
+  }),
+};
+
 export default () => (
-  <Flex flexDirection="row" alignItems="center" gap="s">
+  <Flex cs={styleOverrides.container}>
     <AccentIcon icon={shieldIcon} />
     <AppletIcon icon={benefitsIcon} />
-    <SystemIcon icon={activityStreamIcon} background="berrySmoothie100" />
+    <SystemIcon icon={activityStreamIcon} cs={styleOverrides.systemIconStyles} />
     <SystemIconCircle icon={activityStreamIcon} />
     <Graphic src={graphicExample} />
   </Flex>

package/dist/mdx/react/loading-dots/examples/Accessible.tsx

@@ -3,13 +3,18 @@ import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 import {base, system} from '@workday/canvas-tokens-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
 
-const loadingStyles = createStyles({
-  backgroundColor: base.licorice300,
-  padding: system.space.x3,
-});
+const styleOverrides = {
+  parentContainer: createStyles({
+    gap: system.space.x4,
+  }),
+  loadingStyles: createStyles({
+    backgroundColor: system.color.bg.muted.default,
+    padding: system.space.x3,
+  }),
+};
 
 export default () => {
   const [loadingState, setLoadingState] = React.useState('idle');
@@ -31,11 +36,11 @@ export default () => {
   };
 
   return (
-    <Flex gap={cssVar(system.space.x4)}>
+    <Flex cs={styleOverrides.parentContainer}>
       <SecondaryButton onClick={handleLoad}>Start</SecondaryButton>
       <AriaLiveRegion aria-label="Loading">
         {loadingState === 'loading' && (
-          <LoadingDots className={loadingStyles} role="img" aria-label="Please wait..." />
+          <LoadingDots cs={styleOverrides.loadingStyles} role="img" aria-label="Please wait..." />
         )}
         {loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}
       </AriaLiveRegion>

package/dist/mdx/react/select/examples/Alert.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -19,7 +24,7 @@ export default () => {
     setValue(event.target.value);
   };
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options}>
         <FormField error="alert">
           <FormField.Label>Contact</FormField.Label>

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

@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>

package/dist/mdx/react/select/examples/Complex.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   {serverId: 'email', label: 'E-mail'},
@@ -25,7 +30,7 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>

package/dist/mdx/react/select/examples/Disabled.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>

package/dist/mdx/react/select/examples/DisabledOption.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} nonInteractiveIds={['Fax (disabled)', 'Mobile Phone']}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>

package/dist/mdx/react/select/examples/Error.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -19,7 +24,7 @@ export default () => {
     setValue(event.target.value);
   };
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
         <FormField error="error">
           <FormField.Label>Contact</FormField.Label>

package/dist/mdx/react/select/examples/FetchingDynamicItems.tsx

@@ -4,6 +4,12 @@ import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {useMount} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+  maxWidth: px2rem(300),
+});
 
 const movieListItems = [
   {
@@ -68,7 +74,7 @@ export default () => {
   });
 
   return (
-    <Flex flexDirection="column" maxWidth={300}>
+    <Flex cs={parentContainerStyles}>
       <Select model={model}>
         <FormField label="Choose a Film">
           <Select.Input

package/dist/mdx/react/select/examples/InitialSelectedItem.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   {
@@ -37,7 +42,7 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select
         items={options}
         initialSelectedIds={['da594226446c11de98360015c5e6daf6']}

package/dist/mdx/react/select/examples/MenuHeight.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const selectCardStyles = createStyles({
+  maxHeight: px2rem(200),
+});
 
 const cities = [
   'Atlanta (United States)',
@@ -43,7 +48,7 @@ export default () => {
         <Select items={cities}>
           <FormField.Input as={Select.Input} />
           <Select.Popper>
-            <Select.Card maxHeight={200}>
+            <Select.Card cs={selectCardStyles}>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>

package/dist/mdx/react/select/examples/Placeholder.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options}>
         <FormField label="Contact">
           <Select.Input placeholder="Make a Selection" onChange={e => handleChange(e)} />

package/dist/mdx/react/select/examples/Required.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <FormField isRequired>
         <Select items={options}>
           <FormField.Label>Contact</FormField.Label>

package/dist/mdx/react/select/examples/WithIcons.tsx

@@ -8,6 +8,16 @@ import {
   uploadCloudIcon,
   userIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const styleOverrides = {
+  formfieldInputStyles: createStyles({
+    width: px2rem(300),
+  }),
+  selectCardStyles: createStyles({
+    maxHeight: px2rem(200),
+  }),
+};
 
 const customOptions = [
   {text: 'Activity Stream', id: 'activity-stream', icon: activityStreamIcon},
@@ -28,11 +38,11 @@ export default () => {
           <FormField.Label>Contact</FormField.Label>
           <FormField.Input
             as={Select.Input}
-            width="300px"
+            cs={styleOverrides.formfieldInputStyles}
             inputStartIcon={selectedItem.value.icon}
           />
           <Select.Popper>
-            <Select.Card maxHeight="200px">
+            <Select.Card cs={styleOverrides.selectCardStyles}>
               {model.state.items.length > 0 && (
                 <Select.List>
                   {item => (

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

@@ -1,6 +1,12 @@
 import React from 'react';
 
 import {Table} from '@workday/canvas-kit-react/table';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const tableHeaderStyles = createStyles({
+  backgroundColor: system.color.bg.alt.softer,
+});
 
 export default () => {
   return (
@@ -8,10 +14,10 @@ export default () => {
       <Table.Caption>Coffee Drinks and Sizes</Table.Caption>
       <Table.Head>
         <Table.Row>
-          <Table.Header scope="col" backgroundColor="soap100">
+          <Table.Header scope="col" cs={tableHeaderStyles}>
             Drink
           </Table.Header>
-          <Table.Header scope="col" backgroundColor="soap100">
+          <Table.Header scope="col" cs={tableHeaderStyles}>
             Size
           </Table.Header>
         </Table.Row>

package/dist/mdx/react/table/examples/BasicWithHeading.tsx

@@ -3,22 +3,33 @@ import React from 'react';
 import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  parentContainerStyles: createStyles({
+    marginBottom: system.space.x4,
+  }),
+  tableHeaderStyles: createStyles({
+    backgroundColor: system.color.bg.alt.softer,
+  }),
+};
 
 export default () => {
   const headingID = useUniqueId();
 
   return (
     <>
-      <Heading as="h3" id={headingID} size="small" marginBottom="s">
+      <Heading as="h3" id={headingID} size="small" cs={styleOverrides.parentContainerStyles}>
         Pizza Toppings
       </Heading>
       <Table aria-labelledby={headingID}>
         <Table.Head>
           <Table.Row>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
               Toppings
             </Table.Header>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
               Amount
             </Table.Header>
           </Table.Row>