Наследуемые свойства в SDUI платформе ВкусВилл. Часть 2: Активность

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

Но сначала хотелось бы отступить чуть назад. После выхода предыдущей части я получил обратную связь, что тема слишком сложна и не всё достаточно полно удалось раскрыть, поэтому давайте сделаем ещё сложнее 😁

Для начала сразу определимся, что типичные атомарные структуры, такие как атом, молекула и организм, мы оставим для дизайн-системы. Сейчас мы поговорим о составе виджетов в контексте нашей дизайн-платформы. На основе этих виджетов уже можно создать более-менее традиционную дизайн-систему с кнопками и панелями. Наша платформа не использует такие термины, и понятия “кнопка” еще не существует на данном уровне абстракции.

А что есть? А есть платформенные виджеты. В нашем случае существует четыре категории таких виджетов:

1. Примитивы — Суперпростые нефункциональные виджеты. Сюда входят вывод текста, иконки, картинки, свитчер слайдер и т. д.
2. WidgetWrapper — это по сути аналог frame из фигмы. Умеет как верстать виджеты внутри себя, задавать отступы, gap и т. п., так и окрашивать себе фон, обводку, менять скругления углов, управлять собственным позиционированием.
3. Пресеты на клиенте. Это те сущности, которые по каким-то причинам нельзя «собрать» на виджетах из пункта 1 и 2. Например, контейнеры всплывающих окон, карта, списки и сетки, контейнер webview.
4. Экран — контейнер со спец. слотами, всегда является корневым для верстки экрана приложения.

Важные особенности:

— За взаимодействие всегда отвечает WidgetWrapper. Он поддерживает различные типы взаимодействия, такие как: “статичный” (без взаимодействия), “нажми на меня” (фактически превращает в кнопку), “выдели меня” (checkbox), “выбери один из” (radio).

— Виджеты из 1-й группы не являются интерактивными сами по себе. Например, чтобы тот же переключатель мог переключаться, его необходимо обязательно поместить в WidgetWrapper с подходящим типом интерактивности.

— Визуализация взаимодействия также осуществляется WidgetWrapper, причем универсальным методом (пока это наложение цвета). Т. е. далее в виджетах нам не нужно прорисовывать hover, press и disable, всё делается платформой автоматически.

— Все свойства настраиваются прямо в фигме. Верстка выгружается в приложение автоматически. Разработчику остается только приделать бизнес-логику к готовым шаблонам.

Важно запомнить, что это не то же самое, что и одноименные псевдокласс и свойство в 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 & Radiobutton

Структура очень похожая на кнопку. Также враппер, иконка, текст. Но тип интерактивности уже выставить нужно check. Так с каждым нажатием на враппер будет переключаться собственное свойство active.

Получаем шаблон чекбокса.

Но теперь нам хочется, чтобы активный чекбокс был акцентным цветом. Для этого нужно поменять active-context у виджета иконки на green-accent. Получаем вот такое поведение.

Чтобы чекбокс превратился в Radiobutton, нужно поменять иконку на подходящую а также изменить тип интерактивности на radio. Теперь если, скажем, три таких виджета объединить во враппер, они будут работать как привычная всем группа радио-кнопок.

Пример 3. Segment control.

Чтобы сделать такую панель, нам просто нужно использовать знания из прошлых примеров. Собираем сегмент из враппера, иконки и текста.

Всё как в кнопке, только с чуть другими стилями. И тип взаимодействия — radio. Оборачиваем в ещё один враппер, чтобы сегменты переключались в рамках группы, и получаем необходимый виджет. А переключая контексты, можем раскрашивать, как нам нравится.

Хотелось бы упомянуть, как в нашей системе реализовано свойство disable. Это отдельный наследуемый параметр, с несколько особенной логикой наследования. При установке параметра disable=true блокируется интерактивность у выбранного виджета и всех его «детей». Однако, значение их собственного свойства disable не перезаписывается. А для визуального отображения используется специальный контекст — inactive.

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