@workday/canvas-kit-docs 12.0.0-alpha.855-next.0 → 12.0.0-alpha.898-next.0

package/dist/mdx/{preview-react → react}/form-field/examples/AllFields.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField, FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
@@ -22,19 +22,23 @@ export default () => {
     <Flex cs={parentContainerStyles}>
       <FormField grow>
         <FormField.Label>First Name</FormField.Label>
-        <FormField.Input as={TextInput} />
+        <FormField.Field>
+          <FormField.Input as={TextInput} />
+        </FormField.Field>
       </FormField>
 
       <FormField isRequired={true} error="alert" grow>
         <FormField.Label>Email</FormField.Label>
-        <FormField.Container>
+        <FormField.Field>
           <FormField.Input as={TextInput} />
           <FormField.Hint>Hint text for your input</FormField.Hint>
-        </FormField.Container>
+        </FormField.Field>
       </FormField>
       <FormField grow>
         <FormField.Label>Text Area Label</FormField.Label>
-        <FormField.Input as={TextArea} />
+        <FormField.Field>
+          <FormField.Input as={TextArea} />
+        </FormField.Field>
       </FormField>
       <FormField error="error" grow>
         <FormField.Label>Choose a Crust</FormField.Label>
@@ -47,7 +51,7 @@ export default () => {
           </Select.Popper>
         </Select>
       </FormField>
-      <FormField as="fieldset" isRequired={true} error={'error'} orientation="horizontal" grow>
+      <FormField as="fieldset" isRequired={true} error={'error'} orientation="horizontalStart" grow>
         <FormField.Label as="legend">Radio Group Legend</FormField.Label>
         <FormField.Container>
           <FormField.Input as={RadioGroup}>
@@ -68,10 +72,41 @@ export default () => {
         <FormField.Input checked={false} as={Checkbox} label="Thin Crust" />
         <FormField.Input checked={false} as={Checkbox} label="Extra Cheese" />
       </FormField>
+      <FormFieldGroup error="error" orientation="horizontalStart" grow>
+        <FormFieldGroup.Label>Choose Your Crust</FormFieldGroup.Label>
+        <FormFieldGroup.Field>
+          <FormFieldGroup.List as={RadioGroup}>
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin-crust">
+              Thin Crust
+            </FormFieldGroup.Input>
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="hand-tossed">
+              Hand Tossed
+            </FormFieldGroup.Input>
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
+              Deep Dish
+            </FormFieldGroup.Input>
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="cauliflower">
+              Cauliflower
+            </FormFieldGroup.Input>
+          </FormFieldGroup.List>
+        </FormFieldGroup.Field>
+      </FormFieldGroup>
+      <FormFieldGroup grow>
+        <FormFieldGroup.Label>Checkbox Legend</FormFieldGroup.Label>
+        <FormField.Field>
+          <FormFieldGroup.List>
+            <FormFieldGroup.Input checked={true} as={Checkbox} label="Checkbox Label" />
+            <FormFieldGroup.Input checked={false} as={Checkbox} label="Thin Crust" />
+            <FormFieldGroup.Input checked={false} as={Checkbox} label="Extra Cheese" />
+          </FormFieldGroup.List>
+        </FormField.Field>
+      </FormFieldGroup>
 
-      <FormField orientation="horizontal" grow>
+      <FormField orientation="horizontalStart" grow>
         <FormField.Label>Switch Label</FormField.Label>
-        <FormField.Input as={Switch} />
+        <FormField.Field>
+          <FormField.Input as={Switch} />
+        </FormField.Field>
       </FormField>
     </Flex>
   );

package/dist/mdx/react/form-field/examples/Basic.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {FormFieldLabelPosition} from '../../lib/types';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -11,8 +11,13 @@ export default () => {
   };
 
   return (
-    <FormField label="Email">
-      <TextInput onChange={handleChange} value={value} />
-    </FormField>
+    <Flex>
+      <FormField>
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+        </FormField.Field>
+      </FormField>
+    </Flex>
   );
 };

package/dist/mdx/{preview-react → react}/form-field/examples/Custom.tsx

@@ -5,7 +5,7 @@ import {
   useFormFieldLabel,
   useFormFieldModel,
   formFieldStencil,
-} from '@workday/canvas-kit-preview-react/form-field';
+} from '@workday/canvas-kit-react/form-field';
 import {useModelContext} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -45,7 +45,7 @@ export default () => {
   const model = useFormFieldModel({isRequired: true});
 
   return (
-    <Flex cs={formFieldStencil({orientation: 'horizontal'})}>
+    <Flex cs={formFieldStencil({orientation: 'horizontalStart'})}>
       <Label model={model}>My Custom Field</Label>
       <Input model={model} value={value} onChange={handleChange} />
       <Hint model={model}>You can be anything</Hint>

package/dist/mdx/{preview-react → react}/form-field/examples/CustomId.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 {Flex} from '@workday/canvas-kit-react/layout';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
@@ -14,7 +14,9 @@ export default () => {
     <Flex>
       <FormField id="first-name">
         <FormField.Label>First Name</FormField.Label>
-        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+        <FormField.Field>
+          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+        </FormField.Field>
       </FormField>
     </Flex>
   );

package/dist/mdx/{preview-react → react}/form-field/examples/Disabled.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';
 import {Flex} from '@workday/canvas-kit-react/layout';
@@ -15,7 +15,9 @@ export default () => {
     <Flex>
       <FormField>
         <FormField.Label>Email</FormField.Label>
-        <FormField.Input as={TextInput} value={value} disabled onChange={handleChange} />
+        <FormField.Field>
+          <FormField.Input as={TextInput} value={value} disabled onChange={handleChange} />
+        </FormField.Field>
       </FormField>
     </Flex>
   );

package/dist/mdx/react/form-field/examples/Error.tsx

@@ -1,22 +1,25 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {
-  const [value, setValue] = React.useState('invalid@email');
+  const [value, setValue] = React.useState('');
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Error}
-      hintId="hint-error"
-      hintText="Please enter a valid email."
-      label="Email"
-    >
-      <TextInput onChange={handleChange} value={value} />
-    </FormField>
+    <Flex>
+      <FormField error="error">
+        <FormField.Label>Password</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={TextInput} type="password" value={value} onChange={handleChange} />
+          <FormField.Hint>Must Contain a number and a capital letter</FormField.Hint>
+        </FormField.Field>
+      </FormField>
+    </Flex>
   );
 };

