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

…t hook form
salute-developers · Dec 17, 2024 · 69ca1e1 · 69ca1e1
1 parent 9023754
commit 69ca1e1
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 72 deletions.
diff --git a/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx b/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx
@@ -59,12 +59,6 @@ const meta: Meta<TextAreaProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
-        status: {
-            options: statuses,
-            control: {
-                type: 'select',
-            },
-        },
         size: {
             options: sizes,
             defaultValue: 'm',

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,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,22 +68,17 @@ const meta: Meta<StoryTextAreaProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
-        rows: {
-            control: {
-                type: 'number',
-            },
-            if: { arg: 'clear', truthy: false },
-        },
-        cols: {
+        size: {
+            options: sizes,
+            defaultValue: 'm',
             control: {
-                type: 'number',
+                type: 'select',
             },
-            if: { arg: 'clear', truthy: false },
         },
         labelPlacement: {
-            options: labelPlacements,
+            options: ['inner', 'outer'],
             control: {
-                type: 'inline-radio',
+                type: 'select',
             },
         },
         hasDivider: {
@@ -91,6 +87,18 @@ 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 },
+        },
         hintText: {
             control: { type: 'text' },
             if: { arg: 'hasHint', truthy: true },
@@ -132,7 +140,55 @@ const meta: Meta<StoryTextAreaProps> = {
             control: { type: 'text' },
             if: { arg: 'hasHint', truthy: true },
         },
-        ...disableProps(['leftHelperPlacement']),
+        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',
+            'autoFocus',
+            'dirName',
+            'form',
+            'minLength',
+            'maxLength',
+            'name',
+            'value',
+            'wrap',
+            'theme',
+            'as',
+            'forwardedAs',
+            'onChange',
+            'onFocus',
+            'onBlur',
+            'leftHelperPlacement',
+            'status',
+            'hintTargetIcon',
+            'hintOffset',
+            'hintContentLeft',
+        ]),
     },
     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,20 +68,15 @@ const meta: Meta<StoryTextAreaProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
-        rows: {
-            control: {
-                type: 'number',
-            },
-            if: { arg: 'clear', truthy: false },
-        },
-        cols: {
+        size: {
+            options: sizes,
+            defaultValue: 'm',
             control: {
-                type: 'number',
+                type: 'select',
             },
-            if: { arg: 'clear', truthy: false },
         },
         labelPlacement: {
-            options: labelPlacements,
+            options: ['inner', 'outer'],
             control: {
                 type: 'select',
             },
@@ -91,6 +87,18 @@ 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 },
+        },
         hintText: {
             control: { type: 'text' },
             if: { arg: 'hasHint', truthy: true },
@@ -132,7 +140,55 @@ const meta: Meta<StoryTextAreaProps> = {
             control: { type: 'text' },
             if: { arg: 'hasHint', truthy: true },
         },
-        ...disableProps(['leftHelperPlacement']),
+        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',
+            'autoFocus',
+            'dirName',
+            'form',
+            'minLength',
+            'maxLength',
+            'name',
+            'value',
+            'wrap',
+            'theme',
+            'as',
+            'forwardedAs',
+            'onChange',
+            'onFocus',
+            'onBlur',
+            'leftHelperPlacement',
+            'status',
+            'hintTargetIcon',
+            'hintOffset',
+            'hintContentLeft',
+        ]),
     },
     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
@@ -60,12 +60,6 @@ const meta: Meta<TextAreaProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
-        status: {
-            options: statuses,
-            control: {
-                type: 'select',
-            },
-        },
         size: {
             options: sizes,
             defaultValue: 'm',

diff --git 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<TextFieldProps> = {
             },
             if: { arg: 'clear', truthy: true },
         },
-        status: {
-            options: statuses,
-            control: {
-                type: 'select',
-            },
-        },
         size: {
             options: sizes,
             control: {

diff --git a/packages/sdds-dfa/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-dfa/src/components/TextArea/TextArea.stories.tsx
@@ -65,12 +65,6 @@ const meta: Meta<StoryTextAreaProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
-        status: {
-            options: statuses,
-            control: {
-                type: 'select',
-            },
-        },
         size: {
             options: sizes,
             defaultValue: 'm',

diff --git a/packages/sdds-finportal/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-finportal/src/components/TextArea/TextArea.stories.tsx
@@ -65,12 +65,6 @@ const meta: Meta<StoryTextAreaProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
-        status: {
-            options: statuses,
-            control: {
-                type: 'select',
-            },
-        },
         size: {
             options: sizes,
             defaultValue: 'm',

diff --git a/packages/sdds-insol/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-insol/src/components/TextArea/TextArea.stories.tsx
@@ -66,12 +66,6 @@ const meta: Meta<StoryTextAreaProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
-        status: {
-            options: statuses,
-            control: {
-                type: 'select',
-            },
-        },
         size: {
             options: sizes,
             defaultValue: 'm',

diff --git a/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx
@@ -65,12 +65,6 @@ const meta: Meta<StoryTextAreaProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
-        status: {
-            options: statuses,
-            control: {
-                type: 'select',
-            },
-        },
         size: {
             options: sizes,
             defaultValue: 'm',