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

Сейчас следующие задачи:

• изменить внешние или внутренние отступы
• растянуть по вертикали или горизонтали
• ограничить размеры по вертикали или горизонтали
• изменить позиционирование
• задать flex-свойства потомку

необходимо делать либо через определение className или style.

Есть прикладные компоненты Group, FormLayoutGroup, FormField, ButtonGroup, CellButtonGroup, RadioGroup, которые задают отступы по дизайн-системе, но они не покрывают все задачи.

Есть общие компоненты, но они тоже ограничивают пользователя:

• Div – отступы зашиты, можно перебить либо токены, либо отступы через className или style
  • см. [Feature][Box]: Создать новый компонент на замену Div #8928
• Flex
  • чтобы задать отступ нужно либо обернуть в Div, либо передать его в Component, либо использовать margin, который тоже зашивает конкретный отступ.
  • нельзя задать flex-basis, flex-shrink, flex-grow, если говорить о вложенном Flex.
• Flex.Item – нельзя точечно задать flex-basis, flex-shrink, flex-grow.
• SimpleGrid – чтобы задать отступ нужно либо обернуть в Div, либо передать его в Component, либо использовать margin, который тоже зашивает конкретный отступ.

<Flex Component={Div} align="center" justify="center"> ... </Flex>

// .box { padding: 12px; }
<Flex direction="column" className={styles.box}> ... </Flex>

// .scrollContainer { position: relative; flex-grow: 1; }
<Flex direction="column" className={styles.scrollContainer}> ... </Flex>

// .root .content { flex: 1; }
<Flex direction="column" align="start" className={styles.content}> ... </Flex>

// .content { padding-inline: 8px }
<Div className={styles.content}>
   <Flex gap={4}>               
      ....
   </Flex>
   ....
</Div>

Что нужно сделать?

Нужно расширить компоненты Flex, SimpleGrid, Box (новый компонент см. #8928) общими свойствами для управления геометрией.

Исключение: Flex.Item

• см. [Enhancement][Flex.Item]: депрекейт в пользу Flex #8926

Определим черновой вариант типов для наглядности примеров:

// https://github.com/microsoft/TypeScript/issues/29729
interface Nothing {}
type LiteralUnion<Union, Type> = Union | (Type & Nothing);

// размерности из vkui-tokens
type DesignSystemSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';

// типы в CSS
type CSSGlobalValue = "inherit" | "initial" | "unset";
type CSSUnitValue = `${number}${'em' | 'rem' | '%' | 'vw' | 'vh'}`;
type CSSCustomSize = `--${string}`;
type CSSIntrinsicSizingKeywords = "auto" | "fill" | "max-content" | "min-content" | "fit-content";

• Отступы
• Ширина
• Высота
• Flex-потомок
• Позиционирование

display

Отступы

Решает проблему с Flex + Div.

Ширина

Для задач по растягиванию ширины или, наоборот, её ограничения.

См. также: [RFC] Адаптивные свойства компонентов раскладки.

Высота

Для задач по растягиванию высоты или, наоборот, её ограничения.

Flex-потомок

Должно быть также у компонента Separator

Чтобы была возможность управлять размерами потомков Flex-родителя.

Позиционирование

Управление слоем может пригодиться для декоративных элементов.

Переполнение

Референсы

• Всё выше описанное вдохновлено Radix UI https://www.radix-ui.com/themes/docs/overview/layout
• related to [BREAKING CHANGE] Убрать стили внешней геометрии #2347
• related to [EPIC]: Использовать vkui-токены для системы расстояний внутри компонентов VKUI #6684
• related to [RFC] Расширение возможностей кастомизации компонентов #8754