From 2ccf0475ee25519c5b405ac843707bc24953e15d Mon Sep 17 00:00:00 2001
From: Ilya Evstafeev <ilyaevstafeev@yandex-team.ru>
Date: Thu, 13 Jul 2023 16:39:23 +0300
Subject: [PATCH 01/10] feat(TextInput, TextArea): update props, add an option
 to display  error via tooltip for TextInput

---
 src/components/controls/TextArea/TextArea.tsx |  17 ++-
 .../TextArea/__stories__/TextAreaShowcase.tsx |   2 +-
 .../TextArea/__tests__/TextArea.test.tsx      |  74 ++++++++--
 .../controls/TextInput/TextInput.scss         |  20 +++
 .../controls/TextInput/TextInput.tsx          |  33 ++++-
 .../__stories__/TextInputShowcase.scss        |  14 ++
 .../__stories__/TextInputShowcase.tsx         | 136 +++++++++++++++++-
 .../__tests__/TextInput.input.test.tsx        | 103 +++++++++++--
 src/components/controls/types.ts              |  12 +-
 src/components/controls/utils.ts              |  33 ++++-
 10 files changed, 399 insertions(+), 45 deletions(-)

diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index bea492e9e..82f80b369 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -10,7 +10,7 @@ import type {
     InputControlSize,
     InputControlView,
 } from '../types';
-import {getInputControlState, prepareAutoComplete} from '../utils';
+import {errorPropsMapper, getInputControlState, prepareAutoComplete} from '../utils';
 
 import {TextAreaControl} from './TextAreaControl';
 
@@ -47,6 +47,8 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
         disabled = false,
         hasClear = false,
         error,
+        errorMessage,
+        validationState,
         autoComplete,
         id: originalId,
         tabIndex,
@@ -57,16 +59,23 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
         onUpdate,
         onChange,
     } = props;
+
+    const {errorMessageProp, validationStateProp} = errorPropsMapper({
+        error,
+        errorMessage,
+        validationState,
+    });
+
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '');
     const innerControlRef = React.useRef<HTMLTextAreaElement | HTMLInputElement>(null);
     const [hasVerticalScrollbar, setHasVerticalScrollbar] = React.useState(false);
-    const state = getInputControlState({error});
+    const state = getInputControlState(validationStateProp);
     const handleRef = useForkRef(props.controlRef, innerControlRef);
     const innerId = useUniqId();
 
     const isControlled = value !== undefined;
     const inputValue = isControlled ? value : uncontrolledValue;
-    const isErrorMsgVisible = typeof error === 'string';
+    const isErrorMsgVisible = Boolean(errorMessageProp);
     const isClearControlVisible = Boolean(hasClear && !disabled && inputValue);
     const id = originalId || innerId;
 
@@ -156,7 +165,7 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
                     />
                 )}
             </span>
-            {isErrorMsgVisible && <div className={b('error')}>{error}</div>}
+            {isErrorMsgVisible && <div className={b('error')}>{errorMessageProp}</div>}
         </span>
     );
 });
diff --git a/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx b/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx
index 9029b456c..0af4182cc 100644
--- a/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx
+++ b/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx
@@ -49,7 +49,7 @@ export function TextAreaShowcase() {
                         <TextArea
                             {...textAreaProps}
                             placeholder="error with message"
-                            error={isErrorMessageVisible ? 'It happened a validation error' : true}
+                            error={isErrorMessageVisible ? 'A validation error has occurred' : true}
                         />
                         <Checkbox
                             onUpdate={setErrorMessageVisibility}
diff --git a/src/components/controls/TextArea/__tests__/TextArea.test.tsx b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
index 86c64854b..e9843fbcb 100644
--- a/src/components/controls/TextArea/__tests__/TextArea.test.tsx
+++ b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
@@ -15,21 +15,6 @@ describe('TextArea', () => {
             expect(input.tagName.toLowerCase()).toBe('textarea');
         });
 
-        test('render error message with error prop', () => {
-            const {container} = render(<TextArea error="Some Error" />);
-
-            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-            expect(container.querySelector('.g-text-area__error')).toBeInTheDocument();
-            expect(screen.getByText('Some Error')).toBeVisible();
-        });
-
-        test('do not show error without error prop', () => {
-            const {container} = render(<TextArea />);
-
-            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-            expect(container.querySelector('.g-text-area__error')).not.toBeInTheDocument();
-        });
-
         test('check clear button visibility with hasClear prop', async () => {
             render(<TextArea hasClear />);
             const user = userEvent.setup();
@@ -84,6 +69,65 @@ describe('TextArea', () => {
         });
     });
 
+    describe('error', () => {
+        test('render error message with error prop', () => {
+            const {container} = render(<TextArea error="Some Error" />);
+
+            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+            expect(container.querySelector('.g-text-area__error')).toBeInTheDocument();
+            expect(screen.getByText('Some Error')).toBeVisible();
+        });
+
+        test('render error message with errorMessage prop', () => {
+            const {container} = render(
+                <TextArea errorMessage="Some Error with errorMessage prop" />,
+            );
+
+            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+            expect(container.querySelector('.g-text-area__error')).toBeInTheDocument();
+            expect(screen.getByText('Some Error with errorMessage prop')).toBeVisible();
+        });
+
+        test('do not show error without error/errorMessage prop', () => {
+            const {container} = render(<TextArea />);
+
+            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+            expect(container.querySelector('.g-text-area__error')).not.toBeInTheDocument();
+        });
+
+        test('do not show error message if error prop value is an empty string', () => {
+            const {container} = render(<TextArea error={''} />);
+
+            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+            expect(container.querySelector('.g-text-area__error')).not.toBeInTheDocument();
+        });
+
+        test('do not show error message if errorMessage prop value is an empty string', () => {
+            const {container} = render(<TextArea errorMessage={''} />);
+
+            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+            expect(container.querySelector('.g-text-area__error')).not.toBeInTheDocument();
+        });
+
+        test('visually, area should be in error state (red border) if error prop is received', () => {
+            const {container} = render(<TextArea error={'Some error'} />);
+
+            expect(
+                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                container.querySelector('.g-text-area_state_error'),
+            ).toBeInTheDocument();
+        });
+
+        test('visually, area should be in error state (red border) even if received error prop is an empty string', () => {
+            const {container} = render(<TextArea error={''} />);
+
+            expect(
+                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                container.querySelector('.g-text-area_state_error'),
+            ).toBeInTheDocument();
+        });
+    });
+
     describe('autocomplete', () => {
         test('render no autocomplete attribute when no autoComplete, no id, no name props', () => {
             render(<TextArea />);
diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss
index a26b2262b..eeb6769ff 100644
--- a/src/components/controls/TextInput/TextInput.scss
+++ b/src/components/controls/TextInput/TextInput.scss
@@ -98,6 +98,10 @@ $block: '.#{variables.$ns}text-input';
         margin-top: 2px;
     }
 
+    &__error-icon {
+        color: var(--g-color-text-danger);
+    }
+
     &__additional-content {
         display: flex;
         align-items: center;
@@ -129,6 +133,10 @@ $block: '.#{variables.$ns}text-input';
                 padding-right: 1px;
             }
 
+            #{$block}__error-icon {
+                padding: 5px 5px 5px 0;
+            }
+
             --_--text-input-border-radius: var(--g-border-radius-s);
         }
 
@@ -157,6 +165,10 @@ $block: '.#{variables.$ns}text-input';
                 padding-right: 1px;
             }
 
+            #{$block}__error-icon {
+                padding: 5px 5px 5px 0;
+            }
+
             --_--text-input-border-radius: var(--g-border-radius-m);
         }
 
@@ -185,6 +197,10 @@ $block: '.#{variables.$ns}text-input';
                 padding-right: 3px;
             }
 
+            #{$block}__error-icon {
+                padding: 9px 9px 9px 0;
+            }
+
             --_--text-input-border-radius: var(--g-border-radius-l);
         }
 
@@ -213,6 +229,10 @@ $block: '.#{variables.$ns}text-input';
                 padding-right: 3px;
             }
 
+            #{$block}__error-icon {
+                padding: 13px 13px 13px 0;
+            }
+
             --_--text-input-border-radius: var(--g-border-radius-xl);
         }
     }
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index e41a75dce..3e573cb04 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
 
