feat: introduce new utility semantic colors (#1094)

gravity-ui · Nov 8, 2023 · 7c3938c · 7c3938c
1 parent c6c6138
commit 7c3938c
Show file tree

Hide file tree

Showing 35 changed files with 263 additions and 55 deletions.
diff --git 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<AlertTheme>(['danger', 'info', 'positive', 'success', 'warning'])(
+    test.each<AlertTheme>(['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
@@ -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
@@ -20,6 +20,8 @@ import {Alert} from '@gravity-ui/uikit';
 
 `danger` - used for hazard information.
 
+`utility` - used for utility information.
+
 <!--LANDING_BLOCK
 <ExampleBlock
     code={`
@@ -28,12 +30,14 @@ import {Alert} from '@gravity-ui/uikit';
 <Alert theme="success" title="Success" message="Success theme" />
 <Alert theme="warning" title="Warning" message="Warning theme" />
 <Alert theme="danger" title="Danger" message="Danger theme" />
+<Alert theme="utility" title="utility" message="Utility theme" />
 `}>
     <UIKit.Alert theme="normal" title="Normal" message="Normal theme" />
     <UIKit.Alert theme="info" title="Info" message="Info theme" />
     <UIKit.Alert theme="success" title="Success" message="Success theme" />
     <UIKit.Alert theme="warning" title="Warning" message="Warning theme" />
     <UIKit.Alert theme="danger" title="Danger" message="Danger theme" />
+    <UIKit.Alert theme="utility" title="Utility" message="Utility theme" />
 </ExampleBlock>
 LANDING_BLOCK-->
 
@@ -45,6 +49,7 @@ LANDING_BLOCK-->
 <Alert theme="success" title="Success" message="Success theme"/>
 <Alert theme="warning" title="Warning" message="Warning theme"/>
 <Alert theme="danger" title="Danger" message="Danger theme"/>
+<Alert theme="utility" title="Utility" message="Utility theme"/>
 ```
 
 <!--/GITHUB_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
@@ -94,6 +94,17 @@ const stories: AlertProps[] = [
         layout: 'horizontal',
         actions: <Button>{right}</Button>,
     },
+    {
+        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
@@ -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
@@ -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
@@ -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
@@ -22,13 +22,16 @@ export function ButtonViewShowcase(args: ButtonProps) {
         'outlined-success',
         'outlined-warning',
         'outlined-danger',
+        'outlined-utility',
         'outlined-action',
         'raised',
         'flat',
         'flat-secondary',
         '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
@@ -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
@@ -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
@@ -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.
 
 <!--LANDING_BLOCK
 <ExampleBlock
@@ -48,6 +49,7 @@ const style = {
 <Card style={style} theme="success" size="l">Success</UIKit.Card>
 <Card style={style} theme="warning" size="l">Warning</UIKit.Card>
 <Card style={style} theme="danger" size="l">Danger</UIKit.Card>
+<Card style={style} theme="utility" size="l">Utility</UIKit.Card>
 `}>
 
     <div style={{display: 'grid', gridAutoFlow: 'column', gridGap: '10px'}}>
@@ -56,6 +58,7 @@ const style = {
         <UIKit.Card style={{display: 'flex', alignItems: 'center', justifyContent: 'center', width: '120px', height: '120px'}} theme="success" size="l">Success</UIKit.Card>
         <UIKit.Card style={{display: 'flex', alignItems: 'center', justifyContent: 'center', width: '120px', height: '120px'}} theme="warning" size="l">Warning</UIKit.Card>
         <UIKit.Card style={{display: 'flex', alignItems: 'center', justifyContent: 'center', width: '120px', height: '120px'}} theme="danger" size="l">Danger</UIKit.Card>
+        <UIKit.Card style={{display: 'flex', alignItems: 'center', justifyContent: 'center', width: '120px', height: '120px'}} theme="utility" size="l">Utility</UIKit.Card>
     </div>
 
 </ExampleBlock>

diff --git a/src/components/Card/__stories__/Card.stories.tsx b/src/components/Card/__stories__/Card.stories.tsx
@@ -59,6 +59,9 @@ export const Theme: Story = {
             <Card {...args} view="outlined" theme="danger">
                 Danger
             </Card>
+            <Card {...args} view="outlined" theme="utility">
+                Utility
+            </Card>
             <Card {...args} view="filled" theme="normal">
                 Normal
             </Card>
@@ -74,6 +77,9 @@ export const Theme: Story = {
             <Card {...args} view="filled" theme="danger">
                 Danger
             </Card>
+            <Card {...args} view="filled" theme="utility">
+                Utility
+            </Card>
         </Showcase>
     ),
     args: {

diff --git a/src/components/Card/__tests__/Card.test.tsx b/src/components/Card/__tests__/Card.test.tsx
@@ -12,7 +12,15 @@ const cardText = 'Some text';
 
 const cardSizes: CardSize[] = ['l', 'm'];
 
-const cardThemes: CardTheme[] = ['danger', 'info', 'normal', 'success', 'positive', 'warning'];
+const cardThemes: CardTheme[] = [
+    'danger',
+    'info',
+    'normal',
+    'success',
+    'positive',
+    'warning',
+    'utility',
+];
 
 const cardTypes: CardType[] = ['action', 'container', 'selection'];
 

diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
@@ -154,6 +154,14 @@ $hover-opacity: 0.7;
             --_-text-color: var(--g-color-text-danger-heavy);
         }
 
+        &_utility {
+            @include themeState(
+                var(--g-color-base-utility-light),
+                var(--g-color-base-utility-light-hover),
+                var(--g-color-text-utility-heavy)
+            );
+        }
+
         &_unknown {
             --_-bg-color: var(--g-color-base-neutral-light);
             --_-bg-hover-color: var(--g-color-base-neutral-light-hover);

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
@@ -59,7 +59,7 @@ interface LabelOwnProps {
 
 interface LabelDefaultProps {
     /** Label color */
-    theme: 'normal' | 'info' | 'danger' | 'warning' | 'success' | 'unknown' | 'clear';
+    theme: 'normal' | 'info' | 'danger' | 'warning' | 'success' | 'utility' | 'unknown' | 'clear';
     /** Label type (plain, with copy text button or with close button) */
     type: 'default' | 'copy' | 'close';
     /** Label size */

diff --git a/src/components/Label/README.md b/src/components/Label/README.md
@@ -18,7 +18,7 @@ import {Label} from '@gravity-ui/uikit';
 
 ### Theme
 
-Apply different themes for various statuses with the `theme` property. You can use the following values: `normal`, `info`, `success`, `warning`, `danger`, `unknown`, and `clear`.
+Apply different themes for various statuses with the `theme` property. You can use the following values: `normal`, `info`, `success`, `warning`, `danger`, `utility`, `unknown`, and `clear`.
 The default theme is `normal`.
 
 <!--LANDING_BLOCK
@@ -27,18 +27,20 @@ The default theme is `normal`.
     code={`
 <Label theme="normal">Normal</Label>
 <Label theme="info">Info</Label>
+<Label theme="success">Success</Label>
 <Label theme="warning">Warning</Label>
 <Label theme="danger">Danger</Label>
-<Label theme="success">Success</Label>
+<Label theme="utility">Utility</Label>
 <Label theme="unknown">Unknown</Label>
 <Label theme="clear">Clear</Label>
 `}
 >
     <UIKit.Label theme="normal">Normal</UIKit.Label>
     <UIKit.Label theme="info">Info</UIKit.Label>
+    <UIKit.Label theme="success">Success</UIKit.Label>
     <UIKit.Label theme="warning">Warning</UIKit.Label>
     <UIKit.Label theme="danger">Danger</UIKit.Label>
-    <UIKit.Label theme="success">Success</UIKit.Label>
+    <UIKit.Label theme="utility">Utility</UIKit.Label>
     <UIKit.Label theme="unknown">Unknown</UIKit.Label>
     <UIKit.Label theme="clear">Clear</UIKit.Label>
 </ExampleBlock>
@@ -50,9 +52,10 @@ LANDING_BLOCK-->
 ```tsx
 <Label theme="normal">Normal</Label>
 <Label theme="info">Info</Label>
+<Label theme="success">Success</Label>
 <Label theme="warning">Warning</Label>
 <Label theme="danger">Danger</Label>
-<Label theme="success">Success</Label>
+<Label theme="utility">Utility</Label>
 <Label theme="unknown">Unknown</Label>
 <Label theme="clear">Clear</Label>
 ```
@@ -153,6 +156,7 @@ LANDING_BLOCK-->
 <Label theme="success" value="Value">Key</Label>
 <Label theme="warning" value="Value">Key</Label>
 <Label theme="danger" value="Value">Key</Label>
+<Label theme="utility" value="Value">Key</Label>
 <Label theme="unknown" value="Value">Key</Label>
 <Label theme="clear" value="Value">Key</Label>
 `}
@@ -162,6 +166,7 @@ LANDING_BLOCK-->
     <UIKit.Label theme="success" value="Value">Key</UIKit.Label>
     <UIKit.Label theme="warning" value="Value">Key</UIKit.Label>
     <UIKit.Label theme="danger" value="Value">Key</UIKit.Label>
+    <UIKit.Label theme="utility" value="Value">Key</UIKit.Label>
     <UIKit.Label theme="unknown" value="Value">Key</UIKit.Label>
     <UIKit.Label theme="clear" value="Value">Key</UIKit.Label>
 </ExampleBlock>
@@ -176,6 +181,7 @@ LANDING_BLOCK-->
 <Label theme="success" value="Value">Key</Label>
 <Label theme="warning" value="Value">Key</Label>
 <Label theme="danger" value="Value">Key</Label>
+<Label theme="utility" value="Value">Key</Label>
 <Label theme="unknown" value="Value">Key</Label>
 <Label theme="clear" value="Value">Key</Label>
 ```