Remove deprecated legacy color names (#1526)

* remove deprecated legacy color names * remove legacy colors usage in Body and Badge components * remove the legacy color names leftover * add changeset * add changeset for circuit
sumup-oss · Apr 12, 2022 · ba05982 · ba05982
1 parent 5d4b9f8
commit ba05982
Show file tree

Hide file tree

Showing 18 changed files with 19 additions and 304 deletions.
diff --git a/.changeset/dull-rats-fry.md b/.changeset/dull-rats-fry.md
@@ -0,0 +1,5 @@
+---
+'@sumup/design-tokens': major
+---
+
+Removed the deprecated `success`, `warning` and `danger` legacy color names. Use `confirm`, `notify` and `alert` instead.
diff --git a/.changeset/olive-pears-sniff.md b/.changeset/olive-pears-sniff.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Removed the deprecated `success`, `warning` and `danger` color variants. Use `confirm`, `notify` and `alert` instead.
diff --git a/packages/circuit-ui/components/Badge/Badge.spec.tsx b/packages/circuit-ui/components/Badge/Badge.spec.tsx
@@ -28,16 +28,7 @@ describe('Badge', () => {
     expect(actual).toMatchSnapshot();
   });
 
-  const variants = [
-    'neutral',
-    'success',
-    'confirm',
-    'warning',
-    'notify',
-    'danger',
-    'alert',
-    'promo',
-  ] as const;
+  const variants = ['neutral', 'confirm', 'notify', 'alert', 'promo'] as const;
 
   it.each(variants)('should render with %s styles', (variant) => {
     const actual = create(<Badge variant={variant} />);

diff --git a/packages/circuit-ui/components/Badge/Badge.tsx b/packages/circuit-ui/components/Badge/Badge.tsx
@@ -17,21 +17,12 @@ import { Ref, forwardRef, HTMLAttributes } from 'react';
 import { css } from '@emotion/react';
 
 import styled, { StyleProps } from '../../styles/styled';
-import { deprecate } from '../../util/logger';
 
 export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Choose from 4 style variants. Default: 'neutral'.
    */
-  variant?:
-    | 'neutral'
-    | 'success'
-    | 'confirm'
-    | 'warning'
-    | 'notify'
-    | 'danger'
-    | 'alert'
-    | 'promo';
+  variant?: 'neutral' | 'confirm' | 'notify' | 'alert' | 'promo';
   /**
    * Use the circular badge to indicate a count of items related to an element.
    */
@@ -80,53 +71,6 @@ const variantStyles = ({
   theme,
   variant = 'neutral',
 }: StyleProps & BadgeProps) => {
-  // TODO: remove the legacy variants and this switch statement in v5
-  /* eslint-disable no-param-reassign */
-  switch (variant) {
-    case 'success':
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        process.env.NODE_ENV !== 'test'
-      ) {
-        deprecate(
-          'Badge',
-          "The Badge's `success` variant is deprecated.",
-          'Use the `confirm` variant instead.',
-        );
-      }
-      variant = 'confirm';
-      break;
-    case 'warning':
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        process.env.NODE_ENV !== 'test'
-      ) {
-        deprecate(
-          'Badge',
-          "The Badge's `warning` variant is deprecated.",
-          'Use the `notify` variant instead.',
-        );
-      }
-      variant = 'notify';
-      break;
-    case 'danger':
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        process.env.NODE_ENV !== 'test'
-      ) {
-        deprecate(
-          'Badge',
-          "The Badge's `danger` variant is deprecated.",
-          'Use the `alert` variant instead.',
-        );
-      }
-      variant = 'alert';
-      break;
-    default:
-      break;
-  }
-  /* eslint-enable no-param-reassign */
-
   const currentColor = COLOR_MAP[variant];
   return css`
     background-color: ${theme.colors[currentColor.background]};

diff --git a/packages/circuit-ui/components/Badge/__snapshots__/Badge.spec.tsx.snap b/packages/circuit-ui/components/Badge/__snapshots__/Badge.spec.tsx.snap
@@ -72,25 +72,6 @@ exports[`Badge should render with confirm styles 1`] = `
 />
 `;
 
-exports[`Badge should render with danger styles 1`] = `
-.circuit-0 {
-  border-radius: 999999px;
-  display: inline-block;
-  padding: 2px 8px;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 700;
-  text-align: center;
-  letter-spacing: 0.25px;
-  background-color: #D23F47;
-  color: #FFF;
-}
-
-<div
-  class="circuit-0"
-/>
-`;
-
 exports[`Badge should render with default styles 1`] = `
 .circuit-0 {
   border-radius: 999999px;
@@ -166,41 +147,3 @@ exports[`Badge should render with promo styles 1`] = `
   class="circuit-0"
 />
 `;
-
-exports[`Badge should render with success styles 1`] = `
-.circuit-0 {
-  border-radius: 999999px;
-  display: inline-block;
-  padding: 2px 8px;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 700;
-  text-align: center;
-  letter-spacing: 0.25px;
-  background-color: #138849;
-  color: #FFF;
-}
-
-<div
-  class="circuit-0"
-/>
-`;
-
-exports[`Badge should render with warning styles 1`] = `
-.circuit-0 {
-  border-radius: 999999px;
-  display: inline-block;
-  padding: 2px 8px;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 700;
-  text-align: center;
-  letter-spacing: 0.25px;
-  background-color: #F6CC1B;
-  color: #1A1A1A;
-}
-
-<div
-  class="circuit-0"
-/>
-`;
diff --git a/packages/circuit-ui/components/Body/Body.spec.tsx b/packages/circuit-ui/components/Body/Body.spec.tsx
@@ -39,9 +39,7 @@ describe('Body', () => {
   const variants = [
     'highlight',
     'quote',
-    'success',
     'confirm',
-    'error',
     'alert',
     'subtle',
   ] as BodyProps['variant'][];

diff --git a/packages/circuit-ui/components/Body/Body.tsx b/packages/circuit-ui/components/Body/Body.tsx
@@ -18,18 +18,10 @@ import { css } from '@emotion/react';
 import isPropValid from '@emotion/is-prop-valid';
 
 import styled, { StyleProps } from '../../styles/styled';
-import { deprecate } from '../../util/logger';
 import { AsPropType } from '../../types/prop-types';
 
 type Size = 'one' | 'two';
-type Variant =
-  | 'highlight'
-  | 'quote'
-  | 'success'
-  | 'confirm'
-  | 'error'
-  | 'alert'
-  | 'subtle';
+type Variant = 'highlight' | 'quote' | 'confirm' | 'alert' | 'subtle';
 
 export interface BodyProps extends HTMLAttributes<HTMLParagraphElement> {
   /**
@@ -65,40 +57,6 @@ const sizeStyles = ({ theme, size = 'one' }: BodyProps & StyleProps) => css`
 `;
 
 const variantStyles = ({ theme, variant }: BodyProps & StyleProps) => {
-  // TODO: remove the legacy variants and this switch statement in v5
-  /* eslint-disable no-param-reassign */
-  switch (variant) {
-    case 'success':
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        process.env.NODE_ENV !== 'test'
-      ) {
-        deprecate(
-          'Body',
-          "The Body's `success` variant is deprecated.",
-          'Use the `confirm` variant instead.',
-        );
-      }
-      variant = 'confirm';
-      break;
-    case 'error':
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        process.env.NODE_ENV !== 'test'
-      ) {
-        deprecate(
-          'Body',
-          "The Body's `error` variant is deprecated.",
-          'Use the `alert` variant instead.',
-        );
-      }
-      variant = 'alert';
-      break;
-    default:
-      break;
-  }
-  /* eslint-enable no-param-reassign */
-
   switch (variant) {
     default: {
       return null;

diff --git a/packages/circuit-ui/components/Body/__snapshots__/Body.spec.tsx.snap b/packages/circuit-ui/components/Body/__snapshots__/Body.spec.tsx.snap
@@ -32,22 +32,6 @@ exports[`Body should render as a "confirm" variant 1`] = `
 </p>
 `;
 
-exports[`Body should render as a "error" variant 1`] = `
-.circuit-0 {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  color: #D23F47;
-}
-
-<p
-  class="circuit-0"
->
-  error
-   Body
-</p>
-`;
-
 exports[`Body should render as a "highlight" variant 1`] = `
 .circuit-0 {
   font-weight: 400;
@@ -98,22 +82,6 @@ exports[`Body should render as a "subtle" variant 1`] = `
 </p>
 `;
 
-exports[`Body should render as a "success" variant 1`] = `
-.circuit-0 {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  color: #138849;
-}
-
-<p
-  class="circuit-0"
->
-  success
-   Body
-</p>
-`;
-
 exports[`Body should render with default styles 1`] = `
 .circuit-0 {
   font-weight: 400;

diff --git a/packages/circuit-ui/components/BodyLarge/BodyLarge.spec.tsx b/packages/circuit-ui/components/BodyLarge/BodyLarge.spec.tsx
@@ -29,9 +29,7 @@ describe('BodyLarge', () => {
   const variants = [
     'highlight',
     'quote',
-    'success',
     'confirm',
-    'error',
     'alert',
     'subtle',
   ] as BodyLargeProps['variant'][];

diff --git a/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx b/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx
@@ -19,16 +19,8 @@ import isPropValid from '@emotion/is-prop-valid';
 
 import styled, { StyleProps } from '../../styles/styled';
 import { AsPropType } from '../../types/prop-types';
-import { deprecate } from '../../util/logger';
 
-type Variant =
-  | 'highlight'
-  | 'quote'
-  | 'success'
-  | 'confirm'
-  | 'error'
-  | 'alert'
-  | 'subtle';
+type Variant = 'highlight' | 'quote' | 'confirm' | 'alert' | 'subtle';
 
 export interface BodyLargeProps extends HTMLAttributes<HTMLParagraphElement> {
   /**
@@ -53,40 +45,6 @@ const baseStyles = ({ theme }: StyleProps) => css`
 `;
 
 const variantStyles = ({ theme, variant }: BodyLargeProps & StyleProps) => {
-  // TODO: remove the legacy variants and this switch statement in v5
-  /* eslint-disable no-param-reassign */
-  switch (variant) {
-    case 'success':
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        process.env.NODE_ENV !== 'test'
-      ) {
-        deprecate(
-          'BodyLarge',
-          "The BodyLarge's `success` variant is deprecated.",
-          'Use the `confirm` variant instead.',
-        );
-      }
-      variant = 'confirm';
-      break;
-    case 'error':
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        process.env.NODE_ENV !== 'test'
-      ) {
-        deprecate(
-          'BodyLarge',
-          "The BodyLarge's `error` variant is deprecated.",
-          'Use the `alert` variant instead.',
-        );
-      }
-      variant = 'alert';
-      break;
-    default:
-      break;
-  }
-  /* eslint-enable no-param-reassign */
-
   switch (variant) {
     default: {
       return null;