diff --git a/src/components/Alert/Alert.test.tsx b/src/components/Alert/Alert.test.tsx index 8be2665d1..91153e26d 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', 'warning'])( + test.each(['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 index 036bb1eb5..7cd72da29 100644 --- 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 ( -
+
); diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md index c6ba4ec75..348b2b12f 100644 --- 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={` - + `}> - + @@ -42,7 +42,7 @@ LANDING_BLOCK--> ```tsx - + ``` @@ -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 index 3184a78dc..681810db6 100644 --- 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'; -### With actions override and squere corners +### With actions override and square corners ```tsx alert('Ok!')} @@ -126,7 +126,7 @@ import {Alert} from '@gravity-ui/uikit'; ```tsx } title="Everything is ok, mister!" diff --git a/src/components/Alert/__stories__/examples/index.tsx b/src/components/Alert/__stories__/examples/index.tsx index 7ed32a3fe..235500b15 100644 --- 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('Ok!')} @@ -94,7 +94,7 @@ export const WithHtmlMessageAndTitle = () => ( export const HorizontalLayoutAndCustomIcon = () => ( } title="Everything is ok, mister!" diff --git a/src/components/Alert/types.ts b/src/components/Alert/types.ts index 8ac5592ca..77833338f 100644 --- 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 index d237d1b06..bccf85694 100644 --- 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 index eca35a400..9028b18e1 100644 --- 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 index 40f7837d5..d99263ca3 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`, `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,7 +45,7 @@ const style = { Normal Info -Positive +Success Warning Danger `}> @@ -53,7 +53,7 @@ const style = {
Normal Info - Positive + Success Warning Danger
diff --git a/src/components/Card/__stories__/CardShowcase.tsx b/src/components/Card/__stories__/CardShowcase.tsx index 3e24dbbc4..285cf7611 100644 --- 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 index 6b9f90380..ff1924819 100644 --- 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'];