CSS переменные вместо компонента Spacing

[Kgnx7]

Сейчас в uikit (насколько я понимаю) нет консистентной системы расстояний как например в MUI, из-за чего когда нужно задать стандартный отступ 8px приходится либо писать руками, либо использовать компонент Spacing (который добавляет лишний div) и принимает любое число.

В связи с этим если будет глобальный редизайн (к примеру увеличением расстояний между элементами) то придется руками ходить и менять все прописанные значения вместо того чтобы поправить переменную uikit-spacing-default или тип того

[some-dudes-work-account]

Тоже столкнулся с этим. На самом деле под это даже есть токены

spacingSizeXs (4px) Стандартный токен размера xs для отступов
spacingSizeS (6) Стандартный токен размера s для отступов
spacingSizeM (8) Стандартный токен размера m для отступов
spacingSizeL (10) Стандартный токен размера l для отступов
spacingSizeXl (12) Стандартный токен размера xl для отступов

В своей кодбазе я реализовал компонент списка, который через display: grid; эти отступы подставляет между дочерними элементами через gap, и плюс ещё немного CSS чтобы элементы не выходили по ширине за пределы родителя.

На мой взгляд компоненту Spacing не хватает возможности наравне с числами принимать строковые значения "xs" | "s" | "m" | "l" | "xl" в проп size с дефолтом в "m" вместо числовых 8. Преценденты использования строковых size уже есть в кнопках, так что это в какой-то степени уже ожидаемо

[mendrew]

Всем привет!

Спасибо за обсуждение.
Очень хорошая идея иметь консистентную систему расстояний, это правда было бы очень удобно.
У нас действительно уже есть часть токенов, которые мы могли бы использовать в этой системе, важное замечание.

Мы с командой обсудили и пришли к выводу что такая система будет очень кстати.

Мы решили двигаться в этом направлении.

1. Начнем мы, пожалуй, с расширения имеющихся токенов, чтобы покрыть все наши нужды.
   Ещё не до конца решили какого количества токенов нам хватит и стоит ли редко используемые размеры получать вычисляя их из уже имеющихся.

Вот примерный список числовых значений (которые возможно заменить токенами), которые мы используем в коде VKUI, и как часто они встречаются

size    | number of occurrences
----------------------------
2px     |       76  
4px     |       74  
6px     |       44  
8px     |      116 
10px    |       26 l
12px    |       90 
14px    |       15 
16px    |       43
18px    |       11  
20px    |       15  
22px    |        8   
24px    |       19  

2. Очень понравилась идея дать Spacing компоненту возможность наравне с числами принимать строковые значение. Займемся, спасибо!

3. Далее будем обновлять кодовую базу, чтобы использовать токены, вместо явных чисел. В том же направлении будет двигаться и дизайн-система в Figma.
   В нашей дизайн-системе уже существует список из отступов соответствующих заведенным токенам. Но он пока что мало используется.

Пока что результатом будет повсеместное использование токенов для отступов и прочего и Spacing , который будет принимать числовые значения.

[Kgnx7]

Еще накину, что было бы круто избавиться от div в Spacing. Как вариант сделать его HOC, который прокидывает className, но тут, к сожалению, сразу всплывает куча корнер кейсов, когда это работать не будет (