В предыдущей части, я пытался разобрать с проблему сокращения контракта в SDUI приложении, а также поговорить о контекстах — одном из наследуемых свойств нашей платформы для дизайна, которое призвано решить эту проблему. Теперь же, настала очередь ещё одной группы наследуемых свойств, которые кардинально меняют подход к работе с состояниями и отвечают за активность виджетов.
Но сначала хотелось бы отступить чуть назад. К предыдущей части была обратная связь, что слишком сложно и не всё достаточно полно удалось раскрыть, поэтому давайте сделаем ещё сложнее 😁
Из чего состоят виджеты платформы
Для начала сразу определимся, что типичные атомарные структуры, такие как атом, молекула и организм, мы оставим для дизайн-системы. Сейчас мы поговорим о составе виджетов в контексте нашей дизайн-платформы. На основе этих виджетов уже можно создать более-менее традиционную дизайн-систему с кнопками и панелями. Наша платформа не использует такие термины, и понятия “кнопка” еще не существует на данном уровне абстракции.
А что есть? А есть платформенные виджеты. В нашем случае есть четыре категории таких виджетов:
- Примитивы - Супер простые нефункциональные виджеты. Сюда входят вывод текста, иконки, картинки, свитчер слайдер и т. д.
- WidgetWrapper - это по сути аналог frame из фигмы. Умеет как верстать виджеты внутри себя, задавать отступы, gap и т. п., так и окрашивать себе фон, обводку, менять скругления угром, циправлять собственным позиционированием.
- Пресеты на клиенте. Это те сущности, которые по каким-то причинам нельзя «собрать» на виджетах из пункта 1 и 2. Например контейнеры всплывающих окон, карта, списки и сетки, контейнер webview.
- Экран - контейнер со спец. слотами, всегда является корневым для верстки экрана приложения.
Важные особенности:
— За взаимодействие всегда отвечает WidgetWrapper. Он поддерживает различные типы взаимодействия, такие как: “статичный” (без взаимодействия), “нажми на меня” (фактически превращает в кнопку), “выдели меня” (checkbox), “выбери один из” (radio).
— Виджеты из 1й группы не являются интерактивными сами по себе. Например, чтобы тот же переключатель мог переключаться, его необходимо обязательно поместить в WidgetWrapper с подходящим типом интерактивности.
— Визуализация взаимодействия также осуществляется WidgetWrapper, причем универсальным методом (пока это наложение цвета). Т. е. далее в виджетах нам не нужно прорисовывать hover, press и disable, всё делается платформой автоматически.
— Все свойства настраиваются прямо в фигме. Верстка выгружается в приложение автоматически. Разработчику остается только приделать бизнес-логику к готовым шаблонам.
Свойство active
Важно запомнить, что это не то же самое, что и одноименные псевдокласс и свойство в CSS. В этом случае имеется в виду абстрактная “активность”. Активный виджет может быть интерпретирован по-разному: выбранный checkbox, активная вкладка, кнопка фильтров с активными фильтрами..
Как это работает
У WidgetWrapper и примитивов есть свойство active, которое может принимать значения true или false. Также существует логическое свойство active-inherit, которое, если установлено в true, делает свойство active данного виджета наследуемым от родителя.
У свойства active есть зависимые свойства. Например, active-background у враппера, active-icon у примитива IconBox и т.п. Даже есть active-context (привет первой части).
Тут также важно сказать, что хоть дизайнер и настраивает все эти свойства, active управляется не из макета (верстки) а бизнес-логикой (с сервера).
Примеры
Ну что, достаточно теории, давайте посмотрим, как всё это работает на практике.
Пример1. Кнопка
Чтобы собрать кнопку, нам потребуется WidgetWrapper, виджет иконки и виджет текста. Собираем, настраиваем параметры, ставим тип интерактивности — press и получаем кнопку.
Теперь, допустим, мы хотим из этого шаблона получить зеленую кнопку «Фильтры». Меняем текст и иконку, и выбираем нужный контекст (context=green).
А теперь последний штрих — настроим активные и обычные значения токенов и выберем активную иконку. И привяжем active к состоянию есть\нет активные фильтры.
Пример2. Checkbox & Radio button
Структура очень похожая на кнопку. Также враппер, иконка, текст. Но тип интерактивности уже выставить нужно check. Так с каждым нажатием на враппер будет переключаться собственное свойство active.
Получаем шаблон чекбокса.
Но теперь нам хочется чтобы активный чекбокс был акцентным цветом. Для этого нужно поменять active-context у виджета иконки на green-accent. Получаем вот такое поведение.
Чтобы чекбокс превратился в Radio button нужно поменять иконку на подходящую а также изменить тип интерактивности на radio. Теперь если, скажем, три таких виджета объединить во враппер, они будут работать как привычная всем группа радио-кнопок.
Пример3. Segment control.
Чтобы сделать такую панель, нам просто нужно использовать знания из прошлых примеров. Собираем сегмент из враппера, иконки и текста.
Всё как в кнопке, только с чуть другими стилями. И тип взаимодействия — radio. Оборачиваем в ещё один враппер, чтобы сегменты переключались в рамках группы, и получаем необходимый виджет. А переключая контексты, можем раскрашивать как нам нравится.
Неактивность (disable)
Хотелось бы упомянуть, как в нашей системе реализовано свойство disable. Это отдельный наследуемый параметр, с несколько особенной логикой наследования. При установке параметра disable=true блокируется интерактивность у выбранного виджета и всех его «детей». Однако, значение их собственного свойства disable не перезаписывается. А для визуального отображения используется специальный контекст — inactive.
Читайте больше о развитии дизайн-платформы ВкусВилл, SDUI и не только на моём телеграм-канале:
