Перейти к основному содержимому

Компоненты design-системы

Роль компонентов​

Компоненты design-системы — это единый слой UI, через который приложение получает базовые паттерны (кнопки, поля, модалки, таблицы, уведомления).

Цель — одинаковое поведение, внешний вид и доступность во всех продуктах.

Базовые правила​

MUST​

  • Использовать компоненты design-системы для базовых UI-паттернов.
  • Визуальные параметры компонентов управляются токенами.
  • Компоненты не содержат продуктовой логики.

SHOULD​

  • Расширять поведение через публичные props или slots, а не через форки.
  • Иметь документированные варианты (size, intent, state).

FORBIDDEN​

  • Копировать код компонентов в продукт.
  • Делать локальные "версии" кнопок/полей без причины.

Границы ответственности​

Design-система​

  • визуальный стиль
  • доступность и клавиатурная навигация
  • базовые состояния (default/hover/disabled/loading)

Продукт​

  • бизнес-логика и данные
  • композиция компонентов для конкретного сценария

Примеры​

✅ Хорошо

<Button variant="primary" size="m" />
<TextInput label="Email" />

❌ Плохо

<button className="primary">Submit</button>
<input className="input" placeholder="Email" />

Расширение и вариативность​

MUST​

  • Новые варианты оформляются через токены и публичные пропсы.
  • Нейминг вариантов следует смыслу: primary, danger, ghost, success.

FORBIDDEN​

  • Добавлять варианты с привязкой к конкретному экрану (promo, landing, checkout-v2).

Процедуры контроля (Code Review)​

Ревьюер должен убедиться, что:​

  • используются компоненты design-системы вместо локальных копий
  • визуальные параметры не задаются напрямую в продукте
  • новые варианты оформлены через токены и публичный API