feat(Input, Combobox, Autocomplete): add showClearIcon prop #3594

SchwJ · 2025-02-03T11:50:32Z

Проблема

Необходимо отрисовывать в инпуте крестик и очищать значение по клику на него.

Решение

Добавила пропы в Input и Combobox, отнаследовала проп в Autocomplete, написала скриншотные тесты и добавила примеры в документацию.

Ссылки

Задача
Гайд для Input с крестикой очистки
Тред в маттермосте с обсуждением дизайна

Чек-лист перед запросом ревью

Добавлены тесты на все изменения
✅ unit-тесты для логики
✅ скриншоты для верстки и кросс-браузерности
⬜ нерелевантно
Добавлена (обновлена) документация
✅ styleguidist для пропов и примеров использования компонентов
⬜ jsdoc для утилит и хелперов
⬜ комментарии для неочевидных мест в коде
⬜ прочие инструкции (README.md, contributing.md и др.)
⬜ нерелевантно
Изменения корректно типизированы
✅ без использования any (см. PR 2856)
⬜ нерелевантно
Прочее
✅ все тесты и линтеры на CI проходят
✅ в коде нет лишних изменений
✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)

This reverts commit 77dc112.

This reverts commit bba277c.

This reverts commit b5c6f99.

This reverts commit 01e3b31.

This reverts commit cbadb12.

packages/react-ui/components/Autocomplete/__docs__/Autocomplete.docs.stories.tsx

packages/react-ui/components/Autocomplete/__tests__/Autocomplete-test.tsx

packages/react-ui/components/ComboBox/__creevey__/ComboBox.creevey.mts

packages/react-ui/components/ComboBox/__docs__/ComboBox.docs.stories.tsx

packages/react-ui/components/ComboBox/__stories__/Combobox.stories.tsx

packages/react-ui/components/Input/Input.tsx

packages/react-ui/components/Input/__stories__/Input.stories.tsx

packages/react-ui/components/Input/Input.tsx

Funkicide

В целом всё хорошо, на мой взгляд. Единственное, кажется что много избыточных комментариев. Практически везде, где они есть, и так понятно, что происходит, исходя из контекста и названий переменных.

packages/react-ui/internal/themes/BasicLightTheme.ts

Funkicide

У меня замечаний, кроме тех двух нет. Можно Мишу звать.

SchwJ · 2025-02-13T11:20:16Z

После Роминого ревью:

