Skip to content

[Epic][slotProps]: перевести API для доступа к потомкам к единому формату #9040

@inomdzhon

Description

@inomdzhon

Проблема

В рамках #2342 обсуждается идея выноса ...restProps в корневой элемент, чтобы прокидывание параметров было более предсказуемым, а также поправить багу #7227. В комментарии #2342 (comment) собраны способы решить эту задачу. Остановились на варианте с точечной деструтуризацией (см. Вариант с деструктуризацией свойств).

У нас возникает брекинг чендж в виде того, что свойства пользователя, в частности data-* и aria-* атрибуты, начнут прокидываться не туда, куда он ранее ожидал. Например, в Checkbox, Radio, Switch атрибут date-testid будет попадать не на скрытый <input />, а на обертку.

Поэтому нужна возможность прокидывать свойства в потомки.

Решение

На примере MUI, которые стандартизировала подход с доступом к анатомии компонента (см. https://mui.com/material-ui/migration/migrating-from-deprecated-apis), будем внедрять в рамках текущей мажорной версии свойство slotProps. Этот вариант также рассматривался в комментарии #2342 (comment)) (см. Вариант через slotProps).

Список компонентов, которые будут иметь такое свойство в первую очередь, перечислены в комментарии #2342 (comment).

Требования

Release notes

Помимо добавления slotProps, упомянуть про преждевременную миграцию. Предлагаю объединять такие изменения. Ниже шаблон.

Note

Текущая автоматизация сборка Release notes не позволяет сделать так, поэтому нужно будет редактировать черновик.

## Миграция на `slotProps`

В рамках подготовки к задаче #2342, добавлено свойство `slotsProps` для прокидывания свойств во внутренние элементы компонента – рекомендуем заранее мигрировать на новое API, чтобы упростить обновление до **VKUI v8**.

Ниже список компонентов, у которых появилось свойство `slotProps` в рамках текущего релиза.

- Radio: устарели свойства `labelProps` и `getRef`, а также `data-*` и `aria-*` атрибуты

    ```diff
    <Radio
    -  labelProps={}
    -  data-testid="input"
    -  aria-label="some label"
    -  getRef={handleRef}
    +  slotProps={ label: {}, input: { getRootRef: handleRef, 'data-testid': 'input', 'aria-label': 'some label' } }
    />
    ```

Блог

По окончанию работ, написать пост в https://vkui.io/blog с мотивацией почему к такому пришли. Упомянуть, что за основу брали подход MUI.

Sub-issues

Metadata

Metadata

Projects

Status

🔧 In progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions