@workday/canvas-kit-docs 14.0.0-alpha.1237-next.0 → 14.0.0-alpha.1239-next.0

package/dist/es6/lib/docs.js

@@ -12747,11 +12747,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "standalone-inverse"
+                "value": "standaloneInverse"
               }
             ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standalone-inverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
+          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
           "declarations": [
             {
               "name": "variant",
@@ -44318,7 +44318,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ]
           },
           "required": false,
-          "description": "Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.\nThe value of this attribute needs to match the value passed to `hintId` on the `FormField`.\n\n```tsx\n<FormField\n   error={FormField.ErrorType.Alert}\n   hintId=\"hint-alert\"\n   hintText=\"Deep dish is an extra $2.99\"\n   label=\"Choose Your Pizza Crust\"\n   useFieldset={true}\n >\n   <RadioGroup\n     name=\"crust\"\n     onChange={handleChange}\n     initialValue={value}\n     aria-describedby=\"hint-alert\"\n   >\n     <RadioGroup.RadioButton value=\"deep-dish\">Deep dish</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"thin\">Thin</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"gluten-free\">Gluten free</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"cauliflower\">Cauliflower</RadioGroup.RadioButton>\n   </RadioGroup>\n</FormField>\n```",
+          "description": "Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.\nThe value of this attribute needs to match the value passed to `hintId` on the `FormField`.\n\n```tsx\n<FormField\n   error=\"caution\"\n   hintId=\"hint-alert\"\n   hintText=\"Deep dish is an extra $2.99\"\n   label=\"Choose Your Pizza Crust\"\n   useFieldset={true}\n >\n   <RadioGroup\n     name=\"crust\"\n     onChange={handleChange}\n     initialValue={value}\n     aria-describedby=\"hint-alert\"\n   >\n     <RadioGroup.RadioButton value=\"deep-dish\">Deep dish</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"thin\">Thin</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"gluten-free\">Gluten free</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"cauliflower\">Cauliflower</RadioGroup.RadioButton>\n   </RadioGroup>\n</FormField>\n```",
           "declarations": [
             {
               "name": "aria-describedby",
@@ -44669,7 +44669,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ]
           },
           "required": false,
