Гранат: Библиотека экомодулей и другие обновления

Рассказываем про обновления от команд ДС и новую библиотеку. С неё и начнем:

Ecosystem Modules

Совместно с командой экосистемных модулей запускаем новую библиотеку Ecosystem Modules. Первыми компонентами стали экосистемные кнопки оплаты и входа. Постепенно библиотека будет пополняться новыми компонентами модулей Pay, ID и других.

Знакомим с командой:

Олеся Зимина — арт-директор экосистемных модулей МТС.
Артём Разиньков — продуктовый дизайнер МТС Pay.
София Рогозина — продуктовый дизайнер МТС ID.

Важно:

Цветовые токены, используемые в этой библиотеке, относятся к новой библиотеке ДС Variables. Ее официальный релиз запланирован на Q1. 

Для того, чтобы изменить тему в компонентах библиотеки Ecosystem Modules не требуется ручной перелинковки стилей. Воспользуйтесь встроенным переключением темы от Figma (контрол справа от Layer).

App Components

Card Background

Замена цвета в варианте Default No Shadow с Primary Elevated на Secondary Elevated для контрастности в темной теме.

Dropdowns

Добавлено состояние «Error Selected» в компоненты «Dropdown» и «Dropdown Lable Inside».

Icons

Добавлены новые иконки: Baby, Explicit, Star Circle, Upload Circle, Premium. Выражаем благодарность дизайнерам продуктов за вклад в развитие библиотеки.

Обновления от команд разработки

Объявление

Мы начинаем отключение серверов Нексуса и ГитЛаба Дизайн-Системы:
- https://nexus.design.mts.ru/
- https://git.design.mts.ru/

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

Актуальные репозитории
Web: https://gitlab.services.mts.ru/mobile-sdk/web/mtsds
iOS: https://gitlab.services.mts.ru/mobile-sdk/ios/mtsds
Android: https://gitlab.services.mts.ru/mobile-sdk/android/mtsds

Инструкции по подключению
Web: https://gitlab.services.mts.ru/mobile-sdk/web/mtsds/-/blob/develop/NPM-REGISTRY.md
iOS: https://gitlab.services.mts.ru/mobile-sdk/ios/mtsds/-/blob/master/README.md
Android: https://gitlab.services.mts.ru/mobile-sdk/android/mtsds/-/blob/develop/README.md

iOS

## [4.0.0-rc.19] - 27.11.2023

Добавлено

• MTSTableViewCell — к левой части добавлена возможность добавить обычную картинку размером 52х52 [!271]
• MTSTableViewCell — к средней части добавлена возможность добавлять тайтлы с настройками цвета и шрифтов [!271]
• MTSButtonAlternative — добавлен компонент [!272]

Обновлено

• MTSButton, MTSButtonIcon — добавлена alpha к состоянию disabled [!273]
• MTSDropdown — добавлен тэг «Необязательно» [!283]
• MTSCard — изменен цвет фона на backgroundSecondaryElevated в состоянии defaultnoShadow [!290]
• MTSSearchBar — компонент открыт для использования и расширения [!280]
• MTSBannerPrimary — добавлены accessibilityIdentifier для кнопок у баннера [#126]
• MTSCard — добавлена возможность отключения анимации нажатия [!293]

Исправлено

• MTSTextArea — при изменении сабтайтла фокус с поля ввода не слетает [!287]

Android

Granat 2.2.3

Добавлено

• Button 2.9.0 — добавлен IconButtonAlternative
• Button Compose 1.7.0 — добавлен IconButtonAlternative

Обновлено

• Card 2.3.0 — замена Background Primary Elevated на Background Secondary Elevated у состояний White и WhiteNoShadow
• Modal Card 2.6.0 — кастомизация содержимого карточек
• Typography 2.6.0 — добавление DP-стилей для ММ

Исправлено

• Input 1.4.4 — фикс некорректного отображения клавиатуры на некоторых устройствах
• Navbar 1.4.2  — фикс Double Click при нажатии на элементы компонента
• Toast 2.1.2 — центрирование иконки при отсутствии заголовка
• Tooltip 2.2.0 — фикс анимации появления коротких тултипов

Web

React 1/3. Релиз от 20.11.2023г. 

Добавлено

• Поддержка доступности в новых и существующих компонентах:  Avatar, Badge, Button, Checkbox, Chip, Counter, Divider, Radio, Spinner, Switch, Tabs, Textarea, Tooltip.
• Обязательный корневой компонент Root. Он необходим для правильного функционирования компонентов Дизайн-Системы. Следует размещать как можно ближе к корню приложения.
  import '@mts-ds/granat-react-root/colors.css';
  import '@mts-ds/granat-react-root/fonts.css';
  import { MtsDsRoot } from '@mts-ds/granat-react-root';
  
  <MtsDsRoot themeName="light">
  ...
  </MtsDsRoot>
  
  Так же обязательно следует импортировать файлы стилей colors.css и fonts.css в приложение.
  
  Теперь можно удалить из своего приложения явные зависимости @mts-ds/core. Напомним, что @mts-ds/base и @mts-ds/granat так же не требуется явно указывать в своих зависимостях. Так же в своих исходных кодах нужно удалить импорты из пакета @mts-ds/core и удалить переключение темы!
• Новые компоненты: Banner, Bulleted-List, Cell, Context-Menu, Divider, Dropdown, Dropdown-Field, Dropdown-Select, Modal-Card, Modal-Page, Numbered-List, Range, Root, Slider, TabBar, Theme.
• Добавлена поддержка Client Components. Минимальная версия Next.js для работы с Client Components: 13.2. Минимальная версия без Client Components не изменилась.

Удалено

Удалён логгер во всех компонентах.