package/dist/mdx/react/form-field/examples/GroupedInputs.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
+import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
+import {system} from '@workday/canvas-tokens-web';
+import {Banner} from '@workday/canvas-kit-react/banner';
+
+import {Checkbox} from '@workday/canvas-kit-react/checkbox';
+import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+
+const formStyles = createStyles({
+  margin: `${system.space.zero} ${system.space.x3}`,
+});
+
+const formButtonStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+const toppings = [
+  {
+    id: 1,
+    label: 'Pepperoni',
+    checked: false,
+  },
+  {
+    id: 2,
+    label: 'Cheese',
+    checked: false,
+  },
+  {
+    id: 3,
+    label: 'Pineapple',
+    checked: false,
+  },
+  {
+    id: 4,
+    label: 'Mushrooms',
+    checked: false,
+  },
+];
+
+const bannerStyles = createStyles({
+  position: 'absolute',
+  right: 0,
+});
+
+export default () => {
+  const [toppingsState, setToppingsState] = React.useState(toppings);
+  const [error, setError] = React.useState(undefined);
+  const [radioError, setRadioError] = React.useState(undefined);
+  const [showSuccess, setShowSuccess] = React.useState(false);
+
+  const [value, setValue] = React.useState<string>('');
+  const [formData, setFormData] = React.useState({
+    toppings: [],
+    crust: '',
+  });
+  const handleCheckboxCheck = id => {
+    if (error) {
+      setError(undefined);
+    }
+    setToppingsState(
+      toppingsState.map(item => (item.id === id ? {...item, checked: !item.checked} : item))
+    );
+  };
+
+  const handleRadioChange = (e: React.ChangeEvent) => {
+    if (radioError) {
+      setRadioError(undefined);
+    }
+    const target = e.currentTarget;
+    if (target instanceof HTMLInputElement) {
+      setValue(target.value);
+    }
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    const radioError = !value && toppingsState.some(item => !item.checked) ? 'error' : undefined;
+    const error = toppingsState.every(item => !item.checked) ? 'error' : undefined;
+
+    setRadioError(radioError);
+    setError(error);
+    if (!error && !radioError && toppingsState.some(item => item.checked) && value) {
+      setShowSuccess(true);
+    }
+    setFormData({
+      toppings: toppingsState,
+      crust: value,
+    });
+  };
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (showSuccess) {
+        setShowSuccess(false);
+      }
+    }, 3000);
+
+    return () => clearTimeout(timeout);
+  }, [showSuccess]);
+
+  const handleReset = () => {
+    setFormData({toppings: [], crust: ''});
+    setError(undefined);
+    setValue('');
+    setRadioError('');
+    setShowSuccess(false);
+    setToppingsState(
+      toppingsState.map(item => {
+        return {...item, checked: false};
+      })
+    );
+  };
+
+  return (
+    <div>
+      <h3>Choose your pizza options</h3>
+      <AriaLiveRegion role="alert">
+        <div style={{display: 'flex', gap: '40px'}}>
+          {error || radioError ? (
+            <Banner isSticky hasError className={bannerStyles}>
+              <Banner.Label>
+                {error && radioError
+                  ? 'At least one topping and crust selection is required'
+                  : error
+                  ? 'You must choose at least one topping'
+                  : radioError
+                  ? 'You must choose a crust'
+                  : ''}
+              </Banner.Label>
+            </Banner>
+          ) : null}
+          {showSuccess && (
+            <Banner isSticky className={bannerStyles}>
+              <Banner.Label>You've successfully submitted your pizza options.</Banner.Label>
+            </Banner>
+          )}
+        </div>
+      </AriaLiveRegion>
+
+      <form className={formStyles} onSubmit={handleSubmit}>
+        <FormFieldGroup error={error} isRequired>
+          <FormFieldGroup.Label>Choose Your Toppings</FormFieldGroup.Label>
+          <FormFieldGroup.List>
+            {toppingsState.map(item => {
+              return (
+                <FormFieldGroup.Input
+                  key={item.id}
+                  onChange={() => handleCheckboxCheck(item.id)}
+                  checked={item.checked}
+                  value={item.label}
+                  as={Checkbox}
+                  disabled={item.label === 'Pineapple' ? true : undefined}
+                  label={item.label}
+                />
+              );
+            })}
+          </FormFieldGroup.List>
+          <FormFieldGroup.Hint>
+            {error === 'error' && 'You must choose one topping'}
+          </FormFieldGroup.Hint>
+        </FormFieldGroup>
+        <FormFieldGroup error={radioError} isRequired>
+          <FormFieldGroup.Label>Choose Your Crust</FormFieldGroup.Label>
+          <FormFieldGroup.Field>
+            <FormFieldGroup.List
+              as={RadioGroup}
+              onChange={handleRadioChange}
+              value={value}
+              name="crust"
+            >
+              <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin-crust">
+                Thin Crust
+              </FormFieldGroup.Input>
+              <FormFieldGroup.Input as={RadioGroup.RadioButton} value="hand-tossed">
+                Hand Tossed
+              </FormFieldGroup.Input>
+              <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
+                Deep Dish
+              </FormFieldGroup.Input>
+              <FormFieldGroup.Input as={RadioGroup.RadioButton} value="cauliflower">
+                Cauliflower
+              </FormFieldGroup.Input>
+            </FormFieldGroup.List>
+            <FormFieldGroup.Hint>
+              {radioError === 'error' ? 'You must choose a crust' : null}
+            </FormFieldGroup.Hint>
+          </FormFieldGroup.Field>
+        </FormFieldGroup>
+        <div className={formButtonStyles}>
+          <PrimaryButton type="submit">Submit Your Choices</PrimaryButton>
+          <SecondaryButton onClick={() => handleReset()}>Reset Form</SecondaryButton>
+        </div>
+      </form>
+      <div>
+        <div>
+          Selected Toppings:{' '}
+          {!error && formData.toppings.map(item => (item.checked ? `${item.label} ` : null))}
+        </div>
+        <div>Selected Crust: {formData.crust}</div>
+      </div>
+    </div>
+  );
+};

