From 17137a1441c41129ec80d2bda1c50eb2c561cc51 Mon Sep 17 00:00:00 2001
From: Sergey Zveroboev <szveroboev@szveroboev-dev.sas.yp-c.yandex.net>
Date: Mon, 14 Aug 2023 12:53:08 +0300
Subject: [PATCH] feat(TextArea|TextInput): add note prop into TextArea and
 TextInput

---
 .gitignore                                    |  1 +
 src/components/controls/TextArea/README.md    |  1 +
 .../controls/TextArea/TextArea.scss           | 18 ++++++
 src/components/controls/TextArea/TextArea.tsx | 10 ++-
 .../TextArea/__stories__/TextAreaShowcase.tsx | 16 +++++
 .../TextArea/__tests__/TextArea.test.tsx      | 10 +++
 src/components/controls/TextInput/README.md   | 61 ++++++++++---------
 .../controls/TextInput/TextInput.scss         | 18 ++++++
 .../controls/TextInput/TextInput.tsx          | 10 ++-
 .../__stories__/TextInputShowcase.tsx         | 26 ++++++++
 .../__tests__/TextInput.input.test.tsx        |  8 +++
 11 files changed, 147 insertions(+), 32 deletions(-)

diff --git a/.gitignore b/.gitignore
index 7749274597..041b12c0fe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .idea
 .vscode
+.history
 .DS_Store
 *.log
 
diff --git a/src/components/controls/TextArea/README.md b/src/components/controls/TextArea/README.md
index d48512cffe..dd16dc69d1 100644
--- a/src/components/controls/TextArea/README.md
+++ b/src/components/controls/TextArea/README.md
@@ -28,3 +28,4 @@
 | type         | `string`                                            | `-`             | The control's type                                                                                                                  |
 | value        | `string`                                            | `-`             | The control's value                                                                                                                 |
 | view         | `'normal' \| 'clear'`                               | `'normal'`      | The control's view. `'normal'` by default                                                                                           |
+| note         | `React.ReactNode`                                   | `-`             | An optional element displayed under the lower right corner of the control and sharing the place with the error container            |
diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss
index 51f2460be7..974eeb3e42 100644
--- a/src/components/controls/TextArea/TextArea.scss
+++ b/src/components/controls/TextArea/TextArea.scss
@@ -48,10 +48,28 @@ $block: '.#{variables.$ns-new}text-area';
         }
     }
 
+    &__additional {
+        display: flex;
+        justify-content: space-between;
+        vertical-align: top;
+    }
+
+    &__note {
+        margin-left: auto;
+    }
+
     &__error {
         @include mixins.text-body-1();
 
         color: var(--g-color-text-danger);
+
+        &:not(:last-child) {
+            margin-right: var(--g-spacing-2);
+        }
+    }
+
+    &__note,
+    &__error {
         margin-top: 2px;
     }
 
diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index bea492e9ec..a12dc737a1 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -27,6 +27,8 @@ export type TextAreaProps = BaseInputControlProps<HTMLTextAreaElement> & {
     minRows?: number;
     /** The number of maximum visible text lines for the control. Ignored if `rows` is specified */
     maxRows?: number;
+    /** An optional element displayed under the lower right corner of the control and sharing the place with the error container */
+    note?: React.ReactNode;
 };
 export type TextAreaPin = InputControlPin;
 export type TextAreaSize = InputControlSize;
@@ -54,6 +56,7 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
         className,
         qa,
         controlProps,
+        note,
         onUpdate,
         onChange,
     } = props;
@@ -156,7 +159,12 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
                     />
                 )}
             </span>
-            {isErrorMsgVisible && <div className={b('error')}>{error}</div>}
+            {(isErrorMsgVisible || note) && (
+                <div className={b('additional')}>
+                    {isErrorMsgVisible && <div className={b('error')}>{error}</div>}
+                    {note && <div className={b('note')}>{note}</div>}
+                </div>
+            )}
         </span>
     );
 });
diff --git a/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx b/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx
index 9029b456c8..8f950cad79 100644
--- a/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx
+++ b/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import block from 'bem-cn-lite';
 
 import {Checkbox} from '../../../Checkbox';
+import {Text} from '../../../Text';
 import {TextArea} from '../TextArea';
 import type {TextAreaProps} from '../TextArea';
 