убрала лишний фокус по совету Ромы
согласно апдейту со стороны дизайна: обновила иконку и обновила цвета (цвет иконки по умолчанию -- Secondary Text #757575 и по ховеру -- Text #222222, также по уточнению Андрея). Соответственно, обновились скрины.

mshatikhin · 2025-02-17T13:11:48Z

странность, что два раза setFocusedByTab вызывается

packages/react-ui/internal/CleanCrossIcon/CleanCrossIcon.tsx

sashachabin · 2025-02-18T09:40:43Z

packages/react-ui/components/Input/Input.tsx

@@ -53,6 +53,9 @@ export interface InputProps
    Override<
      React.InputHTMLAttributes<HTMLInputElement>,
      {
+        /** Устанавливает иконку крестика, при нажатии на который инпут очищается. */
+        showCleanCross?: boolean;


А давай уберем слово show по аналогии с другими пропами. Например, у Input есть leftIcon и rightIcon без этого слова

Сейчас немного сменилась идея показа крестика. Он может показываться

всегда при непустом инпуте "always"

при фокусе на непустом инпуте "onFocus"

никогда "never"

В таком случае мне кажется нецелесообразным менять название, так как "always", "onFocus" и "never" являются наречиями, а наречия в свою очередь всегда зависят от глагола

packages/react-ui/components/Input/Input.tsx

sashachabin · 2025-02-28T12:28:55Z

Обсудили название, решили заменить showCleanCross → showClearIcon

SchwJ · 2025-02-28T13:40:39Z

Название коммита выше неправильное. Переименовала showCleanCross в showClearIcon

packages/react-ui/internal/CustomComboBox/CustomComboBoxReducer.tsx

packages/react-ui/components/Autocomplete/__tests__/Autocomplete-test.tsx

mshatikhin · 2025-03-03T11:21:00Z

packages/react-ui/components/Input/Input.tsx

@@ -26,6 +27,7 @@ import { PolyfillPlaceholder } from './InputLayout/PolyfillPlaceholder';
 export const inputTypes = ['password', 'text', 'number', 'tel', 'search', 'time', 'date', 'url', 'email'] as const;

 export type InputAlign = 'left' | 'center' | 'right';
+export type ShowClearIcon = 'always' | 'onFocus' | 'never';


не могу придумать лучше чем always,
но always может вводить в заблуждение что крестик вообще всегда будет показываться

Есть такие идеи:

alwaysWhenNotEmpty (тогда 'onFocus' -> 'onFocusWhenNotEmpty')

alwaysIfFilled (тогда 'onFocus' -> 'onFocusIfFilled')

@sashachabin Призываем тебя!
Может есть идеи?

Правильно будет:

showClearIcon="whenFilled"

showClearIcon="whenFilledOnFocus"

Но это слишком длинно, поэтому предлагаю:

showClearIcon="filled"

showClearIcon="filledOnFocus" или showClearIcon="filledFocus"

Подглядеть некуда, его либо нет, либо это boolean:

NextUI (isClearable: bool)

Ant.design (allowClear: bool)

После обсуждения решили:

auto — показывается по ховеру или фокусу

always — показывается всегда

never — никогда не показывать (по умолчанию)

packages/react-ui/components/Input/Input.tsx

mshatikhin · 2025-03-04T07:28:58Z

packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx

@@ -436,6 +445,17 @@ export class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>, Combo
      return <LoadingIcon size={size} />;
    }

+    if (this.getProps().showClearIcon !== 'never' && this.state.clearCrossShowed) {


this.getProps().showClearIcon !== 'never' -- это условие не нужно поидее,
достаточно смотреть на this.state.clearCrossShowed и обновлять state при необходимости (например в componentDidUpdate)

packages/react-ui/components/ComboBox/ComboBox.tsx

packages/react-ui/components/Input/Input.tsx

mshatikhin · 2025-03-04T09:15:08Z

packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx

@@ -436,6 +445,17 @@ export class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>, Combo
      return <LoadingIcon size={size} />;
    }

+    if (this.getProps().showClearIcon !== 'never' && this.state.clearCrossShowed) {


не нашел кода который бы устанавливал this.state.clearCrossShowed после инициализации

# Conflicts: # packages/react-ui/internal/InputLikeText/InputLikeText.tsx # packages/react-ui/internal/themes/BasicDarkTheme.ts # packages/react-ui/internal/themes/BasicLightTheme.ts

mshatikhin · 2025-03-14T07:43:33Z

SchwJ · 2025-03-14T07:47:46Z

С Андреем и Мишей обсудили и решили, что крестик в задисейбленном состоянии не должен показываться

mshatikhin · 2025-03-14T07:05:09Z

packages/react-ui/internal/themes/DarkTheme5_0.ts

+    //#region ClearCrossIcon
+    public static clearCrossIconColor = 'rgba(255, 255, 255, 0.32)';
+    public static get clearCrossIconHoverColor() {
+      return this.inputBorderColorFocus;


почему тут ссылка на цвет inputBorderColorFocus ?

это может привести к тому что крестик станет цветным в темной теме

mshatikhin · 2025-03-14T07:09:51Z

packages/react-ui/internal/themes/DarkTheme5_0.ts

@@ -44,6 +44,14 @@ export const DarkTheme5_0 = createTheme({
    //#region CloseIcon, CloseButtonIcon
    public static closeBtnIconColor = 'rgba(255, 255, 255, 0.32)';
    //#endregion CloseIcon, CloseButtonIcon
+
+    //#region ClearCrossIcon
+    public static clearCrossIconColor = 'rgba(255, 255, 255, 0.32)';


тут кажется не правильно, откуда циферка 0.32 взялась?
по макетам должно быть 0.54
https://www.figma.com/design/tEz0VI62iYNf7xpnouiU0f/%E2%9A%A1-Kontur-UI-%5BDark%5D?node-id=1-41257&t=WSkBvAcSmdZtrB8b-0

Поняла, что у нас толком нигде не зафиксированы все возможные цвета крестика. Решила уточнить у Саши Кряжева, какие цвета крестика должны быть:

в светлой теме при обычном состоянии? (Андрей когда-то говорил 'rgba(117, 117, 117, 1)' = '#757575')

в светлой теме при наведении на крестик? (Андрей когда-то говорил 'rgba(34, 34, 34, 1)' = '#222222')

в темной теме при обычном состоянии? (вроде 'rgba(255, 255, 255, 0.54)')

в темной теме при наведении на крестик? (вроде 'rgba(255, 255, 255, 0.865)')

Определили с Сашей нужные цвета:

В светлой теме:
rgba(0, 0, 0, 0.54) — обычное состояние
rgba(0, 0, 0, 0.87) — при наведении

В темной теме:
rgba(255, 255, 255, 0.54) — обычное состояние
rgba(255, 255, 255, 0.865) — при наведении

packages/react-ui/internal/themes/BasicTheme.ts

mshatikhin · 2025-03-14T08:51:01Z

packages/react-ui/components/Autocomplete/__tests__/Autocomplete-test.tsx

+      };
+      render(<ControlledAutocomplete />);
+      const autocomplete = screen.getByRole('textbox');
+      expect(screen.queryByTestId(InputDataTids.clearCross)).toBeNull();


многовато дублирования в тестах, читать изза этого сложно, да и поддерживать будет не просто

давай попробуем улучшить это
например хэлперы сделать, или еще как то

mshatikhin · 2025-03-14T11:33:09Z

packages/react-ui/internal/ClearCrossIcon/ClearCrossIcon.tsx

+
+export const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({ size = 'small', style, ...rest }) => {
+  const _theme = React.useContext(ThemeContext);
+  const theme = ThemeFactory.create(


это лишние трансформации этот код ничего не делает полезного

SchwJ added 11 commits February 3, 2025 16:24

chore(): create CleanCrossIcon and theme variables

cbadb12

chore(): add story

01e3b31

chore(): forbid prop in components

b5c6f99

chore(): add cross in InputLayout

bba277c

chore(): add value in state input

77dc112

Revert "chore(): add value in state input"

4a43990

This reverts commit 77dc112.

Revert "chore(): add cross in InputLayout"

e030589

This reverts commit bba277c.

Revert "chore(): forbid prop in components"

f158a1b

This reverts commit b5c6f99.

Revert "chore(): add story"

432489d

This reverts commit 01e3b31.

Revert "chore(): create CleanCrossIcon and theme variables"

d1dd5cf

This reverts commit cbadb12.

feat(Input): add clean cross prop in input

4cf6e49

SchwJ force-pushed the add-clean-cross-in-input-and-combobox branch from 8432121 to 4cf6e49 Compare February 5, 2025 13:41

feat(Input): add screenshots and refactor creevey test

c0bd781

SchwJ commented Feb 7, 2025

View reviewed changes

SchwJ changed the title ~~feat(Input): add clean cross prop~~ feat(Input, Combobox): add showCleanCross prop Feb 7, 2025

Funkicide self-requested a review February 10, 2025 15:25

Funkicide assigned Funkicide and unassigned Funkicide Feb 10, 2025

Funkicide reviewed Feb 11, 2025

View reviewed changes

packages/react-ui/components/Input/__stories__/Input.stories.tsx Outdated Show resolved Hide resolved

Funkicide reviewed Feb 11, 2025

View reviewed changes

packages/react-ui/components/Input/Input.tsx Outdated Show resolved Hide resolved

Funkicide reviewed Feb 11, 2025

View reviewed changes

packages/react-ui/components/Input/Input.tsx Outdated Show resolved Hide resolved

Funkicide reviewed Feb 11, 2025

View reviewed changes

packages/react-ui/components/Input/Input.tsx Show resolved Hide resolved

Funkicide reviewed Feb 11, 2025

View reviewed changes

packages/react-ui/components/Input/Input.tsx Outdated Show resolved Hide resolved

Funkicide reviewed Feb 11, 2025

View reviewed changes

packages/react-ui/internal/themes/BasicLightTheme.ts Outdated Show resolved Hide resolved

chore(): fix review comments

c939ec8

SchwJ requested a review from Funkicide February 13, 2025 05:57

Funkicide reviewed Feb 13, 2025

View reviewed changes

feat(Input): fix review comment, update cross icon and color

cd5e6a1

SchwJ changed the title ~~feat(Input, Combobox): add showCleanCross prop~~ feat(Input, Combobox, Autocomplete): add showCleanCross prop Feb 17, 2025

sashachabin reviewed Feb 18, 2025

View reviewed changes

packages/react-ui/internal/CleanCrossIcon/CleanCrossIcon.tsx Outdated Show resolved Hide resolved

sashachabin reviewed Feb 18, 2025

View reviewed changes

packages/react-ui/components/Input/Input.tsx Outdated Show resolved Hide resolved

SchwJ added 3 commits February 18, 2025 17:46

chore(): fix review comments

7697144

chore(): improvements

c6241ff

chore(): improvements 2

69cecef

sashachabin mentioned this pull request Feb 28, 2025

feat(Toast, SingleToast): add ability to show close cross #3596

Merged

chore(): rename showCleanCross to showCloseCross

fa14bdd

sashachabin approved these changes Mar 3, 2025

View reviewed changes

SchwJ and others added 3 commits March 4, 2025 10:44

chore(): wip

bfb42d8

chore: clean code

689f519

chore: clean code

f0d3303

mshatikhin requested changes Mar 4, 2025

View reviewed changes

mshatikhin reviewed Mar 4, 2025

View reviewed changes

SchwJ and others added 7 commits March 13, 2025 13:37

chore(): add showClearIcon auto

368a9ca

Merge branch 'next' into add-clean-cross-in-input-and-combobox

b4813f4

# Conflicts: # packages/react-ui/internal/InputLikeText/InputLikeText.tsx # packages/react-ui/internal/themes/BasicDarkTheme.ts # packages/react-ui/internal/themes/BasicLightTheme.ts

chore(): refactor code

046ed26

chore(): fix

0a9f542

chore(): improve

3bba008

Merge branch 'next' into add-clean-cross-in-input-and-combobox

82ad29c

chore: change type guard, remove duplicate logic

bb4c4e7

mshatikhin reviewed Mar 14, 2025

View reviewed changes

SchwJ changed the title ~~feat(Input, Combobox, Autocomplete): add showCleanCross prop~~ feat(Input, Combobox, Autocomplete): add showClearIcon prop Mar 14, 2025

mshatikhin reviewed Mar 14, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Input, Combobox, Autocomplete): add showClearIcon prop #3594

feat(Input, Combobox, Autocomplete): add showClearIcon prop #3594

SchwJ commented Feb 3, 2025 •

edited

Loading

Funkicide left a comment

Funkicide left a comment

SchwJ commented Feb 13, 2025

mshatikhin commented Feb 17, 2025

sashachabin Feb 18, 2025

SchwJ Feb 28, 2025

sashachabin commented Feb 28, 2025

SchwJ commented Feb 28, 2025

mshatikhin Mar 3, 2025

SchwJ Mar 4, 2025

SchwJ Mar 4, 2025

sashachabin Mar 4, 2025 •

edited

Loading

sashachabin Mar 4, 2025

sashachabin Mar 4, 2025 •

edited

Loading

mshatikhin Mar 4, 2025

mshatikhin Mar 4, 2025

mshatikhin commented Mar 14, 2025

SchwJ commented Mar 14, 2025

mshatikhin Mar 14, 2025

mshatikhin Mar 14, 2025

mshatikhin Mar 14, 2025

mshatikhin Mar 14, 2025

SchwJ Mar 14, 2025

SchwJ Mar 14, 2025

mshatikhin Mar 14, 2025

mshatikhin Mar 14, 2025

feat(Input, Combobox, Autocomplete): add showClearIcon prop #3594

Are you sure you want to change the base?

feat(Input, Combobox, Autocomplete): add showClearIcon prop #3594

Conversation

SchwJ commented Feb 3, 2025 • edited Loading

Проблема

Решение

Ссылки

Чек-лист перед запросом ревью

Funkicide left a comment

Choose a reason for hiding this comment

Funkicide left a comment

Choose a reason for hiding this comment

SchwJ commented Feb 13, 2025

mshatikhin commented Feb 17, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sashachabin commented Feb 28, 2025

SchwJ commented Feb 28, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sashachabin Mar 4, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sashachabin Mar 4, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mshatikhin commented Mar 14, 2025

SchwJ commented Mar 14, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SchwJ commented Feb 3, 2025 •

edited

Loading

sashachabin Mar 4, 2025 •

edited

Loading

sashachabin Mar 4, 2025 •

edited

Loading