diff --git a/docs/spec.md b/docs/spec.md index 66f4f57f..6458736a 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -182,6 +182,8 @@ You can provide all props of [original component](https://preview.gravity-ui.com | text | `string` | yes | Text for input | | icon | `string` | | Icon name from the [library](https://gravity-ui.com/icons) | | iconColor | `'primary'` `'complementary'` `'secondary'` `'hint'` `'info'` `'info-heavy'` `'positive'` `'positive-heavy'` `'warning'` `'warning-heavy'` `'danger'` `'danger-heavy'` `'utility'` `'utility-heavy'` `'misc'` `'misc-heavy'` `'brand'` `'dark-primary'` `'dark-complementary'` `'dark-secondary'` | | The color of the icon, if it does not have the themeLabel parameter | +| themeIcon | `'normal'` `'info'` `'success'` `'warning'` `'danger'` `'utility'` | | Alert color | +| titleAlert | `string` | | Alert title | #### SelectParams diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts index 611e2bff..fb7b8a0f 100644 --- a/src/lib/core/types/specs.ts +++ b/src/lib/core/types/specs.ts @@ -1,4 +1,4 @@ -import {LabelProps} from '@gravity-ui/uikit'; +import {AlertProps, LabelProps} from '@gravity-ui/uikit'; import {ColorTextBaseProps} from '@gravity-ui/uikit/build/esm/components/Text/colorText/colorText'; import {ReadAsMethod, SpecTypes} from '../constants'; @@ -173,6 +173,8 @@ export interface StringSpec< text: string; icon?: string; iconColor?: ColorTextBaseProps['color']; + titleAlert?: string; + themeAlert?: AlertProps['theme']; }; fileInput?: { accept?: string; diff --git a/src/lib/kit/components/Inputs/TextContent/TextContent.tsx b/src/lib/kit/components/Inputs/TextContent/TextContent.tsx index 3d52736b..af8063c9 100644 --- a/src/lib/kit/components/Inputs/TextContent/TextContent.tsx +++ b/src/lib/kit/components/Inputs/TextContent/TextContent.tsx @@ -1,6 +1,8 @@ import React from 'react'; -import {Label, Text} from '@gravity-ui/uikit'; +import {isEmpty} from 'lodash'; + +import {Alert, Label, Text} from '@gravity-ui/uikit'; import cloneDeep from 'lodash/cloneDeep'; import {StringIndependentInput, StringSpec} from '../../../../core'; @@ -41,7 +43,22 @@ export const TextContentComponent: React.FC = ({ let content = ; - if (textContentParams?.themeLabel) { + if (textContentParams?.themeAlert) { + const titleAlert = + textContentParams?.titleAlert || !isEmpty(textContentParams?.titleAlert) + ? textContentParams.titleAlert + : undefined; + + content = ( + + ); + } else if (textContentParams?.themeLabel) { content = (