[RFC] Расширение возможностей кастомизации компонентов

[inomdzhon]

Вводная

По мотивам обсуждения в [Breaking changes] Модульный CSS #2349

Как сейчас?

Сейчас VKUI позволяет кастомизировать компоненты с помощью:

1. набора дизайн-токенов

   Подробности

   • Цвета (например, --vkui--color_text_accent)
   • Размеры (например, --vkui--size_base_padding_vertical--regular или специфичный --vkui--size_field_height--compact)
   • Закругления (например, --vkui--size_border_radius--regular)
   • Типографика (например, --vkui--font_title1--font_size--regular)

2. API некоторых компонентов

   Подробности

   • Замена иконки/текста/элемента (например, ExpandIcon в Accordion)
   • Отключение/включение функционала/элемента компонента (например, disableBackground в PanelHeader или hideCloseButton в ModalPage)
   • Закругления (например, borderRadius в Image)
   • Размеры (например, size в HorizontalCell)
   • Типографика (например, TitleComponent в HorizontalCell)
   • Разделение на поддкомпоненты (например, Group.ExpandedContent у Group)

Какая проблема?

Возможности выше, естественно, не покрывают все потребности. Набор токенов и API ограничены и их нужно пополнять по запросу. А до поры до времени пользователь, чтобы кастомизировать компонент под нужды продукта, вынужден прибегать к обращению к CSS-классам VKUI-компонентов, тогда как VKUI не считает это публичным API. По крайней мере, на текущий момент мы не пришли к такому выводу.

/* ExampleComponent.module.css */
.cell :global(.vkuiSimpleCell__before) {
  padding-top: 12px;
  padding-bottom: 12px;
}

Поиск решений

Цель этой дискуссии – собрать как можно больше кейсов, когда приходится завязываться на CSS-классы, чтобы понять потребности в кастомизации того или иного компонента. Далее – изучить, какие возможности предоставить для решения каждого кейса: что покрыть созданием токена, что расширением API компонента, а что новым инструментом.

Узнать про такие кейсы мы можем, конечно, только от вас, от пользователей ❤️

Очень ждём от вас ответов на следующие вопросы:

1. Какие компоненты вам приходится кастомизировать прибегая к CSS-классам VKUI-компонентов?

2. Приведите примеры, как вы кастомизируете компоненты через CSS-классы. Будет очень здорово, если получится предоставить пример кода в песочнице или дать ссылку на проект в GitHub (если он открыт). Примеры сервисов, куда можно залить код:

   • https://pastebin.com/
   • https://stackblitz.com/
   • https://codesandbox.io/

3. Какие у вас есть идеи? Как бы вы решили такую задачу без привязки к CSS-классам VKUI-компонентов?

Список известных задач

Собрали список задач из бэклога, без которых придётся завязываться на CSS-классы при создании workaround.

• [Feature]: Отключение анимаций открытия/закрытия модальных окон в десктопной версии #8639
• [Feature][ContentBadge]: Кастомные цвета #7729
• [Feature][ButtonGroup]: добавить segmented проп #7695
• [Feature]: Placeholder режим overlay #7714
• [Feature][UsersStack]: overlay режим для компонента #7572
• [Feature]: Button добавить тень #7388
• [Feature]: Сделать возможность вывести иконку с индикатором в IconButton #6953
• [Feature]: компонент Card - добавить mode с новым цветом #6878
• [Feature]: добавить параметр disableModalOverlay в ModalRoot / ModalPage / ModalCard #8071
• [Feature]: Добавить возможность прокинуть класс на bullets в компоненте Gallery #6270
• [Feature][ImageBase]: сабкомпонент BlurOverlay #6183
• [Feature]: CellButton добавить размеры  #6050
• [Feature][Checkbox]: noPadding режим #6042
• [Feature]: Централизация текста #5560
• [Feature]: sticky SplitCol #3396
• [Bug][SimpleCell]: Компонент не поддерживает Skeleton с процентным width #8811

[inomdzhon]

• см. [RFC][Компоненты раскладки]: Создание общих свойств раскладки для изменения геометрии #8871