+import {TriangleExclamation} from '@gravity-ui/icons';
+
+import {Icon} from '../../Icon';
+import {Popover} from '../../Popover';
 import {block} from '../../utils/cn';
 import {useElementSize} from '../../utils/useElementSize';
 import {useForkRef} from '../../utils/useForkRef';
@@ -11,7 +15,7 @@ import type {
     InputControlSize,
     InputControlView,
 } from '../types';
-import {getInputControlState, prepareAutoComplete} from '../utils';
+import {errorPropsMapper, getInputControlState, prepareAutoComplete} from '../utils';
 
 import {AdditionalContent} from './AdditionalContent';
 import {TextInputControl} from './TextInputControl';
@@ -50,6 +54,9 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
         disabled = false,
         hasClear = false,
         error,
+        errorMessage,
+        errorPlacement = 'text',
+        validationState,
         autoComplete,
         id: originalId,
         tabIndex,
@@ -62,17 +69,26 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
         onUpdate,
         onChange,
     } = props;
+
+    const {errorMessageProp, errorPlacementProp, validationStateProp} = errorPropsMapper({
+        error,
+        errorMessage,
+        errorPlacement,
+        validationState,
+    });
+
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '');
     const innerControlRef = React.useRef<HTMLTextAreaElement | HTMLInputElement>(null);
     const handleRef = useForkRef(props.controlRef, innerControlRef);
     const labelRef = React.useRef<HTMLLabelElement>(null);
     const leftContentRef = React.useRef<HTMLDivElement>(null);
-    const state = getInputControlState({error});
+    const state = getInputControlState(validationStateProp);
 
     const isControlled = value !== undefined;
     const inputValue = isControlled ? value : uncontrolledValue;
     const isLabelVisible = Boolean(label);
-    const isErrorMsgVisible = typeof error === 'string';
+    const isErrorMsgVisible = Boolean(errorMessageProp) && errorPlacementProp === 'text';
+    const isErrorIconVisible = Boolean(errorMessageProp) && errorPlacementProp === 'tooltip';
     const isClearControlVisible = Boolean(hasClear && !disabled && inputValue);
     const isLeftContentVisible = Boolean(leftContent);
     const isRightContentVisible = Boolean(rightContent);
@@ -203,8 +219,17 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
                         {rightContent}
                     </AdditionalContent>
                 )}
+                {isErrorIconVisible && (
+                    <Popover content={errorMessageProp}>
+                        <Icon
+                            data={TriangleExclamation}
+                            className={b('error-icon')}
+                            size={size === 's' ? 12 : 16}
+                        />
+                    </Popover>
+                )}
             </span>
-            {isErrorMsgVisible && <div className={b('error')}>{error}</div>}
+            {isErrorMsgVisible && <div className={b('error')}>{errorMessageProp}</div>}
         </span>
     );
 });
diff --git a/src/components/controls/TextInput/__stories__/TextInputShowcase.scss b/src/components/controls/TextInput/__stories__/TextInputShowcase.scss
index f3acc7c64..ee0837a57 100644
--- a/src/components/controls/TextInput/__stories__/TextInputShowcase.scss
+++ b/src/components/controls/TextInput/__stories__/TextInputShowcase.scss
@@ -29,6 +29,16 @@
         padding: 20px;
     }
 
+    &__text-input-error-examples {
+        grid-area: text-area;
+        display: grid;
+        grid-template:
+            'title title' auto
+            'sizes additional-content' auto / 1fr 1fr;
+        gap: 20px;
+        padding: 20px;
+    }
+
     &__title {
         grid-area: title;
         margin: 0;
@@ -47,6 +57,10 @@
         grid-area: states;
     }
 
