chore!: Refactor StatusIndicator to use system colors (#2700)

Fixes: #2596 `StatusIndicator` has been updated to use system colors and its model has been removed. [category:Components] Release Note: As part of the refactor, we've removed the following exports that were primarily used to style the component: - `useStatusIndicatorModel` - `useStatusIndicator` - `statusIndicatorColors` - `useStatusIndicatorIcon`. Since there was no usage of these by our consumers, there should be no breaking changes. ### BREAKING CHANGES There's a visual breaking change. The `transparent` variant now uses `system.color.bg.translucent`. Co-authored-by: @mannycarrera4 <mannycarrera4@users.noreply.github.com> Co-authored-by: @josh-bagwell <44883293+josh-bagwell@users.noreply.github.com>
Workday · Apr 19, 2024 · dbc9dbc · dbc9dbc
1 parent f984e87
commit dbc9dbc
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 209 deletions.
diff --git a/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx
@@ -19,6 +19,11 @@ any questions.
   - [Label Text](#label-text)
   - [Text Area (Preview)](#text-area-preview)
   - [Text Input (Preview)](#text-input-preview)
+- [Removals](#removals)
+  - [Status Indicator model](#status-indicator-model)
+    - [statusIndicatorColors](#statusIndicatorColors)
+    - [useStatusIndicator](#useStatusIndicator)
+    - [useStatusIndicatorIcon](#useStatusIndicatorIcon)
 - [Component Style Updates](#component-style-updates)
 - [Component Updates](#component-updates)
   - [Buttons](#buttons)
@@ -31,6 +36,7 @@ any questions.
   - [Loading Dots](#loading-dots)
   - [Radio (Preview)](#radio-preview)
   - [Select](#select)
+  - [Status Indicator (Preview)](#status-indicator-preview)
   - [Switch](#switch)
   - [Table (Preview)](#table-preview)
   - [Text](#text)
@@ -219,6 +225,22 @@ instead.
 
 ---
 
+## Removals
+
+### Status Indicator model
+
+**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2700)
+
+As part of the refactor, we've removed the following exports that were primarily used to style the component:
+- `useStatusIndicatorModel`
+- `useStatusIndicator`
+- `statusIndicatorColors`
+- `useStatusIndicatorIcon`.
+
+Since there was no usage of these by our consumers, there should be no breaking changes.
+
+---
+
 ## Component Style Updates
 
 These changes are to address discrepancies that were found between Canvas Kit Design Specs and
@@ -263,7 +285,7 @@ See below:
         licorice100
       </Table.Cell>
     </Table.Row>
-		<Table.Row>
+    <Table.Row>
       <Table.Cell>DeleteButton</Table.Cell>
       <Table.Cell />
       <Table.Cell>disabled</Table.Cell>
@@ -434,13 +456,16 @@ See below:
 
 **PR:** [#2666](https://github.com/Workday/canvas-kit/pull/2666)
 
-`PrimaryButton`, `SecondaryButton`, `TertiaryButton` and `DeleteButton` have been refactored to use our
+`PrimaryButton`, `SecondaryButton`, `TertiaryButton` and `DeleteButton` have been refactored to use
+our
 [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
 and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). The
 components now support the `cs` prop, but otherwise the API has not changed.
 
 > #### Visual Breaking Change
-> The `border` color for `SecondaryButton` on the `focus` state is now `transparent` and may cause a small visual difference in visual tests.
+>
+> The `border` color for `SecondaryButton` on the `focus` state is now `transparent` and may cause a
+> small visual difference in visual tests.
 
 ### Card
 
@@ -729,6 +754,22 @@ identically as it did in previous versions.
 [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
 and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). The
 component now supports the `cs` prop, but otherwise the API has not changed. It should behave
+identically as it did in previous versions.
+
+### Status Indicator (Preview)
+
+**PR:** [#2620] https://github.com/Workday/canvas-kit/pull/2620
+
+`StatusIndicator` now uses
+[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
+our
+[new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
+The component now supports the `cs` prop, but otherwise the API has not been changed.
+
+> #### Visual Breaking Change
+> Opacity applied to the whole container has been removed for transparent variant and replace by
+> translucent color. By this change opacity has been changed from `0.85` to `0.84`, so there is
+> possibility of the small visual change.
 
 ### Switch
 
@@ -763,22 +804,6 @@ longer extends the `Box` component, however, it still supports Emotion `styled`
 Type level components: `Title`, `Heading`, `BodyText` and `Subtext`, have not been changed since
 they extend the `Text` component. These changes do not affect the components API.
 
-### StatusIndicator (Preview)
-
-**PR:** [#2620] https://github.com/Workday/canvas-kit/pull/2620
-
-`StatusIndicator` now uses
-[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
-our
-[new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
-The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
-identically as it did in previous versions.
-
-- statusIndicatorColors has been deprecated and will be removed in a future version as a part of
-  implementation of stencils and new tokens
-- useStatusIndicatorIcon has been deprecated and will be removed in a future version as a part of
-  implementation of stencils and new tokens
-
 ## Style Utility Updates
 
 ### `createStencil`
@@ -828,6 +853,5 @@ experimental code and is analagous to code in alpha.
 
 Breaking changes can be deployed to Labs at any time without triggering a major version update and
 may not be subject to the same rigor in communcation and migration strategies reserved for breaking
-changes in [Preview](#preview) and [Main](#main).
-import { opacity } from "@workday/canvas-tokens-web/dist/es6/system"
-
+changes in [Preview](#preview) and [Main](#main). import { opacity } from
+"@workday/canvas-tokens-web/dist/es6/system"
diff --git a/modules/preview-react/status-indicator/index.ts b/modules/preview-react/status-indicator/index.ts
@@ -1,2 +1 @@
-export * from './lib/StatusIndicator';
-export * from './lib/hooks/useStatusIndicatorModel';
+export {StatusIndicator, StatusIndicatorProps, StatusIndicatorVariant} from './lib/StatusIndicator';
diff --git a/modules/preview-react/status-indicator/lib/StatusIndicator.tsx b/modules/preview-react/status-indicator/lib/StatusIndicator.tsx
@@ -1,15 +1,28 @@
 import React from 'react';
 
-import {ExtractProps, createContainer} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
+import {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';
-import {useStatusIndicatorModel} from './hooks';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+
+export type StatusIndicatorVariant = 'gray' | 'orange' | 'blue' | 'green' | 'red' | 'transparent';
 
 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';
+  /**
+   * Defines the color of the `StatusIndicator`.
+   * @default 'gray'
+   */
+  variant?: StatusIndicatorVariant;
   /**
    * Children of the `StatusIndicator`. Can contain a `StatusIndicator.Label` and optionally a `StatusIndicator.Icon`.
    */
@@ -29,82 +42,77 @@ const statusIndicatorStencil = createStencil({
   modifiers: {
     gray: {
       high: {
-        color: base.frenchVanilla100,
-        [systemIconStencil.vars.color]: base.frenchVanilla100,
-        background: base.licorice300,
+        color: system.color.static.white,
+        [systemIconStencil.vars.color]: system.color.static.white,
+        background: system.color.static.gray.default,
       },
       low: {
-        color: base.licorice400,
-        [systemIconStencil.vars.color]: base.licorice400,
-        background: base.soap300,
+        color: system.color.static.gray.strong,
+        [systemIconStencil.vars.color]: system.color.static.gray.strong,
+        background: system.color.static.gray.soft,
       },
     },
     orange: {
       high: {
-        color: base.licorice500,
-        [systemIconStencil.vars.color]: base.licorice500,
-        background: base.cantaloupe400,
+        color: system.color.static.gray.stronger,
+        [systemIconStencil.vars.color]: system.color.static.gray.stronger,
+        background: system.color.static.orange.default,
       },
       low: {
-        color: base.toastedMarshmallow600,
-        [systemIconStencil.vars.color]: base.toastedMarshmallow600,
-        background: base.cantaloupe100,
+        color: system.color.static.gold.stronger,
+        [systemIconStencil.vars.color]: system.color.static.gold.stronger,
+        background: system.color.static.orange.soft,
       },
     },
     blue: {
       high: {
-        color: base.frenchVanilla100,
-        [systemIconStencil.vars.color]: base.frenchVanilla100,
-        background: base.blueberry400,
+        color: system.color.static.white,
+        [systemIconStencil.vars.color]: system.color.static.white,
+        background: system.color.static.blue.default,
       },
       low: {
-        color: base.blueberry500,
-        [systemIconStencil.vars.color]: base.blueberry500,
-        background: base.blueberry100,
+        color: system.color.static.blue.strong,
+        [systemIconStencil.vars.color]: system.color.static.blue.strong,
+        background: system.color.static.blue.soft,
       },
     },
     green: {
       high: {
-        color: base.frenchVanilla100,
-        [systemIconStencil.vars.color]: base.frenchVanilla100,
-        background: base.greenApple600,
+        color: system.color.static.white,
+        [systemIconStencil.vars.color]: system.color.static.white,
+        background: system.color.static.green.strong,
       },
       low: {
-        color: base.greenApple600,
-        [systemIconStencil.vars.color]: base.greenApple600,
-        background: base.greenApple100,
+        color: system.color.static.green.strong,
+        [systemIconStencil.vars.color]: system.color.static.green.strong,
+        background: system.color.static.green.soft,
       },
     },
     red: {
       high: {
-        color: base.frenchVanilla100,
-        [systemIconStencil.vars.color]: base.frenchVanilla100,
-        background: base.cinnamon500,
+        color: system.color.static.white,
+        [systemIconStencil.vars.color]: system.color.static.white,
+        background: system.color.static.red.default,
       },
       low: {
-        color: base.cinnamon600,
-        [systemIconStencil.vars.color]: base.cinnamon600,
-        background: base.cinnamon100,
+        color: system.color.static.red.strong,
+        [systemIconStencil.vars.color]: system.color.static.red.strong,
+        background: system.color.static.red.soft,
       },
     },
     transparent: {
       high: {
-        opacity: 0.85,
-        color: base.frenchVanilla100,
-        [systemIconStencil.vars.color]: base.frenchVanilla100,
-        background: base.blackPepper600,
+        color: system.color.static.white,
+        [systemIconStencil.vars.color]: system.color.static.white,
+        background: system.color.bg.translucent,
       },
       low: {
-        opacity: 0.85,
-        color: base.frenchVanilla100,
-        [systemIconStencil.vars.color]: base.frenchVanilla100,
-        background: base.blackPepper600,
+        color: system.color.static.white,
+        [systemIconStencil.vars.color]: system.color.static.white,
+        background: system.color.bg.translucent,
       },
     },
   },
-  defaultModifiers: {
-    gray: 'low',
-  },
 });
 
 /**
@@ -117,9 +125,8 @@ const statusIndicatorStencil = createStencil({
  * </StatusIndicator>
  * ```
  */
-export const StatusIndicator = createContainer('div')({
+export const StatusIndicator = createComponent('div')({
   displayName: 'StatusIndicator',
-  modelHook: useStatusIndicatorModel,
   subComponents: {
     /**
      * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
@@ -140,15 +147,15 @@ export const StatusIndicator = createContainer('div')({
      */
     Icon: StatusIndicatorIcon,
   },
-})<StatusIndicatorProps>(({children, ...elemProps}, Element, model) => {
-  return (
-    <Element
-      {...mergeStyles(
-        elemProps,
-        statusIndicatorStencil({[model.state.variant]: model.state.emphasis})
-      )}
-    >
-      {children}
-    </Element>
-  );
+  Component: (
+    {emphasis = 'low', variant = 'gray', children, ...elemProps}: StatusIndicatorProps,
+    ref,
+    Element
+  ) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, statusIndicatorStencil({[variant]: emphasis}))}>
+        {children}
+      </Element>
+    );
+  },
 });