package/dist/mdx/react/form-field/examples/Grow.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export default () => {
@@ -10,8 +11,11 @@ export default () => {
   };
 
   return (
-    <FormField grow={true} label="Email">
-      <TextInput onChange={handleChange} value={value} />
-    </FormField>
+    <Flex>
+      <FormField grow>
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+      </FormField>
+    </Flex>
   );
 };

package/dist/mdx/react/form-field/examples/Hint.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -11,12 +12,14 @@ export default () => {
   };
 
   return (
-    <FormField
-      hintId={useUniqueId()}
-      hintText="This address will be shown as a shipping address option for future orders."
-      label="Address Name"
-    >
-      <TextInput onChange={handleChange} value={value} />
-    </FormField>
+    <Flex>
+      <FormField orientation="horizontalStart">
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+          <FormField.Hint>Cannot contain numbers</FormField.Hint>
+        </FormField.Field>
+      </FormField>
+    </Flex>
   );
 };

package/dist/mdx/react/form-field/examples/LabelPositionHorizontalEnd.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const formStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x2,
+  flexDirection: 'column',
+});
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <form className={formStyles}>
+      <FormField orientation="horizontalEnd">
+        <FormField.Label>Email</FormField.Label>
+        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+      </FormField>
+      <FormField orientation="horizontalEnd">
+        <FormField.Label>Password</FormField.Label>
+        <FormField.Input as={TextInput} type="password" />
+      </FormField>
+    </form>
+  );
+};

