From 3f9585a44744c67904b03fbc50d614104bfff927 Mon Sep 17 00:00:00 2001 From: amelako <57903317+amelako@users.noreply.github.com> Date: Tue, 15 Feb 2022 12:52:08 +0100 Subject: [PATCH] Use new semantic color names (info, confirm, notify and alert) (#1431) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * update design token colors * updates of the colors in circuit ui * update snapshots * add TODO for Badge and Body component * add shouldForwardProp to ValidationHint * deprecate old colors * :add changeset * Apply suggestions from code review Co-authored-by: Connor Bär --- .changeset/seven-books-tan.md | 5 +++++ .changeset/wicked-timers-bake.md | 5 +++++ .../circuit-ui/components/Badge/Badge.tsx | 1 + packages/circuit-ui/components/Body/Body.tsx | 5 +++-- .../components/BodyLarge/BodyLarge.tsx | 4 ++-- .../circuit-ui/components/Button/Button.tsx | 6 +++--- .../components/Checkbox/Checkbox.tsx | 6 +++--- .../components/ImageInput/ImageInput.tsx | 2 +- .../__snapshots__/ImageInput.spec.tsx.snap | 1 - .../InlineMessage/InlineMessage.tsx | 8 ++++---- .../circuit-ui/components/Input/Input.tsx | 4 ++-- .../NotificationInline/NotificationInline.tsx | 12 ++---------- .../NotificationToast/NotificationToast.tsx | 12 ++---------- .../components/RadioButton/RadioButton.tsx | 6 +++--- .../ValidationHint/ValidationHint.tsx | 19 +++++++++++-------- .../ValidationHint.spec.tsx.snap | 3 --- packages/circuit-ui/styles/style-mixins.ts | 16 +++++++--------- .../tests/__snapshots__/index.spec.ts.snap | 4 ++++ packages/design-tokens/themes/light.ts | 13 +++++++++++++ packages/design-tokens/types/index.ts | 4 ++++ .../design-tokens/utils/theme-prop-type.ts | 4 ++++ 21 files changed, 79 insertions(+), 61 deletions(-) create mode 100644 .changeset/seven-books-tan.md create mode 100644 .changeset/wicked-timers-bake.md diff --git a/.changeset/seven-books-tan.md b/.changeset/seven-books-tan.md new file mode 100644 index 0000000000..200a96f7d8 --- /dev/null +++ b/.changeset/seven-books-tan.md @@ -0,0 +1,5 @@ +--- +'@sumup/design-tokens': minor +--- + +Added new `info`, `confirm`, `alert`, and `notify` colors and deprecated the `success`, `warning`, and `danger` colors. diff --git a/.changeset/wicked-timers-bake.md b/.changeset/wicked-timers-bake.md new file mode 100644 index 0000000000..f4ae25b98f --- /dev/null +++ b/.changeset/wicked-timers-bake.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': minor +--- + +Replaced the `success`, `warning`, and `danger` colors with the new `confirm`, `notify`, and `alert` colors. diff --git a/packages/circuit-ui/components/Badge/Badge.tsx b/packages/circuit-ui/components/Badge/Badge.tsx index b1c9bf3f96..3a5f0a6f74 100644 --- a/packages/circuit-ui/components/Badge/Badge.tsx +++ b/packages/circuit-ui/components/Badge/Badge.tsx @@ -33,6 +33,7 @@ export interface BadgeProps extends HTMLAttributes { ref?: Ref; } +// TODO: Will rename variants to match the new color names scheme in the next major version const COLOR_MAP = { success: { text: 'white', diff --git a/packages/circuit-ui/components/Body/Body.tsx b/packages/circuit-ui/components/Body/Body.tsx index a40f88262c..568092c8e2 100644 --- a/packages/circuit-ui/components/Body/Body.tsx +++ b/packages/circuit-ui/components/Body/Body.tsx @@ -22,6 +22,7 @@ import { deprecate } from '../../util/logger'; import { AsPropType } from '../../types/prop-types'; type Size = 'one' | 'two'; +// TODO: Will rename variants to match the new color names scheme in the next major version type Variant = 'highlight' | 'quote' | 'success' | 'error' | 'subtle'; export interface BodyProps extends HTMLAttributes { @@ -77,12 +78,12 @@ const variantStyles = ({ theme, variant }: BodyProps & StyleProps) => { } case 'success': { return css` - color: ${theme.colors.success}; + color: ${theme.colors.confirm}; `; } case 'error': { return css` - color: ${theme.colors.danger}; + color: ${theme.colors.alert}; `; } case 'subtle': { diff --git a/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx b/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx index 4107db6e69..3b01387d02 100644 --- a/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx +++ b/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx @@ -63,12 +63,12 @@ const variantStyles = ({ theme, variant }: BodyLargeProps & StyleProps) => { } case 'success': { return css` - color: ${theme.colors.success}; + color: ${theme.colors.confirm}; `; } case 'error': { return css` - color: ${theme.colors.danger}; + color: ${theme.colors.alert}; `; } case 'subtle': { diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx index a3f78f9de3..17217f8f53 100644 --- a/packages/circuit-ui/components/Button/Button.tsx +++ b/packages/circuit-ui/components/Button/Button.tsx @@ -108,7 +108,7 @@ const COLOR_MAP = { active: 'p900', }, destructive: { - default: 'danger', + default: 'alert', hover: 'r700', active: 'r900', }, @@ -122,8 +122,8 @@ const SECONDARY_COLOR_MAP = { active: 'n800', }, destructive: { - text: 'danger', - default: 'danger', + text: 'alert', + default: 'alert', hover: 'r700', active: 'r900', }, diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.tsx b/packages/circuit-ui/components/Checkbox/Checkbox.tsx index 17f311af8a..f36cfd32f4 100644 --- a/packages/circuit-ui/components/Checkbox/Checkbox.tsx +++ b/packages/circuit-ui/components/Checkbox/Checkbox.tsx @@ -180,7 +180,7 @@ const inputInvalidStyles = ({ theme, invalid }: StyleProps & InputElProps) => invalid && css` & + label::before { - border-color: ${theme.colors.danger}; + border-color: ${theme.colors.alert}; background-color: ${theme.colors.r100}; } @@ -190,8 +190,8 @@ const inputInvalidStyles = ({ theme, invalid }: StyleProps & InputElProps) => } &:checked + label::before { - border-color: ${theme.colors.danger}; - background-color: ${theme.colors.danger}; + border-color: ${theme.colors.alert}; + background-color: ${theme.colors.alert}; } `; diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.tsx index 935ed523d1..35d30b81a5 100644 --- a/packages/circuit-ui/components/ImageInput/ImageInput.tsx +++ b/packages/circuit-ui/components/ImageInput/ImageInput.tsx @@ -148,7 +148,7 @@ const invalidLabelStyles = ({ invalid && css` > *:last-child { - box-shadow: 0 0 0 2px ${theme.colors.danger}; + box-shadow: 0 0 0 2px ${theme.colors.alert}; } &:hover > *:last-child { box-shadow: 0 0 0 2px ${theme.colors.r700}; diff --git a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap index 34d565b7a2..e319f093e5 100644 --- a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap +++ b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap @@ -1510,7 +1510,6 @@ exports[`ImageInput styles should render with invalid styles 1`] = ` >
({ theme, size = 'giga', variant }: StyleProps & InlineMessageProps) => { const colors = { - danger: theme.colors.danger, - success: theme.colors.success, - warning: theme.colors.warning, + danger: theme.colors.alert, + success: theme.colors.confirm, + warning: theme.colors.notify, } as const; const textColors = { - danger: theme.colors.danger, + danger: theme.colors.alert, success: theme.colors.black, warning: theme.colors.black, } as const; diff --git a/packages/circuit-ui/components/Input/Input.tsx b/packages/circuit-ui/components/Input/Input.tsx index 4a1fec2c7d..d91ef5024d 100644 --- a/packages/circuit-ui/components/Input/Input.tsx +++ b/packages/circuit-ui/components/Input/Input.tsx @@ -184,7 +184,7 @@ const inputWarningStyles = ({ hasWarning && css` &:not(:focus)::placeholder { - color: ${theme.colors.warning}; + color: ${theme.colors.notify}; } `; @@ -197,7 +197,7 @@ const inputInvalidStyles = ({ invalid && css` &:not(:focus)::placeholder { - color: ${theme.colors.danger}; + color: ${theme.colors.alert}; opacity: 0.5; } `; diff --git a/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx b/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx index e46df616c2..3d40f4c369 100644 --- a/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx +++ b/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx @@ -89,14 +89,6 @@ export type BaseProps = HTMLAttributes & { export type NotificationInlineProps = BaseProps & CloseProps; -// TODO: update the design token colors to be info/confirm/alert/notify, then remove this mapping -const colorMap = { - info: 'p500', - confirm: 'success', - alert: 'danger', - notify: 'warning', -} as const; - const iconMap = { info: Info, confirm: Confirm, @@ -128,7 +120,7 @@ const contentWrapperStyles = ({ background-color: ${theme.colors.bodyBg}; padding: ${theme.spacings.kilo} ${theme.spacings.mega}; border-radius: ${theme.borderRadius.byte}; - border: ${theme.borderWidth.mega} solid ${theme.colors[colorMap[variant]]}; + border: ${theme.borderWidth.mega} solid ${theme.colors[variant]}; `; const ContentWrapper = styled('div')(contentWrapperStyles); @@ -171,7 +163,7 @@ const IconWrapper = styled.div( flex-grow: 0; flex-shrink: 0; line-height: 0; - color: ${theme.colors[colorMap[variant]]}; + color: ${theme.colors[variant]}; `, // Adds a black background behind the SVG icon to color just the exclamation mark black. ({ theme, variant }: StyleProps & { variant: Variant }) => diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx index 335bab0059..eed7f7c65e 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx @@ -65,14 +65,6 @@ export type NotificationToastProps = HTMLAttributes & iconLabel?: string; }; -// TODO: update the design token colors to be info/confirm/alert/notify, then remove this mapping -const colorMap = { - info: 'p500', - confirm: 'success', - alert: 'danger', - notify: 'warning', -} as const; - const iconMap = { info: Info, confirm: Confirm, @@ -90,7 +82,7 @@ const toastWrapperStyles = ({ }: NotificationToastWrapperProps & StyleProps) => css` background-color: ${theme.colors.bodyBg}; border-radius: ${theme.borderRadius.byte}; - border: ${theme.borderWidth.mega} solid ${theme.colors[colorMap[variant]]}; + border: ${theme.borderWidth.mega} solid ${theme.colors[variant]}; overflow: hidden; will-change: height; transition: opacity ${TRANSITION_DURATION}ms ease-in-out, @@ -128,7 +120,7 @@ const IconWrapper = styled.div( flex-grow: 0; flex-shrink: 0; line-height: 0; - color: ${theme.colors[colorMap[variant]]}; + color: ${theme.colors[variant]}; `, // Adds a black background behind the SVG icon to color just the exclamation mark black. ({ theme, variant }: StyleProps & { variant: Variant }) => diff --git a/packages/circuit-ui/components/RadioButton/RadioButton.tsx b/packages/circuit-ui/components/RadioButton/RadioButton.tsx index 38aef17012..8e6d911c0d 100644 --- a/packages/circuit-ui/components/RadioButton/RadioButton.tsx +++ b/packages/circuit-ui/components/RadioButton/RadioButton.tsx @@ -104,12 +104,12 @@ const labelInvalidStyles = ({ theme, invalid }: StyleProps & LabelElProps) => invalid && css` &:not(:focus)::before { - border-color: ${theme.colors.danger}; + border-color: ${theme.colors.alert}; background-color: ${theme.colors.r100}; } &:not(:focus)::after { - background-color: ${theme.colors.danger}; + background-color: ${theme.colors.alert}; } `; @@ -180,7 +180,7 @@ const inputInvalidStyles = ({ theme, invalid }: StyleProps & InputElProps) => } &:checked + label::before { - border-color: ${theme.colors.danger}; + border-color: ${theme.colors.alert}; } `; diff --git a/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx b/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx index a4ba478eb9..e8e79a570e 100644 --- a/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx +++ b/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx @@ -16,11 +16,12 @@ import { HTMLAttributes } from 'react'; import { css } from '@emotion/react'; import { Confirm, NotifyCircle, Alert } from '@sumup/icons'; +import isPropValid from '@emotion/is-prop-valid'; import styled, { StyleProps } from '../../styles/styled'; import { typography } from '../../styles/style-mixins'; -type Color = 'danger' | 'warning' | 'success'; +type Color = 'alert' | 'notify' | 'confirm'; export interface ValidationHintProps extends HTMLAttributes { validationHint?: string; @@ -40,7 +41,7 @@ const baseStyles = ({ theme }: StyleProps) => css` const validStyles = ({ theme, showValid }: StyleProps & ValidationHintProps) => showValid && css` - color: ${theme.colors.success}; + color: ${theme.colors.confirm}; `; const warningStyles = ({ @@ -55,7 +56,7 @@ const warningStyles = ({ const invalidStyles = ({ theme, invalid }: StyleProps & ValidationHintProps) => invalid && css` - color: ${theme.colors.danger}; + color: ${theme.colors.alert}; `; const Wrapper = styled('span')( @@ -66,7 +67,9 @@ const Wrapper = styled('span')( warningStyles, ); -const IconWrapper = styled.div( +const IconWrapper = styled('div', { + shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color', +})( ({ theme, color }: StyleProps & { color: Color }) => css` display: inline-block; @@ -78,7 +81,7 @@ const IconWrapper = styled.div( color: ${theme.colors[color]}; `, ({ theme, color }: StyleProps & { color: Color }) => - color === 'warning' && + color === 'notify' && css` &::before { content: ''; @@ -105,21 +108,21 @@ const getIcon = (state: ValidationHintProps) => { } case state.invalid: { return ( - + ); } case state.hasWarning: { return ( - + ); } case state.showValid: { return ( - + ); diff --git a/packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap b/packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap index 2a624dca62..e9092c4659 100644 --- a/packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap +++ b/packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap @@ -45,7 +45,6 @@ exports[`ValidationHint styles should render with invalid styles 1`] = ` >
['isRequired'] }).isRequired, spacings: PropTypes.shape({ bit: PropTypes.string.isRequired,