Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ChipsSelect): mv to stable #6206

Merged

Conversation

inomdzhon
Copy link
Contributor

@inomdzhon inomdzhon commented Dec 4, 2023


  • Unit-тесты

    Note больше тестов добавлю в отдельном PR

  • Документация фичи
  • Гайд миграции

    Note см. тело коммита

Описание

Немного отрефакторил.

  • Chip перенеёс в ChipInputBase.
  • Хук useChipsInput в ChipsInput.
  • Хук useChipsSelect в ChipsSelect.
  • Вынес шаренные типы в файлы types.
  • Вынес шаренные константы типы в файлы constants.
  • Теперь ChipsInput и ChipsSelect могут быть неконтролируемыми.
  • В ChipsSelect параметры creatable и emptyText унёс в хук useChipsSelect.
Под катом изменения по `ChipsSelect`

ChipsSelect

<ChipsSelect
-  value={[]}
+  defaultValue={[]}

-  value={[]}
+  value={[]}
+  onChange={[]}

-  inputValue=""
+  defaultInputValue=""

-  popupDirection="bottom"
+  placement="bottom"

-  options={[]}
+  presets={[]}

-  showSelected={true}
+  selectedBehavior="highlight"

-  showSelected={false}
+  selectedBehavior="hide"

-  creatableText="Lorem Ipsum"
+  creatable="Lorem Ipsum"
/>
  • Компонент теперь может быть контролируемым и неконтролируемым.
  • creatable – может быть всё ещё boolean, при этом теперь можно передать и текст, чтобы
    переопределить текст по умолчанию.
  • getOptionValue, getOptionLabel, getNewOptionData – все аргументы функции теперь обязательны.
  • renderChip – вторым аргументов приходит option.

Доступность

Обговорили с нашим специалистом по цифровой доступности следующие правила и поведение:

  • Контейнеры ChipsInput и ChipsSelect имеют роль listbox и aria-orientation="horizontal", а выбранные опции имеют роль option, а также атрибуты:
    • aria-selected со значением true;
    • aria-posinset со значением текущего места в списке;
    • aria-setsize со значением общего количества выбранных опций.
  • В ChipsSelect:
    • поле ввода имеет роль combobox и ссылаться на всплывающее окно через aria-haspopup, aria-controls и aria-expanded
    • Всплывающее окно имеет роль listbox, а его опции роль option.
  • Навигация с клавиатуры:
    • Tab фокусирует на поле ввода.
    • Если поле пустое, то стрелка ArrowUp/ArrowLeft выставит фокус на опцию с конца. Далее с помощью стрелок ArrowUp/ArrowLeft и ArrowDown/ArrowRIght можно перемещаться между опциями.
    • Нажатие Tab переведёт обратно на поле ввода, а Shift + Tab на другой фокусируемый элемент до ChipsInput/ChipsSelect. Другими словами опции не реагируют на Tab, на них можно сфокусироваться только кнопками-стрелками.