package/dist/mdx/react/form-field/examples/LabelPositionHorizontalStart.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const formStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x2,
+  flexDirection: 'column',
+});
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <form className={formStyles}>
+      <FormField orientation="horizontalStart">
+        <FormField.Label>Email</FormField.Label>
+        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+      </FormField>
+      <FormField orientation="horizontalStart">
+        <FormField.Label>Password</FormField.Label>
+        <FormField.Input as={TextInput} type="password" />
+      </FormField>
+    </form>
+  );
+};

package/dist/mdx/{preview-react → react}/form-field/examples/RefForwarding.tsx

@@ -3,7 +3,7 @@ import {changeFocus} from '@workday/canvas-kit-react/common';
 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 {FormField} from '@workday/canvas-kit-react/form-field';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -29,7 +29,9 @@ export default () => {
     <Flex cs={parentContainerStyles}>
       <FormField>
         <FormField.Label>Email</FormField.Label>
-        <FormField.Input as={TextInput} onChange={handleChange} value={value} ref={ref} />
+        <FormField.Field>
+          <FormField.Input as={TextInput} onChange={handleChange} value={value} ref={ref} />
+        </FormField.Field>
       </FormField>
       <SecondaryButton onClick={handleClick}>Focus Text Input</SecondaryButton>
     </Flex>

package/dist/mdx/react/form-field/examples/Required.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -10,8 +10,16 @@ export default () => {
   };
 
   return (
-    <FormField label="Email" required={true}>
-      <TextInput onChange={handleChange} value={value} />
+    <FormField isRequired={true}>
+      <FormField.Label>Email</FormField.Label>
+      <FormField.Field>
+        <FormField.Input
+          as={TextInput}
+          placeholder="your@gmail.com"
+          onChange={handleChange}
+          value={value}
+        />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/{preview-react → react}/form-field/examples/ThemedErrors.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-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';
@@ -34,10 +34,12 @@ export default () => {
     <CanvasProvider theme={theme}>
       <FormField error={!value ? 'error' : undefined} isRequired={true} orientation="vertical">
         <FormField.Label>Email</FormField.Label>
-        <FormField.Input as={TextInput} onChange={handleChange} value={value} />
-        <FormField.Hint cs={formFieldHintStyles}>
-          {!value && 'Please enter an email.'}
-        </FormField.Hint>
+        <FormField.Field>
+          <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+          <FormField.Hint cs={formFieldHintStyles}>
+            {!value && 'Please enter an email.'}
+          </FormField.Hint>
+        </FormField.Field>
       </FormField>
     </CanvasProvider>
   );

package/dist/mdx/react/icon/Assets.mdx

@@ -1,28 +1,35 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import SystemIconList from './examples/IconList';
 import AppletIconList from './examples/AppletIconList';
-import{AccentIconList} from './examples/AccentIconList.tsx'
-import Overview from './examples/Overview'
+import AccentIconList from './examples/AccentIconList';
+import Overview from './examples/Overview';
 
 
 # Assets
-Assets are graphics which help communicate meaning or highlight areas of interaction to our users. These may be presented individually or as part of a group with related information in components and patterns.
+
+Assets are graphics which help communicate meaning or highlight areas of interaction to our users.
+These may be presented individually or as part of a group with related information in components and
+patterns.
 
 <ExampleCodeBlock code={Overview} />
 
 ## Accent Icon List
 
-Accent Icons add clarity, and visual interest, they bring delight to the experience by communicating the overall tone and meaning of a page.
+Accent Icons add clarity, and visual interest, they bring delight to the experience by communicating
+the overall tone and meaning of a page.
 
 <ExampleCodeBlock code={AccentIconList} />
 
 ## Applet Icon List
 
-Applet Icons convey entry points, categories of actions, or information sources on the Workday homepage.
+Applet Icons convey entry points, categories of actions, or information sources on the Workday
+homepage.
 
 <ExampleCodeBlock code={AppletIconList} />
 
 ## System Icon List
 
-System Icons are symbols used to convey simple actions and functions, they are the most common icons encountered in products and help communicate metaphors at a glance.
+System Icons are symbols used to convey simple actions and functions, they are the most common icons
+encountered in products and help communicate metaphors at a glance.
 
 <ExampleCodeBlock code={SystemIconList} />

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

@@ -8,7 +8,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasAccenttIcons);
 
-const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAccenttIcons');
+const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAccentIcons');
 
 const styleOverrides = {
   parentContainer: createStyles({