Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove deprecated legacy color names #1526

Merged
merged 5 commits into from
Apr 12, 2022
Merged

Remove deprecated legacy color names #1526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
202618e
remove deprecated legacy color names
amelako Apr 12, 2022
ca05d9d
remove legacy colors usage in Body and Badge components
amelako Apr 12, 2022
b7c92e4
remove the legacy color names leftover
amelako Apr 12, 2022
74ca9aa
add changeset
amelako Apr 12, 2022
46fc10c
add changeset for circuit
amelako Apr 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/dull-rats-fry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sumup/design-tokens': major
---

Removed the deprecated `success`, `warning` and `danger` legacy color names. Use `confirm`, `notify` and `alert` instead.
5 changes: 5 additions & 0 deletions .changeset/olive-pears-sniff.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sumup/circuit-ui': major
---

Removed the deprecated `success`, `warning` and `danger` color variants. Use `confirm`, `notify` and `alert` instead.
11 changes: 1 addition & 10 deletions packages/circuit-ui/components/Badge/Badge.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />);
Expand Down
58 changes: 1 addition & 57 deletions packages/circuit-ui/components/Badge/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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]};
Expand Down
57 changes: 0 additions & 57 deletions packages/circuit-ui/components/Badge/__snapshots__/Badge.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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"
/>
`;
2 changes: 0 additions & 2 deletions packages/circuit-ui/components/Body/Body.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,7 @@ describe('Body', () => {
const variants = [
'highlight',
'quote',
'success',
'confirm',
'error',
'alert',
'subtle',
] as BodyProps['variant'][];
Expand Down
44 changes: 1 addition & 43 deletions packages/circuit-ui/components/Body/Body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> {
/**
Expand Down Expand Up @@ -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;
Expand Down
32 changes: 0 additions & 32 deletions packages/circuit-ui/components/Body/__snapshots__/Body.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 0 additions & 2 deletions packages/circuit-ui/components/BodyLarge/BodyLarge.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,7 @@ describe('BodyLarge', () => {
const variants = [
'highlight',
'quote',
'success',
'confirm',
'error',
'alert',
'subtle',
] as BodyLargeProps['variant'][];
Expand Down
44 changes: 1 addition & 43 deletions packages/circuit-ui/components/BodyLarge/BodyLarge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> {
/**
Expand All @@ -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;
Expand Down
Loading