@workday/canvas-kit-preview-react 14.0.0-alpha.1203-next.0 → 14.0.0-alpha.1210-next.0

package/status-indicator/lib/StatusIndicator.tsx

@@ -1,26 +1,45 @@
 import React from 'react';
 
 import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {ExtractStencilProps, createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {StatusIndicatorIcon} from './StatusIndicatorIcon';
 import {StatusIndicatorLabel} from './StatusIndicatorLabel';
 
-export type StatusIndicatorVariant = 'gray' | 'orange' | 'blue' | 'green' | 'red' | 'transparent';
+/**
+ * @deprecated This is being deprecated and will be removed in a future release. Use
+ * `StatusIndicatorProps['variant']` instead.
+ */
+export type StatusIndicatorVariant =
+  | 'info'
+  | 'neutral'
+  | 'caution'
+  | 'positive'
+  | 'critical'
+  | 'ai'
+  | 'transparent'
+  | 'blue'
+  | 'green'
+  | 'orange'
+  | 'red'
+  | 'gray';
 
-export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never> {
-  /**
-   * Defines the emphasis of the `StatusIndicator`.
-   * `high` emphasis will create more contrast between the background and text colors.
-   * `low` emphasis will create less contrast between the background and text colors.
-   * @default 'low'
-   */
-  emphasis?: 'high' | 'low';
+export interface StatusIndicatorProps
+  extends ExtractProps<typeof Flex, never>,
+    Omit<ExtractStencilProps<typeof statusIndicatorStencil>, 'variant'> {
   /**
    * Defines the color of the `StatusIndicator`.
-   * @default 'gray'
+   * * `info` | `blue` - Uses the info system color and is used for informational status indications
+   * * `positive` | `green` - Uses the positive system color and is used for positive status indications
+   * * `caution` | `orange` - Uses the caution system color and is used for warnings or required actions
+   * * `critical` | `red` - Uses the error system color and is used for critical or negative status indications
+   * * `neutral` | `gray` - Uses the neutral system color and generally doesn't have positive or negative connotations
+   * * `illuminate` - Uses the AI system color and is used for AI generated content
+   * * `transparent` - Uses the transparent system color and is used for overlays on top of images or videos
+   *
+   * @default 'neutral'
    */
   variant?: StatusIndicatorVariant;
   /**
@@ -29,99 +48,152 @@ export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never> {
   children: React.ReactNode;
 }
 
+// TODO: Remove this in a future release
+const deprecatedVariantsMap = {
+  blue: 'info',
+  green: 'positive',
+  orange: 'caution',
+  red: 'critical',
+  gray: 'neutral',
+} as const;
+
 const statusIndicatorStencil = createStencil({
   base: {
     display: 'inline-flex',
     gap: system.space.x1,
     maxWidth: px2rem(200),
     alignItems: 'center',
-    borderRadius: system.shape.half,
+    borderRadius: system.shape.round,
     height: px2rem(20),
-    padding: `${system.space.zero} ${system.space.x1}`,
+    padding: `${system.space.zero} ${system.space.x2}`,
     outline: `${px2rem(1)} solid transparent`,
+    [systemIconStencil.vars.color]: 'currentColor',
   },
   modifiers: {
-    gray: {
-      high: {
-        color: system.color.static.white,
-        [systemIconStencil.vars.color]: system.color.static.white,
-        background: system.color.static.gray.default,
+    /**
+     * Defines the color of the `StatusIndicator`.
+     * * `info` | `blue` - Uses the info system color and is used for informational status indications
+     * * `positive` | `green` - Uses the positive system color and is used for positive status indications
+     * * `caution` | `orange` - Uses the caution system color and is used for warnings or required actions
+     * * `critical` | `red` - Uses the error system color and is used for critical or negative status indications
+     * * `neutral` | `gray` - Uses the neutral system color and generally doesn't have positive or negative connotations
+     * * `illuminate` - Uses the AI system color and is used for AI generated content
+     * * `transparent` - Uses the transparent system color and is used for overlays on top of images or videos
+     *
+     * @default 'neutral'
+     */
+    variant: {
+      info: {
+        color: system.color.fg.info.strong,
+        backgroundColor: system.color.bg.info.softer,
+      },
+      positive: {
+        color: system.color.fg.positive.strong,
+        backgroundColor: system.color.fg.positive.softer,
+      },
+      caution: {
+        color: system.color.fg.caution.soft,
+        backgroundColor: system.color.bg.caution.softer,
       },
-      low: {
-        color: system.color.fg.muted.default,
-        [systemIconStencil.vars.color]: system.color.static.gray.strong,
-        background: system.color.bg.alt.softer,
+      critical: {
+        color: system.color.fg.critical.strong,
+        backgroundColor: system.color.bg.critical.softer,
+      },
+      neutral: {
+        color: system.color.fg.muted.strong,
+        backgroundColor: system.color.bg.alt.default,
+      },
+      ai: {
+        color: system.color.fg.ai,
+        backgroundColor: system.color.bg.ai.default,
+      },
+      transparent: {
+        color: system.color.fg.inverse,
+        backgroundColor: system.color.bg.translucent,
       },
     },
-    orange: {
-      high: {
-        color: system.color.static.gray.stronger,
-        [systemIconStencil.vars.color]: system.color.static.gray.stronger,
-        background: system.color.static.amber.default,
+    /**
+     * Defines the emphasis of the `StatusIndicator`. `low` should be used in almost all cases.
+     * `high` is being deprecated and will be removed in a future release.
+     * * `low` - Normal emphasis and will visually fit in with other components.
+     * * `high` - High emphasis has been used to make the `StatusIndicator` stand out more, but
+     *   tends to overpower other components. It will be removed and should not be used.
+     *
+     * @default 'low'
+     *
+     * @deprecated This is being deprecated and will be removed in a future release. `high` is being removed
+     */
+    emphasis: {
+      low: {},
+      /**
+       * @deprecated This is being deprecated and will be removed in a future release.
+       */
+      high: {},
+    },
+  },
+  compound: [
+    {
+      modifiers: {
+        variant: 'info',
+        emphasis: 'high',
       },
-      low: {
-        color: system.color.static.amber.strongest,
-        [systemIconStencil.vars.color]: system.color.static.amber.strongest,
-        background: system.color.static.amber.softer,
+      styles: {
+        backgroundColor: system.color.bg.info.default,
+        color: system.color.fg.inverse,
       },
     },
-    blue: {
-      high: {
-        color: system.color.static.white,
-        [systemIconStencil.vars.color]: system.color.static.white,
-        background: system.color.static.blue.default,
+    {
+      modifiers: {
+        variant: 'positive',
+        emphasis: 'high',
       },
-      low: {
-        color: system.color.static.blue.strong,
-        [systemIconStencil.vars.color]: system.color.static.blue.strong,
-        background: system.color.static.blue.softer,
+      styles: {
+        backgroundColor: system.color.bg.positive.default,
+        color: system.color.fg.inverse,
       },
     },
-    green: {
-      high: {
-        color: system.color.static.white,
-        [systemIconStencil.vars.color]: system.color.static.white,
-        background: system.color.static.green.strong,
+    {
+      modifiers: {
+        variant: 'caution',
+        emphasis: 'high',
       },
-      low: {
-        color: system.color.static.green.strong,
-        [systemIconStencil.vars.color]: system.color.static.green.strong,
-        background: system.color.static.green.softer,
+      styles: {
+        backgroundColor: system.color.bg.caution.default,
+        color: system.color.fg.caution.strong,
       },
     },
-    red: {
-      high: {
-        color: system.color.static.white,
-        [systemIconStencil.vars.color]: system.color.static.white,
-        background: system.color.static.red.default,
+    {
+      modifiers: {
+        variant: 'critical',
+        emphasis: 'high',
       },
-      low: {
-        color: system.color.static.red.strong,
-        [systemIconStencil.vars.color]: system.color.static.red.strong,
-        background: system.color.static.red.softer,
+      styles: {
+        backgroundColor: system.color.bg.critical.default,
+        color: system.color.fg.inverse,
       },
     },
-    transparent: {
-      high: {
-        color: system.color.static.white,
-        [systemIconStencil.vars.color]: system.color.static.white,
-        background: system.color.bg.translucent,
+    {
+      modifiers: {
+        variant: 'neutral',
+        emphasis: 'high',
       },
-      low: {
-        color: system.color.static.white,
-        [systemIconStencil.vars.color]: system.color.static.white,
-        background: system.color.bg.translucent,
+      styles: {
+        backgroundColor: system.color.bg.muted.default,
+        color: system.color.fg.inverse,
       },
     },
+  ],
+  defaultModifiers: {
+    variant: 'neutral',
+    emphasis: 'low',
   },
 });
 
 /**
- * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
- * apply spacing evenly between its children. It has a default maximum width of `200px`.
+ * `StatusIndicator` is a container component has a default maximum width of `200px`.
  *
  * ```tsx
- * <StatusIndicator emphasis="low" variant="blue">
+ * <StatusIndicator variant="info">
  *   {Child components}
  * </StatusIndicator>
  * ```
@@ -130,8 +202,8 @@ export const StatusIndicator = createComponent('div')({
   displayName: 'StatusIndicator',
   subComponents: {
     /**
-     * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
-     * contents exceed the component's maximum width.
+     * `StatusIndicator.Label` will apply an ellipsis if its contents exceed the component's maximum
+     * width.
      *
      * ```tsx
      * <StatusIndicator.Label>{The text to be rendered}</StatusIndicator.Label>
@@ -148,13 +220,22 @@ export const StatusIndicator = createComponent('div')({
      */
     Icon: StatusIndicatorIcon,
   },
-  Component: (
-    {emphasis = 'low', variant = 'gray', children, ...elemProps}: StatusIndicatorProps,
-    ref,
-    Element
-  ) => {
+  Component: ({variant, emphasis, children, ...elemProps}: StatusIndicatorProps, ref, Element) => {
     return (
-      <Element ref={ref} {...mergeStyles(elemProps, statusIndicatorStencil({[variant]: emphasis}))}>
+      <Element
+        ref={ref}
+        {...mergeStyles(
+          elemProps,
+          statusIndicatorStencil({
+            variant:
+              // collapse the type to only the allowed modifiers. Look them up in the map, then
+              // fallback to the passed variant.
+              deprecatedVariantsMap[variant as keyof typeof deprecatedVariantsMap] ||
+              (variant as keyof typeof statusIndicatorStencil.modifiers.variant),
+            emphasis,
+          })
+        )}
+      >
         {children}
       </Element>
     );

package/text-area/lib/TextArea.tsx

@@ -7,7 +7,7 @@ import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {TextAreaField} from './TextAreaField';
 import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
 /**
- * @deprecated ⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
+ * @deprecated ⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`TextArea` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs) instead.
  */
 export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
   /**
@@ -18,7 +18,7 @@ export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
 
 /**
  * @stencil formFieldStencil
- * @deprecated ⚠️ `TextArea` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * @deprecated ⚠️ `TextArea` in Preview has been deprecated and will be removed in a future major version. Please use [`TextArea` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs) instead.
  */
 export const TextArea = createContainer('div')({
   displayName: 'TextArea',

package/text-area/lib/TextAreaField.tsx

@@ -41,7 +41,7 @@ const baseStyles: CSSProperties = {
 };
 
 /**
- * @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
+ * @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs) in Preview instead.
  */
 export const TextAreaField = createSubcomponent('textarea')({
   displayName: 'TextArea.Field',

package/text-input/lib/TextInput.tsx

@@ -7,7 +7,7 @@ import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {TextInputField} from './TextInputField';
 
 /**
- * @deprecated ⚠️ `TextInputProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * @deprecated ⚠️ `TextInputProps` in Preview has been deprecated and will be removed in a future major version. Please use [`TextInput` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs) instead.
  */
 export interface TextInputProps extends ExtractProps<typeof FormField, never> {
   /**
@@ -17,7 +17,7 @@ export interface TextInputProps extends ExtractProps<typeof FormField, never> {
 }
 /**
  * @stencil formFieldStencil
- * @deprecated ⚠️ `TextInput` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * @deprecated ⚠️ `TextInput` in Preview has been deprecated and will be removed in a future major version. Please use [`TextInput` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textinput--docs) instead.
  */
 export const TextInput = createContainer('div')({
   displayName: 'TextInput',

package/text-input/lib/TextInputField.tsx

@@ -57,7 +57,7 @@ const textInputFieldStencil = createStencil({
 });
 
 /**
- * @deprecated ⚠️ `TextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * @deprecated ⚠️ `TextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs) instead.
  */
 export const TextInputField = createSubcomponent('input')({
   displayName: 'TextInput.Field',