@@ -64,6 +65,21 @@ export function TextAreaShowcase() {
                         controlProps={{style: {resize: 'vertical'}}}
                         rows={4}
                     />
+                    <TextArea
+                        {...textAreaProps}
+                        placeholder="with note"
+                        rows={4}
+                        note={<Text color="secondary">Additional</Text>}
+                    />
+                    <TextArea
+                        {...textAreaProps}
+                        placeholder="with counter and long error message"
+                        rows={4}
+                        note={<Text color="secondary">Additional</Text>}
+                        error={
+                            'It happened a very very very very very very very very very very very very very very very very very very very very very long validation error'
+                        }
+                    />
                 </div>
             </div>
         </div>
diff --git a/src/components/controls/TextArea/__tests__/TextArea.test.tsx b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
index 86c64854b6..5cc5baa6da 100644
--- a/src/components/controls/TextArea/__tests__/TextArea.test.tsx
+++ b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
@@ -23,6 +23,16 @@ describe('TextArea', () => {
             expect(screen.getByText('Some Error')).toBeVisible();
         });
 
+        test('render note container with note prop', () => {
+            const {container} = render(
+                <TextArea error="Some Error" note={<div>Additional</div>} />,
+            );
+
+            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+            expect(container.querySelector('.g-text-area__note')).toBeInTheDocument();
+            expect(screen.getByText('Additional')).toBeVisible();
+        });
+
         test('do not show error without error prop', () => {
             const {container} = render(<TextArea />);
 
diff --git a/src/components/controls/TextInput/README.md b/src/components/controls/TextInput/README.md
index bc08ee1419..0a0fbce8ad 100644
--- a/src/components/controls/TextInput/README.md
+++ b/src/components/controls/TextInput/README.md
@@ -1,30 +1,31 @@
-| Property     | Type                                          | Default         | Description                                                                                          |
-| :----------- | :-------------------------------------------- | :-------------- | :--------------------------------------------------------------------------------------------------- |
-| autoComplete | `boolean \| string`                           | `-`             | The control's `autocomplete` attribute                                                               |
-| autoFocus    | `boolean`                                     | `-`             | The control's `autofocus` attribute                                                                  |
-| className    | `string`                                      | `-`             | The control's wrapper class name                                                                     |
-| controlProps | `React.InputHTMLAttributes<HTMLInputElement>` | `-`             | The control's html attributes                                                                        |
-| controlRef   | `React.Ref<HTMLInputElement>`                 | `-`             | React ref provided to the control                                                                    |
-| defaultValue | `string`                                      | `-`             | The control's default value. Use when the component is not controlled                                |
-| disabled     | `boolean`                                     | `false`         | Indicates that the user cannot interact with the control                                             |
-| error        | `boolean \| string`                           | `-`             | Shows error state and optional message if property identified as a string                            |
-| hasClear     | `boolean`                                     | `false`         | Shows icon for clearing control's value                                                              |
-| id           | `string`                                      | `-`             | The control's `id` attribute                                                                         |
-| label        | `string`                                      | `-`             | Help text rendered to the left of the input node                                                     |
-| leftContent  | `React.ReactNode`                             | `-`             | User`s node rendered before label and input                                                          |
-| name         | `string`                                      | `-`             | The control's `name` attribute. Will be autogenerated if not specified                               |
-| onBlur       | `function`                                    | `-`             | Fires when the control lost focus. Provides focus event as an callback's argument                    |
-| onChange     | `function`                                    | `-`             | Fires when the input’s value is changed by the user. Provides change event as an callback's argument |
-| onFocus      | `function`                                    | `-`             | Fires when the control gets focus. Provides focus event as an callback's argument                    |
-| onKeyDown    | `function`                                    | `-`             | Fires when a key is pressed. Provides keyboard event as an callback's argument                       |
-| onKeyUp      | `function`                                    | `-`             | Fires when a key is released. Provides keyboard event as an callback's argument                      |
-| onUpdate     | `function`                                    | `-`             | Fires when the input’s value is changed by the user. Provides new value as an callback's argument    |
-| pin          | `string`                                      | `'round-round'` | The control's border view. `'round-round'` by default                                                |
-| placeholder  | `string`                                      | `-`             | Text that appears in the control when it has no value set                                            |
-| qa           | `string`                                      | `-`             | Test id attribute (`data-qa`)                                                                        |
-| rightContent | `React.ReactNode`                             | `-`             | User`s node rendered after input node and clear button                                               |
-| size         | `'s' \| 'm' \| 'l' \| 'xl'`                   | `'m'`           | The control's size. `'m'` by default                                                                 |
-| tabIndex     | `string`                                      | `-`             | The control's `tabindex` attribute                                                                   |
-| type         | `string`                                      | `-`             | The control's type                                                                                   |
-| value        | `string`                                      | `-`             | The control's value                                                                                  |
-| view         | `'normal' \| 'clear'`                         | `'normal'`      | The control's view. `'normal'` by default                                                            |
+| Property     | Type                                          | Default         | Description                                                                                                              |
+| :----------- | :-------------------------------------------- | :-------------- | :----------------------------------------------------------------------------------------------------------------------- |
+| autoComplete | `boolean \| string`                           | `-`             | The control's `autocomplete` attribute                                                                                   |
+| autoFocus    | `boolean`                                     | `-`             | The control's `autofocus` attribute                                                                                      |
+| className    | `string`                                      | `-`             | The control's wrapper class name                                                                                         |
+| controlProps | `React.InputHTMLAttributes<HTMLInputElement>` | `-`             | The control's html attributes                                                                                            |
+| controlRef   | `React.Ref<HTMLInputElement>`                 | `-`             | React ref provided to the control                                                                                        |
+| defaultValue | `string`                                      | `-`             | The control's default value. Use when the component is not controlled                                                    |
+| disabled     | `boolean`                                     | `false`         | Indicates that the user cannot interact with the control                                                                 |
+| error        | `boolean \| string`                           | `-`             | Shows error state and optional message if property identified as a string                                                |
+| hasClear     | `boolean`                                     | `false`         | Shows icon for clearing control's value                                                                                  |
+| id           | `string`                                      | `-`             | The control's `id` attribute                                                                                             |
+| label        | `string`                                      | `-`             | Help text rendered to the left of the input node                                                                         |
+| leftContent  | `React.ReactNode`                             | `-`             | User`s node rendered before label and input                                                                              |
+| name         | `string`                                      | `-`             | The control's `name` attribute. Will be autogenerated if not specified                                                   |
+| onBlur       | `function`                                    | `-`             | Fires when the control lost focus. Provides focus event as an callback's argument                                        |
+| onChange     | `function`                                    | `-`             | Fires when the input’s value is changed by the user. Provides change event as an callback's argument                     |
+| onFocus      | `function`                                    | `-`             | Fires when the control gets focus. Provides focus event as an callback's argument                                        |
+| onKeyDown    | `function`                                    | `-`             | Fires when a key is pressed. Provides keyboard event as an callback's argument                                           |
+| onKeyUp      | `function`                                    | `-`             | Fires when a key is released. Provides keyboard event as an callback's argument                                          |
+| onUpdate     | `function`                                    | `-`             | Fires when the input’s value is changed by the user. Provides new value as an callback's argument                        |
+| pin          | `string`                                      | `'round-round'` | The control's border view. `'round-round'` by default                                                                    |
+| placeholder  | `string`                                      | `-`             | Text that appears in the control when it has no value set                                                                |
+| qa           | `string`                                      | `-`             | Test id attribute (`data-qa`)                                                                                            |
+| rightContent | `React.ReactNode`                             | `-`             | User`s node rendered after input node and clear button                                                                   |
+| size         | `'s' \| 'm' \| 'l' \| 'xl'`                   | `'m'`           | The control's size. `'m'` by default                                                                                     |
+| tabIndex     | `string`                                      | `-`             | The control's `tabindex` attribute                                                                                       |
+| type         | `string`                                      | `-`             | The control's type                                                                                                       |
+| value        | `string`                                      | `-`             | The control's value                                                                                                      |
+| view         | `'normal' \| 'clear'`                         | `'normal'`      | The control's view. `'normal'` by default                                                                                |
+| note         | `React.ReactNode`                             | `-`             | An optional element displayed under the lower right corner of the control and sharing the place with the error container |
diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss
index a26b2262ba..46675b0dcb 100644
--- a/src/components/controls/TextInput/TextInput.scss
+++ b/src/components/controls/TextInput/TextInput.scss
@@ -91,10 +91,28 @@ $block: '.#{variables.$ns}text-input';
         flex-shrink: 0;
     }
 
+    &__additional {
+        display: flex;
+        justify-content: space-between;
+        vertical-align: top;
+    }
+
+    &__note {
+        margin-left: auto;
+    }
+
     &__error {
         @include mixins.text-body-1();
 
         color: var(--g-color-text-danger);
+
+        &:not(:last-child) {
+            margin-right: var(--g-spacing-2);
+        }
+    }
+
+    &__note,
+    &__error {
         margin-top: 2px;
     }
 
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index 010b20450b..a8c508831e 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -31,6 +31,8 @@ export type TextInputProps = BaseInputControlProps<HTMLInputElement> & {
     leftContent?: React.ReactNode;
     /** User`s node rendered after input node and clear button */
     rightContent?: React.ReactNode;
+    /** An optional element displayed under the lower right corner of the control and sharing the place with the error container */
+    note?: React.ReactNode;
 };
 export type TextInputPin = InputControlPin;
 export type TextInputSize = InputControlSize;
@@ -61,6 +63,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
         controlProps: originalControlProps,
         leftContent,
         rightContent,
+        note,
         onUpdate,
         onChange,
     } = props;
@@ -206,7 +209,12 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
                     </AdditionalContent>
                 )}
             </span>
