From 861cd17ba039a42a2ceaadd4e357ab10d15100a6 Mon Sep 17 00:00:00 2001 From: Ilya Date: Tue, 17 Dec 2024 02:26:38 +0300 Subject: [PATCH 1/2] fix(*): esit storybook textarea --- .../components/TextArea/TextArea.stories.tsx | 28 +++++++++++++ .../components/TextArea/TextArea.stories.tsx | 31 +++++++++++++- .../components/TextArea/TextArea.stories.tsx | 41 +++++++++++++++---- .../components/TextArea/TextArea.stories.tsx | 41 +++++++++++++++---- .../components/TextArea/TextArea.stories.tsx | 41 +++++++++++++++---- .../components/TextArea/TextArea.stories.tsx | 41 +++++++++++++++---- 6 files changed, 185 insertions(+), 38 deletions(-) diff --git a/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx b/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx index 6324d3490c..ca2a2812ab 100644 --- a/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx +++ b/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx @@ -137,6 +137,30 @@ const meta: Meta = { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, }, + helperText: { + control: { type: 'text' }, + if: { arg: 'hasHint', truthy: true }, + }, + helperText: { + control: { type: 'text' }, + if: { arg: 'helperText', truthy: true }, + }, + width: { + control: { type: 'text' }, + if: { arg: 'width', truthy: true }, + }, + height: { + control: { type: 'text' }, + if: { arg: 'width', truthy: true }, + }, + rows: { + control: { type: 'text' }, + if: { arg: 'number', truthy: true }, + }, + cols: { + control: { type: 'text' }, + if: { arg: 'number', truthy: true }, + }, ...disableProps([ 'helperBlock', '$isFocused', @@ -157,6 +181,10 @@ const meta: Meta = { 'onFocus', 'onBlur', 'leftHelperPlacement', + 'status', + 'hintTargetIcon', + 'hintOffset', + 'hintContentLeft', ]), }, args: { diff --git a/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx b/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx index a02771b428..fdcd76d205 100644 --- a/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx +++ b/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx @@ -138,7 +138,32 @@ const meta: Meta = { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, }, + helperText: { + control: { type: 'text' }, + if: { arg: 'hasHint', truthy: true }, + }, + helperText: { + control: { type: 'text' }, + if: { arg: 'helperText', truthy: true }, + }, + width: { + control: { type: 'text' }, + if: { arg: 'width', truthy: true }, + }, + height: { + control: { type: 'text' }, + if: { arg: 'width', truthy: true }, + }, + rows: { + control: { type: 'text' }, + if: { arg: 'number', truthy: true }, + }, + cols: { + control: { type: 'text' }, + if: { arg: 'number', truthy: true }, + }, ...disableProps([ + 'helperBlock', '$isFocused', 'contentRight', 'autoComplete', @@ -156,9 +181,11 @@ const meta: Meta = { 'onChange', 'onFocus', 'onBlur', - 'helperText', - 'helperBlock', 'leftHelperPlacement', + 'status', + 'hintTargetIcon', + 'hintOffset', + 'hintContentLeft', ]), }, args: { diff --git a/packages/sdds-dfa/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-dfa/src/components/TextArea/TextArea.stories.tsx index 53619b960b..3c4ed9734c 100644 --- a/packages/sdds-dfa/src/components/TextArea/TextArea.stories.tsx +++ b/packages/sdds-dfa/src/components/TextArea/TextArea.stories.tsx @@ -65,8 +65,8 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - labelPlacement: { - options: labelPlacements, + status: { + options: statuses, control: { type: 'select', }, @@ -78,8 +78,8 @@ const meta: Meta = { type: 'select', }, }, - view: { - options: views, + labelPlacement: { + options: ['inner', 'outer'], control: { type: 'select', }, @@ -143,6 +143,30 @@ const meta: Meta = { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, }, + helperText: { + control: { type: 'text' }, + if: { arg: 'hasHint', truthy: true }, + }, + helperText: { + control: { type: 'text' }, + if: { arg: 'helperText', truthy: true }, + }, + width: { + control: { type: 'text' }, + if: { arg: 'width', truthy: true }, + }, + height: { + control: { type: 'text' }, + if: { arg: 'width', truthy: true }, + }, + rows: { + control: { type: 'text' }, + if: { arg: 'number', truthy: true }, + }, + cols: { + control: { type: 'text' }, + if: { arg: 'number', truthy: true }, + }, ...disableProps([ 'helperBlock', '$isFocused', @@ -162,12 +186,11 @@ const meta: Meta = { 'onChange', 'onFocus', 'onBlur', - 'status', - 'resize', - 'height', - 'width', - 'helperText', 'leftHelperPlacement', + 'status', + 'hintTargetIcon', + 'hintOffset', + 'hintContentLeft', ]), }, args: { diff --git a/packages/sdds-finportal/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-finportal/src/components/TextArea/TextArea.stories.tsx index 53619b960b..3c4ed9734c 100644 --- a/packages/sdds-finportal/src/components/TextArea/TextArea.stories.tsx +++ b/packages/sdds-finportal/src/components/TextArea/TextArea.stories.tsx @@ -65,8 +65,8 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - labelPlacement: { - options: labelPlacements, + status: { + options: statuses, control: { type: 'select', }, @@ -78,8 +78,8 @@ const meta: Meta = { type: 'select', }, }, - view: { - options: views, + labelPlacement: { + options: ['inner', 'outer'], control: { type: 'select', }, @@ -143,6 +143,30 @@ const meta: Meta = { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, }, + helperText: { + control: { type: 'text' }, + if: { arg: 'hasHint', truthy: true }, + }, + helperText: { + control: { type: 'text' }, + if: { arg: 'helperText', truthy: true }, + }, + width: { + control: { type: 'text' }, + if: { arg: 'width', truthy: true }, + }, + height: { + control: { type: 'text' }, + if: { arg: 'width', truthy: true }, + }, + rows: { + control: { type: 'text' }, + if: { arg: 'number', truthy: true }, + }, + cols: { + control: { type: 'text' }, + if: { arg: 'number', truthy: true }, + }, ...disableProps([ 'helperBlock', '$isFocused', @@ -162,12 +186,11 @@ const meta: Meta = { 'onChange', 'onFocus', 'onBlur', - 'status', - 'resize', - 'height', - 'width', - 'helperText', 'leftHelperPlacement', + 'status', + 'hintTargetIcon', + 'hintOffset', + 'hintContentLeft', ]), }, args: { diff --git a/packages/sdds-insol/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-insol/src/components/TextArea/TextArea.stories.tsx index 2210a999e5..84b35ce053 100644 --- a/packages/sdds-insol/src/components/TextArea/TextArea.stories.tsx +++ b/packages/sdds-insol/src/components/TextArea/TextArea.stories.tsx @@ -66,8 +66,8 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - labelPlacement: { - options: labelPlacements, + status: { + options: statuses, control: { type: 'select', }, @@ -79,8 +79,8 @@ const meta: Meta = { type: 'select', }, }, - view: { - options: views, + labelPlacement: { + options: ['inner', 'outer'], control: { type: 'select', }, @@ -144,6 +144,30 @@ const meta: Meta = { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, }, + helperText: { + control: { type: 'text' }, + if: { arg: 'hasHint', truthy: true }, + }, + helperText: { + control: { type: 'text' }, + if: { arg: 'helperText', truthy: true }, + }, + width: { + control: { type: 'text' }, + if: { arg: 'width', truthy: true }, + }, + height: { + control: { type: 'text' }, + if: { arg: 'width', truthy: true }, + }, + rows: { + control: { type: 'text' }, + if: { arg: 'number', truthy: true }, + }, + cols: { + control: { type: 'text' }, + if: { arg: 'number', truthy: true }, + }, ...disableProps([ 'helperBlock', '$isFocused', @@ -163,12 +187,11 @@ const meta: Meta = { 'onChange', 'onFocus', 'onBlur', - 'status', - 'resize', - 'height', - 'width', - 'helperText', 'leftHelperPlacement', + 'status', + 'hintTargetIcon', + 'hintOffset', + 'hintContentLeft', ]), }, args: { diff --git a/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx index 53619b960b..3c4ed9734c 100644 --- a/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx +++ b/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx @@ -65,8 +65,8 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - labelPlacement: { - options: labelPlacements, + status: { + options: statuses, control: { type: 'select', }, @@ -78,8 +78,8 @@ const meta: Meta = { type: 'select', }, }, - view: { - options: views, + labelPlacement: { + options: ['inner', 'outer'], control: { type: 'select', }, @@ -143,6 +143,30 @@ const meta: Meta = { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, }, + helperText: { + control: { type: 'text' }, + if: { arg: 'hasHint', truthy: true }, + }, + helperText: { + control: { type: 'text' }, + if: { arg: 'helperText', truthy: true }, + }, + width: { + control: { type: 'text' }, + if: { arg: 'width', truthy: true }, + }, + height: { + control: { type: 'text' }, + if: { arg: 'width', truthy: true }, + }, + rows: { + control: { type: 'text' }, + if: { arg: 'number', truthy: true }, + }, + cols: { + control: { type: 'text' }, + if: { arg: 'number', truthy: true }, + }, ...disableProps([ 'helperBlock', '$isFocused', @@ -162,12 +186,11 @@ const meta: Meta = { 'onChange', 'onFocus', 'onBlur', - 'status', - 'resize', - 'height', - 'width', - 'helperText', 'leftHelperPlacement', + 'status', + 'hintTargetIcon', + 'hintOffset', + 'hintContentLeft', ]), }, args: { From 279bf2a7d2b9fd1319ec26051e612cd3c76484e8 Mon Sep 17 00:00:00 2001 From: Ilya Date: Wed, 18 Dec 2024 01:04:51 +0300 Subject: [PATCH 2/2] feat(new-hope): hide placeholder in textarea if default value in react hook form --- .../components/TextArea/TextArea.stories.tsx | 39 +++++---- .../TextField/TextField.stories.tsx | 6 -- .../src/components/TextArea/TextArea.tsx | 8 +- .../components/TextArea/TextArea.stories.tsx | 79 +++++++++++++++-- .../components/TextArea/TextArea.stories.tsx | 76 +++++++++++++++-- .../components/TextArea/TextArea.stories.tsx | 39 +++++---- .../TextField/TextField.stories.tsx | 6 -- .../components/TextArea/TextArea.stories.tsx | 84 ++++++++----------- .../components/TextArea/TextArea.stories.tsx | 35 ++++---- .../components/TextArea/TextArea.stories.tsx | 35 ++++---- .../components/TextArea/TextArea.stories.tsx | 24 ++---- .../components/TextArea/TextArea.stories.tsx | 35 ++++---- 12 files changed, 296 insertions(+), 170 deletions(-) diff --git a/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx b/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx index ca2a2812ab..ec910edd08 100644 --- a/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx +++ b/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx @@ -7,12 +7,14 @@ import type { PopoverPlacement } from '@salutejs/plasma-new-hope'; import { TextArea } from '.'; import type { TextAreaProps } from '.'; +const labelPlacements = ['inner', 'outer']; + const onChange = action('onChange'); const onFocus = action('onFocus'); const onBlur = action('onBlur'); -const statuses = ['', 'success', 'warning', 'error']; const sizes = ['xs', 's', 'm', 'l']; +const views = ['default', 'positive', 'warning', 'negative']; const hintViews = ['default']; const hintSizes = ['m', 's']; const hintTriggers = ['hover', 'click']; @@ -59,10 +61,9 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - status: { - options: statuses, + clear: { control: { - type: 'select', + type: 'boolean', }, }, size: { @@ -72,8 +73,14 @@ const meta: Meta = { type: 'select', }, }, + view: { + options: views, + control: { + type: 'select', + }, + }, labelPlacement: { - options: ['inner', 'outer'], + options: labelPlacements, control: { type: 'select', }, @@ -96,6 +103,11 @@ const meta: Meta = { }, if: { arg: 'clear', truthy: false }, }, + hasHint: { + control: { + type: 'boolean', + }, + }, hintText: { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, @@ -139,27 +151,21 @@ const meta: Meta = { }, helperText: { control: { type: 'text' }, - if: { arg: 'hasHint', truthy: true }, - }, - helperText: { - control: { type: 'text' }, - if: { arg: 'helperText', truthy: true }, }, width: { control: { type: 'text' }, - if: { arg: 'width', truthy: true }, }, height: { control: { type: 'text' }, - if: { arg: 'width', truthy: true }, }, - rows: { + leftHelper: { control: { type: 'text' }, - if: { arg: 'number', truthy: true }, }, - cols: { + titleCaption: { + control: { type: 'text' }, + }, + rightHelper: { control: { type: 'text' }, - if: { arg: 'number', truthy: true }, }, ...disableProps([ 'helperBlock', @@ -185,6 +191,7 @@ const meta: Meta = { 'hintTargetIcon', 'hintOffset', 'hintContentLeft', + 'hintView', ]), }, args: { diff --git a/packages/plasma-b2c/src/components/TextField/TextField.stories.tsx b/packages/plasma-b2c/src/components/TextField/TextField.stories.tsx index 8f5749bc2c..7cd9d07148 100644 --- a/packages/plasma-b2c/src/components/TextField/TextField.stories.tsx +++ b/packages/plasma-b2c/src/components/TextField/TextField.stories.tsx @@ -92,12 +92,6 @@ const meta: Meta = { }, if: { arg: 'clear', truthy: true }, }, - status: { - options: statuses, - control: { - type: 'select', - }, - }, size: { options: sizes, control: { diff --git a/packages/plasma-new-hope/src/components/TextArea/TextArea.tsx b/packages/plasma-new-hope/src/components/TextArea/TextArea.tsx index c87e107fd8..9d142ad451 100644 --- a/packages/plasma-new-hope/src/components/TextArea/TextArea.tsx +++ b/packages/plasma-new-hope/src/components/TextArea/TextArea.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useState, createRef, useCallback, useRef, MouseEventHandler } from 'react'; +import React, { forwardRef, useState, createRef, useCallback, useRef, MouseEventHandler, useLayoutEffect } from 'react'; import { css } from '@linaria/core'; import { useForkRef, useResizeObserver } from '@salutejs/plasma-core'; @@ -199,6 +199,12 @@ export const textAreaRoot = (Root: RootProps { + if (outerRef.current) { + setUncontrolledValue(outerRef.current.value); + } + }, [outerRef]); + useResizeObserver(outerRef, (currentElement) => { const { width: inlineWidth } = currentElement.style; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx index 581def71a8..8dba5ed51a 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx @@ -13,6 +13,8 @@ import { config } from './TextArea.config'; import { TextArea } from './TextArea'; const labelPlacements = ['inner', 'outer']; +const sizes = ['xs', 's', 'm', 'l']; +const views = ['default', 'positive', 'warning', 'negative']; const hintViews = ['default']; const hintSizes = ['m', 's']; const hintTriggers = ['hover', 'click']; @@ -67,22 +69,23 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - rows: { + size: { + options: sizes, + defaultValue: 'm', control: { - type: 'number', + type: 'select', }, - if: { arg: 'clear', truthy: false }, }, - cols: { + view: { + options: views, control: { - type: 'number', + type: 'select', }, - if: { arg: 'clear', truthy: false }, }, labelPlacement: { options: labelPlacements, control: { - type: 'inline-radio', + type: 'select', }, }, hasDivider: { @@ -91,6 +94,23 @@ const meta: Meta = { }, if: { arg: 'clear', truthy: true }, }, + cols: { + control: { + type: 'number', + }, + if: { arg: 'clear', truthy: false }, + }, + rows: { + control: { + type: 'number', + }, + if: { arg: 'clear', truthy: false }, + }, + hasHint: { + control: { + type: 'boolean', + }, + }, hintText: { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, @@ -132,7 +152,50 @@ const meta: Meta = { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, }, - ...disableProps(['leftHelperPlacement']), + helperText: { + control: { type: 'text' }, + }, + width: { + control: { type: 'text' }, + }, + height: { + control: { type: 'text' }, + }, + leftHelper: { + control: { type: 'text' }, + }, + titleCaption: { + control: { type: 'text' }, + }, + rightHelper: { + control: { type: 'text' }, + }, + ...disableProps([ + 'helperBlock', + '$isFocused', + 'contentRight', + 'autoComplete', + 'autoFocus', + 'dirName', + 'form', + 'minLength', + 'maxLength', + 'name', + 'value', + 'wrap', + 'theme', + 'as', + 'forwardedAs', + 'onChange', + 'onFocus', + 'onBlur', + 'leftHelperPlacement', + 'status', + 'hintTargetIcon', + 'hintOffset', + 'hintContentLeft', + 'hintView', + ]), }, args: { id: 'example-textarea', diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/TextArea/TextArea.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/TextArea/TextArea.stories.tsx index 1e49281564..5b8f80fdb1 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/TextArea/TextArea.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/TextArea/TextArea.stories.tsx @@ -13,6 +13,7 @@ import { config } from './TextArea.config'; import { TextArea } from './TextArea'; const labelPlacements = ['inner', 'outer']; +const sizes = ['xs', 's', 'm', 'l']; const hintViews = ['default']; const hintSizes = ['m', 's']; const hintTriggers = ['hover', 'click']; @@ -67,17 +68,18 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - rows: { + size: { + options: sizes, + defaultValue: 'm', control: { - type: 'number', + type: 'select', }, - if: { arg: 'clear', truthy: false }, }, - cols: { + view: { + options: views, control: { - type: 'number', + type: 'select', }, - if: { arg: 'clear', truthy: false }, }, labelPlacement: { options: labelPlacements, @@ -91,6 +93,23 @@ const meta: Meta = { }, if: { arg: 'clear', truthy: true }, }, + cols: { + control: { + type: 'number', + }, + if: { arg: 'clear', truthy: false }, + }, + rows: { + control: { + type: 'number', + }, + if: { arg: 'clear', truthy: false }, + }, + hasHint: { + control: { + type: 'boolean', + }, + }, hintText: { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, @@ -132,7 +151,50 @@ const meta: Meta = { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, }, - ...disableProps(['leftHelperPlacement']), + helperText: { + control: { type: 'text' }, + }, + width: { + control: { type: 'text' }, + }, + height: { + control: { type: 'text' }, + }, + leftHelper: { + control: { type: 'text' }, + }, + titleCaption: { + control: { type: 'text' }, + }, + rightHelper: { + control: { type: 'text' }, + }, + ...disableProps([ + 'helperBlock', + '$isFocused', + 'contentRight', + 'autoComplete', + 'autoFocus', + 'dirName', + 'form', + 'minLength', + 'maxLength', + 'name', + 'value', + 'wrap', + 'theme', + 'as', + 'forwardedAs', + 'onChange', + 'onFocus', + 'onBlur', + 'leftHelperPlacement', + 'status', + 'hintTargetIcon', + 'hintOffset', + 'hintContentLeft', + 'hintView', + ]), }, args: { id: 'example-textarea', diff --git a/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx b/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx index fdcd76d205..be75993cee 100644 --- a/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx +++ b/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx @@ -8,12 +8,14 @@ import { IconPlaceholder, InSpacingDecorator, disableProps } from '../../helpers import { TextArea } from '.'; import type { TextAreaProps } from '.'; +const labelPlacements = ['inner', 'outer']; + const onChange = action('onChange'); const onFocus = action('onFocus'); const onBlur = action('onBlur'); -const statuses = ['', 'success', 'warning', 'error']; const sizes = ['xs', 's', 'm', 'l']; +const views = ['default', 'positive', 'warning', 'negative']; const hintViews = ['default']; const hintSizes = ['m', 's']; const hintTriggers = ['hover', 'click']; @@ -60,10 +62,9 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - status: { - options: statuses, + clear: { control: { - type: 'select', + type: 'boolean', }, }, size: { @@ -73,8 +74,14 @@ const meta: Meta = { type: 'select', }, }, + view: { + options: views, + control: { + type: 'select', + }, + }, labelPlacement: { - options: ['inner', 'outer'], + options: labelPlacements, control: { type: 'select', }, @@ -97,6 +104,11 @@ const meta: Meta = { }, if: { arg: 'clear', truthy: false }, }, + hasHint: { + control: { + type: 'boolean', + }, + }, hintText: { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, @@ -140,27 +152,21 @@ const meta: Meta = { }, helperText: { control: { type: 'text' }, - if: { arg: 'hasHint', truthy: true }, - }, - helperText: { - control: { type: 'text' }, - if: { arg: 'helperText', truthy: true }, }, width: { control: { type: 'text' }, - if: { arg: 'width', truthy: true }, }, height: { control: { type: 'text' }, - if: { arg: 'width', truthy: true }, }, - rows: { + leftHelper: { control: { type: 'text' }, - if: { arg: 'number', truthy: true }, }, - cols: { + titleCaption: { + control: { type: 'text' }, + }, + rightHelper: { control: { type: 'text' }, - if: { arg: 'number', truthy: true }, }, ...disableProps([ 'helperBlock', @@ -186,6 +192,7 @@ const meta: Meta = { 'hintTargetIcon', 'hintOffset', 'hintContentLeft', + 'hintView', ]), }, args: { diff --git a/packages/plasma-web/src/components/TextField/TextField.stories.tsx b/packages/plasma-web/src/components/TextField/TextField.stories.tsx index 94933b0b44..822d580209 100644 --- a/packages/plasma-web/src/components/TextField/TextField.stories.tsx +++ b/packages/plasma-web/src/components/TextField/TextField.stories.tsx @@ -98,12 +98,6 @@ const meta: Meta = { }, if: { arg: 'clear', truthy: true }, }, - status: { - options: statuses, - control: { - type: 'select', - }, - }, size: { options: sizes, control: { diff --git a/packages/sdds-cs/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-cs/src/components/TextArea/TextArea.stories.tsx index 38bde83375..ae2a87a53a 100644 --- a/packages/sdds-cs/src/components/TextArea/TextArea.stories.tsx +++ b/packages/sdds-cs/src/components/TextArea/TextArea.stories.tsx @@ -4,7 +4,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils'; import { IconPlasma } from '@salutejs/plasma-icons'; -import type { PopoverPlacement } from '@salutejs/plasma-new-hope'; import { TextArea } from './TextArea'; @@ -17,29 +16,9 @@ type StoryTextAreaPropsCustom = { type StoryTextAreaProps = ComponentProps & StoryTextAreaPropsCustom; -const sizes = ['s']; -const views = ['default', 'negative']; +const hintViews = ['default']; const hintSizes = ['m', 's']; const hintTriggers = ['hover', 'click']; -const hintPlacements: Array = [ - 'top', - 'top-start', - 'top-end', - - 'bottom', - 'bottom-start', - 'bottom-end', - - 'left', - 'left-start', - 'left-end', - - 'right', - 'right-start', - 'right-end', - - 'auto', -]; const meta: Meta = { title: 'Data Entry/TextArea', @@ -64,36 +43,17 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - labelPlacement: { - options: placements, - control: { - type: 'inline-radio', - }, - }, - leftHelperPlacement: { - options: placements, - control: { - type: 'inline-radio', - }, - }, - size: { - options: sizes, - defaultValue: 'm', + clear: { control: { - type: 'select', + type: 'boolean', }, }, - view: { - options: views, + labelPlacement: { + options: ['inner', 'outer'], control: { type: 'select', }, }, - clear: { - control: { - type: 'boolean', - }, - }, hasDivider: { control: { type: 'boolean', @@ -112,10 +72,22 @@ const meta: Meta = { }, if: { arg: 'clear', truthy: false }, }, + hasHint: { + control: { + type: 'boolean', + }, + }, hintText: { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, }, + hintView: { + options: hintViews, + control: { + type: 'select', + }, + if: { arg: 'hasHint', truthy: true }, + }, hintSize: { options: hintSizes, control: { @@ -131,12 +103,12 @@ const meta: Meta = { if: { arg: 'hasHint', truthy: true }, }, hintPlacement: { - options: hintPlacements, + options: placements, control: { type: 'select', }, if: { arg: 'hasHint', truthy: true }, - mappers: hintPlacements, + mappers: placements, }, hintHasArrow: { control: { type: 'boolean' }, @@ -146,6 +118,24 @@ const meta: Meta = { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, }, + helperText: { + control: { type: 'text' }, + }, + width: { + control: { type: 'text' }, + }, + height: { + control: { type: 'text' }, + }, + leftHelper: { + control: { type: 'text' }, + }, + titleCaption: { + control: { type: 'text' }, + }, + rightHelper: { + control: { type: 'text' }, + }, ...disableProps([ 'helperBlock', '$isFocused', diff --git a/packages/sdds-dfa/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-dfa/src/components/TextArea/TextArea.stories.tsx index 3c4ed9734c..043ccfc1fa 100644 --- a/packages/sdds-dfa/src/components/TextArea/TextArea.stories.tsx +++ b/packages/sdds-dfa/src/components/TextArea/TextArea.stories.tsx @@ -65,10 +65,9 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - status: { - options: statuses, + clear: { control: { - type: 'select', + type: 'boolean', }, }, size: { @@ -78,8 +77,14 @@ const meta: Meta = { type: 'select', }, }, + view: { + options: views, + control: { + type: 'select', + }, + }, labelPlacement: { - options: ['inner', 'outer'], + options: labelPlacements, control: { type: 'select', }, @@ -102,6 +107,11 @@ const meta: Meta = { }, if: { arg: 'clear', truthy: false }, }, + hasHint: { + control: { + type: 'boolean', + }, + }, hintText: { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, @@ -145,27 +155,21 @@ const meta: Meta = { }, helperText: { control: { type: 'text' }, - if: { arg: 'hasHint', truthy: true }, - }, - helperText: { - control: { type: 'text' }, - if: { arg: 'helperText', truthy: true }, }, width: { control: { type: 'text' }, - if: { arg: 'width', truthy: true }, }, height: { control: { type: 'text' }, - if: { arg: 'width', truthy: true }, }, - rows: { + leftHelper: { control: { type: 'text' }, - if: { arg: 'number', truthy: true }, }, - cols: { + titleCaption: { + control: { type: 'text' }, + }, + rightHelper: { control: { type: 'text' }, - if: { arg: 'number', truthy: true }, }, ...disableProps([ 'helperBlock', @@ -191,6 +195,7 @@ const meta: Meta = { 'hintTargetIcon', 'hintOffset', 'hintContentLeft', + 'hintView', ]), }, args: { diff --git a/packages/sdds-finportal/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-finportal/src/components/TextArea/TextArea.stories.tsx index 3c4ed9734c..043ccfc1fa 100644 --- a/packages/sdds-finportal/src/components/TextArea/TextArea.stories.tsx +++ b/packages/sdds-finportal/src/components/TextArea/TextArea.stories.tsx @@ -65,10 +65,9 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - status: { - options: statuses, + clear: { control: { - type: 'select', + type: 'boolean', }, }, size: { @@ -78,8 +77,14 @@ const meta: Meta = { type: 'select', }, }, + view: { + options: views, + control: { + type: 'select', + }, + }, labelPlacement: { - options: ['inner', 'outer'], + options: labelPlacements, control: { type: 'select', }, @@ -102,6 +107,11 @@ const meta: Meta = { }, if: { arg: 'clear', truthy: false }, }, + hasHint: { + control: { + type: 'boolean', + }, + }, hintText: { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, @@ -145,27 +155,21 @@ const meta: Meta = { }, helperText: { control: { type: 'text' }, - if: { arg: 'hasHint', truthy: true }, - }, - helperText: { - control: { type: 'text' }, - if: { arg: 'helperText', truthy: true }, }, width: { control: { type: 'text' }, - if: { arg: 'width', truthy: true }, }, height: { control: { type: 'text' }, - if: { arg: 'width', truthy: true }, }, - rows: { + leftHelper: { control: { type: 'text' }, - if: { arg: 'number', truthy: true }, }, - cols: { + titleCaption: { + control: { type: 'text' }, + }, + rightHelper: { control: { type: 'text' }, - if: { arg: 'number', truthy: true }, }, ...disableProps([ 'helperBlock', @@ -191,6 +195,7 @@ const meta: Meta = { 'hintTargetIcon', 'hintOffset', 'hintContentLeft', + 'hintView', ]), }, args: { diff --git a/packages/sdds-insol/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-insol/src/components/TextArea/TextArea.stories.tsx index 84b35ce053..ccd56d5ff8 100644 --- a/packages/sdds-insol/src/components/TextArea/TextArea.stories.tsx +++ b/packages/sdds-insol/src/components/TextArea/TextArea.stories.tsx @@ -66,21 +66,21 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - status: { - options: statuses, + size: { + options: sizes, + defaultValue: 'm', control: { type: 'select', }, }, - size: { - options: sizes, - defaultValue: 'm', + view: { + options: views, control: { type: 'select', }, }, labelPlacement: { - options: ['inner', 'outer'], + options: labelPlacements, control: { type: 'select', }, @@ -144,10 +144,6 @@ const meta: Meta = { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, }, - helperText: { - control: { type: 'text' }, - if: { arg: 'hasHint', truthy: true }, - }, helperText: { control: { type: 'text' }, if: { arg: 'helperText', truthy: true }, @@ -160,14 +156,6 @@ const meta: Meta = { control: { type: 'text' }, if: { arg: 'width', truthy: true }, }, - rows: { - control: { type: 'text' }, - if: { arg: 'number', truthy: true }, - }, - cols: { - control: { type: 'text' }, - if: { arg: 'number', truthy: true }, - }, ...disableProps([ 'helperBlock', '$isFocused', diff --git a/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx index 3c4ed9734c..043ccfc1fa 100644 --- a/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx +++ b/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx @@ -65,10 +65,9 @@ const meta: Meta = { }, if: { arg: 'required', truthy: false }, }, - status: { - options: statuses, + clear: { control: { - type: 'select', + type: 'boolean', }, }, size: { @@ -78,8 +77,14 @@ const meta: Meta = { type: 'select', }, }, + view: { + options: views, + control: { + type: 'select', + }, + }, labelPlacement: { - options: ['inner', 'outer'], + options: labelPlacements, control: { type: 'select', }, @@ -102,6 +107,11 @@ const meta: Meta = { }, if: { arg: 'clear', truthy: false }, }, + hasHint: { + control: { + type: 'boolean', + }, + }, hintText: { control: { type: 'text' }, if: { arg: 'hasHint', truthy: true }, @@ -145,27 +155,21 @@ const meta: Meta = { }, helperText: { control: { type: 'text' }, - if: { arg: 'hasHint', truthy: true }, - }, - helperText: { - control: { type: 'text' }, - if: { arg: 'helperText', truthy: true }, }, width: { control: { type: 'text' }, - if: { arg: 'width', truthy: true }, }, height: { control: { type: 'text' }, - if: { arg: 'width', truthy: true }, }, - rows: { + leftHelper: { control: { type: 'text' }, - if: { arg: 'number', truthy: true }, }, - cols: { + titleCaption: { + control: { type: 'text' }, + }, + rightHelper: { control: { type: 'text' }, - if: { arg: 'number', truthy: true }, }, ...disableProps([ 'helperBlock', @@ -191,6 +195,7 @@ const meta: Meta = { 'hintTargetIcon', 'hintOffset', 'hintContentLeft', + 'hintView', ]), }, args: {