VKCOM/VKUI

[EPIC]: Использовать vkui-токены для системы расстояний внутри компонентов VKUI

mendrew opened this issue · 1 comments

mendrew commented

Discussed in #5928

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

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

Описание

Для перехода на систему расстояний нам надо:

  • обновить и расширить токены в https://github.com/VKCOM/vkui-tokens, отвечающие за расстояния, это токены начинающиеся на spacingSize*
    Мы определились со значениями для токенов.

    Токен Размер
    spacingSize2Xs 2px
    spacingSizeXs 4px
    spacingSizeS 6px
    spacingSizeM 8px
    spacingSizeL 10px
    spacingSizeXL 12px
    spacingSize2Xl 16px
    spacingSize3Xl 20px
    spacingSize4Xl 24px
    Список основан на относительном подсчёте количества размером встречающихся в коде VKUI

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

  • Использовать токены системы расстояний в остальных компонентах, заменив ими числовые константы.

mendrew commented

Потребовались ещё изменения в токенах так что ждём VKCOM/vkui-tokens#859 и нового релиза.