+    &__additional-content-examples {
+        grid-area: additional-content;
+    }
+
     &__row {
         display: flex;
         gap: 10px;
diff --git a/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx b/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
index 73f8b6830..701277863 100644
--- a/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
+++ b/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
@@ -72,7 +72,7 @@ export function TextInputShowcase() {
                         <TextInput
                             {...textInputProps}
                             placeholder="error with message"
-                            error={isErrorMessageVisible ? 'It happened a validation error' : true}
+                            error={isErrorMessageVisible ? 'A validation error has occurred' : true}
                         />
                         <Checkbox
                             onUpdate={setErrorMessageVisibility}
@@ -110,7 +110,7 @@ export function TextInputShowcase() {
                             {...textInputProps}
                             placeholder="error with message"
                             label={LABEL}
-                            error={isErrorMessageVisible ? 'It happened a validation error' : true}
+                            error={isErrorMessageVisible ? 'A validation error has occurred' : true}
                         />
                         <Checkbox
                             onUpdate={setErrorMessageVisibility}
@@ -195,7 +195,7 @@ export function TextInputShowcase() {
                         <TextInput
                             {...textInputProps}
                             placeholder="error with message"
-                            error={isErrorMessageVisible ? 'It happened a validation error' : true}
+                            error={isErrorMessageVisible ? 'A validation error has occurred' : true}
                             type={additionalContentExmpleInputType}
                             leftContent={<Icon data={Key} />}
                             rightContent={
@@ -242,6 +242,136 @@ export function TextInputShowcase() {
                     />
                 </div>
             </div>
+
+            <div className={b('text-input-error-examples')}>
+                <h2 className={b('title')}>TextInput (with text error)</h2>
+
+                <div className={'size-examples'}>
+                    <h3 className={b('section-header')}>Sizes:</h3>
+
+                    <TextInput
+                        {...textInputProps}
+                        size="s"
+                        placeholder="s"
+                        error={'A validation error has occurred'}
+                    />
+                    <TextInput
+                        {...textInputProps}
+                        placeholder="m"
+                        errorMessage={'A validation error has occurred'}
+                    />
+                    <TextInput
+                        {...textInputProps}
+                        size="l"
+                        placeholder="l"
+                        errorMessage={'A validation error has occurred'}
+                    />
+                    <TextInput
+                        {...textInputProps}
+                        size="xl"
+                        placeholder="xl"
+                        errorMessage={'A validation error has occurred'}
+                    />
+                </div>
+
+                <div className={b('additional-content-examples')}>
+                    <h3 className={b('section-header')}>With additional content:</h3>
+                    <TextInput
+                        {...textInputProps}
+                        errorMessage={'A validation error has occurred'}
+                        placeholder="clear"
+                        type={additionalContentExmpleInputType}
+                        label={LABEL}
+                        leftContent={<Icon data={Key} />}
+                        rightContent={
+                            <EyeButton opened={hideValue} onClick={handleEyeButtonClick} />
+                        }
+                        hasClear
+                    />
+                    <TextInput
+                        {...textInputProps}
+                        errorMessage={'A validation error has occurred'}
+                        placeholder="default value"
+                        value={undefined}
+                        defaultValue="defaultValue"
+                        type={additionalContentExmpleInputType}
+                        label={LONG_LABEL}
+                        leftContent={<Icon data={Key} />}
+                        rightContent={
+                            <EyeButton opened={hideValue} onClick={handleEyeButtonClick} />
+                        }
+                        hasClear
+                    />
+                </div>
+            </div>
+
+            <div className={b('text-input-error-examples')}>
+                <h2 className={b('title')}>TextInput (with inline error)</h2>
+
+                <div className={'size-examples'}>
+                    <h3 className={b('section-header')}>Sizes:</h3>
+
+                    <TextInput
+                        {...textInputProps}
+                        size="s"
+                        placeholder="s"
+                        error={'A validation error has occurred'}
+                        errorPlacement="tooltip"
+                    />
+                    <TextInput
+                        {...textInputProps}
+                        placeholder="m"
+                        errorMessage={'A validation error has occurred'}
+                        errorPlacement="tooltip"
+                    />
+                    <TextInput
+                        {...textInputProps}
+                        size="l"
+                        placeholder="l"
+                        errorMessage={'A validation error has occurred'}
+                        errorPlacement="tooltip"
+                    />
+                    <TextInput
+                        {...textInputProps}
+                        size="xl"
+                        placeholder="xl"
+                        errorMessage={'A validation error has occurred'}
+                        errorPlacement="tooltip"
+                    />
+                </div>
+
+                <div className={b('additional-content-examples')}>
+                    <h3 className={b('section-header')}>With additional content:</h3>
+                    <TextInput
+                        {...textInputProps}
+                        errorMessage={'A validation error has occurred'}
+                        errorPlacement="tooltip"
+                        placeholder="clear"
+                        type={additionalContentExmpleInputType}
+                        label={LABEL}
+                        leftContent={<Icon data={Key} />}
+                        rightContent={
+                            <EyeButton opened={hideValue} onClick={handleEyeButtonClick} />
+                        }
+                        hasClear
+                    />
+                    <TextInput
+                        {...textInputProps}
+                        errorMessage={'A validation error has occurred'}
+                        errorPlacement="tooltip"
+                        placeholder="default value"
+                        value={undefined}
+                        defaultValue="defaultValue"
+                        type={additionalContentExmpleInputType}
+                        label={LONG_LABEL}
+                        leftContent={<Icon data={Key} />}
+                        rightContent={
+                            <EyeButton opened={hideValue} onClick={handleEyeButtonClick} />
+                        }
+                        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 3cc405348..0c27d7cfb 100644
--- a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
+++ b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
@@ -16,21 +16,6 @@ describe('TextInput input', () => {
                 expect(input.tagName.toLowerCase()).toBe('input');
             });
 
-            test('render error message with error prop', () => {
-                const {container} = render(<TextInput error="Some Error" />);
-
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                expect(container.querySelector('.yc-text-input__error')).toBeInTheDocument();
-                expect(screen.getByText('Some Error')).toBeVisible();
-            });
-
-            test('do not show error without error prop', () => {
-                const {container} = render(<TextInput />);
-
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                expect(container.querySelector('.yc-text-input__error')).not.toBeInTheDocument();
-            });
-
             test('check clear button visibility with hasClear prop', async () => {
                 render(<TextInput hasClear />);
                 const user = userEvent.setup();
@@ -85,6 +70,94 @@ describe('TextInput input', () => {
             });
         });
 
+        describe('error', () => {
+            test('render error message with error prop', () => {
+                const {container} = render(<TextInput error="Some Error" />);
+
+                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                expect(container.querySelector('.yc-text-input__error')).toBeInTheDocument();
+                expect(screen.getByText('Some Error')).toBeVisible();
+            });
+
+            test('render error message with errorMessage prop', () => {
+                const {container} = render(
+                    <TextInput errorMessage="Some Error with errorMessage prop" />,
+                );
+
+                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                expect(container.querySelector('.yc-text-input__error')).toBeInTheDocument();
+                expect(screen.getByText('Some Error with errorMessage prop')).toBeVisible();
+            });
+
+            test('render error icon if tooltip option is selected for errorPlacement prop', () => {
+                const {container} = render(
+                    <TextInput errorMessage="Some Error" errorPlacement="tooltip" />,
+                );
+
+                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                expect(container.querySelector('.yc-text-input__error-icon')).toBeInTheDocument();
+            });
+
+            test('do not show error without error/errorMessage prop', () => {
+                const {container} = render(<TextInput />);
+
+                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                expect(container.querySelector('.yc-text-input__error')).not.toBeInTheDocument();
+            });
+
+            test('do not show error message if error prop value is an empty string', () => {
+                const {container} = render(<TextInput error={''} />);
+
+                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                expect(container.querySelector('.yc-text-input__error')).not.toBeInTheDocument();
+            });
+
+            test('do not show error message if errorMessage prop value is an empty string', () => {
+                const {container} = render(<TextInput errorMessage={''} />);
+
+                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                expect(container.querySelector('.yc-text-input__error')).not.toBeInTheDocument();
+            });
+
+            test('do not show error icon if error prop is an empty string', () => {
+                const {container} = render(<TextInput error={''} errorPlacement="tooltip" />);
+
+                expect(
+                    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                    container.querySelector('yc-text-input__error-icon'),
+                ).not.toBeInTheDocument();
+            });
+
+            test('do not show error icon if errorMessage prop is an empty string', () => {
+                const {container} = render(
+                    <TextInput errorMessage={''} errorPlacement="tooltip" />,
+                );
+
+                expect(
+                    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                    container.querySelector('yc-text-input__error-icon'),
+                ).not.toBeInTheDocument();
+            });
+
+            test('visually, input should be in error state (red border) if error prop is received', () => {
+                const {container} = render(<TextInput error={'Some error'} />);
+
+                expect(
+                    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                    container.querySelector('.yc-text-input_state_error'),
+                ).toBeInTheDocument();
+            });
+
+            test('visually, input should be in error state (red border) even if received error prop is an empty string', () => {
+                const {container} = render(<TextInput error={''} />);
+
+                expect(
+                    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+                    container.querySelector('.yc-text-input_state_error'),
+                ).toBeInTheDocument();
+            });
+        });
+
         describe('autocomplete', () => {
             test('render no autocomplete attribute when no autoComplete, no id, no name props', () => {
                 render(<TextInput />);
diff --git a/src/components/controls/types.ts b/src/components/controls/types.ts
index 9d14acae7..6c509ca72 100644
--- a/src/components/controls/types.ts
+++ b/src/components/controls/types.ts
@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import type {DOMProps, QAProps} from '../types';
 
 export type InputControlView = 'normal' | 'clear';
@@ -29,8 +31,16 @@ export type BaseInputControlProps<T = Element> = DOMProps &
         defaultValue?: string;
         /** Indicates that the user cannot interact with the control */
         disabled?: boolean;
-        /** Shows error state and optional message if property identified as a string */
+        /** Shows error state and optional message if property identified as a string
+         * @deprecated use `errorMessage` instead
+         */
         error?: string | boolean;
+        /** Determines content of the error message */
+        errorMessage?: React.ReactNode;
+        /** Determines whether the error message will be placed under the input field as text or in the tooltip */
+        errorPlacement?: 'text' | 'tooltip';
+        /** Describes the validation state */
+        validationState?: 'invalid';
         /** Shows icon for clearing control's value */
         hasClear?: boolean;
         /** The control's `id` attribute */
diff --git a/src/components/controls/utils.ts b/src/components/controls/utils.ts
index e33a0e15b..a0a79e99d 100644
--- a/src/components/controls/utils.ts
+++ b/src/components/controls/utils.ts
@@ -11,7 +11,36 @@ export const prepareAutoComplete = (
 };
 
 export const getInputControlState = (
-    args: Pick<BaseInputControlProps, 'error'> = {},
+    validationStateProp: 'invalid' | undefined,
 ): InputControlState | undefined => {
-    return args.error ? 'error' : undefined;
+    return validationStateProp === 'invalid' ? 'error' : undefined;
+};
+
+export const errorPropsMapper = (
+    errorProps: Pick<
+        BaseInputControlProps,
+        'error' | 'errorMessage' | 'errorPlacement' | 'validationState'
+    >,
+) => {
+    const {error, errorMessage, errorPlacement, validationState} = errorProps;
+
+    let errorMessageProp: BaseInputControlProps['errorMessage'];
+    if (typeof error === 'string') {
+        errorMessageProp = error;
+    }
+    if (errorMessage || errorMessage === '') {
+        errorMessageProp = errorMessage;
+    }
+
+    let validationStateProp: BaseInputControlProps['validationState'];
+    if (
+        validationState === 'invalid' ||
+        Boolean(error) ||
+        errorMessageProp ||
+        errorMessageProp === ''
+    ) {
+        validationStateProp = 'invalid';
+    }
+
+    return {errorMessageProp, errorPlacementProp: errorPlacement, validationStateProp};
 };

From 0149d7c3c650b86bba4ee84993151a68b441e934 Mon Sep 17 00:00:00 2001
From: Ilya Evstafeev <ilyaevstafeev@yandex-team.ru>
Date: Mon, 17 Jul 2023 15:03:54 +0300
Subject: [PATCH 02/10] feat(TextInput, TextArea): add an option to display
 error via tooltip for TextInput

---
 src/components/controls/types.ts | 2 +-
 src/components/controls/utils.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/controls/types.ts b/src/components/controls/types.ts
index 6c509ca72..b0f71260f 100644
--- a/src/components/controls/types.ts
+++ b/src/components/controls/types.ts
@@ -32,7 +32,7 @@ export type BaseInputControlProps<T = Element> = DOMProps &
         /** Indicates that the user cannot interact with the control */
         disabled?: boolean;
         /** Shows error state and optional message if property identified as a string
-         * @deprecated use `errorMessage` instead
+         * @deprecated Prop `error` has a lower priority than `errorMessage`. Use `errorMessage` instead
          */
         error?: string | boolean;
         /** Determines content of the error message */
diff --git a/src/components/controls/utils.ts b/src/components/controls/utils.ts
index a0a79e99d..284b90ffe 100644
--- a/src/components/controls/utils.ts
+++ b/src/components/controls/utils.ts
@@ -24,7 +24,7 @@ export const errorPropsMapper = (
 ) => {
     const {error, errorMessage, errorPlacement, validationState} = errorProps;
 
-    let errorMessageProp: BaseInputControlProps['errorMessage'];
+    let errorMessageProp: typeof errorMessage;
     if (typeof error === 'string') {
         errorMessageProp = error;
     }
@@ -32,7 +32,7 @@ export const errorPropsMapper = (
         errorMessageProp = errorMessage;
     }
 
-    let validationStateProp: BaseInputControlProps['validationState'];
+    let validationStateProp: typeof validationState;
     if (
         validationState === 'invalid' ||
         Boolean(error) ||

From e6604e3229d3895a934d40d427bbe42c83e0d4f1 Mon Sep 17 00:00:00 2001
From: Ilya Evstafeev <ilyaevstafeev@yandex-team.ru>
Date: Thu, 20 Jul 2023 12:32:25 +0300
Subject: [PATCH 03/10] fix(TextInput, TextArea): update types and tests, add
 new constants and css-variable

---
 src/components/controls/TextArea/TextArea.tsx | 17 +++--
 .../TextArea/__tests__/TextArea.test.tsx      | 47 +++++-------
 .../controls/TextInput/TextInput.scss         | 17 ++---
 .../controls/TextInput/TextInput.tsx          | 23 +++---
 .../__tests__/TextInput.input.test.tsx        | 72 +++++++------------
 src/components/controls/utils.ts              | 10 ++-
 6 files changed, 82 insertions(+), 104 deletions(-)

diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index 82f80b369..4437193e4 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -10,7 +10,13 @@ import type {
     InputControlSize,
     InputControlView,
 } from '../types';
-import {errorPropsMapper, getInputControlState, prepareAutoComplete} from '../utils';
+import {
+    CONTROL_ERROR_MESSAGE_QA,
+    CONTROL_QA,
+    errorPropsMapper,
+    getInputControlState,
+    prepareAutoComplete,
+} from '../utils';
 
 import {TextAreaControl} from './TextAreaControl';
 
@@ -54,7 +60,6 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
         tabIndex,
         style,
         className,
-        qa,
         controlProps,
         onUpdate,
         onChange,
@@ -153,7 +158,7 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
                 },
                 className,
             )}
-            data-qa={qa}
+            data-qa={CONTROL_QA}
         >
             <span className={b('content')}>
                 <TextAreaControl {...props} {...commonProps} controlRef={handleRef} />
@@ -165,7 +170,11 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
                     />
                 )}
             </span>
-            {isErrorMsgVisible && <div className={b('error')}>{errorMessageProp}</div>}
+            {isErrorMsgVisible && (
+                <div className={b('error')} data-qa={CONTROL_ERROR_MESSAGE_QA}>
+                    {errorMessageProp}
+                </div>
+            )}
         </span>
     );
 });
diff --git a/src/components/controls/TextArea/__tests__/TextArea.test.tsx b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
index e9843fbcb..3103ca8a3 100644
--- a/src/components/controls/TextArea/__tests__/TextArea.test.tsx
+++ b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {fireEvent, render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {CONTROL_ERROR_MESSAGE_QA, CONTROL_QA} from '../../utils';
 import {TextArea} from '../TextArea';
 
 describe('TextArea', () => {
@@ -70,61 +71,47 @@ describe('TextArea', () => {
     });
 
     describe('error', () => {
-        test('render error message with error prop', () => {
-            const {container} = render(<TextArea error="Some Error" />);
+        test('render error message with error prop (if it is not an empty string)', () => {
+            render(<TextArea error="Some Error" />);
 
-            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-            expect(container.querySelector('.g-text-area__error')).toBeInTheDocument();
             expect(screen.getByText('Some Error')).toBeVisible();
         });
 
-        test('render error message with errorMessage prop', () => {
-            const {container} = render(
-                <TextArea errorMessage="Some Error with errorMessage prop" />,
-            );
+        test('render error message with errorMessage prop (if it is not an empty string)', () => {
+            render(<TextArea errorMessage="Some Error with errorMessage prop" />);
 
-            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-            expect(container.querySelector('.g-text-area__error')).toBeInTheDocument();
             expect(screen.getByText('Some Error with errorMessage prop')).toBeVisible();
         });
 
-        test('do not show error without error/errorMessage prop', () => {
-            const {container} = render(<TextArea />);
+        test('do not show error message and do not apply error state without error/errorMessage prop', () => {
+            render(<TextArea />);
 
-            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-            expect(container.querySelector('.g-text-area__error')).not.toBeInTheDocument();
+            expect(screen.queryByTestId(CONTROL_QA)).not.toHaveClass('g-text-area_state_error');
+            expect(screen.queryByTestId(CONTROL_ERROR_MESSAGE_QA)).not.toBeInTheDocument();
         });
 
         test('do not show error message if error prop value is an empty string', () => {
-            const {container} = render(<TextArea error={''} />);
+            render(<TextArea error={''} />);
 
-            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-            expect(container.querySelector('.g-text-area__error')).not.toBeInTheDocument();
+            expect(screen.queryByTestId(CONTROL_ERROR_MESSAGE_QA)).not.toBeInTheDocument();
         });
 
         test('do not show error message if errorMessage prop value is an empty string', () => {
-            const {container} = render(<TextArea errorMessage={''} />);
+            render(<TextArea errorMessage={''} />);
 
-            // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-            expect(container.querySelector('.g-text-area__error')).not.toBeInTheDocument();
+            expect(screen.queryByTestId(CONTROL_ERROR_MESSAGE_QA)).not.toBeInTheDocument();
         });
 
         test('visually, area should be in error state (red border) if error prop is received', () => {
-            const {container} = render(<TextArea error={'Some error'} />);
+            render(<TextArea error={'Some error'} />);
 
-            expect(
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                container.querySelector('.g-text-area_state_error'),
-            ).toBeInTheDocument();
+            expect(screen.queryByTestId(CONTROL_QA)).toHaveClass('g-text-area_state_error');
         });
 
         test('visually, area should be in error state (red border) even if received error prop is an empty string', () => {
-            const {container} = render(<TextArea error={''} />);
+            render(<TextArea error={''} />);
 
-            expect(
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                container.querySelector('.g-text-area_state_error'),
-            ).toBeInTheDocument();
+            expect(screen.queryByTestId(CONTROL_QA)).toHaveClass('g-text-area_state_error');
         });
     });
 
diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss
index eeb6769ff..98debc5cf 100644
--- a/src/components/controls/TextInput/TextInput.scss
+++ b/src/components/controls/TextInput/TextInput.scss
@@ -100,6 +100,7 @@ $block: '.#{variables.$ns}text-input';
 
     &__error-icon {
         color: var(--g-color-text-danger);
+        padding: var(--_--text-input-error-icon-padding);
     }
 
     &__additional-content {
@@ -133,9 +134,7 @@ $block: '.#{variables.$ns}text-input';
                 padding-right: 1px;
             }
 
-            #{$block}__error-icon {
-                padding: 5px 5px 5px 0;
-            }
+            --_--text-input-error-icon-padding: 5px 5px 5px 0;
 
             --_--text-input-border-radius: var(--g-border-radius-s);
         }
@@ -165,9 +164,7 @@ $block: '.#{variables.$ns}text-input';
                 padding-right: 1px;
             }
 
-            #{$block}__error-icon {
-                padding: 5px 5px 5px 0;
-            }
+            --_--text-input-error-icon-padding: 5px 5px 5px 0;
 
             --_--text-input-border-radius: var(--g-border-radius-m);
         }
@@ -197,9 +194,7 @@ $block: '.#{variables.$ns}text-input';
                 padding-right: 3px;
             }
 
-            #{$block}__error-icon {
-                padding: 9px 9px 9px 0;
-            }
+            --_--text-input-error-icon-padding: 9px 9px 9px 0;
 
             --_--text-input-border-radius: var(--g-border-radius-l);
         }
@@ -229,9 +224,7 @@ $block: '.#{variables.$ns}text-input';
                 padding-right: 3px;
             }
 
-            #{$block}__error-icon {
-                padding: 13px 13px 13px 0;
-            }
+            --_--text-input-error-icon-padding: 13px 13px 13px 0;
 
             --_--text-input-border-radius: var(--g-border-radius-xl);
         }
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index 3e573cb04..fc7426d15 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -15,7 +15,13 @@ import type {
     InputControlSize,
     InputControlView,
 } from '../types';
-import {errorPropsMapper, getInputControlState, prepareAutoComplete} from '../utils';
+import {
+    CONTROL_ERROR_ICON_QA,
+    CONTROL_QA,
+    errorPropsMapper,
+    getInputControlState,
+    prepareAutoComplete,
+} from '../utils';
 
 import {AdditionalContent} from './AdditionalContent';
 import {TextInputControl} from './TextInputControl';
@@ -62,7 +68,6 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
         tabIndex,
         style,
         className,
-        qa,
         controlProps: originalControlProps,
         leftContent,
         rightContent,
@@ -180,7 +185,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
                 },
                 className,
             )}
