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

[inomdzhon]

Проблема

Сейчас VKUI не позволяет изменять свойства компонентов раскладки в зависимости от системных брейкпоинтов.

Единственная возможность это сделать - использовать хуки useAdaptivityConditionalRender или useAdaptivityWithJSMediaQueries, но тут есть нюансы:

• useAdaptivityConditionalRender – хук возвращает CSS-классы для ограниченного набора параметров адаптивности. Навешивая класс, вы управляете видимостью компонентов. Например, вам необходимо располагать элементы горизонтально при условии, что ширина экрана больше 1024px, и вертикально - если меньше. В коде сейчас это можно реализовать следующим образом:

  Пример кода

    const { viewWidth } = useAdaptivityConditionalRender();
    
    return (
      <>
        {viewWidth.tabletMinus && (
          <Flex gap={8} direction="column" className={viewWidth.tabletMinus.className}>
            <Avatar initials="ВК" />
            <Avatar initials="ВК" />
            <Avatar initials="ВК" />
          </Flex>
        )}
        {viewWidth.tabletPlus && (
          <Flex gap={8} direction="row" className={viewWidth.tabletPlus.className}>
            <Avatar initials="ВК" />
            <Avatar initials="ВК" />
            <Avatar initials="ВК" />
          </Flex>
        )}
      </>
    );

  Сразу же всплывают проблемы – необходимо дублировать код + в DOM по факту будет и элемент с горизонтальным выравниваем, и с вертикальным, а показ/скрытие работает через CSS Media Query.

• useAdaptivityWithJSMediaQueries – делает тоже самое, что и предыдущий хук, но через условия в JS (без CSS-классов):

  Пример кода

   const { viewWidth } = useAdaptivityWithJSMediaQueries();
   
   return (
     <Flex gap={8} direction={viewWidth < 4 ? "column" : "row">
       <Avatar initials="ВК" />
       <Avatar initials="ВК" />
       <Avatar initials="ВК" />
     </Flex>
   );

  В DOM не будет дублирования, но использования JS медиа выражений в рантайме ведёт к ошибках гидарции при использовании SSR.

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

Мы хотим полностью переработать систему адаптивности и перейти полностью к mobile-first подходу, это позволит:

• Упростить работу с адаптивными свойствами компонентов;
• Избежать дублирования кода;
• Сделать решение SSR-friendly;
• Обеспечить читаемость и поддерживаемость кода.

Цель этой дискуссии - определить наиболее удобный API для управления свойствами, которые должны быть завязаны на адаптивность.

Для начала мы хотим поддержать изменения в некоторых компонентах раскладки:

• Flex – адаптивными будем считать свойства: direction, gap, noWrap, align, justify, reverse (текущий margin под вопросом);
• Flex.Item – адаптивными будем считать свойства: flex, alignSelf, flexBasis;
• SimpleGrid – адаптивными будем считать свойства: align, columns, gap, minColWidth (текущий margin под вопросом);
• Separator – адаптивными будем считать свойства: size, padding, direction, align;
• Spacing – адаптивными будем считать свойства: size.

Warning

Пока перебивать брейкпоинты возможности не будет. Планируем это продумать в следующей итерации.
На данном этапе как минимум попробуем расширить их количество.

1️⃣ Вариант 1

Имя брейкпоинта	Значение брейкпоинта
initial	0px
xs	520px
s	768px
m	1024px
l	1280px
xl	1640px

• ✅ Краткость – удобно писать в коде (меньше символов).
• ✅ Универсальность – подходит для любых проектов, не привязано к конкретным устройствам.
• ✅ Гибкость – позволит в будущем без проблем добавить возможность переопределять брейкпоинты.
• ❌ Абстрактность – без документации сложно понять, что означает m или l.

Пример кода

{/* Начиная с брейкпоинта `s` (с 768px) свойство `direction` равно `"row"`, до брейкпоинта `s` (меньше 768px) - свойство `direction` равно `"column"`. */}
<Flex direction={{ initial: "column", s: "row" }} gap="m">
  <Avatar size={48} src="#" initials="ПР" gradientColor="orange" />
  <Avatar size={48} src="#" initials="ИВ" gradientColor="yellow" />
  <Avatar size={48} src="#" initials="ЕТ" gradientColor="violet" />
</Flex>

{/* Тоже самое на примере gap */}
<Flex gap={{ s: "m"  }}>
  <Avatar size={48} src="#" initials="ПР" gradientColor="orange" />
  <Avatar size={48} src="#" initials="ИВ" gradientColor="yellow" />
  <Avatar size={48} src="#" initials="ЕТ" gradientColor="violet" />
</Flex>

2️⃣ Вариант 2

Имя брейкпоинта	Значение брейкпоинта
initial	0px
mobile	520px
smallTablet	768px
tablet	1024px
laptop	1280px
desktop	1640px

• ✅ Семантичность – сразу ясно, для каких устройств предназначен брейкпоинт.
• ❌ Привязка к устройствам – если дизайн не привязан к конкретным устройствам, имена могут вводить в заблуждение.
• ❌ Менее гибкий – если дизайн изменится или появится дополнительный брейкпоинт, имена могут стать неактуальными.
• ❌ Длинные названия – больше символов в коде.

Пример кода

{/* Начиная с брейкпоинта `smallTablet` (с 768px) свойство `direction` равно `"row"`, до брейкпоинта `smallTablet` (меньше 768px) - свойство `direction` равно `"column"`.  */}
<Flex direction={{ initial: "column", smallTablet: "row" }} gap="m">
  <Avatar size={48} src="#" initials="ПР" gradientColor="orange" />
  <Avatar size={48} src="#" initials="ИВ" gradientColor="yellow" />
  <Avatar size={48} src="#" initials="ЕТ" gradientColor="violet" />
</Flex>

{/* Тоже самое на примере gap */}
<Flex gap={{ smallTablet: "m" }}>
  <Avatar size={48} src="#" initials="ПР" gradientColor="orange" />
  <Avatar size={48} src="#" initials="ИВ" gradientColor="yellow" />
  <Avatar size={48} src="#" initials="ЕТ" gradientColor="violet" />
</Flex>

Референсы

• MUI https://mui.com/material-ui/customization/breakpoints/#default-breakpoints
• Radix UI https://www.radix-ui.com/themes/docs/theme/breakpoints
• Mantine UI https://mantine.dev/styles/responsive/#configure-breakpoints
• Chakra UI https://chakra-ui.com/docs/theming/breakpoints
• Gravity UI https://preview.gravity-ui.com/uikit/?path=/docs/components-layout--docs#screen-sizes

---

[inomdzhon]

• см. [Feature]: Сделать свойства компонентов раскладки адаптивными #8932