chore: Updated examples to remove style props

Workday · May 6, 2024 · 070809e · 070809e
1 parent de342fa
commit 070809e
Show file tree

Hide file tree

Showing 43 changed files with 436 additions and 111 deletions.
diff --git a/modules/preview-react/form-field/stories/examples/AllFields.tsx b/modules/preview-react/form-field/stories/examples/AllFields.tsx
@@ -7,17 +7,19 @@ import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Select} from '@workday/canvas-kit-react/select';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 import {Switch} from '@workday/canvas-kit-react/switch';
+import {calc, createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+  gap: calc.subtract(system.space.x6, system.space.x1),
+  padding: calc.subtract(system.space.x10, system.space.x1),
+  borderRadius: system.space.x1,
+});
 
 export const AllFields = () => {
   return (
-    <Flex
-      cs={{
-        flexDirection: 'column',
-        gap: '20px',
-        padding: '36px',
-        borderRadius: '4px',
-      }}
-    >
+    <Flex cs={parentContainerStyles}>
       <FormField grow>
         <FormField.Label>First Name</FormField.Label>
         <FormField.Input as={TextInput} />

diff --git a/modules/preview-react/form-field/stories/examples/RefForwarding.tsx b/modules/preview-react/form-field/stories/examples/RefForwarding.tsx
@@ -4,6 +4,14 @@ import {Flex} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x1,
+  alignItems: 'flex-start',
+  flexDirection: 'column',
+});
 
 export const RefForwarding = () => {
   const [value, setValue] = React.useState('');
@@ -18,7 +26,7 @@ export const RefForwarding = () => {
   };
 
   return (
-    <Flex gap="xxxs" alignItems="flex-start" flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <FormField>
         <FormField.Label>Email</FormField.Label>
         <FormField.Input as={TextInput} onChange={handleChange} value={value} ref={ref} />

diff --git a/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx b/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx
@@ -3,6 +3,12 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const formFieldHintStyles = createStyles({
+  paddingTop: system.space.x2,
+});
 
 export const ThemedError = () => {
   const [value, setValue] = React.useState('');
@@ -29,7 +35,9 @@ export const ThemedError = () => {
       <FormField error={!value ? 'error' : undefined} isRequired={true} orientation="vertical">
         <FormField.Label>Email</FormField.Label>
         <FormField.Input as={TextInput} onChange={handleChange} value={value} />
-        <FormField.Hint paddingTop={space.xxs}>{!value && 'Please enter an email.'}</FormField.Hint>
+        <FormField.Hint cs={formFieldHintStyles}>
+          {!value && 'Please enter an email.'}
+        </FormField.Hint>
       </FormField>
     </CanvasProvider>
   );

diff --git a/modules/preview-react/radio/stories/examples/Basic.tsx b/modules/preview-react/radio/stories/examples/Basic.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const formfieldInputStyles = createStyles({
+  width: '200px',
+});
 
 export const Basic = () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -18,10 +23,10 @@ export const Basic = () => {
       <FormField as="fieldset">
         <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
         <FormField.Input
+          cs={formfieldInputStyles}
           as={RadioGroup}
           name="pizza-crust"
           onChange={handleChange}
-          width="200px"
           value={value}
         >
           <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>

diff --git a/modules/preview-react/radio/stories/examples/Custom.tsx b/modules/preview-react/radio/stories/examples/Custom.tsx
@@ -2,6 +2,17 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  formfieldInputStyles: createStyles({
+    width: '200px',
+  }),
+  radioGroupLabelTextStyles: createStyles({
+    color: base.berrySmoothie400,
+  }),
+};
 
 export const Custom = () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -21,20 +32,26 @@ export const Custom = () => {
           as={RadioGroup}
           name="pizza-crust-custom"
           onChange={handleChange}
-          width="200px"
+          cs={styleOverrides.formfieldInputStyles}
           value={value}
         >
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="deep-dish" />
-            <RadioGroup.Label.Text color="berrySmoothie400">Deep dish</RadioGroup.Label.Text>
+            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+              Deep dish
+            </RadioGroup.Label.Text>
           </RadioGroup.Label>
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="gluten-free" />
-            <RadioGroup.Label.Text color="berrySmoothie400">Gluten free</RadioGroup.Label.Text>
+            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+              Gluten free
+            </RadioGroup.Label.Text>
           </RadioGroup.Label>
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="cauliflower" />
-            <RadioGroup.Label.Text color="berrySmoothie400">Cauliflower</RadioGroup.Label.Text>
+            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+              Cauliflower
+            </RadioGroup.Label.Text>
           </RadioGroup.Label>
         </FormField.Input>
       </FormField>

diff --git a/modules/preview-react/radio/stories/examples/Inverse.tsx b/modules/preview-react/radio/stories/examples/Inverse.tsx
@@ -4,13 +4,20 @@ import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {styled, StyledType} from '@workday/canvas-kit-react/common';
 import {colors} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const StyledFormField = styled(FormField)<StyledType>({
   legend: {
     color: colors.frenchVanilla100,
   },
 });
 
+const parentContainerStyles = createStyles({
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+});
+
 export const Inverse = () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
 
@@ -22,7 +29,7 @@ export const Inverse = () => {
   };
 
   return (
-    <Box backgroundColor="blueberry400" padding="s">
+    <Box cs={parentContainerStyles}>
       <StyledFormField as="fieldset">
         <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
         <FormField.Input as={RadioGroup} name="crust-inverse" onChange={handleChange} value={value}>

diff --git a/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx b/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx
@@ -3,10 +3,16 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+});
 
 export const Emphasis = () => {
   return (
-    <Flex gap="s">
+    <Flex cs={parentContainerStyles}>
       <StatusIndicator emphasis="high">
         <StatusIndicator.Icon icon={uploadCloudIcon} />
         <StatusIndicator.Label>High Emphasis</StatusIndicator.Label>

diff --git a/modules/preview-react/status-indicator/stories/examples/Icon.tsx b/modules/preview-react/status-indicator/stories/examples/Icon.tsx
@@ -3,10 +3,16 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+});
 
 export const Icon = () => {
   return (
-    <Flex gap="s">
+    <Flex cs={parentContainerStyles}>
       <StatusIndicator>
         <StatusIndicator.Icon aria-label="unpublished" icon={uploadCloudIcon} />
         <StatusIndicator.Label>Unpublished</StatusIndicator.Label>

diff --git a/modules/preview-react/status-indicator/stories/examples/Overflow.tsx b/modules/preview-react/status-indicator/stories/examples/Overflow.tsx
@@ -3,11 +3,17 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {calc, createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const statusIndicatorStyles = createStyles({
+  maxWidth: calc.add(system.space.x20, system.space.x4),
+});
 
 export const Overflow = () => {
   return (
     <OverflowTooltip>
-      <StatusIndicator tabIndex={0} style={{maxWidth: '6rem'}}>
+      <StatusIndicator tabIndex={0} cs={statusIndicatorStyles}>
         <StatusIndicator.Icon icon={uploadCloudIcon} />
         <StatusIndicator.Label>
           Your workbook is currently in process of saving

diff --git a/modules/preview-react/status-indicator/stories/examples/Variants.tsx b/modules/preview-react/status-indicator/stories/examples/Variants.tsx
@@ -3,11 +3,23 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  parentContainerStyles: createStyles({
+    gap: system.space.x4,
+    flexDirection: 'column',
+  }),
+  innerContainerStyles: createStyles({
+    gap: system.space.x4,
+  }),
+};
 
 export const Variants = () => {
   return (
-    <Flex gap="s" flexDirection="column">
-      <Flex gap="s">
+    <Flex cs={styleOverrides.parentContainerStyles}>
+      <Flex cs={styleOverrides.innerContainerStyles}>
         <StatusIndicator>
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
           <StatusIndicator.Icon icon={uploadCloudIcon} />
@@ -33,7 +45,7 @@ export const Variants = () => {
           <StatusIndicator.Icon icon={uploadCloudIcon} />
         </StatusIndicator>
       </Flex>
-      <Flex gap="s">
+      <Flex cs={styleOverrides.innerContainerStyles}>
         <StatusIndicator emphasis="high">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
           <StatusIndicator.Icon icon={uploadCloudIcon} />

diff --git a/modules/react/button/stories/button/examples/Delete.tsx b/modules/react/button/stories/button/examples/Delete.tsx
@@ -3,9 +3,16 @@ import React from 'react';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {trashIcon} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Delete = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <DeleteButton>Delete</DeleteButton>
     <DeleteButton icon={trashIcon} iconPosition="start">
       Delete

diff --git a/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx b/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx
@@ -2,9 +2,16 @@ import React from 'react';
 
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+});
 
 export const ExternalLinkInverse = () => (
-  <Box backgroundColor="blueberry400" padding="s">
+  <Box cs={parentContainerStyles}>
     <ExternalHyperlink href="https://workday.com" variant="inverse">
       Hyperlink
     </ExternalHyperlink>

diff --git a/modules/react/button/stories/button/examples/HyperlinkInverse.tsx b/modules/react/button/stories/button/examples/HyperlinkInverse.tsx
@@ -2,9 +2,16 @@ import React from 'react';
 
 import {Hyperlink} from '@workday/canvas-kit-react/button';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+});
 
 export const LinkInverse = () => (
-  <Box backgroundColor="blueberry400" padding="s">
+  <Box cs={parentContainerStyles}>
     <Hyperlink href="#hyperlink" variant="inverse">
       Hyperlink
     </Hyperlink>

diff --git a/modules/react/button/stories/button/examples/Primary.tsx b/modules/react/button/stories/button/examples/Primary.tsx
@@ -7,9 +7,16 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Primary = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <PrimaryButton>Primary</PrimaryButton>
     <PrimaryButton icon={plusIcon} iconPosition="start">
       Primary

diff --git a/modules/react/button/stories/button/examples/PrimaryInverse.tsx b/modules/react/button/stories/button/examples/PrimaryInverse.tsx
@@ -7,9 +7,17 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+});
 
 export const PrimaryInverse = () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <PrimaryButton variant="inverse">Primary</PrimaryButton>
     <PrimaryButton icon={plusIcon} iconPosition="start" variant="inverse">
       Primary

diff --git a/modules/react/button/stories/button/examples/Secondary.tsx b/modules/react/button/stories/button/examples/Secondary.tsx
@@ -7,9 +7,16 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Secondary = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <SecondaryButton>Secondary</SecondaryButton>
     <SecondaryButton icon={plusIcon} iconPosition="start">
       Secondary

diff --git a/modules/react/button/stories/button/examples/SecondaryInverse.tsx b/modules/react/button/stories/button/examples/SecondaryInverse.tsx
@@ -7,9 +7,17 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+  backgroundColor: base.blueberry400,
+});
 
 export const SecondaryInverse = () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <SecondaryButton variant="inverse">Secondary</SecondaryButton>
     <SecondaryButton icon={plusIcon} variant="inverse">
       Secondary