Гранат: релизы января

Обновления от дизайн-системы: дизайн, app и web.

Design: App Components

Nav Bar

Вы просили! И это случилось. Говорим «до свидания» старому Nav Bar в 1212 вариантов. 

Предлагаем на замену новый, облегченный Nav Bar 2.0 🎉

Пересобрали компонент, сохранив все типы, при этом значительно уменьшили его вес. Поправили баг со сбросом заголовка. Компонент собран полностью на переменных из библиотеки Variables — наша вторая важная новость.

Новая библиотека Variables

Мы плавно начали переводить цветовые стили Base компонентов на переменные из библиотеки Variables. 

Стили в Variables ничем не отличаются от стилей Base, но данный переход позволит в один клик менять в ваших макетах светлую тему на темную, и наоборот. 

Важно! На сегодняшний день библиотека содержит только переменные Color. Постепенно будут добавляться переменные другого типа. Для инстансов компонентов Granat запрещено вручную переназначать стили из Base на переменные Variables. Дождитесь обновления родительского компонента, чтобы не получить технические проблемы в будущем. Локальные собственные компоненты можно перевести на переменные самостоятельно уже сейчас. Привязывая коллекцию к слою, выбирайте коллекцию Theme, чтобы смена тем и брендов работала корректно.

Для переключения темы, необходимо выделить сначала макет или компонент, а затем, справа, в Layers изменить в Theme — Light на Dark.

Первые компоненты, которых затронули эти изменения — Avatar, Counter, Icon Button, Tabs, Search, Nav Bar.

Counter

Добавили размер 16 Small.

Bottom Button 2.0

Обновили Background с Modal на Bar, удалили тень, добавили эффект Blur 40.

Selection Controls

Обновили токен с Brand/MTS Red на Controls/Primary Active. Визуально ничего не изменилось, так как в Granat эти токены одинакового цвета.

Cell 

Заменили ресурс с Badge на новый с корректными скруглениями.

Design: Icons

Добавлен новый блок «Internal Products» c 80-ю иконками для внутренних продуктов.

Добавлены новые иконки в следующие блоки: 

• Arrows — 4 иконки;
• Finances — 3 иконки;
• Communications — 2 иконки;
• Actions — 9 иконок;
• Objects — 16 иконок;
• Social Networks — 1 иконка.

Добавлены продуктовые иконки: Авто, Авто ОС, Авто Мобайл, Навигатор, Exolve. 

Добавлены логотипы: Авто, Авто ОС, Навигатор, Exolve. 

Заменили текст в логотипе «МТС Музыка» с английского на русский язык.

Ecosystem Modules

Добавлены новые компоненты: Payment Methods Mark, МТС Premium Button, МТС Premium Button w Counter, Standalone Mark. Применение описано в спецификациях компонентов.

Другие новости в дизайне

Обновили обложки библиотек в Figma.

Запустили опрос в коммьюнити, чтобы собрать потребности от продуктов и сформировать план на 2024 год. 

Показали итоги года команды дизайн-системы.

DEV

iOS

[0.1.0] - 25.01.2024]

Added

• Появилась возможность доступа к иконке через сгенерированный инстанс ассета (пример в Readme)

[3.21.1] - 26.01.2024

Updated

• MTSButton/MTSButtonIcon - цвет фона brand изменен на controlPrimaryActive[!321]

Android

Granat 2.2.6 - 22.01.2024

Updated

• Button Compose 1.7.3 – убрана обработка кликов в Loading состоянии
• Calendar 2.1.1 – добавление шины с эвентами календаря для внешней аналитики команд
• Calendar Compose 2.1.1 – добавление шины с эвентами календаря для внешней аналитики команд
• CheckBox 2.13.0 – добавление Subtitle в Checkbox. Добавление ERROR состояний CheckBoxGroup, CheckBox
• Dividers 2.4.4 – фикс вёрстки в PrimaryTitle при динамичном наполнении контента. Добавление Saved State для PrimaryTitle и SecondaryTitle.
• Modal Page 2.3.1 – правка аннотации метода MTSModalPage.backgroundColor на корректную (c ColorInt на ColorRes)
• Text List 1.6.0 – исправление поведения при наличии Subtitle у элемента

Web

Updated

• Улучшена поддержка SSR в компонентах Carousel, Dropdown, Input-Group, Modal-Page, Root и Theme
• Исправления минорных багов в Carousel, Dropdown-Select