Изменения

  • hooks/useEnsureControl удалил undefined из возвращаемого типа. value не может быть undefined, потому что useCustomEnsuredControl возвращает defaultValue.
  • lib/select немного отрефакторил, удалил легаси код связанный с флагом u у RegExp.
  • lib/appearance
    • Добавил Keys.BACKSPACE.
    • Новая ф-я getHorizontalFocusGoTo.
  • lib/react/simulateReactInput – так как теперь для input используется useEnsureControl, то нужна возможность очистить поле через событие. Т.к. у в DOM API нет события clear, вызываем событие через API в React (см. Trigger simulated input value change for React 16 (after react-dom 15.6.0 updated)? facebook/react#11488 (comment)).
  • components/Popper – поправил проверку для вызова onPlacementChange из [BREAKING CHANGE] feat(Popper): mv to stable #6185.
    • в ChipsSelect задаём значение по умолчанию для placement.
    • в CustomSelectDropdown задаём значение по умолчанию для placement.

@inomdzhon inomdzhon requested a review from a team as a code owner December 4, 2023 16:40
Copy link
Contributor

github-actions bot commented Dec 4, 2023

size-limit report 📦

Path Size
JS 347.62 KB (+0.83% 🔺)
JS (gzip) 106.22 KB (+0.53% 🔺)
JS (brotli) 87.68 KB (+0.81% 🔺)
JS import Div (tree shaking) 1.43 KB (0%)
CSS 259.89 KB (+0.12% 🔺)
CSS (gzip) 33.93 KB (+0.15% 🔺)
CSS (brotli) 27.48 KB (+0.04% 🔺)

Copy link

codesandbox-ci bot commented Dec 4, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9f9ec08:

Sandbox Source
VKUI TypeScript Configuration

Copy link
Contributor

github-actions bot commented Dec 4, 2023

e2e tests

Playwright Report

Copy link
Contributor

github-actions bot commented Dec 4, 2023

👀 Docs deployed

Commit 9f9ec08

Copy link

codecov bot commented Dec 4, 2023

Codecov Report

Attention: 84 lines in your changes are missing coverage. Please review.

Comparison is base (6e5a521) 81.06% compared to head (9f9ec08) 80.49%.
Report is 1 commits behind head on master.

Files Patch % Lines
...es/vkui/src/components/ChipsSelect/ChipsSelect.tsx 82.75% 20 Missing ⚠️
.../vkui/src/components/ChipsSelect/useChipsSelect.ts 68.25% 20 Missing ⚠️
...i/src/components/ChipsInputBase/ChipsInputBase.tsx 81.92% 15 Missing ⚠️
packages/vkui/src/lib/dom.tsx 14.28% 12 Missing ⚠️
packages/vkui/src/lib/accessibility.ts 11.11% 8 Missing ⚠️
...es/vkui/src/components/ChipsInput/useChipsInput.ts 90.90% 4 Missing ⚠️
...s/vkui/src/components/ChipsInputBase/Chip/Chip.tsx 95.00% 2 Missing ⚠️
...ents/CustomSelectDropdown/CustomSelectDropdown.tsx 50.00% 2 Missing ⚠️
packages/vkui/src/lib/select.ts 95.23% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #6206      +/-   ##
==========================================
- Coverage   81.06%   80.49%   -0.57%     
==========================================
  Files         316      319       +3     
  Lines        9916     9967      +51     
  Branches     3327     3365      +38     
==========================================
- Hits         8038     8023      -15     
- Misses       1878     1944      +66     
Flag Coverage Δ
unittests 80.49% <81.53%> (-0.57%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@BlackySoul
Copy link
Contributor

BlackySoul commented Dec 4, 2023

Снимок экрана 2023-12-05 в 00 01 15

У селекта остается border-radius в раскрытом режиме

image

Кажется, emptyText отвалился (режим creatable)

@inomdzhon
Copy link
Contributor Author

Снимок экрана 2023-12-05 в 00 01 15

У селекта остается border-radius в раскрытом режиме

image

Кажется, emptyText отвалился (режим creatable)

Проблему с border-radius не смог воспроизвести

image

Второе сейчас гляну

@inomdzhon
Copy link
Contributor Author

inomdzhon commented Dec 4, 2023

Снимок экрана 2023-12-05 в 00 01 15

У селекта остается border-radius в раскрытом режиме

image

Кажется, emptyText отвалился (режим creatable)

поправил пустой дропдаун ⚡ eb01699

@BlackySoul
Copy link
Contributor

Record_2023-12-05-00-31-49.mp4

На мобилке у меня вообще вот такое поведение (как будто всё вверх тормашками становится, если поменять местоположение выпадашки 😆 )

@BlackySoul
Copy link
Contributor

BlackySoul commented Dec 4, 2023

2023-12-05.00.36.50.mov

Воспроизводится сразу после перезагрузки страницы (если зазумить, то потом правильно рассчитывается 🤔 )

Консоль дебага можно попробовать закрыть тоже х)

@inomdzhon inomdzhon force-pushed the imirdzhamolov/issue2518/feat/ChipsSelect-to-stable branch from 67ebd5c to 57b758f Compare December 4, 2023 17:55
@inomdzhon
Copy link
Contributor Author

2023-12-05.00.36.50.mov
Воспроизводится сразу после перезагрузки страницы (если зазумить, то потом правильно рассчитывается 🤔 )

Консоль дебага можно попробовать закрыть тоже х)

Нашёл проблему)) В Popper был некорректный предикат, который я в #6185 добавил 🌚

57b758f

BlackySoul
BlackySoul previously approved these changes Dec 4, 2023
Copy link
Contributor

@eugpoloz eugpoloz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

