feat(new-hope): hide placeholder in textarea if default value in reac…

…t hook form
salute-developers · Dec 22, 2024 · d1f6c3a · d1f6c3a
1 parent 7e2646c
commit d1f6c3a
Show file tree

Hide file tree

Showing 12 changed files with 296 additions and 170 deletions.
diff --git 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<TextAreaProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
-        status: {
-            options: statuses,
+        clear: {
             control: {
-                type: 'select',
+                type: 'boolean',
             },
         },
         size: {
@@ -72,8 +73,14 @@ const meta: Meta<TextAreaProps> = {
                 type: 'select',
             },
         },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
         labelPlacement: {
-            options: ['inner', 'outer'],
+            options: labelPlacements,
             control: {
                 type: 'select',
             },
@@ -96,6 +103,11 @@ const meta: Meta<TextAreaProps> = {
             },
             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<TextAreaProps> = {
         },
         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<TextAreaProps> = {
             '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
@@ -92,12 +92,6 @@ const meta: Meta<TextFieldProps> = {
             },
             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
@@ -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<HTMLTextAreaElement, TextAreaRootPr
             }
         };
 
+        useLayoutEffect(() => {
+            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
@@ -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<StoryTextAreaProps> = {
             },
             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<StoryTextAreaProps> = {
             },
             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<StoryTextAreaProps> = {
             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
@@ -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<StoryTextAreaProps> = {
             },
             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<StoryTextAreaProps> = {
             },
             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<StoryTextAreaProps> = {
             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',