feat(Alert, Card): deprecate positive theme (#986)

gravity-ui · Sep 5, 2023 · e4758d4 · e4758d4
1 parent 1a68c58
commit e4758d4
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 43 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', 'warning'])(
+    test.each<AlertTheme>(['danger', 'info', 'positive', 'success', 'warning'])(
         '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
@@ -12,7 +12,7 @@ import {
 } from '@gravity-ui/icons';
 
 import {Icon, IconData} from '../Icon';
-import {colorText} from '../Text';
+import {ColorTextBaseProps, colorText} from '../Text/colorText/colorText';
 
 import {DEFAULT_ICON_SIZE, bAlert} from './constants';
 import type {AlertIconProps, AlertTheme} from './types';
@@ -33,6 +33,10 @@ const typeToIcon: Record<
         filled: CircleCheckFill,
         outlined: CircleCheck,
     },
+    success: {
+        filled: CircleCheckFill,
+        outlined: CircleCheck,
+    },
     warning: {
         filled: TriangleExclamationFill,
         outlined: TriangleExclamation,
@@ -52,13 +56,16 @@ export const AlertIcon = ({
         return null;
     }
 
+    let color: ColorTextBaseProps['color'];
+
+    if (theme === 'success') {
+        color = 'positive';
+    } else if (theme !== 'normal') {
+        color = theme;
+    }
+
     return (
-        <div
-            className={bAlert(
-                'icon',
-                colorText({color: theme === 'normal' ? undefined : theme}, className),
-            )}
-        >
+        <div className={bAlert('icon', colorText({color}, className))}>
             <Icon data={iconByTheme[view] as IconData} size={size} />
         </div>
     );

diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
@@ -14,7 +14,7 @@ import {Alert} from '@gravity-ui/uikit';
 
 `info` - the theme used for any kind of regular information.
 
-`positive` - the theme used for positive information.
+`success` - the theme used for positive information.
 
 `warning` - the theme used for information which needs attention.
 
@@ -25,13 +25,13 @@ import {Alert} from '@gravity-ui/uikit';
     code={`
 <Alert theme="normal" title="Normal" message="Normal theme" />
 <Alert theme="info" title="Info" message="Info theme" />
-<Alert theme="positive" title="Positive" message="Positive theme" />
+<Alert theme="success" title="Success" message="Success theme" />
 <Alert theme="warning" title="Warning" message="Warning theme" />
 <Alert theme="danger" title="Danger" message="Danger theme" />
 `}>
     <UIKit.Alert theme="normal" title="Normal" message="Normal theme" />
     <UIKit.Alert theme="info" title="Info" message="Info theme" />
-    <UIKit.Alert theme="positive" title="Positive" message="Positive 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" />
 </ExampleBlock>
@@ -42,7 +42,7 @@ LANDING_BLOCK-->
 ```tsx
 <Alert theme="normal" title="Normal" message="Normal theme"/>
 <Alert theme="info" title="Info" message="Info theme"/>
-<Alert theme="positive" title="Positive" message="Positive theme"/>
+<Alert theme="success" title="Success" message="Success theme"/>
 <Alert theme="warning" title="Warning" message="Warning theme"/>
 <Alert theme="danger" title="Danger" message="Danger theme"/>
 ```
@@ -217,17 +217,17 @@ LANDING_BLOCK-->
 
 ## Properties
 
-| Name      | Description                                                                      |                            Type                            |   Default    |
-| :-------- | :------------------------------------------------------------------------------- | :--------------------------------------------------------: | :----------: |
-| theme     | Alert appearance                                                                 | `"normal"` `"info"` `"positive"` `"warning"` `"dangerous"` |  `"normal"`  |
-| view      | Enable/disable the background color of the alert                                 |                  `"filled"` `"outlined"`                   |  `"filled"`  |
-| layout    | Used for direction of content if there is property `actions` with buttons        |                `"vertical"` `"horizontal"`                 | `"vertical"` |
-| corners   | Used fot round/square corners of alert window                                    |                   `"rounded"` `"square"`                   | `"rounded"`  |
-| title     | The title of the alert                                                           |                          `string`                          |              |
-| message   | The message of the alert                                                         |                          `string`                          |              |
-| onClose   | A callback function that is called when the close button of the alert is clicked |                         `Function`                         |              |
-| actions   | Array of buttons or full custom components                                       |             `React.ReactNode` `"AlertAction"`              |              |
-| align     | Determines how the content inside the Alert component is vertically aligned      |                  `"center"` `"baseline"`                   | `"baseline"` |
-| style     | HTML style attribute                                                             |                   `React.CSSProperties`                    |              |
-| className | The alert class name                                                             |                          `string`                          |              |
-| icon      | Override default icon.                                                           |                     `React.ReactNode`                      |              |
+| Name      | Description                                                                      |                           Type                            |   Default    |
+| :-------- | :------------------------------------------------------------------------------- | :-------------------------------------------------------: | :----------: |
+| theme     | Alert appearance                                                                 | `"normal"` `"info"` `"success"` `"warning"` `"dangerous"` |  `"normal"`  |
+| view      | Enable/disable the background color of the alert                                 |                  `"filled"` `"outlined"`                  |  `"filled"`  |
+| layout    | Used for direction of content if there is property `actions` with buttons        |                `"vertical"` `"horizontal"`                | `"vertical"` |
+| corners   | Used fot round/square corners of alert window                                    |                  `"rounded"` `"square"`                   | `"rounded"`  |
+| title     | The title of the alert                                                           |                         `string`                          |              |
+| message   | The message of the alert                                                         |                         `string`                          |              |
+| onClose   | A callback function that is called when the close button of the alert is clicked |                        `Function`                         |              |
+| actions   | Array of buttons or full custom components                                       |             `React.ReactNode` `"AlertAction"`             |              |
+| align     | Determines how the content inside the Alert component is vertically aligned      |                  `"center"` `"baseline"`                  | `"baseline"` |
+| style     | HTML style attribute                                                             |                   `React.CSSProperties`                   |              |
+| className | The alert class name                                                             |                         `string`                          |              |
+| icon      | Override default icon.                                                           |                     `React.ReactNode`                     |              |
diff --git a/src/components/Alert/__stories__/Alert.mdx b/src/components/Alert/__stories__/Alert.mdx
@@ -43,7 +43,7 @@ import {Alert} from '@gravity-ui/uikit';
 -   `theme`. By default `info`. [Variansts example](#variants):
     -   normal
     -   info
-    -   positive
+    -   success
     -   warning
     -   danger
 -   `actions`. Alert actions;
@@ -69,11 +69,11 @@ import {Alert} from '@gravity-ui/uikit';
 
 <WithPlaneActions />
 
-### With actions override and squere corners
+### With actions override and square corners
 
 ```tsx
 <Alert
-    theme="positive"
+    theme="success"
     corners="square"
     title="Are you sure?"
     onClose={() => alert('Ok!')}
@@ -126,7 +126,7 @@ import {Alert} from '@gravity-ui/uikit';
 
 ```tsx
 <Alert
-    theme="positive"
+    theme="success"
     align="center"
     icon={<Icon data={HandOk} size={16} />}
     title="Everything is ok, mister!"

diff --git a/src/components/Alert/__stories__/examples/index.tsx b/src/components/Alert/__stories__/examples/index.tsx
@@ -21,12 +21,12 @@ const variants: AlertProps[] = [
     },
     {theme: 'warning', title, message},
     {theme: 'danger', title, message},
-    {theme: 'positive', title, message},
+    {theme: 'success', title, message},
     {theme: 'normal', title, message},
     {theme: 'info', view: 'outlined', title, message},
     {theme: 'warning', view: 'outlined', title, message},
     {theme: 'danger', view: 'outlined', title, message},
-    {theme: 'positive', view: 'outlined', title, message},
+    {theme: 'success', view: 'outlined', title, message},
     {theme: 'normal', view: 'outlined', title, message},
 ];
 
@@ -59,7 +59,7 @@ export const WithPlaneActions = () => (
 
 export const WithActionsOverride = () => (
     <Alert
-        theme="positive"
+        theme="success"
         corners="square"
         title="Are you sure?"
         onClose={() => alert('Ok!')}
@@ -94,7 +94,7 @@ export const WithHtmlMessageAndTitle = () => (
 
 export const HorizontalLayoutAndCustomIcon = () => (
     <Alert
-        theme="positive"
+        theme="success"
         align="center"
         icon={<Icon data={HandOk} size={16} />}
         title="Everything is ok, mister!"

diff --git a/src/components/Alert/types.ts b/src/components/Alert/types.ts
@@ -1,6 +1,12 @@
 import type React from 'react';
 
-export type AlertTheme = 'normal' | 'info' | 'positive' | 'warning' | 'danger';
+export type AlertTheme =
+    | 'normal'
+    | 'info'
+    | 'success'
+    | /** @deprecated */ 'positive'
+    | 'warning'
+    | 'danger';
 export type AlertView = 'filled' | 'outlined';
 export type AlertCorners = 'rounded' | 'square';
 

diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
@@ -128,7 +128,8 @@ $block: '.#{variables.$ns}card';
             }
         }
 
-        &#{$block}_theme_positive {
+        &#{$block}_theme_positive,
+        &#{$block}_theme_success {
             &#{$block}_view_outlined {
                 border: 1px solid var(--g-color-line-positive);
             }

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -12,7 +12,13 @@ type SelectionCardView = 'outlined' | 'clear';
 type ContainerCardView = 'outlined' | 'filled' | 'raised';
 
 export type CardType = 'selection' | 'action' | 'container';
-export type CardTheme = 'normal' | 'info' | 'positive' | 'warning' | 'danger';
+export type CardTheme =
+    | 'normal'
+    | 'info'
+    | 'success'
+    | /** @deprecated */ 'positive'
+    | 'warning'
+    | 'danger';
 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`, `positive`, `warning`, `danger`)
+- theme (`normal`, `info`, `success`, `warning`, `danger`)
 - type (`selection`, `action`, `container`)
 - view (`outlined`, `clear`) or (`outlined`, `filled`, `raised`) depends on `type` parameter
 
@@ -28,7 +28,7 @@ By specifying different theme values, you can customize the visual appearance of
 
 - `normal` - represents the normal/default theme of the card.
 - `info` - represents the theme for displaying informational content.
-- `positive` - represents the theme for displaying positive/affirmative content.
+- `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.
 
@@ -45,15 +45,15 @@ const style = {
 
 <Card style={style} theme="normal" size="l">Normal</UIKit.Card>
 <Card style={style} theme="info" size="l">Info</UIKit.Card>
-<Card style={style} theme="positive" size="l">Positive</UIKit.Card>
+<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>
 `}>
 
     <div style={{display: 'grid', gridAutoFlow: 'column', gridGap: '10px'}}>
         <UIKit.Card style={{display: 'flex', alignItems: 'center', justifyContent: 'center', width: '120px', height: '120px'}} theme="normal" size="l">Normal</UIKit.Card>
         <UIKit.Card style={{display: 'flex', alignItems: 'center', justifyContent: 'center', width: '120px', height: '120px'}} theme="info" size="l">Info</UIKit.Card>
-        <UIKit.Card style={{display: 'flex', alignItems: 'center', justifyContent: 'center', width: '120px', height: '120px'}} theme="positive" size="l">Positive</UIKit.Card>
+        <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>
     </div>

diff --git a/src/components/Card/__stories__/CardShowcase.tsx b/src/components/Card/__stories__/CardShowcase.tsx
@@ -8,7 +8,7 @@ import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import './CardShowcase.scss';
 
 const containerViews: CardView[] = ['outlined', 'filled'];
-const themes: CardTheme[] = ['normal', 'info', 'positive', 'warning', 'danger'];
+const themes: CardTheme[] = ['normal', 'info', 'success', 'warning', 'danger'];
 
 export function CardShowcase() {
     return (

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