Паттерны отступов в списках (Basic List)

Авторы: Надежда Зуева , Алёна Чибичик

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

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

Техническая сборка для Bottom Sheet

В Slot компонента Bottom sheet добавляем Basic List в необходимом количестве строк

Правила и ограничения сборки Basic List Primary в Bottom sheet

Для списка, у которого параметр Style = Primary, внутренние вертикальные отступы(paddings) у каждого элемента должны быть по 12px (токен space-s), максимальное количество элементов без скролла — 8, для иконок используем контейнер *Icon Container, сама иконка по умолчанию должна быть с заливкой (параметр Variant = Solid) токен цвета fg-brand-primary

Правила и ограничения сборки Basic List Secondary в Bottom sheet

Для списка, у которого параметр Style = Secondary, отступы между элементами списка должны быть по 12px (токен space-s), для иконок используем контейнер *Icon Container, сама иконка по умолчанию должна быть с заливкой (параметр Variant = Solid) токен цвета fg-brand-primary.

В случае необходимости размещения текста в 2 колонки можно заменить компонент Basic List на Text Line

Как выбрать стиль списка

В большинстве случаев для информации в списочной форме используйте Primary Basic List. К таким спискам относятся, например: детализация, реквизиты, условия и прочее.

Списки Secondary используйте для выделения какой-либо информации в паре с дополнительным контентом.

Техническая сборка для Full Page

Примеры использования

Использование контролов (кнопки, ссылки)

Ещё раз про иконки

Используйте иконки без подложки, за исключением степ бай степ