From 91fffa7f2133fa541e8d1396ac81a6b2c2adb15b Mon Sep 17 00:00:00 2001 From: gizeasy Date: Thu, 24 Oct 2024 14:51:15 +0300 Subject: [PATCH] feat(Informer): add _view_outline closes #3511 --- src/components/Informer/Informer.css | 29 ++++--- src/components/Informer/Informer.tsx | 29 ++++--- .../Informer/__stand__/Informer.dev.stand.mdx | 77 +++++++++---------- .../InformerExampleStatus.tsx} | 2 +- .../InformerExampleView.tsx | 19 +++-- 5 files changed, 89 insertions(+), 67 deletions(-) rename src/components/Informer/__stand__/examples/{InformerExampleType/InformerExampleType.tsx => InformerExampleStatus/InformerExampleStatus.tsx} (96%) diff --git a/src/components/Informer/Informer.css b/src/components/Informer/Informer.css index ecbb8c46d..b81aaf1f4 100644 --- a/src/components/Informer/Informer.css +++ b/src/components/Informer/Informer.css @@ -1,28 +1,33 @@ .Informer { - padding: var(--space-s) var(--space-m); color: var(--color-typo-primary); + background-color: var(--informer-bg); border-radius: var(--control-radius); - &_withIcon { - display: flex; - flex-wrap: nowrap; - } - &_view { &_bordered { - background-color: var(--color-bg-default); - border-left: var(--space-xs) solid var(--informer-status-color); + --informer-bg: var(--color-bg-default); + border-left: var(--space-xs) solid var(--informer-bg-color); box-shadow: var(--shadow-layer); } &_filled { - background-color: var(--informer-status-color); + --informer-bg: var(--informer-bg-color); + } + + &_outline { + --informer-icon-color: var(--informer-typo-color); + --informer-bg: + color-mix( + in srgb, + var(--informer-bg-color) var(--informer-bg-opacity), + var(--color-bg-default) + ); + border: var(--control-border-width) solid var(--informer-bg-color); } } &-Icon { - margin-right: var(--space-s); - transform: translateY(var(--space-3xs)); - flex-shrink: 0; + flex: 1; + color: var(--informer-icon-color, inherit); } } diff --git a/src/components/Informer/Informer.tsx b/src/components/Informer/Informer.tsx index 001582030..2db4891ad 100644 --- a/src/components/Informer/Informer.tsx +++ b/src/components/Informer/Informer.tsx @@ -4,6 +4,7 @@ import { classnames } from '@bem-react/classnames'; import { IconComponent } from '@consta/icons/Icon'; import React from 'react'; +import { cnMixFlex } from '##/mixs/MixFlex'; import { cnMixSpace } from '##/mixs/MixSpace'; import { cn } from '../../utils/bem'; @@ -11,7 +12,7 @@ import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttribut import { Text } from '../Text/Text'; import { useTheme } from '../Theme/Theme'; -export const informerPropView = ['filled', 'bordered'] as const; +export const informerPropView = ['filled', 'bordered', 'outline'] as const; export type InformerPropView = typeof informerPropView[number]; export const informerPropViewDefault: InformerPropView = informerPropView[0]; @@ -48,16 +49,15 @@ export const Informer = React.forwardRef( view = informerPropViewDefault, status = informerPropStatusDefault, size = informerPropSiseDefault, - icon, + icon: Icon, label, title, children, style, ...otherProps } = props; - const Icon = icon; - const withIcon = !!icon; const { themeClassNames } = useTheme(); + const className = status !== 'system' && view === 'filled' ? classnames(props.className, themeClassNames.color.accent) @@ -69,19 +69,28 @@ export const Informer = React.forwardRef( className={cnInformer( { view, - withIcon, }, - [className, cnMixSpace({ p: size })], + [ + className, + cnMixSpace({ p: size }), + cnMixFlex({ flex: 'flex', gap: 's' }), + ], )} style={{ ...style, - ['--informer-status-color' as string]: status - ? `var(--color-bg-${status})` - : undefined, + ['--informer-bg-color' as string]: `var(--color-bg-${status})`, + ['--informer-typo-color' as string]: `var(--color-typo-${status})`, + ['--informer-bg-opacity' as string]: + status === 'system' ? '30%' : '10%', }} ref={ref} > - {Icon && } + {Icon && ( + + )}
{title && ( -- [Тип сообщения](#тип-сообщения) +- [Статус сообщения](#статус-сообщения) - [Текст сообщения](#текст-сообщения) - [Внешний вид](#внешний-вид) - - [Тип информера](#тип-информера) + - [Вид информера](#вид-информера) - [Иконка](#иконка) - [Размер](#размер) - [Импорт](#импорт) - [Список свойств](#свойства) -- [Пример использования](#пример) -## Тип сообщения +## Статус сообщения + +За тип сообщения отвечает свойство `status`. -За тип сообщения отвечает свойство `type`. + ```tsx ``` - + + + ## Текст сообщения @@ -67,27 +72,31 @@ import { Informer } from '@consta/uikit/Informer'; ## Внешний вид -### Тип информера +### Вид информера -За тип информера отвечает свойство `view`. В дизайн-системе есть информеры двух типов: +За вид информера отвечает свойство `view`. В дизайн-системе есть информеры двух типов: с заливкой `filled` или без неё `bordered`. -```tsx - -``` + ```tsx + + ``` + + ### Иконка С помощью свойства `icon` можно добавить иконку — любую из [библиотеки иконок](##LIBS.LIB/lib:icons). Не стоит добавлять иконку в информер без заливки. + + ```tsx + + ### Размер За размер сообщения отвечает свойство `size`. Варианты: `m`, `s`, по умолчанию — `m`. + + ```tsx + + ## Импорт ```tsx @@ -130,30 +145,14 @@ import { Informer } from '@consta/uikit/Informer'; ## Свойства -| Свойство | Тип или варианты значения | По умолчанию | Описание | -| ---------------------------- | ----------------------------------------------- | ------------ | ---------------------------------- | -| [`status?`](#тип-сообщения) | `'system'`, `'alert'`, `'warning'`, '`success'` | `'success'` | Тип сообщения | -| [`title?`](#текст-сообщения) | `string` | - | Заголовок сообщения | -| [`label?`](#текст-сообщения) | `string` | - | Текст сообщения | -| `children?` | `React.ReactNode` | - | Текст сообщения | -| [`view?`](#внешний-вид) | `'filled'`, `'bordered'` | `'filled'` | Тип информера (с заливкой или без) | -| [`icon?`](#внешний-вид) | `IconComponent` | - | Иконка | -| [`size?`](#размер) | `'m'`, `'s'` | `'m'` | Размер | -| `ref?` | `React.Ref` | - | Ссылка на DOM-элемент компонента | -| `className` | `string` | - | Дополнительный CSS-класс | - -## Пример - -```ts -import React from 'react'; -import { Informer } from '@consta/uikit/Informer'; - -const App = () => { - return ( - - ); -}; -``` +| Свойство | Тип или варианты значения | По умолчанию | Описание | +| ---------------------------- | -------------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------- | +| [`status?`](#тип-сообщения) | `'system'` | `'alert'` | `'warning'` | '`success'` | `'success'` | Тип сообщения | +| [`title?`](#текст-сообщения) | `string` | - | Заголовок сообщения | +| [`label?`](#текст-сообщения) | `string` | - | Текст сообщения | +| `children?` | `React.ReactNode` | - | Текст сообщения | +| [`view?`](#внешний-вид) | `'filled'` | `'bordered'` | `'outline'` | `'filled'` | Тип информера (с заливкой или без) | +| [`icon?`](#внешний-вид) | `IconComponent` | - | Иконка | +| [`size?`](#размер) | `'m'` | `'s'` | `'m'` | Размер | +| `ref?` | `React.Ref` | - | Ссылка на DOM-элемент компонента | +| `className` | `string` | - | Дополнительный CSS-класс | diff --git a/src/components/Informer/__stand__/examples/InformerExampleType/InformerExampleType.tsx b/src/components/Informer/__stand__/examples/InformerExampleStatus/InformerExampleStatus.tsx similarity index 96% rename from src/components/Informer/__stand__/examples/InformerExampleType/InformerExampleType.tsx rename to src/components/Informer/__stand__/examples/InformerExampleStatus/InformerExampleStatus.tsx index 9b9fa70ca..3400d7a64 100644 --- a/src/components/Informer/__stand__/examples/InformerExampleType/InformerExampleType.tsx +++ b/src/components/Informer/__stand__/examples/InformerExampleStatus/InformerExampleStatus.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { Informer } from '../../../Informer'; -export const InformerExampleType = () => ( +export const InformerExampleStatus = () => ( -

+

Такой лучше использовать, когда сообщение — часть контента и находится на одном уровне с ним.

@@ -24,14 +23,24 @@ export function InformerExampleView() { <> -

- А такой — когда сообщение должно быть на уровень выше контента. +

+ Такой лучше использовать, когда сообщение — часть контента и находится + на одном уровне с ним.

+ <> + +

А такой — когда сообщение должно быть на уровень выше контента.

+ ); }