From 7c3938cacabaff9a2eadae17d0b288780502bcd8 Mon Sep 17 00:00:00 2001 From: Andrey Morozov Date: Wed, 8 Nov 2023 14:35:51 +0300 Subject: [PATCH] feat: introduce new utility semantic colors (#1094) --- src/components/Alert/Alert.test.tsx | 2 +- src/components/Alert/AlertIcon.tsx | 6 ++++ src/components/Alert/README.md | 33 +++++++++++-------- .../Alert/__stories__/Alert.stories.tsx | 11 +++++++ src/components/Alert/types.ts | 3 +- src/components/Button/Button.scss | 27 +++++++++++++++ src/components/Button/Button.tsx | 2 ++ .../Button/__stories__/ButtonViewShowcase.tsx | 3 ++ src/components/Card/Card.scss | 9 +++++ src/components/Card/Card.tsx | 3 +- src/components/Card/README.md | 5 ++- .../Card/__stories__/Card.stories.tsx | 6 ++++ src/components/Card/__tests__/Card.test.tsx | 10 +++++- src/components/Label/Label.scss | 8 +++++ src/components/Label/Label.tsx | 2 +- src/components/Label/README.md | 14 +++++--- .../Label/__stories__/Label.stories.tsx | 3 ++ .../Label/__stories__/LabelShowcase.tsx | 11 ++++++- src/components/Toaster/Toast/Toast.scss | 10 ++++++ src/components/Toaster/Toast/Toast.tsx | 3 +- .../Toaster/__stories__/ToasterShowcase.scss | 4 +++ .../Toaster/__stories__/ToasterShowcase.tsx | 22 ++++++++++++- src/components/Toaster/types.ts | 2 +- src/demo/colors/Base.tsx | 30 +++++++++++++++++ src/demo/colors/ColorPanel.scss | 2 ++ src/demo/colors/Lines.tsx | 5 +++ styles/themes/dark-hc/base.scss | 9 ++++- styles/themes/dark-hc/line.scss | 6 ++-- styles/themes/dark/base.scss | 9 ++++- styles/themes/dark/line.scss | 6 ++-- styles/themes/dark/text.scss | 26 +++++++-------- styles/themes/light-hc/base.scss | 7 ++++ styles/themes/light-hc/line.scss | 6 ++-- styles/themes/light/base.scss | 7 ++++ styles/themes/light/line.scss | 6 ++-- 35 files changed, 263 insertions(+), 55 deletions(-) diff --git a/src/components/Alert/Alert.test.tsx b/src/components/Alert/Alert.test.tsx index 91153e26d5..9c88c858b0 100644 --- a/src/components/Alert/Alert.test.tsx +++ b/src/components/Alert/Alert.test.tsx @@ -72,7 +72,7 @@ describe('Alert', () => { expect(container).toMatchSnapshot(); }); - test.each(['danger', 'info', 'positive', 'success', 'warning'])( + test.each(['danger', 'info', 'positive', 'success', 'warning', 'utility'])( 'render correct icon if not normal theme', async (theme) => { const {container} = render( diff --git a/src/components/Alert/AlertIcon.tsx b/src/components/Alert/AlertIcon.tsx index 7cd72da297..771ec18ade 100644 --- a/src/components/Alert/AlertIcon.tsx +++ b/src/components/Alert/AlertIcon.tsx @@ -7,6 +7,8 @@ import { CircleInfoFill, CircleXmark, CircleXmarkFill, + Thunderbolt, + ThunderboltFill, TriangleExclamation, TriangleExclamationFill, } from '@gravity-ui/icons'; @@ -41,6 +43,10 @@ const typeToIcon: Record< filled: TriangleExclamationFill, outlined: TriangleExclamation, }, + utility: { + filled: ThunderboltFill, + outlined: Thunderbolt, + }, normal: null, }; diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md index 6ff0c7f1e1..7a24789571 100644 --- a/src/components/Alert/README.md +++ b/src/components/Alert/README.md @@ -20,6 +20,8 @@ import {Alert} from '@gravity-ui/uikit'; `danger` - used for hazard information. +`utility` - used for utility information. + @@ -45,6 +49,7 @@ LANDING_BLOCK--> + ``` @@ -216,17 +221,17 @@ LANDING_BLOCK--> ## Properties -| Name | Description | Type | Default | -| :-------- | :-------------------------------------------------------------------------- | :-------------------------------------------------------: | :----------: | -| theme | Alert appearance | `"normal"` `"info"` `"success"` `"warning"` `"dangerous"` | `"normal"` | -| view | Enable/disable background color of the alert | `"filled"` `"outlined"` | `"filled"` | -| layout | Used to direct users to content if there is property `actions` with buttons | `"vertical"` `"horizontal"` | `"vertical"` | -| corners | Used for round/square corners of the alert window | `"rounded"` `"square"` | `"rounded"` | -| title | Title of the alert | `string` | | -| message | Message of the alert | `string` | | -| onClose | A callback function called when the user clicks the alert's close button | `Function` | | -| actions | Array of buttons or full custom components | `React.ReactNode` `"AlertAction"` | | -| align | Determines how content inside the Alert component is vertically aligned | `"center"` `"baseline"` | `"baseline"` | -| style | HTML style attribute | `React.CSSProperties` | | -| className | Name of alert class | `string` | | -| icon | Override default icon | `React.ReactNode` | | +| Name | Description | Type | Default | +| :-------- | :-------------------------------------------------------------------------- | :----------------------------------------------------------------: | :----------: | +| theme | Alert appearance | `"normal"` `"info"` `"success"` `"warning"` `"danger"` `"utility"` | `"normal"` | +| view | Enable/disable background color of the alert | `"filled"` `"outlined"` | `"filled"` | +| layout | Used to direct users to content if there is property `actions` with buttons | `"vertical"` `"horizontal"` | `"vertical"` | +| corners | Used for round/square corners of the alert window | `"rounded"` `"square"` | `"rounded"` | +| title | Title of the alert | `string` | | +| message | Message of the alert | `string` | | +| onClose | A callback function called when the user clicks the alert's close button | `Function` | | +| actions | Array of buttons or full custom components | `React.ReactNode` `"AlertAction"` | | +| align | Determines how content inside the Alert component is vertically aligned | `"center"` `"baseline"` | `"baseline"` | +| style | HTML style attribute | `React.CSSProperties` | | +| className | Name of alert class | `string` | | +| icon | Override default icon | `React.ReactNode` | | diff --git a/src/components/Alert/__stories__/Alert.stories.tsx b/src/components/Alert/__stories__/Alert.stories.tsx index 23a03c0e80..01f7df14dd 100644 --- a/src/components/Alert/__stories__/Alert.stories.tsx +++ b/src/components/Alert/__stories__/Alert.stories.tsx @@ -94,6 +94,17 @@ const stories: AlertProps[] = [ layout: 'horizontal', actions: , }, + { + message, + theme: 'utility', + view: 'outlined', + }, + { + title, + message, + theme: 'utility', + view: 'filled', + }, { message, theme: 'normal', diff --git a/src/components/Alert/types.ts b/src/components/Alert/types.ts index 77833338f7..237928b844 100644 --- a/src/components/Alert/types.ts +++ b/src/components/Alert/types.ts @@ -6,7 +6,8 @@ export type AlertTheme = | 'success' | /** @deprecated */ 'positive' | 'warning' - | 'danger'; + | 'danger' + | 'utility'; export type AlertView = 'filled' | 'outlined'; export type AlertCorners = 'rounded' | 'square'; diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 278f92bce1..08e5368764 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -196,6 +196,14 @@ $iconWidth: 16px; } } + &_outlined-utility { + @include button-text-color(var(--g-color-text-utility)); + + &::before { + border: 1px solid var(--g-color-line-utility); + } + } + &_outlined-action { @include button-text-color(var(--g-color-text-brand)); @@ -243,6 +251,10 @@ $iconWidth: 16px; @include button-text-color(var(--g-color-text-danger)); } + &_flat-utility { + @include button-text-color(var(--g-color-text-utility)); + } + &_flat-action { @include button-text-color(var(--g-color-text-brand)); } @@ -281,6 +293,7 @@ $iconWidth: 16px; &_flat-success, &_flat-warning, &_flat-danger, + &_flat-utility, &_flat-action { &#{$block}_disabled:not(#{$block}_loading), &#{$block}_disabled:not(#{$block}_loading) { @@ -389,6 +402,20 @@ $iconWidth: 16px; } } } + + &_outlined-utility, + &_flat-utility { + &#{$block}_selected { + --yc-button-background-color: var(--g-color-base-utility-light); + --yc-button-background-color-hover: var(--g-color-base-utility-light-hover); + + @include button-text-color(var(--g-color-text-utility-heavy)); + + &::before { + border: none; + } + } + } } @include mixins.pin($block, ('::before', '::after'), var(--yc-button-border-radius)); diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 0edf252625..1a00533e08 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -18,6 +18,7 @@ export type ButtonView = | 'outlined-success' // No background, with success-type border color | 'outlined-warning' // No background, with warning-type border color | 'outlined-danger' // No background, with danger-type border color + | 'outlined-utility' // No background, with utility-type border color | 'outlined-action' // No background, with branded border color | 'raised' // With white background and shadow | 'flat' // No background, no border @@ -26,6 +27,7 @@ export type ButtonView = | 'flat-success' // No background, no border, success-type text color | 'flat-warning' // No background, no border, warning-type text color | 'flat-danger' // No background, no border, danger-type text color + | 'flat-utility' // No background, no border, utility-type text color | 'flat-action' // No background, no border, branded text color | 'normal-contrast' // normal button appearance with contrast background | 'outlined-contrast' // outlined button appearance with contrast background diff --git a/src/components/Button/__stories__/ButtonViewShowcase.tsx b/src/components/Button/__stories__/ButtonViewShowcase.tsx index b64578aa27..244c340efa 100644 --- a/src/components/Button/__stories__/ButtonViewShowcase.tsx +++ b/src/components/Button/__stories__/ButtonViewShowcase.tsx @@ -22,6 +22,7 @@ export function ButtonViewShowcase(args: ButtonProps) { 'outlined-success', 'outlined-warning', 'outlined-danger', + 'outlined-utility', 'outlined-action', 'raised', 'flat', @@ -29,6 +30,8 @@ export function ButtonViewShowcase(args: ButtonProps) { 'flat-info', 'flat-success', 'flat-warning', + 'flat-danger', + 'flat-utility', 'flat-action', 'normal-contrast', 'outlined-contrast', diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index bccf856946..5bd9d3b150 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -156,6 +156,15 @@ $block: '.#{variables.$ns}card'; } } + &#{$block}_theme_utility { + &#{$block}_view_outlined { + border: 1px solid var(--g-color-line-utility); + } + &#{$block}_view_filled { + background-color: var(--g-color-base-utility-light); + } + } + &#{$block}_view_raised { background-color: var(--g-color-base-float); diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index cc26ad7e8c..9e9aae02d6 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -18,7 +18,8 @@ export type CardTheme = | 'success' | /** @deprecated */ 'positive' | 'warning' - | 'danger'; + | 'danger' + | 'utility'; export type CardView = SelectionCardView | ContainerCardView; export type CardSize = 'm' | 'l'; diff --git a/src/components/Card/README.md b/src/components/Card/README.md index c8c218ebb5..f8ef7f14aa 100644 --- a/src/components/Card/README.md +++ b/src/components/Card/README.md @@ -16,7 +16,7 @@ The `Card` UI component is a reusable React component that represents a card-lik `Card` can be displayed with multiple styled combination -- theme (`normal`, `info`, `success`, `warning`, `danger`) +- theme (`normal`, `info`, `success`, `warning`, `danger`, `utility`) - type (`selection`, `action`, `container`) - view (`outlined`, `clear`) or (`outlined`, `filled`, `raised`) depends on `type` parameter @@ -31,6 +31,7 @@ By specifying different theme values, you can customize the visual appearance of - `success`: represents the theme for displaying positive/affirmative content. - `warning`: represents the theme for displaying warning or cautionary content. - `danger`: represents the theme for displaying content related to danger or critical situations. +- `utility`: represents the theme for displaying utility content. ```tsx + - + ``` @@ -153,6 +156,7 @@ LANDING_BLOCK--> + `} @@ -162,6 +166,7 @@ LANDING_BLOCK--> Key Key Key + Key Key Key @@ -176,6 +181,7 @@ LANDING_BLOCK--> + ``` diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx index da7ca73507..1d7a0ba13b 100644 --- a/src/components/Label/__stories__/Label.stories.tsx +++ b/src/components/Label/__stories__/Label.stories.tsx @@ -59,6 +59,9 @@ export const Theme: Story = { + diff --git a/src/components/Label/__stories__/LabelShowcase.tsx b/src/components/Label/__stories__/LabelShowcase.tsx index 847f7cdd11..38353709ed 100644 --- a/src/components/Label/__stories__/LabelShowcase.tsx +++ b/src/components/Label/__stories__/LabelShowcase.tsx @@ -23,7 +23,16 @@ const icons = (id: 'TickIcon' | 'GearIcon' | '-', size: 'xs' | 's' | 'm' = 'xs') }; export function LabelShowcase(args: LabelProps) { - const themes = ['normal', 'info', 'danger', 'warning', 'success', 'unknown', 'clear'] as const; + const themes = [ + 'normal', + 'info', + 'success', + 'warning', + 'danger', + 'utility', + 'unknown', + 'clear', + ] as const; const sizes = ['xs', 's', 'm'] as const; const getLabel = ({...props}: WithKey) =>