-            data-qa={qa}
+            data-qa={CONTROL_QA}
         >
             <span className={b('content')}>
                 {isLeftContentVisible && (
@@ -221,11 +226,13 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
                 )}
                 {isErrorIconVisible && (
                     <Popover content={errorMessageProp}>
-                        <Icon
-                            data={TriangleExclamation}
-                            className={b('error-icon')}
-                            size={size === 's' ? 12 : 16}
-                        />
+                        <span data-qa={CONTROL_ERROR_ICON_QA}>
+                            <Icon
+                                data={TriangleExclamation}
+                                className={b('error-icon')}
+                                size={size === 's' ? 12 : 16}
+                            />
+                        </span>
                     </Popover>
                 )}
             </span>
diff --git a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
index 0c27d7cfb..632d35321 100644
--- a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
+++ b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {fireEvent, render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {CONTROL_ERROR_ICON_QA, CONTROL_ERROR_MESSAGE_QA, CONTROL_QA} from '../../utils';
 import {TextInput} from '../TextInput';
 
 describe('TextInput input', () => {
@@ -71,90 +72,67 @@ describe('TextInput input', () => {
         });
 
         describe('error', () => {
-            test('render error message with error prop', () => {
-                const {container} = render(<TextInput error="Some Error" />);
+            test('render error message with error prop (if it is not an empty string)', () => {
+                render(<TextInput error="Some Error" />);
 
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                expect(container.querySelector('.yc-text-input__error')).toBeInTheDocument();
                 expect(screen.getByText('Some Error')).toBeVisible();
             });
 
-            test('render error message with errorMessage prop', () => {
-                const {container} = render(
-                    <TextInput errorMessage="Some Error with errorMessage prop" />,
-                );
+            test('render error message with errorMessage prop (if it is not an empty string)', () => {
+                render(<TextInput errorMessage="Some Error with errorMessage prop" />);
 
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                expect(container.querySelector('.yc-text-input__error')).toBeInTheDocument();
                 expect(screen.getByText('Some Error with errorMessage prop')).toBeVisible();
             });
 
             test('render error icon if tooltip option is selected for errorPlacement prop', () => {
-                const {container} = render(
-                    <TextInput errorMessage="Some Error" errorPlacement="tooltip" />,
-                );
+                render(<TextInput errorMessage="Some Error" errorPlacement="tooltip" />);
 
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                expect(container.querySelector('.yc-text-input__error-icon')).toBeInTheDocument();
+                expect(screen.getByTestId(CONTROL_ERROR_ICON_QA)).toBeInTheDocument();
             });
 
-            test('do not show error without error/errorMessage prop', () => {
-                const {container} = render(<TextInput />);
+            test('do not show error message and do not apply error state without error/errorMessage prop', () => {
+                render(<TextInput />);
 
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                expect(container.querySelector('.yc-text-input__error')).not.toBeInTheDocument();
+                expect(screen.queryByTestId(CONTROL_QA)).not.toHaveClass(
+                    'yc-text-input_state_error',
+                );
+                expect(screen.queryByTestId(CONTROL_ERROR_MESSAGE_QA)).not.toBeInTheDocument();
             });
 
             test('do not show error message if error prop value is an empty string', () => {
-                const {container} = render(<TextInput error={''} />);
+                render(<TextInput error={''} />);
 
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                expect(container.querySelector('.yc-text-input__error')).not.toBeInTheDocument();
+                expect(screen.queryByTestId(CONTROL_ERROR_MESSAGE_QA)).not.toBeInTheDocument();
             });
 
             test('do not show error message if errorMessage prop value is an empty string', () => {
-                const {container} = render(<TextInput errorMessage={''} />);
+                render(<TextInput errorMessage={''} />);
 
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                expect(container.querySelector('.yc-text-input__error')).not.toBeInTheDocument();
+                expect(screen.queryByTestId(CONTROL_ERROR_MESSAGE_QA)).not.toBeInTheDocument();
             });
 
             test('do not show error icon if error prop is an empty string', () => {
-                const {container} = render(<TextInput error={''} errorPlacement="tooltip" />);
+                render(<TextInput error={''} errorPlacement="tooltip" />);
 
-                expect(
-                    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                    container.querySelector('yc-text-input__error-icon'),
-                ).not.toBeInTheDocument();
+                expect(screen.queryByTestId(CONTROL_ERROR_ICON_QA)).not.toBeInTheDocument();
             });
 
             test('do not show error icon if errorMessage prop is an empty string', () => {
-                const {container} = render(
-                    <TextInput errorMessage={''} errorPlacement="tooltip" />,
-                );
+                render(<TextInput errorMessage={''} errorPlacement="tooltip" />);
 
-                expect(
-                    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                    container.querySelector('yc-text-input__error-icon'),
-                ).not.toBeInTheDocument();
+                expect(screen.queryByTestId(CONTROL_ERROR_ICON_QA)).not.toBeInTheDocument();
             });
 
             test('visually, input should be in error state (red border) if error prop is received', () => {
-                const {container} = render(<TextInput error={'Some error'} />);
+                render(<TextInput error={'Some error'} />);
 
-                expect(
-                    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                    container.querySelector('.yc-text-input_state_error'),
-                ).toBeInTheDocument();
+                expect(screen.getByTestId(CONTROL_QA)).toHaveClass('yc-text-input_state_error');
             });
 
             test('visually, input should be in error state (red border) even if received error prop is an empty string', () => {
-                const {container} = render(<TextInput error={''} />);
+                render(<TextInput error={''} />);
 
-                expect(
-                    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                    container.querySelector('.yc-text-input_state_error'),
-                ).toBeInTheDocument();
+                expect(screen.getByTestId(CONTROL_QA)).toHaveClass('yc-text-input_state_error');
             });
         });
 
diff --git a/src/components/controls/utils.ts b/src/components/controls/utils.ts
index 284b90ffe..3e61d00e5 100644
--- a/src/components/controls/utils.ts
+++ b/src/components/controls/utils.ts
@@ -1,5 +1,9 @@
 import type {BaseInputControlProps, InputControlState} from './types';
 
+export const CONTROL_QA = 'control-qa';
+export const CONTROL_ERROR_MESSAGE_QA = 'control-error-message-qa';
+export const CONTROL_ERROR_ICON_QA = 'control-error-icon-qa';
+
 export const prepareAutoComplete = (
     autoComplete: BaseInputControlProps['autoComplete'],
 ): string | undefined => {
@@ -11,7 +15,7 @@ export const prepareAutoComplete = (
 };
 
 export const getInputControlState = (
-    validationStateProp: 'invalid' | undefined,
+    validationStateProp: BaseInputControlProps['validationState'],
 ): InputControlState | undefined => {
     return validationStateProp === 'invalid' ? 'error' : undefined;
 };
@@ -24,7 +28,7 @@ export const errorPropsMapper = (
 ) => {
     const {error, errorMessage, errorPlacement, validationState} = errorProps;
 
-    let errorMessageProp: typeof errorMessage;
+    let errorMessageProp: BaseInputControlProps['errorMessage'];
     if (typeof error === 'string') {
         errorMessageProp = error;
     }
@@ -32,7 +36,7 @@ export const errorPropsMapper = (
         errorMessageProp = errorMessage;
     }
 
-    let validationStateProp: typeof validationState;
+    let validationStateProp: BaseInputControlProps['validationState'];
     if (
         validationState === 'invalid' ||
         Boolean(error) ||

From 0ce3502f5df7177c503e596910e40eb6e58d2e8f Mon Sep 17 00:00:00 2001
From: Ilya Evstafeev <ilyaevstafeev@yandex-team.ru>
Date: Thu, 20 Jul 2023 14:19:58 +0300
Subject: [PATCH 04/10] fix(TextInput, TextArea): update tests

---
 src/components/controls/TextArea/TextArea.tsx |  4 ++--
 .../TextArea/__tests__/TextArea.test.tsx      | 17 ++---------------
 .../controls/TextInput/TextInput.tsx          |  4 ++--
 .../__tests__/TextInput.input.test.tsx        | 19 ++-----------------
 src/components/controls/utils.ts              |  1 -
 5 files changed, 8 insertions(+), 37 deletions(-)

diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index 4437193e4..ab867cb4e 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -12,7 +12,6 @@ import type {
 } from '../types';
 import {
     CONTROL_ERROR_MESSAGE_QA,
-    CONTROL_QA,
     errorPropsMapper,
     getInputControlState,
     prepareAutoComplete,
@@ -60,6 +59,7 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
         tabIndex,
         style,
         className,
+        qa,
         controlProps,
         onUpdate,
         onChange,
@@ -158,7 +158,7 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
                 },
                 className,
             )}
-            data-qa={CONTROL_QA}
+            data-qa={qa}
         >
             <span className={b('content')}>
                 <TextAreaControl {...props} {...commonProps} controlRef={handleRef} />
diff --git a/src/components/controls/TextArea/__tests__/TextArea.test.tsx b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
index 3103ca8a3..04b4f780c 100644
--- a/src/components/controls/TextArea/__tests__/TextArea.test.tsx
+++ b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {fireEvent, render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import {CONTROL_ERROR_MESSAGE_QA, CONTROL_QA} from '../../utils';
+import {CONTROL_ERROR_MESSAGE_QA} from '../../utils';
 import {TextArea} from '../TextArea';
 
 describe('TextArea', () => {
@@ -83,10 +83,9 @@ describe('TextArea', () => {
             expect(screen.getByText('Some Error with errorMessage prop')).toBeVisible();
         });
 
-        test('do not show error message and do not apply error state without error/errorMessage prop', () => {
+        test('do not show error message without error/errorMessage prop', () => {
             render(<TextArea />);
 
-            expect(screen.queryByTestId(CONTROL_QA)).not.toHaveClass('g-text-area_state_error');
             expect(screen.queryByTestId(CONTROL_ERROR_MESSAGE_QA)).not.toBeInTheDocument();
         });
 
@@ -101,18 +100,6 @@ describe('TextArea', () => {
 
             expect(screen.queryByTestId(CONTROL_ERROR_MESSAGE_QA)).not.toBeInTheDocument();
         });
-
-        test('visually, area should be in error state (red border) if error prop is received', () => {
-            render(<TextArea error={'Some error'} />);
-
-            expect(screen.queryByTestId(CONTROL_QA)).toHaveClass('g-text-area_state_error');
-        });
-
-        test('visually, area should be in error state (red border) even if received error prop is an empty string', () => {
-            render(<TextArea error={''} />);
-
-            expect(screen.queryByTestId(CONTROL_QA)).toHaveClass('g-text-area_state_error');
-        });
     });
 
     describe('autocomplete', () => {
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index fc7426d15..2b1aeb8dc 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -17,7 +17,6 @@ import type {
 } from '../types';
 import {
     CONTROL_ERROR_ICON_QA,
-    CONTROL_QA,
     errorPropsMapper,
     getInputControlState,
     prepareAutoComplete,
@@ -68,6 +67,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
         tabIndex,
         style,
         className,
+        qa,
         controlProps: originalControlProps,
         leftContent,
         rightContent,
@@ -185,7 +185,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
                 },
                 className,
             )}
-            data-qa={CONTROL_QA}
+            data-qa={qa}
         >
             <span className={b('content')}>
                 {isLeftContentVisible && (
diff --git a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
index 632d35321..78b4980ff 100644
--- a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
+++ b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {fireEvent, render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import {CONTROL_ERROR_ICON_QA, CONTROL_ERROR_MESSAGE_QA, CONTROL_QA} from '../../utils';
+import {CONTROL_ERROR_ICON_QA, CONTROL_ERROR_MESSAGE_QA} from '../../utils';
 import {TextInput} from '../TextInput';
 
 describe('TextInput input', () => {
@@ -90,12 +90,9 @@ describe('TextInput input', () => {
                 expect(screen.getByTestId(CONTROL_ERROR_ICON_QA)).toBeInTheDocument();
             });
 
-            test('do not show error message and do not apply error state without error/errorMessage prop', () => {
+            test('do not show error message without error/errorMessage prop', () => {
                 render(<TextInput />);
 
-                expect(screen.queryByTestId(CONTROL_QA)).not.toHaveClass(
-                    'yc-text-input_state_error',
-                );
                 expect(screen.queryByTestId(CONTROL_ERROR_MESSAGE_QA)).not.toBeInTheDocument();
             });
 
@@ -122,18 +119,6 @@ describe('TextInput input', () => {
 
                 expect(screen.queryByTestId(CONTROL_ERROR_ICON_QA)).not.toBeInTheDocument();
             });
-
-            test('visually, input should be in error state (red border) if error prop is received', () => {
-                render(<TextInput error={'Some error'} />);
-
-                expect(screen.getByTestId(CONTROL_QA)).toHaveClass('yc-text-input_state_error');
-            });
-
-            test('visually, input should be in error state (red border) even if received error prop is an empty string', () => {
-                render(<TextInput error={''} />);
-
-                expect(screen.getByTestId(CONTROL_QA)).toHaveClass('yc-text-input_state_error');
-            });
         });
 
         describe('autocomplete', () => {
diff --git a/src/components/controls/utils.ts b/src/components/controls/utils.ts
index 3e61d00e5..5b1da504c 100644
--- a/src/components/controls/utils.ts
+++ b/src/components/controls/utils.ts
@@ -1,6 +1,5 @@
 import type {BaseInputControlProps, InputControlState} from './types';
 
-export const CONTROL_QA = 'control-qa';
 export const CONTROL_ERROR_MESSAGE_QA = 'control-error-message-qa';
 export const CONTROL_ERROR_ICON_QA = 'control-error-icon-qa';
 

From 007e2bc33ce80ebf0307c82f99a32a8ac06b344a Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Mon, 14 Aug 2023 18:43:11 +0300
Subject: [PATCH 05/10] fix: review fixes

---
 src/components/controls/TextArea/TextArea.tsx | 16 +++++-----
 .../controls/TextInput/TextInput.tsx          | 24 +++++++-------
 .../__stories__/TextInputShowcase.tsx         | 12 +++----
 .../__tests__/TextInput.input.test.tsx        |  6 ++--
 src/components/controls/types.ts              |  2 +-
 src/components/controls/utils.ts              | 31 +++++++++++--------
 6 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index ab867cb4e..72121de88 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -52,8 +52,8 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
         disabled = false,
         hasClear = false,
         error,
-        errorMessage,
-        validationState,
+        errorMessage: errorMessageProp,
+        validationState: validationStateProp,
         autoComplete,
         id: originalId,
         tabIndex,
@@ -65,22 +65,22 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
         onChange,
     } = props;
 
-    const {errorMessageProp, validationStateProp} = errorPropsMapper({
+    const {errorMessage, validationState} = errorPropsMapper({
         error,
-        errorMessage,
-        validationState,
+        errorMessage: errorMessageProp,
+        validationState: validationStateProp,
     });
 
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '');
     const innerControlRef = React.useRef<HTMLTextAreaElement | HTMLInputElement>(null);
     const [hasVerticalScrollbar, setHasVerticalScrollbar] = React.useState(false);
-    const state = getInputControlState(validationStateProp);
+    const state = getInputControlState(validationState);
     const handleRef = useForkRef(props.controlRef, innerControlRef);
     const innerId = useUniqId();
 
     const isControlled = value !== undefined;
     const inputValue = isControlled ? value : uncontrolledValue;
-    const isErrorMsgVisible = Boolean(errorMessageProp);
+    const isErrorMsgVisible = Boolean(errorMessage);
     const isClearControlVisible = Boolean(hasClear && !disabled && inputValue);
     const id = originalId || innerId;
 
@@ -172,7 +172,7 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
             </span>
             {isErrorMsgVisible && (
                 <div className={b('error')} data-qa={CONTROL_ERROR_MESSAGE_QA}>
-                    {errorMessageProp}
+                    {errorMessage}
                 </div>
             )}
         </span>
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index 29fd680a9..19bc3abda 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -61,9 +61,9 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
         disabled = false,
         hasClear = false,
         error,
-        errorMessage,
-        errorPlacement = 'text',
-        validationState,
+        errorMessage: errorMessageProp,
+        errorPlacement: errorPlacementProp = 'outside',
+        validationState: validationStateProp,
         autoComplete,
         id: originalId,
         tabIndex,
@@ -77,11 +77,11 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
         onChange,
     } = props;
 
-    const {errorMessageProp, errorPlacementProp, validationStateProp} = errorPropsMapper({
+    const {errorMessage, errorPlacement, validationState} = errorPropsMapper({
         error,
-        errorMessage,
-        errorPlacement,
-        validationState,
+        errorMessage: errorMessageProp,
+        errorPlacement: errorPlacementProp,
+        validationState: validationStateProp,
     });
 
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '');
@@ -89,13 +89,13 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
     const handleRef = useForkRef(props.controlRef, innerControlRef);
     const labelRef = React.useRef<HTMLLabelElement>(null);
     const leftContentRef = React.useRef<HTMLDivElement>(null);
-    const state = getInputControlState(validationStateProp);
+    const state = getInputControlState(validationState);
 
     const isControlled = value !== undefined;
     const inputValue = isControlled ? value : uncontrolledValue;
     const isLabelVisible = Boolean(label);
-    const isErrorMsgVisible = Boolean(errorMessageProp) && errorPlacementProp === 'text';
-    const isErrorIconVisible = Boolean(errorMessageProp) && errorPlacementProp === 'tooltip';
+    const isErrorMsgVisible = Boolean(errorMessage) && errorPlacement === 'outside';
+    const isErrorIconVisible = Boolean(errorMessage) && errorPlacement === 'inside';
     const isClearControlVisible = Boolean(hasClear && !disabled && inputValue);
     const isLeftContentVisible = Boolean(leftContent);
     const isRightContentVisible = Boolean(rightContent);
@@ -227,7 +227,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
                     </AdditionalContent>
                 )}
                 {isErrorIconVisible && (
-                    <Popover content={errorMessageProp}>
+                    <Popover content={errorMessage}>
                         <span data-qa={CONTROL_ERROR_ICON_QA}>
                             <Icon
                                 data={TriangleExclamation}
@@ -238,7 +238,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
                     </Popover>
                 )}
             </span>
-            {isErrorMsgVisible && <div className={b('error')}>{errorMessageProp}</div>}
+            {isErrorMsgVisible && <div className={b('error')}>{errorMessage}</div>}
         </span>
     );
 });
diff --git a/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx b/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
index 701277863..ee981ea48 100644
--- a/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
+++ b/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
@@ -316,27 +316,27 @@ export function TextInputShowcase() {
                         size="s"
                         placeholder="s"
                         error={'A validation error has occurred'}
-                        errorPlacement="tooltip"
+                        errorPlacement="inside"
                     />
                     <TextInput
                         {...textInputProps}
                         placeholder="m"
                         errorMessage={'A validation error has occurred'}
-                        errorPlacement="tooltip"
+                        errorPlacement="inside"
                     />
                     <TextInput
                         {...textInputProps}
                         size="l"
                         placeholder="l"
                         errorMessage={'A validation error has occurred'}
-                        errorPlacement="tooltip"
+                        errorPlacement="inside"
                     />
                     <TextInput
                         {...textInputProps}
                         size="xl"
                         placeholder="xl"
                         errorMessage={'A validation error has occurred'}
-                        errorPlacement="tooltip"
+                        errorPlacement="inside"
                     />
                 </div>
 
@@ -345,7 +345,7 @@ export function TextInputShowcase() {
                     <TextInput
                         {...textInputProps}
                         errorMessage={'A validation error has occurred'}
-                        errorPlacement="tooltip"
+                        errorPlacement="inside"
                         placeholder="clear"
                         type={additionalContentExmpleInputType}
                         label={LABEL}
@@ -358,7 +358,7 @@ export function TextInputShowcase() {
                     <TextInput
                         {...textInputProps}
                         errorMessage={'A validation error has occurred'}
-                        errorPlacement="tooltip"
+                        errorPlacement="inside"
                         placeholder="default value"
                         value={undefined}
                         defaultValue="defaultValue"
diff --git a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
index 78b4980ff..84d0b5649 100644
--- a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
+++ b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
@@ -85,7 +85,7 @@ describe('TextInput input', () => {
             });
 
             test('render error icon if tooltip option is selected for errorPlacement prop', () => {
-                render(<TextInput errorMessage="Some Error" errorPlacement="tooltip" />);
+                render(<TextInput errorMessage="Some Error" errorPlacement="inside" />);
 
                 expect(screen.getByTestId(CONTROL_ERROR_ICON_QA)).toBeInTheDocument();
             });
@@ -109,13 +109,13 @@ describe('TextInput input', () => {
             });
 
             test('do not show error icon if error prop is an empty string', () => {
-                render(<TextInput error={''} errorPlacement="tooltip" />);
+                render(<TextInput error={''} errorPlacement="inside" />);
 
                 expect(screen.queryByTestId(CONTROL_ERROR_ICON_QA)).not.toBeInTheDocument();
             });
 
             test('do not show error icon if errorMessage prop is an empty string', () => {
-                render(<TextInput errorMessage={''} errorPlacement="tooltip" />);
+                render(<TextInput errorMessage={''} errorPlacement="inside" />);
 
                 expect(screen.queryByTestId(CONTROL_ERROR_ICON_QA)).not.toBeInTheDocument();
             });
diff --git a/src/components/controls/types.ts b/src/components/controls/types.ts
index 3c12d4091..50b5e1d57 100644
--- a/src/components/controls/types.ts
+++ b/src/components/controls/types.ts
@@ -38,7 +38,7 @@ export type BaseInputControlProps<T = Element> = DOMProps &
         /** Determines content of the error message */
         errorMessage?: React.ReactNode;
         /** Determines whether the error message will be placed under the input field as text or in the tooltip */
-        errorPlacement?: 'text' | 'tooltip';
+        errorPlacement?: 'outside' | 'inside';
         /** Describes the validation state */
         validationState?: 'invalid';
         /** Shows icon for clearing control's value */
diff --git a/src/components/controls/utils.ts b/src/components/controls/utils.ts
index 5b1da504c..f2249296b 100644
--- a/src/components/controls/utils.ts
+++ b/src/components/controls/utils.ts
@@ -25,25 +25,30 @@ export const errorPropsMapper = (
         'error' | 'errorMessage' | 'errorPlacement' | 'validationState'
     >,
 ) => {
-    const {error, errorMessage, errorPlacement, validationState} = errorProps;
+    const {
+        error: errorProp,
+        errorMessage: errorMessageProp,
+        errorPlacement,
+        validationState: validationStateProp,
+    } = errorProps;
 
-    let errorMessageProp: BaseInputControlProps['errorMessage'];
-    if (typeof error === 'string') {
-        errorMessageProp = error;
+    let errorMessage: BaseInputControlProps['errorMessage'];
+    if (typeof errorProps === 'string') {
+        errorMessage = errorProps;
     }
-    if (errorMessage || errorMessage === '') {
-        errorMessageProp = errorMessage;
+    if (errorMessageProp || errorMessageProp === '') {
+        errorMessage = errorMessageProp;
     }
 
-    let validationStateProp: BaseInputControlProps['validationState'];
+    let validationState: BaseInputControlProps['validationState'];
     if (
-        validationState === 'invalid' ||
-        Boolean(error) ||
-        errorMessageProp ||
-        errorMessageProp === ''
+        validationStateProp === 'invalid' ||
+        Boolean(errorProp) ||
+        errorMessage ||
+        errorMessage === ''
     ) {
-        validationStateProp = 'invalid';
+        validationState = 'invalid';
     }
 
-    return {errorMessageProp, errorPlacementProp: errorPlacement, validationStateProp};
+    return {errorMessage, errorPlacement, validationState};
 };

From 17a8174ae80f0d5a766366fa484b87980c1337fe Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Mon, 21 Aug 2023 19:29:49 +0300
Subject: [PATCH 06/10] fix: lint fix

---
 src/components/controls/TextArea/TextArea.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index 5a2dd44b4..1230c0ebc 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -175,7 +175,11 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
             </span>
             {(isErrorMsgVisible || note) && (
                 <div className={b('outer-additional-content')}>
-                    {isErrorMsgVisible && <div className={b('error')}>{error}</div>}
+                    {isErrorMsgVisible && (
+                        <div className={b('error')} data-qa={CONTROL_ERROR_MESSAGE_QA}>
+                            {error}
+                        </div>
+                    )}
                     {note && <div className={b('note')}>{note}</div>}
                 </div>
             )}

From 43d2db09e654c97b4db398ab635f1b05de2492de Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Fri, 25 Aug 2023 19:10:31 +0300
Subject: [PATCH 07/10] fix: tests

---
 src/components/controls/TextArea/TextArea.tsx   | 2 +-
 src/components/controls/TextInput/TextInput.tsx | 2 +-
 src/components/controls/utils.ts                | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index 1230c0ebc..54937e905 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -177,7 +177,7 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
                 <div className={b('outer-additional-content')}>
                     {isErrorMsgVisible && (
                         <div className={b('error')} data-qa={CONTROL_ERROR_MESSAGE_QA}>
-                            {error}
+                            {errorMessage}
                         </div>
                     )}
                     {note && <div className={b('note')}>{note}</div>}
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index b216f1643..05267712b 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -243,7 +243,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
             </span>
             {(isErrorMsgVisible || note) && (
                 <div className={b('outer-additional-content')}>
-                    {isErrorMsgVisible && <div className={b('error')}>{error}</div>}
+                    {isErrorMsgVisible && <div className={b('error')}>{errorMessage}</div>}
                     {note && <div className={b('note')}>{note}</div>}
                 </div>
             )}
diff --git a/src/components/controls/utils.ts b/src/components/controls/utils.ts
index f2249296b..8f44d48dc 100644
--- a/src/components/controls/utils.ts
+++ b/src/components/controls/utils.ts
@@ -33,8 +33,8 @@ export const errorPropsMapper = (
     } = errorProps;
 
     let errorMessage: BaseInputControlProps['errorMessage'];
-    if (typeof errorProps === 'string') {
-        errorMessage = errorProps;
+    if (typeof errorProp === 'string') {
+        errorMessage = errorProp;
     }
     if (errorMessageProp || errorMessageProp === '') {
         errorMessage = errorMessageProp;

From 9b1e0016404c5d992a08486b1c4bd6f2b530c20a Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Fri, 25 Aug 2023 19:13:26 +0300
Subject: [PATCH 08/10] fix: review

---
 src/components/controls/TextArea/TextArea.tsx   | 2 +-
 src/components/controls/TextInput/TextInput.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index 54937e905..db01117a8 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -83,7 +83,7 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
 
     const isControlled = value !== undefined;
     const inputValue = isControlled ? value : uncontrolledValue;
-    const isErrorMsgVisible = Boolean(errorMessage);
+    const isErrorMsgVisible = validationState === 'invalid' && Boolean(errorMessage);
     const isClearControlVisible = Boolean(hasClear && !disabled && inputValue);
     const id = originalId || innerId;
 
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index 05267712b..375f05ddb 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -97,8 +97,10 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
     const isControlled = value !== undefined;
     const inputValue = isControlled ? value : uncontrolledValue;
     const isLabelVisible = Boolean(label);
-    const isErrorMsgVisible = Boolean(errorMessage) && errorPlacement === 'outside';
-    const isErrorIconVisible = Boolean(errorMessage) && errorPlacement === 'inside';
+    const isErrorMsgVisible =
+        validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'outside';
+    const isErrorIconVisible =
+        validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'inside';
     const isClearControlVisible = Boolean(hasClear && !disabled && inputValue);
     const isLeftContentVisible = Boolean(leftContent);
     const isRightContentVisible = Boolean(rightContent);

From 37b290d37b63dcec49ff67c99ffb98f352d349e4 Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Thu, 31 Aug 2023 15:35:44 +0300
Subject: [PATCH 09/10] fix: logic

---
 .../controls/TextArea/__tests__/TextArea.test.tsx   | 11 +++++++++++
 .../TextInput/__tests__/TextInput.input.test.tsx    | 13 +++++++++++++
 src/components/controls/utils.ts                    |  9 ++-------
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/controls/TextArea/__tests__/TextArea.test.tsx b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
index ef2fda06d..90e1441b6 100644
--- a/src/components/controls/TextArea/__tests__/TextArea.test.tsx
+++ b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
@@ -99,6 +99,17 @@ describe('TextArea', () => {
         test('render error message with errorMessage prop (if it is not an empty string)', () => {
             render(<TextArea errorMessage="Some Error with errorMessage prop" />);
 
+            expect(screen.queryByText('Some Error with errorMessage prop')).not.toBeInTheDocument();
+        });
+
+        test('render error message with errorMessage prop (if it is not an empty string)', () => {
+            render(
+                <TextArea
+                    errorMessage="Some Error with errorMessage prop"
+                    validationState="invalid"
+                />,
+            );
+
             expect(screen.getByText('Some Error with errorMessage prop')).toBeVisible();
         });
 
diff --git a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
index a9345ac92..040e41851 100644
--- a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
+++ b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
@@ -100,6 +100,19 @@ describe('TextInput input', () => {
             test('render error message with errorMessage prop (if it is not an empty string)', () => {
                 render(<TextInput errorMessage="Some Error with errorMessage prop" />);
 
+                expect(
+                    screen.queryByText('Some Error with errorMessage prop'),
+                ).not.toBeInTheDocument();
+            });
+
+            test('render error message with errorMessage prop and invalid state (if it is not an empty string)', () => {
+                render(
+                    <TextInput
+                        errorMessage="Some Error with errorMessage prop"
+                        validationState="invalid"
+                    />,
+                );
+
                 expect(screen.getByText('Some Error with errorMessage prop')).toBeVisible();
             });
 
diff --git a/src/components/controls/utils.ts b/src/components/controls/utils.ts
index 8f44d48dc..71036e8c8 100644
--- a/src/components/controls/utils.ts
+++ b/src/components/controls/utils.ts
@@ -36,17 +36,12 @@ export const errorPropsMapper = (
     if (typeof errorProp === 'string') {
         errorMessage = errorProp;
     }
-    if (errorMessageProp || errorMessageProp === '') {
+    if (errorMessageProp) {
         errorMessage = errorMessageProp;
     }
 
     let validationState: BaseInputControlProps['validationState'];
-    if (
-        validationStateProp === 'invalid' ||
-        Boolean(errorProp) ||
-        errorMessage ||
-        errorMessage === ''
-    ) {
+    if (validationStateProp === 'invalid' || Boolean(errorProp)) {
         validationState = 'invalid';
     }
 

From e43e47f69fa91bc7977737e07bf0a1465e8081ba Mon Sep 17 00:00:00 2001
From: Viktor Fedoseev <saxumcordis@yandex-team.ru>
Date: Thu, 31 Aug 2023 15:53:23 +0300
Subject: [PATCH 10/10] fix: tests

---
 .../controls/TextInput/__tests__/TextInput.input.test.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
index 040e41851..41766fbae 100644
--- a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
+++ b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
@@ -117,7 +117,13 @@ describe('TextInput input', () => {
             });
 
             test('render error icon if tooltip option is selected for errorPlacement prop', () => {
-                render(<TextInput errorMessage="Some Error" errorPlacement="inside" />);
+                render(
+                    <TextInput
+                        errorMessage="Some Error"
+                        validationState="invalid"
+                        errorPlacement="inside"
+                    />,
+                );
 
                 expect(screen.getByTestId(CONTROL_ERROR_ICON_QA)).toBeInTheDocument();
             });