feat(plasma-new-hope): Add `Combobox` component #1032

neretin-trike · 2024-02-05T16:06:00Z

Combobox

добавлен компонент Combobox c новым дизайном в библиотеку @salutejs/plasma-new-hope для тем plasma-b2c и plasma-web, а также в @salutejs/plasma-b2c и @salutejs/plasma-web

single

multiple

What/why changed

Добавлена новая реализация компонента Combobox, в которой пересмотрен API.

добавлена клавиатурная навигация со следующими комбинациями:
- Tab - переход на таргет (инпут)
- Shift + tab - выход с него (теряем фокус)
- Стрелка вверх / стрелка вниз - открыть выпадающий список и переместиться на первый элемент
- Стрелки вверх / вниз ходим по элементам с зацикливанием
- Enter - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на таргет (инпут)
- Если мы ходим по селекту и нажимаем Tab - выпадающий список закрывается и теряем фокус
- Если мы ходим по селекту и нажимаем Escape - выпадающий список закрывается и фокусом остаёмся на таргете
- В мультиселекте тоже самое кроме закрытия выпадающего списка при выборе элемента
- Когда находимся на первом чипе, нажимаем стрелку влево / вправо - переходим по чипам
- Когда оказываемся на последнем чипе и нажимаем стрелку вправо - переходим на таргет (инпут)
- Когда находимся на таргете (инпуте) и нажимаем Backspace - удаляется последний чип
- Когда находимся на таргете (инпуте) и нажимаем стрелку влево - переходим на последний чип
- Нажимаем Backspace - удаляем выбранный чип и переходим на предыдущий
- Если удалили последний чип, то фокусируемся на таргете
- Если находимся в выборе элемента из выпадающего списка и нажимаем стрелку влево / вправо - попадаем на самый последний чип
- Если находимся в режиме выбора элемента и нажимаем стрелку вниз / вверх находясь на последнем / первом элементе, то перескакиваем в начало / в конец
- Если находимся в режиме выбора элемента и нажимаем любую клавишу кроме стрелки вниз / вверх / лево / право / Escape / Tab / Enter, то переходим на таргет (инпут) и вводим значения
- Ввод значение в таргет (инпут) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
# or 
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]

Salute-Eva · 2024-02-05T16:08:46Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-1032/

Salute-Eva · 2024-02-05T16:28:07Z

Documentation preview deployed!

shuga2704 · 2024-02-06T12:13:25Z

packages/plasma-new-hope/src/components/Combobox/Combobox.styles.ts

+    outline: none;
+    opacity: 0;
+    position: absolute;
+    inset: 0;


Предлагаю вынести на обсуждение введения следующего declaration ордера для написания стилей: https://codeguide.co/#declaration-order

Сейчас в компонентах стили разбросаны, надо тратить время на понимание, св-во position куда более важное чем opacity, следовательно должно стоят вначале.

packages/plasma-new-hope/src/components/Combobox/Combobox.tsx

packages/plasma-new-hope/src/components/Combobox/hooks/useFocusController.ts

packages/plasma-new-hope/src/components/Combobox/ui/ComboboxTarget/ComboboxTarget.tsx

Salute-Eva · 2024-02-07T07:26:12Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-1032/

Salute-Eva · 2024-02-07T07:40:18Z

Documentation preview deployed!

Salute-Eva · 2024-02-13T20:47:18Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-1032/

Salute-Eva · 2024-02-13T21:00:02Z

Documentation preview deployed!

github-actions · 2024-02-13T21:40:43Z

⚡ Component performance testing

Result: 🔴 FAIL

Details

rerender:

Component	Diff	Base value	Current value
packages/plasma-ui/src/components/Pickers/Pickers.perftest.tsx#DatePicker	38.92 pts (+9011.99%)	0.43 pts	39.36 pts

Salute-Eva · 2024-02-14T07:23:53Z

Salute-Eva · 2024-02-14T07:23:56Z

Salute-Eva · 2024-02-14T07:23:59Z

Salute-Eva · 2024-02-14T07:24:02Z

Salute-Eva · 2024-02-14T07:24:05Z

Salute-Eva · 2024-02-14T07:24:08Z

Salute-Eva · 2024-02-14T07:24:11Z

Salute-Eva · 2024-02-14T07:24:14Z

Salute-Eva · 2024-02-14T07:24:17Z

neretin-trike added the plasma-components label Feb 5, 2024

neretin-trike requested review from Yeti-or, Yakutoc and kayman233 as code owners February 5, 2024 16:06

neretin-trike temporarily deployed to internal February 5, 2024 16:06 — with GitHub Actions Inactive

neretin-trike changed the title ~~feat(plasma-new-hope): Add Select component #956~~ feat(plasma-new-hope): Add Combobox component Feb 6, 2024