Дизайн-система — страница 3

Материалы для проекта «Дизайн-система» объединяют несколько направлений. Начните с разделов ниже.

Материалы

• Диалог с нативным управлением фокусом

  Согласовать showModal, Escape, закрытие и управляемое состояние React.

• Загрузка и предотвращение повторного действия

  Разделить состояние операции, доступность кнопки и индикацию ожидания.

• Ошибки, пустые результаты и сообщения статуса

  Сделать сообщения с семантикой status или alert и конкретным действием пользователя.

• Светлая и тёмная темы через декоратор

  Переопределить семантические токены в области истории и добавить переключатель.

• Доступность компонентов и ручная проверка

  Объяснить клавиатурные маршруты и подготовить addon-a11y в ручном режиме.

• Документация API и составной пример формы

  Добавить Autodocs, описание ограничений и форму из компонентов «Набора».

• Публичные экспорты и версии библиотеки

  Определить API пакета, CSS-экспорт, совместимость и правила миграции потребителя.

• Современные нативные интерфейсы: учебный каталог

  Четырнадцать последовательных уроков с полными исходниками каждого этапа.

• Каталог как основа прогрессивного улучшения

  Задать доступный каталог со ссылками и отдельным слоем улучшений.

• Карточка урока в нативном диалоге

  Открывать дополнительную карточку через showModal и возвращать фокус.

• Всплывающая справка без управления слоями

  Добавить немодальный popover с доступной текстовой альтернативой.

• Привязка справки к кнопке через CSS

  Разместить popover рядом с anchor без вычисления координат JavaScript.

• Запасные позиции у края экрана

  Задать flip-block и flip-inline и ограничить размер панели.

• Плавная смена фильтра с View Transitions

  Обновлять список внутри одного документа с обходом неподдерживаемого API.

• Переходы между страницами каталога

  Включить переходы между двумя документами одного происхождения.

• Полоса чтения с прокруткой документа

  Создать декоративный индикатор на scroll timeline без scroll-обработчика.

• Появление карточек на view timeline

  Связать небольшое изменение карточки с её видимостью, сохранив базовое содержимое.

• Согласование движения и пользовательских настроек

  Отключить необязательные эффекты в CSS и JavaScript при reduced motion.

• Плотность карточек через запросы стиля

  Передавать семантическую плотность через custom property и style query.

• Типизированные атрибуты для визуальной шкалы

  Использовать attr с числовым типом только для дополнительного отображения длительности.

• Контрастный текст и цветовой fallback

  Добавить contrast-color как улучшение поверх заранее выбранной пары цветов.

• Передача интерфейса с матрицей возможностей

  Зафиксировать клавиатурные маршруты, деградацию и бюджет ресурсов.