У меня было некоторое количество фиксов по доступности внутри #6139, которые, как я вижу, не переехали сюда. Может, я сделаю к твоей ветке отдельный пулл, чтобы ты их забрал и мы не столкнулись? С переносом файлов как будто сложно будет тут разойтись по-другому с минимумом конфликтов.

packages/vkui/src/components/ChipsInputBase/Chip/Chip.tsx Outdated Show resolved Hide resolved
@inomdzhon
Copy link
Contributor Author

У меня было некоторое количество фиксов по доступности внутри #6139, которые, как я вижу, не переехали сюда. Может, я сделаю к твоей ветке отдельный пулл, чтобы ты их забрал и мы не столкнулись? С переносом файлов как будто сложно будет тут разойтись по-другому с минимумом конфликтов.

Так, вижу о каких изменениях идёт речь:

  • Chip
  • lib/select

Сейчас перенесу ;) Спасибо, что обратила внимание 🙏

inomdzhon pushed a commit that referenced this pull request Dec 5, 2023
* feat(ChipsInputBase,Chip): rename props

* feat(Chip): enhance a11y
eugpoloz added a commit that referenced this pull request Dec 5, 2023
try to avoid conflicts w/ #6206
eugpoloz added a commit that referenced this pull request Dec 5, 2023
try to avoid conflicts w/ #6206
@VKCOM VKCOM deleted a comment from eugpoloz Dec 5, 2023
Из-за проверки `focus !== focusWithin` была проблема, если в рамках `FormField` навигироваться через фокус между внутренними элементами.

Также, избавился от `useGlobalEventListener` – тем самым теперь создаётся лишь 1 эффект вместо 4-х.
@inomdzhon inomdzhon force-pushed the imirdzhamolov/issue2518/feat/ChipsSelect-to-stable branch from 38e8f9b to b39c691 Compare December 5, 2023 12:33
migration_v6.md

h2. ChipsSelect

```diff
<ChipsSelect
-  value={[]}
+  defaultValue={[]}

-  value={[]}
+  value={[]}
+  onChange={[]}

-  inputValue=""
+  defaultInputValue=""

-  inputAriaLabel="Введите название цвета"
+  inputLabel="Введите название цвета"

-  popupDirection="bottom"
+  placement="bottom"

-  options={[]}
+  presets={[]}

-  showSelected={true}
+  selectedBehavior="highlight"

-  showSelected={false}
+  selectedBehavior="hide"

-  creatableText="Lorem Ipsum"
+  creatable="Lorem Ipsum"
/>
```

- Компонент теперь может быть контролируемым и неконтролируемым.
- `creatable` – может быть всё ещё `boolean`, при этом теперь можно передать и текст, чтобы
  переопределить текст по умолчанию.
- `getOptionValue`, `getOptionLabel`, `getNewOptionData` – все аргументы функции теперь обязательны.
- `renderChip` – вторым аргументов приходит `option`.
@inomdzhon inomdzhon force-pushed the imirdzhamolov/issue2518/feat/ChipsSelect-to-stable branch from b39c691 to 4965258 Compare December 5, 2023 14:01
@inomdzhon inomdzhon merged commit 59f83cd into master Dec 6, 2023
24 of 25 checks passed
@inomdzhon inomdzhon deleted the imirdzhamolov/issue2518/feat/ChipsSelect-to-stable branch December 6, 2023 12:23
mendrew added a commit that referenced this pull request Aug 1, 2024
…#7276)

В момент когда делали ChipsSelect стабильным (#6206), мы поменяли key на использование option.label вместо option.value. Это не совсем правильно, так как текстовое представление label может совпадать, в то время как value должно быть уникальным.

Поменял key в ChipsInput при рендере Chips и в ChipsSelect при рендере options.
Обновил key в CustomSelect для единообразия по аналогии с ChipsSelect.
vkcom-publisher pushed a commit that referenced this pull request Aug 1, 2024
…#7276)

В момент когда делали ChipsSelect стабильным (#6206), мы поменяли key на использование option.label вместо option.value. Это не совсем правильно, так как текстовое представление label может совпадать, в то время как value должно быть уникальным.

Поменял key в ChipsInput при рендере Chips и в ChipsSelect при рендере options.
Обновил key в CustomSelect для единообразия по аналогии с ChipsSelect.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants