From cceb4236259cc13bdd35ce8d36d6518f535cef88 Mon Sep 17 00:00:00 2001
From: Alexey <sudilovskiy@yandex-team.ru>
Date: Fri, 5 Aug 2022 15:40:42 +0300
Subject: [PATCH] refactor(TextInput): use `<Button/>` (#293)

---
 src/components/TextInput/TextInput.scss       | 57 +++++--------------
 src/components/TextInput/TextInput.tsx        | 12 ++--
 .../TextInput/__tests__/TextInput.test.tsx    |  8 +--
 src/components/TextInput/i18n/en.json         |  3 +
 src/components/TextInput/i18n/index.ts        |  5 ++
 src/components/TextInput/i18n/ru.json         |  3 +
 6 files changed, 36 insertions(+), 52 deletions(-)
 create mode 100644 src/components/TextInput/i18n/en.json
 create mode 100644 src/components/TextInput/i18n/index.ts
 create mode 100644 src/components/TextInput/i18n/ru.json

diff --git a/src/components/TextInput/TextInput.scss b/src/components/TextInput/TextInput.scss
index e332d956bb..354e4fc2c4 100644
--- a/src/components/TextInput/TextInput.scss
+++ b/src/components/TextInput/TextInput.scss
@@ -57,38 +57,28 @@ $block: '.#{$ns}text-input';
     }
 
     &__clear {
+        --yc-button-background-color: transparent;
+        --yc-button-background-color-hover: transparent;
+
         position: absolute;
-        display: none;
-        align-items: center;
         top: 0;
         right: 0;
-        height: 100%;
-        padding: 0;
         color: var(--yc-color-text-hint);
-        cursor: pointer;
-        border-radius: 0 3px;
 
         &:hover {
             color: var(--yc-color-text-primary);
         }
 
-        &_visible {
-            display: flex;
+        &:not(&_visible) {
+            display: none;
         }
     }
 
     &_size {
         &_s {
-            #{$block}__control,
-            #{$block}__clear {
-                padding-left: 8px;
-                padding-right: 8px;
-                height: 24px;
-            }
-
             #{$block}__control {
-                padding-top: 4px;
-                padding-bottom: 4px;
+                height: 24px;
+                padding: 4px 8px;
                 font-size: 13px;
                 line-height: 16px;
             }
@@ -103,16 +93,9 @@ $block: '.#{$ns}text-input';
         }
 
         &_m {
-            #{$block}__control,
-            #{$block}__clear {
-                padding-left: 8px;
-                padding-right: 8px;
-                height: 28px;
-            }
-
             #{$block}__control {
-                padding-top: 5px;
-                padding-bottom: 5px;
+                height: 28px;
+                padding: 5px 8px;
                 font-size: 13px;
                 line-height: 16px;
             }
@@ -127,16 +110,9 @@ $block: '.#{$ns}text-input';
         }
 
         &_l {
-            #{$block}__control,
-            #{$block}__clear {
-                padding-left: 13px;
-                padding-right: 13px;
-                height: 36px;
-            }
-
             #{$block}__control {
-                padding-top: 10px;
-                padding-bottom: 10px;
+                height: 36px;
+                padding: 10px 13px;
                 font-size: 13px;
                 line-height: 16px;
             }
@@ -151,16 +127,9 @@ $block: '.#{$ns}text-input';
         }
 
         &_xl {
-            #{$block}__control,
-            #{$block}__clear {
-                padding-left: 13px;
-                padding-right: 13px;
-                height: 44px;
-            }
-
             #{$block}__control {
-                padding-top: 12px;
-                padding-bottom: 12px;
+                height: 44px;
+                padding: 12px 13px;
                 font-size: 15px;
                 line-height: 20px;
             }
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index 4704cc7f8c..9a46a92490 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -3,9 +3,12 @@ import {block} from '../utils/cn';
 import {useForkRef} from '../utils/useForkRef';
 import {TextAreaControl} from './TextAreaControl/TextAreaControl';
 import {InputControl} from './InputControl/InputControl';
+import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {CrossIcon} from '../icons/CrossIcon';
 import {TextInputProps, TextInputView, TextInputSize, TextInputPin, TextInputState} from './types';
+import i18n from './i18n';
+
 import './TextInput.scss';
 
 export type {TextInputProps, TextInputView, TextInputSize, TextInputPin};
@@ -149,13 +152,14 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
 
             {isErrorMsgVisible && <div className={b('error')}>{error}</div>}
             {hasClear && (
-                <span
-                    role="button"
+                <Button
+                    size={size}
                     className={b('clear', {visible: isClearControlVisible})}
                     onClick={handleClear}
+                    extraProps={{'aria-label': i18n('label_clear-button')}}
                 >
-                    <Icon data={CrossIcon} />
-                </span>
+                    <Icon data={CrossIcon} size={10} />
+                </Button>
             )}
         </span>
     );
diff --git a/src/components/TextInput/__tests__/TextInput.test.tsx b/src/components/TextInput/__tests__/TextInput.test.tsx
index cee489e538..302f607daf 100644
--- a/src/components/TextInput/__tests__/TextInput.test.tsx
+++ b/src/components/TextInput/__tests__/TextInput.test.tsx
@@ -38,13 +38,13 @@ describe('TextInput', () => {
     test('render clear button with hasClear prop', () => {
         render(<TextInput hasClear />);
 
-        expect(screen.getByRole('button')).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Clear input value'})).toBeInTheDocument();
     });
 
     test('do not render clear button without hasClear prop', () => {
         render(<TextInput />);
 
-        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', {name: 'Clear input value'})).not.toBeInTheDocument();
     });
 
     test('call onChange when input changes value', () => {
@@ -70,7 +70,7 @@ describe('TextInput', () => {
         const onChangeFn = jest.fn();
         const user = userEvent.setup();
         render(<TextInput hasClear onChange={onChangeFn} />);
-        const clear = screen.getByRole('button');
+        const clear = screen.getByRole('button', {name: 'Clear input value'});
 
         if (clear) {
             await user.click(clear);
@@ -83,7 +83,7 @@ describe('TextInput', () => {
         const onUpdateFn = jest.fn();
         const user = userEvent.setup();
         render(<TextInput hasClear onUpdate={onUpdateFn} />);
-        const clear = screen.getByRole('button');
+        const clear = screen.getByRole('button', {name: 'Clear input value'});
 
         if (clear) {
             await user.click(clear);
diff --git a/src/components/TextInput/i18n/en.json b/src/components/TextInput/i18n/en.json
new file mode 100644
index 0000000000..2872f35a98
--- /dev/null
+++ b/src/components/TextInput/i18n/en.json
@@ -0,0 +1,3 @@
+{
+    "label_clear-button": "Clear input value"
+}
diff --git a/src/components/TextInput/i18n/index.ts b/src/components/TextInput/i18n/index.ts
new file mode 100644
index 0000000000..1d6820bcf5
--- /dev/null
+++ b/src/components/TextInput/i18n/index.ts
@@ -0,0 +1,5 @@
+import {registerKeyset} from '../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+
+export default registerKeyset({en, ru}, 'text-input');
diff --git a/src/components/TextInput/i18n/ru.json b/src/components/TextInput/i18n/ru.json
new file mode 100644
index 0000000000..ade621014a
--- /dev/null
+++ b/src/components/TextInput/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+    "label_clear-button": "Очистить введённое значение"
+}