[BREAKING CHANGE] feat(Popper): mv to stable #6185
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
size-limit report 📦
|
|
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 6c6dbad:
|
e2e tests |
👀 Docs deployed
Commit 6c6dbad |
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## master #6185 +/- ##
==========================================
- Coverage 80.89% 80.89% -0.01%
==========================================
Files 317 317
Lines 9863 9846 -17
Branches 3308 3301 -7
==========================================
- Hits 7979 7965 -14
+ Misses 1884 1881 -3
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
SevereCloud
previously approved these changes
Dec 4, 2023
mendrew
reviewed
Dec 4, 2023
migration_v6.md
h2. Popper
```diff
<Popper
- arrowClassName=""
+ arrowProps={{ iconClassName: "" }}
- offsetDistance={0}
+ offsetByMainAxis={0}
- offsetSkidding={0}
+ offsetByCrossAxis={0}
- onPlacementChange={({ placement }) => {}}
+ onPlacementChange={(placement) => {}}
- renderContent
/>
```
- `onPlacementChange` теперь вызывается только в случае, если `Popper` подобрал оптимальный
`placement` вместо пользовательского.
- `renderContent` удалён в пользу `children`. Раньше из `renderContent` можно было получить
`className`, который задаёт `Popper`, сейчас этот `className` пустой.
- `targetRef` теперь умеет принимать `VirtualElement`.
- `arrowProps` принимает атрибуты `HTMLDivElement`, а также `iconStyle` и `iconClassName`.
inomdzhon
force-pushed
the
imirdzhamolov/issue6179/feat/Popper-to-stable
branch
from
0bfd8f6 to
6c6dbad
Compare
SevereCloud
approved these changes
Dec 4, 2023
This was referenced Dec 4, 2023
inomdzhon
added a commit
that referenced
this pull request
Dec 6, 2023
h2. Описание
Немного отрефакторил.
- `Chip` перенеёс в `ChipInputBase`.
- Хук `useChipsInput` в `ChipsInput`.
- Хук `useChipsSelect` в `ChipsSelect`.
- Вынес шаренные типы в файлы `types`.
- Вынес шаренные константы типы в файлы `constants`.
- Теперь `ChipsInput` и `ChipsSelect` могут быть неконтролируемыми.
- В `ChipsSelect` параметры `creatable` и `emptyText` унёс в хук `useChipsSelect`.
<details><summary>Под катом изменения по `ChipsSelect`</summary>
<p>
h2. ChipsSelect
```diff
<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`.
</p>
</details>
h3. Доступность
Обговорили с нашим специалистом по цифровой доступности следующие правила и поведение:
- Контейнеры `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**, на них можно сфокусироваться только кнопками-стрелками.
h2. Изменения
- `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 (см. facebook/react#11488 (comment)).
- `components/Popper` – поправил проверку для вызова `onPlacementChange` из #6185.
- в `ChipsSelect` задаём значение по умолчанию для `placement`.
- в `CustomSelectDropdown` задаём значение по умолчанию для `placement`.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Описание
onPlacementChangeтеперь вызывается только в случае, еслиPopperподобрал оптимальныйplacementвместо пользовательского.renderContentудалён в пользуchildren. Раньше изrenderContentможно было получитьclassName, который задаётPopper, сейчас этотclassNameпустой.targetRefтеперь умеет приниматьVirtualElement.arrowPropsпринимает атрибутыHTMLDivElement, а такжеiconStyleиiconClassName.Изменения
visibility: hiddenвынес вconvertFloatingDataToReactCSSPropertiesTextTooltipиRichTooltip, но они так и так будут пошатаны в рамках перевода в стабильные компоненты.