From 2c197632e6b5d718f94ddf7e652f6352bc5e9a6f Mon Sep 17 00:00:00 2001 From: Egor Mostovoy Date: Wed, 22 Jan 2025 11:45:18 +0100 Subject: [PATCH] feat: added new view text content alert (#265) --- docs/spec.md | 2 + src/lib/core/types/specs.ts | 4 +- .../Inputs/TextContent/TextContent.tsx | 21 +++++- ...tent-Alert-default-dark-chromium-linux.png | Bin 0 -> 17273 bytes ...ontent-Alert-default-dark-webkit-linux.png | Bin 0 -> 9927 bytes ...ent-Alert-default-light-chromium-linux.png | Bin 0 -> 17185 bytes ...ntent-Alert-default-light-webkit-linux.png | Bin 0 -> 9777 bytes ...t-Alert-layout-row-dark-chromium-linux.png | Bin 0 -> 23456 bytes ...ent-Alert-layout-row-dark-webkit-linux.png | Bin 0 -> 16404 bytes ...-Alert-layout-row-light-chromium-linux.png | Bin 0 -> 23240 bytes ...nt-Alert-layout-row-light-webkit-linux.png | Bin 0 -> 16154 bytes ...layout-row-verbose-dark-chromium-linux.png | Bin 0 -> 25967 bytes ...t-layout-row-verbose-dark-webkit-linux.png | Bin 0 -> 18172 bytes ...ayout-row-verbose-light-chromium-linux.png | Bin 0 -> 25741 bytes ...-layout-row-verbose-light-webkit-linux.png | Bin 0 -> 18009 bytes ...layout-transparent-dark-chromium-linux.png | Bin 0 -> 17273 bytes ...t-layout-transparent-dark-webkit-linux.png | Bin 0 -> 9927 bytes ...ayout-transparent-light-chromium-linux.png | Bin 0 -> 17185 bytes ...-layout-transparent-light-webkit-linux.png | Bin 0 -> 9777 bytes ...lert-without-title-dark-chromium-linux.png | Bin 0 -> 14232 bytes ...-Alert-without-title-dark-webkit-linux.png | Bin 0 -> 8042 bytes ...ert-without-title-light-chromium-linux.png | Bin 0 -> 14135 bytes ...Alert-without-title-light-webkit-linux.png | Bin 0 -> 7901 bytes .../__tests__/TextContent.visual.test.tsx | 32 +++++++++ .../Inputs/TextContent/__tests__/helpers.ts | 63 ++++++++++++++++++ src/lib/kit/utils/common.ts | 5 ++ src/stories/StringTextContent.stories.tsx | 12 ++++ .../components/InputPreview/constants.ts | 9 +++ 28 files changed, 145 insertions(+), 3 deletions(-) create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-default-dark-chromium-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-default-dark-webkit-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-default-light-chromium-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-default-light-webkit-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-layout-row-dark-chromium-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-layout-row-dark-webkit-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-layout-row-light-chromium-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-layout-row-light-webkit-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-layout-row-verbose-dark-chromium-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-layout-row-verbose-dark-webkit-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-layout-row-verbose-light-chromium-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-layout-row-verbose-light-webkit-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-layout-transparent-dark-chromium-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-layout-transparent-dark-webkit-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-layout-transparent-light-chromium-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-layout-transparent-light-webkit-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-without-title-dark-chromium-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-without-title-dark-webkit-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-without-title-light-chromium-linux.png create mode 100644 src/lib/kit/components/Inputs/TextContent/__snapshots__/TextContent.visual.test.tsx-snapshots/Text-Content-Alert-without-title-light-webkit-linux.png 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 = (