-          "description": "Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.\nThe value of this attribute needs to match the value passed to `hintId` on the `FormField`.\n\n```tsx\n<FormField\n   error={FormField.ErrorType.Alert}\n   hintId=\"hint-alert\"\n   hintText=\"Deep dish is an extra $2.99\"\n   label=\"Choose Your Pizza Crust\"\n   useFieldset={true}\n >\n   <RadioGroup\n     name=\"crust\"\n     onChange={handleChange}\n     initialValue={value}\n     aria-describedby=\"hint-alert\"\n   >\n     <RadioGroup.RadioButton value=\"deep-dish\">Deep dish</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"thin\">Thin</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"gluten-free\">Gluten free</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"cauliflower\">Cauliflower</RadioGroup.RadioButton>\n   </RadioGroup>\n</FormField>\n```",
+          "description": "Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.\nThe value of this attribute needs to match the value passed to `hintId` on the `FormField`.\n\n```tsx\n<FormField\n   error=\"caution\"\n   hintId=\"hint-alert\"\n   hintText=\"Deep dish is an extra $2.99\"\n   label=\"Choose Your Pizza Crust\"\n   useFieldset={true}\n >\n   <RadioGroup\n     name=\"crust\"\n     onChange={handleChange}\n     initialValue={value}\n     aria-describedby=\"hint-alert\"\n   >\n     <RadioGroup.RadioButton value=\"deep-dish\">Deep dish</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"thin\">Thin</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"gluten-free\">Gluten free</RadioGroup.RadioButton>\n     <RadioGroup.RadioButton value=\"cauliflower\">Cauliflower</RadioGroup.RadioButton>\n   </RadioGroup>\n</FormField>\n```",
           "declarations": [
             {
               "name": "aria-describedby",
@@ -89692,11 +89692,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "standalone-inverse"
+                "value": "standaloneInverse"
               }
             ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standalone-inverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
+          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
           "declarations": [
             {
               "name": "variant",
@@ -115338,11 +115338,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "standalone-inverse"
+                "value": "standaloneInverse"
               }
             ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standalone-inverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
+          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
           "declarations": [
             {
               "name": "variant",
@@ -116206,11 +116206,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "standalone-inverse"
+                "value": "standaloneInverse"
               }
             ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standalone-inverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
+          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
           "declarations": [
             {
               "name": "variant",
@@ -116472,7 +116472,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     "type": {
       "kind": "enhancedComponent",
       "componentType": "regular",
-      "displayName": "ButtonLabelIconNew",
+      "displayName": "ButtonLabelIcon",
       "props": [
         {
           "kind": "property",
@@ -195888,10 +195888,10 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         },
         {
           "kind": "property",
-          "name": "Alert",
+          "name": "Caution",
           "type": {
             "kind": "string",
-            "value": "alert"
+            "value": "caution"
           }
         }
       ],
@@ -221388,11 +221388,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               "value": [
                 {
                   "kind": "string",
-                  "value": "error"
+                  "value": "caution"
                 },
                 {
                   "kind": "string",
-                  "value": "alert"
+                  "value": "error"
                 },
                 {
                   "kind": "primitive",
@@ -221522,11 +221522,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "error"
+                "value": "caution"
               },
               {
                 "kind": "string",
-                "value": "alert"
+                "value": "error"
               },
               {
                 "kind": "primitive",
@@ -221535,7 +221535,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ]
           },
           "required": false,
-          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `alert`: A visual orange warning ring is added to the `FormField.Input`.",
+          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `cautiion`: A visual orange warning ring is added to the `FormField.Input`.",
           "declarations": [
             {
               "name": "error",
@@ -221664,11 +221664,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "error"
+                "value": "caution"
               },
               {
                 "kind": "string",
-                "value": "alert"
+                "value": "error"
               },
               {
                 "kind": "primitive",
@@ -221677,7 +221677,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ]
           },
           "required": false,
-          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `alert`: A visual orange warning ring is added to the `FormField.Input`.",
+          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `cautiion`: A visual orange warning ring is added to the `FormField.Input`.",
           "declarations": [
             {
               "name": "error",
@@ -221764,11 +221764,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "error"
+                "value": "caution"
               },
               {
                 "kind": "string",
-                "value": "alert"
+                "value": "error"
               },
               {
                 "kind": "primitive",
@@ -221777,7 +221777,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ]
           },
           "required": false,
-          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `alert`: A visual orange warning ring is added to the `FormField.Input`.",
+          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `cautiion`: A visual orange warning ring is added to the `FormField.Input`.",
           "declarations": [
             {
               "name": "error",
@@ -221901,11 +221901,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "error"
+                "value": "caution"
               },
               {
                 "kind": "string",
-                "value": "alert"
+                "value": "error"
               },
               {
                 "kind": "primitive",
@@ -221914,7 +221914,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ]
           },
           "required": false,
-          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `alert`: A visual orange warning ring is added to the `FormField.Input`.",
+          "description": "Optional flag to denote if this field has an error or warning to display.\nIf value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.\nIf value is `cautiion`: A visual orange warning ring is added to the `FormField.Input`.",
           "declarations": [
             {
               "name": "error",
@@ -397410,11 +397410,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "standalone-inverse"
+                "value": "standaloneInverse"
               }
             ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standalone-inverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
+          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
           "declarations": [
             {
               "name": "variant",

package/dist/mdx/14.0-UPGRADE-GUIDE.mdx

@@ -8,6 +8,7 @@ any questions.
 
 - [Codemod](#codemod)
   - [Instructions](#instructions)
+- [Caution Naming](#caution-naming)
 - [Theming](#theming)
   - [Canvas Provider](#canvas-provider-)
 - [Component Updates](#component-updates)
@@ -104,6 +105,74 @@ yarn remove @workday/canvas-kit-codemod
 > after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
 > your project conventions.
 
+## Caution Naming
+
+**PR:** [#3462](https://github.com/Workday/canvas-kit/pull/3462)
+
+To better align with the brand refresh, Alert and Warning states are being renamed to Caution for better semantics.
+
+This change mostly affects how you pass an error state to our input components. In most cases, our inputs components should be used with our `FormField` component to
+ensure correct accessiblity.
+
+**Before in v13**
+
+```tsx
+<FormField error="alert">
+	<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>
+```
+
+**After in v14**
+
+```tsx
+<FormField error="caution">
+	<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>
+```
+
+If you are using the error type either from our `Common` package or the one exposed from the component, the naming as also changed.
+
+**Before in v13**
+
+```tsx
+import {ErrorType} from '@workday/canvas-kit-react/common';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Switch} from '@workday/canvas-kit-react/switch';
+import {TextArea} from '@workday/canvas-kit-react/text-area';
+
+someFunction(ErrorType.Alert);
+
+<TextInput error={TextInput.ErrorType.Alert} />
+<Switch error={Switch.ErrorType.Alert} />
+<TextArea error={TextArea.ErrorType.Alert} />
+```
+
+**After in v14**
+
+```tsx
+import {ErrorType} from '@workday/canvas-kit-react/common';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Switch} from '@workday/canvas-kit-react/switch';
+import {TextArea} from '@workday/canvas-kit-react/text-area';
+
+
+someFunction(ErrorType.Caution);
+
+<TextInput error={TextInput.ErrorType.Caution} />
+<Switch error={Switch.ErrorType.Caution} />
+<TextArea error={TextArea.ErrorType.Caution} />
+```
+
+> 🤖 The codemod will handle the change of `ErrorType.Alert` to `ErrorType.Caution` and `error="alert"` to `error="caution"`.
+
 ## Theming
 
 ### Canvas Provider 🚨
@@ -209,6 +278,28 @@ matches our brand refresh.
   - `extraSmall`
   - `extraExtraSmall`
 
+**Avatar in Main**
+
+```tsx
+import { Avatar } from '@workday/canvas-kit-react/avatar';
+
+<Avatar altText="John Doe" size="extraExtraLarge" variant="light" as="div" url={yourImageUrl} />
+
+// For Avatars that where buttons
+<Avatar altText="John Doe" size="extraExtraLarge" variant="dark" url={yourImageUrl} />
+```
+
+**Avatar in Preview**
+
+```tsx
+import { Avatar } from '@workday/canvas-kit-preview-react/avatar';
+
+<Avatar name="John Doe" size="extraExtraLarge" variant="blue" />
+
+// Preferred Initials
+<Avatar name="Julian Doe Smith" size="extraExtraLarge" variant="blue" preferredInitials="JS" />
+```
+
 ### Branding Changes 💅
 
 Several components have been refactored to reflect our new brand direction. Most of these changes
@@ -240,6 +331,8 @@ The `TertiaryButton` component no longer supports the `isThemable` prop. To cust
 of `TertiaryButton`, use the `cs` prop for custom styles or the `colors` prop for palette-based
 color overrides.
 
+
+
 The shape of `TertiaryButton` has changed to have rounded corners, aligning with other buttons and
 our new brand direction.
 
@@ -374,7 +467,7 @@ These changes are only **visual** and should not affect the functionality of the
 
 **PR:** [#3390](https://github.com/Workday/canvas-kit/pull/3390)
 
-- `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `standalone-inverse` variant. This
+- `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `standaloneInverse` variant. This
   removes the underline text decoration for use outside the context of body text.
 
 **HyperLink and ExternalHyperlink in v14**
@@ -382,11 +475,11 @@ These changes are only **visual** and should not affect the functionality of the
 ```tsx
 <Hyperlink variant="standalone" href="#hyperlink">Hyperlink</Hyperlink>
 <ExternalHyperlink variant="standalone" href="#external-hyperlink">External Hyperlink</ExternalHyperlink>
-<Hyperlink variant="standalone-inverse" href="#hyperlink">Hyperlink</Hyperlink>
-<ExternalHyperlink variant="standalone-inverse" href="#external-hyperlink">External Hyperlink</ExternalHyperlink>
+<Hyperlink variant="standaloneInverse" href="#hyperlink">Hyperlink</Hyperlink>
+<ExternalHyperlink variant="standaloneInverse" href="#external-hyperlink">External Hyperlink</ExternalHyperlink>
 ```
 
-> **Note:** Only use the `standalone` or `standalone-inverse` variant in cases where the
+> **Note:** Only use the `standalone` or `standaloneInverse` variant in cases where the
 > `<HyperLink>` and `<ExternalHyperlink>` are used outside the context of body text.
 
 ### Loading Dots
@@ -667,6 +760,31 @@ We've removed `TextArea` from `@workday/canvas-kit-preview-react` package. Pleas
 [TextArea](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs) from
 `@workday/canvas-kit-react` instead.
 
+**Before in v13**
+
+```tsx
+import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
+
+<TextArea orientation="vertical">
+  <TextArea.Label>Leave a review</TextArea.Label>
+  <TextArea.Field onChange={handleChange} value={value} />
+</TextArea>
+```
+
+**After in v14**
+
+```tsx
+import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+<FormField>
+  <FormField.Label>Leave a Review</FormField.Label>
+  <FormField.Field>
+    <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+  </FormField.Field>
+</FormField>
+```
+
 ### Text Input (preview)
 
 **PR:** [#3471](https://github.com/Workday/canvas-kit/pull/3471)
@@ -675,6 +793,31 @@ We've removed `TextInput` from `@workday/canvas-kit-preview-react` package. Plea
 [TextInput](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs)
 from `@workday/canvas-kit-react` instead.
 
+**Before in v13**
+
+```tsx
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+<TextInput orientation="vertical">
+  <TextInput.Label>Email</TextInput.Label>
+  <TextInput.Field onChange={handleChange} value={value} />
+</TextInput>
+```
+
+**After in v14**
+
+```tsx
+import {TextArea} from '@workday/canvas-kit-preview-react/text-input';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+<FormField>
+  <FormField.Label>Leave a Review</FormField.Label>
+  <FormField.Field>
+    <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+  </FormField.Field>
+</FormField>
+```
+
 ---
 
 ## Troubleshooting

package/dist/mdx/7.0-UPGRADE-GUIDE.mdx

@@ -541,7 +541,7 @@ module; it supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.ht
 The `variant` prop (which previously accepted `Banner.Variant.Full` or `Banner.Variant.Sticky`) has
 been converted to the boolean `isSticky` prop on the container `Banner` component.
 
-Similarly, the `error` prop (which previously accepted `Banner.ErrorType.Alert` or
+Similarly, the `error` prop (which previously accepted `Banner.ErrorType.Caution` or
 `Banner.ErrorType.Error`) has been converted to the boolean `hasError` prop on `Banner`. `Banner`
 now uses the `useThemedPalette` hook which allows you to override its colors using the Canvas theme.
 

package/dist/mdx/preview-react/multi-select/examples/Error.tsx

@@ -19,35 +19,37 @@ export default () => {
             model.state.selectedIds.length < 1
               ? 'error'
               : model.state.selectedIds.length > 3
-              ? 'alert'
+              ? 'caution'
               : undefined
           }
         >
           <FormField.Label>Toppings</FormField.Label>
-          <FormField.Input
-            as={MultiSelect.Input}
-            placeholder="Select Multiple"
-            removeLabel="Remove"
-          />
-          <MultiSelect.Popper>
-            <MultiSelect.Card>
-              <MultiSelect.List>
-                {item => (
-                  <MultiSelect.Item data-id={item}>
-                    <MultiSelect.Item.Text>{item}</MultiSelect.Item.Text>
-                  </MultiSelect.Item>
-                )}
-              </MultiSelect.List>
-            </MultiSelect.Card>
-          </MultiSelect.Popper>
+          <FormField.Field>
+            <FormField.Input
+              as={MultiSelect.Input}
+              placeholder="Select Multiple"
+              removeLabel="Remove"
+            />
+            <MultiSelect.Popper>
+              <MultiSelect.Card>
+                <MultiSelect.List>
+                  {item => (
+                    <MultiSelect.Item data-id={item}>
+                      <MultiSelect.Item.Text>{item}</MultiSelect.Item.Text>
+                    </MultiSelect.Item>
+                  )}
+                </MultiSelect.List>
+              </MultiSelect.Card>
+            </MultiSelect.Popper>
 
-          <FormField.Hint>
-            {model.state.selectedIds.length < 1
-              ? 'Select at least one topping.'
-              : model.state.selectedIds.length > 3
-              ? 'More than 3 toppings cost extra.'
-              : undefined}
-          </FormField.Hint>
+            <FormField.Hint>
+              {model.state.selectedIds.length < 1
+                ? 'Select at least one topping.'
+                : model.state.selectedIds.length > 3
+                ? 'More than 3 toppings cost extra.'
+                : undefined}
+            </FormField.Hint>
+          </FormField.Field>
         </FormField>
       </MultiSelect>
     </>

package/dist/mdx/preview-react/radio/Radio.mdx

@@ -1,7 +1,7 @@
 import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Error from './examples/Error';
 import Inverse from './examples/Inverse';
 import LabelPosition from './examples/LabelPosition';
@@ -110,18 +110,18 @@ some behavior handled for you.
 
 ### Error States
 
-Set the error prop of the wrapping `FormField` to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the `RadioGroup` to the alert or error state, respectively. You
+Set the `error` prop of the wrapping `FormField` to `"caution"` or
+`"error"` to set the `RadioGroup` to the alert or error state, respectively. You
 will also need to set the `hintId` and `hintText` props on the `FormField` to meet accessibility
 standards. You must set an `aria-describedby` attribute on the `RadioGroup` element that matches the
 value of `hintId` set on the `FormField` element. These attributes ensure that the alert message is
 associated to the `RadioGroup` and read out by voiceover.
 
-#### Alert
+#### Caution
 
 Use the alert state when a selection is valid but there is additional information.
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/preview-react/radio/examples/{Alert.tsx → Caution.tsx}

@@ -13,7 +13,7 @@ export default () => {
   };
 
   return (
-    <FormFieldGroup error="alert" id="hint-alert">
+    <FormFieldGroup error="caution" id="hint-alert">
       <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
       <FormFieldGroup.Field>
         <FormFieldGroup.List

package/dist/mdx/preview-react/select/Select.mdx

@@ -10,7 +10,7 @@ import DefaultWithCustomOptions from './examples/Top Label/DefaultWithCustomOpti
 import DefaultWithSimpleOptions from './examples/Top Label/DefaultWithSimpleOptions';
 import Scrollable from './examples/Top Label/Scrollable';
 import Disabled from './examples/Top Label/Disabled';
-import Alert from './examples/Top Label/Alert';
+import Caution from './examples/Top Label/Caution';
 import Error from './examples/Top Label/Error';
 import Grow from './examples/Top Label/Grow';
 import DefaultLeft from './examples/Left Label/DefaultLeft';
@@ -62,7 +62,7 @@ import GrowLeft from './examples/Left Label/GrowLeft';
 
 ### Alert
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 ### Error
 
@@ -96,7 +96,7 @@ import GrowLeft from './examples/Left Label/GrowLeft';
 
 ### Alert
 
-<ExampleCodeBlock code={AlertLeft} />
+<ExampleCodeBlock code={CautionLeft} />
 
 ### Error
 

package/dist/mdx/preview-react/select/examples/Left Label/AlertLeft.tsx

@@ -7,7 +7,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export default () => {
   return (
-    <FormField orientation="horizontalStart" id="select-alert" error="alert">
+    <FormField orientation="horizontalStart" id="select-alert" error="caution">
       <FormField.Label>Label</FormField.Label>
       <FormField.Field>
         {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}

package/dist/mdx/preview-react/select/examples/Top Label/{Alert.tsx → Caution.tsx }

@@ -5,7 +5,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export default () => {
   return (
-    <FormField id="select-alert" error="alert">
+    <FormField id="select-alert" error="caution">
       <FormField.Label>Label</FormField.Label>
       <FormField.Field>
         {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}

package/dist/mdx/preview-react/select/examples/Top Label/index.ts

@@ -3,6 +3,6 @@ export {DefaultWithCustomOptions} from './DefaultWithCustomOptions';
 export {DefaultWithSimpleOptions} from './DefaultWithSimpleOptions';
 export {Scrollable} from './Scrollable';
 export {Disabled} from './Disabled';
-export {Alert} from './Alert';
+export {Caution} from './Caution';
 export {Error} from './Error';
 export {Grow} from './Grow';

package/dist/mdx/react/button/button/examples/ExternalHyperlinkInverse.tsx

@@ -23,7 +23,7 @@ export default () => (
     </ExternalHyperlink>
     <ExternalHyperlink
       href="https://workday.com"
-      variant="standalone-inverse"
+      variant="standaloneInverse"
       iconLabel="Opens link in new window"
     >
       Hyperlink

package/dist/mdx/react/button/button/examples/HyperlinkInverse.tsx

@@ -17,7 +17,7 @@ export default () => (
     <Hyperlink href="#hyperlink" variant="inverse">
       Hyperlink
     </Hyperlink>
-    <Hyperlink href="#hyperlink" variant="standalone-inverse">
+    <Hyperlink href="#hyperlink" variant="standaloneInverse">
       Hyperlink
     </Hyperlink>
   </Box>

package/dist/mdx/react/checkbox/Checkbox.mdx

@@ -4,7 +4,7 @@ import {
   Specifications,
   InformationHighlight,
 } from '@workday/canvas-kit-docs';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Inverse from './examples/Inverse';
 import Disabled from './examples/Disabled';
@@ -84,18 +84,18 @@ Labels for required fields are suffixed by a red asterisk.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the Checkbox to the Alert or Error state, respectively. You will
+Set the `error` prop of the wrapping Form Field to `"caution"` or
+`"error"` to set the Checkbox to the Alert or Error state, respectively. You will
 also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
 standards. You may wish to omit the `label` prop on the Form Field given that Checkbox already
 includes a label.
 
-The `error` prop may be applied directly to the Checkbox with a value of `Checkbox.ErrorType.Alert`
-or `Checkbox.ErrorType.Error` if Form Field is not being used.
+The `error` prop may be applied directly to the Checkbox with a value of `"caution"`
+or `"error"` if Form Field is not being used.
 
-#### Alert
+#### Caution
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/checkbox/examples/{Alert.tsx → Caution.tsx}

@@ -10,7 +10,7 @@ export default () => {
   };
 
   return (
-    <FormField error="alert">
+    <FormField error="caution">
       <FormField.Label>Confirm</FormField.Label>
       <FormField.Field>
         <FormField.Input

package/dist/mdx/react/color-picker/color-input/ColorInput.mdx

@@ -4,7 +4,7 @@ import {
   SymbolDoc,
   Specifications,
 } from '@workday/canvas-kit-docs';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Checked from './examples/Checked';
 import Disabled from './examples/Disabled';
@@ -90,14 +90,14 @@ Labels for required fields are suffixed by a red asterisk.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the Color Input to the Alert or Error state, respectively. You
+Set the `error` prop of the wrapping Form Field to `"caution"` or
+`"error"` to set the Color Input to the Caution or Error state, respectively. You
 will also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
 standards.
 
-#### Alert
+#### Caution
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/color-picker/color-input/examples/{Alert.tsx → Caution.tsx}

@@ -10,7 +10,7 @@ export default () => {
   };
 
   return (
-    <FormField error="alert">
+    <FormField error="caution">
       <FormField.Label>Background Color</FormField.Label>
       <FormField.Field>
         <FormField.Input as={ColorInput} onChange={handleChange} value={value} />

package/dist/mdx/react/expandable/examples/EndIcon.tsx

@@ -3,7 +3,9 @@ import {Expandable} from '@workday/canvas-kit-react/expandable';
 export default () => (
   <Expandable>
     <Expandable.Target headingLevel="h4">
-      <Expandable.Title>Title</Expandable.Title>
+      <Expandable.Title>
+        TitleTitleTitleTitleTitle TitleTitleTitleTitle TitleTitleTitle Title
+      </Expandable.Title>
       <Expandable.Icon iconPosition="end" />
     </Expandable.Target>
 

package/dist/mdx/react/form-field/FormField.mdx

@@ -1,6 +1,6 @@
 import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Error from './examples/Error';
 import Disabled from './examples/Disabled';
 import HiddenLabel from './examples/HiddenLabel';
@@ -79,13 +79,13 @@ accessibility standards. The orientation of the label by default is `vertical`.
 Set the `error` prop of the Form Field or define it in the model to indicate it has an error.
 `error` accepts the following values:
 
-`"error" | "alert" | undefined`
+`"error" | "caution" | undefined`
 
-### Alert
+### Caution
 
-Use the alert state when a value is valid but there is additional information.
+Use the caution state when a value is valid but there is additional information.
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 ### Error
 
@@ -155,7 +155,7 @@ accessibility of grouped inputs.
 
 `FormFieldGroup` supports the same props of `FormField`:
 
-- `error`: `"alert" | "error"` Defines the error around the whole group of inputs.
+- `error`: `"caution" | "error"` Defines the error around the whole group of inputs.
 - `orientation`: `"horizontal" | "vertical"` Defines the legend placement.
 - `isRequired`: `true` Defines if a group like RadioGroup is required.
 

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

@@ -27,7 +27,7 @@ export default () => {
         </FormField.Field>
       </FormField>
 
-      <FormField isRequired={true} error="alert" grow>
+      <FormField isRequired={true} error="caution" grow>
         <FormField.Label>Email</FormField.Label>
         <FormField.Field>
           <FormField.Input as={TextInput} />

package/dist/mdx/react/form-field/examples/{Alert.tsx → Caution.tsx}

@@ -12,7 +12,7 @@ export default () => {
 
   return (
     <Flex>
-      <FormField error="alert">
+      <FormField error="caution">
         <FormField.Label>First Name</FormField.Label>
         <FormField.Field>
           <FormField.Input as={TextInput} value={value} onChange={handleChange} />

package/dist/mdx/react/radio/Radio.mdx

@@ -7,7 +7,7 @@ import {
 
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
 import Inverse from './examples/Inverse';
@@ -96,14 +96,14 @@ Labels for required fields are suffixed by a red asterisk.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the Radio Group to the Alert or Error state, respectively. You
+Set the `error` prop of the wrapping Form Field to `"caution"` or
+`"error"` to set the Radio Group to the Caution or Error state, respectively. You
 will also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
 standards.
 
-#### Alert
+#### Caution
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/radio/examples/{Alert.tsx → Caution.tsx}

@@ -11,7 +11,7 @@ export default () => {
   };
 
   return (
-    <FormField error="alert" as="fieldset">
+    <FormField error="caution" as="fieldset">
       <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
       <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />

package/dist/mdx/react/select/Select.mdx

@@ -4,7 +4,7 @@ import {
   SymbolDoc,
   Specifications,
 } from '@workday/canvas-kit-docs';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Complex from './examples/Complex';
 import Controlled from './examples/Controlled';
@@ -166,11 +166,11 @@ forward `ref` to its underlying `<input type="text" role="combobox">` element.
 
 ### Error States
 
-Set the `error` prop of the wrapping `FormField` to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the `Select` to the alert or error state, respectively. You will
+Set the `error` prop of the wrapping `FormField` to `"caution"` or
+`"error"` to set the `Select` to the caution or error state, respectively. You will
 also need to set the `hintId` and `hintText` props on the `FormField` to meet accessibility
 standards. You must set an `id` attribute on the `Select.Input` element that matches the value of
-`inputId` set on the `FormField` element. These attributes ensure that the alert message is
+`inputId` set on the `FormField` element. These attributes ensure that the caution message is
 associated to the `Select` and read out by voiceover.
 
 **Note: The Select container component, `Select`, must wrap `FormField` to ensure `Select.Input` is
@@ -185,11 +185,11 @@ styled correctly.**
 </Select>
 ```
 
-#### Alert
+#### Caution
 
 Use the alert state when a selection is valid but there is additional information.
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/select/examples/{Alert.tsx → Caution.tsx}

@@ -25,7 +25,7 @@ export default () => {
   };
   return (
     <Flex cs={parentContainerStyles}>
-      <FormField error="alert">
+      <FormField error="caution">
         <FormField.Label>Contact</FormField.Label>
         <FormField.Field>
           <Select items={options}>

package/dist/mdx/react/switch/Switch.mdx

@@ -4,7 +4,7 @@ import {
   Specifications,
   InformationHighlight,
 } from '@workday/canvas-kit-docs';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
 import Error from './examples/Error';
@@ -54,17 +54,17 @@ input component. By default, the orientation will be set to `vertical`.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the Switch to the Alert or Error state, respectively. You will
+Set the `error` prop of the wrapping Form Field to `"caution"` or
+`"error"` to set the Switch to the Caution or Error state, respectively. You will
 also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
 standards.
 
-The `error` prop may be applied directly to the Switch with a value of `Switch.ErrorType.Alert` or
+The `error` prop may be applied directly to the Switch with a value of `Switch.ErrorType.Caution` or
 `Switch.ErrorType.Error` if Form Field is not being used.
 
-#### Alert
+#### Caution
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/switch/examples/{Alert.tsx → Caution.tsx}

@@ -10,7 +10,7 @@ export default () => {
   };
 
   return (
-    <FormField error="alert">
+    <FormField error="caution">
       <FormField.Label>Dark Mode</FormField.Label>
       <FormField.Field>
         <FormField.Input as={Switch} checked={checked} onChange={handleChange} />

package/dist/mdx/react/text-area/TextArea.mdx

@@ -4,7 +4,7 @@ import {
   Specifications,
   InformationHighlight,
 } from '@workday/canvas-kit-docs';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
 import Error from './examples/Error';
@@ -91,17 +91,17 @@ Labels for required fields are suffixed by a red asterisk.
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the Text Area to the Alert or Error state, respectively. You will
+Set the `error` prop of the wrapping Form Field to `"caution"` or
+`"error"` to set the Text Area to the Caution or Error state, respectively. You will
 also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
 standards.
 
-The `error` prop may be applied directly to the Text Area with a value of `TextArea.ErrorType.Alert`
+The `error` prop may be applied directly to the Text Area with a value of `"TextArea.ErrorType.Caution"`
 or `TextArea.ErrorType.Error` if Form Field is not being used.
 
-#### Alert
+#### Caution
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/text-area/examples/{Alert.tsx → Caution.tsx}

@@ -10,7 +10,7 @@ export default () => {
   };
 
   return (
-    <FormField error="alert">
+    <FormField error="caution">
       <FormField.Label>Please enter your review.</FormField.Label>
       <FormField.Field>
         <FormField.Input as={TextArea} onChange={handleChange} value={value} />

package/dist/mdx/react/text-input/TextInput.mdx

@@ -4,7 +4,7 @@ import {
   SymbolDoc,
   Specifications,
 } from '@workday/canvas-kit-docs';
-import Alert from './examples/Alert';
+import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
 import Error from './examples/Error';
@@ -99,17 +99,17 @@ method to change width. The `width` prop is used to correctly position other inn
 
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `FormField.ErrorType.Alert` or
-`FormField.ErrorType.Error` to set the Text Input to the Alert or Error state, respectively. You
+Set the `error` prop of the wrapping Form Field to `"caution"` or
+`"error"` to set the Text Input to the Caution or Error state, respectively. You
 will also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
 standards.
 
 The `error` prop may be applied directly to the Text Input with a value of
-`TextInput.ErrorType.Alert` or `TextInput.ErrorType.Error` if Form Field is not being used.
+`TextInput.ErrorType.Caution` or `TextInput.ErrorType.Error` if Form Field is not being used.
 
-#### Alert
+#### Caution
 
-<ExampleCodeBlock code={Alert} />
+<ExampleCodeBlock code={Caution} />
 
 #### Error
 

package/dist/mdx/react/text-input/examples/{Alert.tsx → Caution.tsx}

@@ -10,7 +10,7 @@ export default () => {
   };
 
   return (
-    <FormField error="alert">
+    <FormField error="caution">
       <FormField.Label>Email</FormField.Label>
       <FormField.Field>
         <FormField.Input as={TextInput} onChange={handleChange} value={value} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1237-next.0",
+  "version": "14.0.0-alpha.1239-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1237-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1237-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1237-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1237-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1239-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1239-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1239-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1239-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.12",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "8a03bc6fdf11ecb2672ad937247aaf18b7cee0ec"
+  "gitHead": "fdb8b845a09a86de1fb0a383fb3c5def6016e064"
 }