-            {isErrorMsgVisible && <div className={b('error')}>{error}</div>}
+            {(isErrorMsgVisible || note) && (
+                <div className={b('additional')}>
+                    {isErrorMsgVisible && <div className={b('error')}>{error}</div>}
+                    {note && <div className={b('note')}>{note}</div>}
+                </div>
+            )}
         </span>
     );
 });
diff --git a/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx b/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
index 73f8b68309..79b245852d 100644
--- a/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
+++ b/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
@@ -6,6 +6,7 @@ import block from 'bem-cn-lite';
 import {Button} from '../../../Button';
 import {Checkbox} from '../../../Checkbox';
 import {Icon} from '../../../Icon';
+import {Text} from '../../../Text';
 import {mapTextInputSizeToButtonSize} from '../../common';
 import {TextInput} from '../TextInput';
 import type {TextInputProps} from '../TextInput';
@@ -87,6 +88,12 @@ export function TextInputShowcase() {
                         value={undefined}
                         defaultValue="defaultValue"
                     />
+                    <TextInput
+                        {...textInputProps}
+                        value={undefined}
+                        placeholder="with note"
+                        note={<Text color="secondary">Additional</Text>}
+                    />
                 </div>
             </div>
 
@@ -133,6 +140,13 @@ export function TextInputShowcase() {
                         value={undefined}
                         defaultValue="defaultValue"
                     />
+                    <TextInput
+                        {...textInputProps}
+                        placeholder="with note"
+                        label={LABEL}
+                        note={<Text color="secondary">Additional</Text>}
+                        hasClear
+                    />
                 </div>
             </div>
 
@@ -240,6 +254,18 @@ export function TextInputShowcase() {
                             <EyeButton opened={hideValue} onClick={handleEyeButtonClick} />
                         }
                     />
+                    <TextInput
+                        {...textInputProps}
+                        placeholder="with note"
+                        type={additionalContentExmpleInputType}
+                        label={LABEL}
+                        leftContent={<Icon data={Key} />}
+                        rightContent={
+                            <EyeButton opened={hideValue} onClick={handleEyeButtonClick} />
+                        }
+                        note={<Text color="secondary">Additional</Text>}
+                        hasClear
+                    />
                 </div>
             </div>
         </div>
diff --git a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
index 3cc4053487..a482b3dac0 100644
--- a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
+++ b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
@@ -24,6 +24,14 @@ describe('TextInput input', () => {
                 expect(screen.getByText('Some Error')).toBeVisible();
             });
 
+            test('render note container with note prop', () => {
+                const {container} = render(<TextInput note={<div>Additional</div>} />);
+
+                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                expect(container.querySelector('.yc-text-input__note')).toBeInTheDocument();
+                expect(screen.getByText('Additional')).toBeVisible();
+            });
+
             test('do not show error without error prop', () => {
                 const {container} = render(<TextInput />);