Всем привет!

Можно больше кастомизации для разработчиков? Можно нормальные CSS-классы, а не рандомные стайледы? Можно фокусы на компоненты? Можно вас из Феникса тянуть?

Можно.

Мы всё переписали и представляем вашему вниманию Дизайн-систему Ростелекома 2-го поколения (Атомаро).

Это полностью новая версия дизайн-системы на новой архитектуре. Дизайн всех компонентов описан дизайн-токенами (СSS-переменными). Теперь вы можете легко изменить внешний вид компонентов, если дизайнер закастомил. Или создать свою тему и полностью поменять дизайн.

Что еще изменилось?

- Обновился визуальный язык и UI, дополнились цветовые палитры и типографика. Автоматический тёмный режим для всего интерфейса (при корректном применении дизайн-токенов в проекте)
- Стили теперь отдельно. Единый bundle.css и один источник правды для наших ДС на разных фреймворках
- Многие компоненты переработали с нуля, другие сильно отрефачили. Добавили больше областей в компонентах, в которые можно прокидывать свою вёрстку (рендер-функции)
- Переработали API, стандартизировали пропсы для всех компонентов
- Возможность пересобирать, дополнять стили (variant, size, breakpoints) с помощью собственной cli (скоро)
- Начали прорабатывать доступность — добавили для всех компонентов состояние focus

Где посмотреть

- На сайте design.rt.ru появилась переключалка между поколениями, дизайн-гайды для 2-го поколения обновлены
- Сторибук 2-го поколения с инструкциями по подключению React
- Дизайн-библиотека 2-го поколения в Figma

Как перейти на второе поколение? Что будет с первым?

Бесшовный переход невозможен из-за разницы в архитектурах. Мы рекомендуем новые проекты начинать со вторым поколением. Небольшие текущие проекты можно отрефакторить под второе поколение.

Большие текущие проекты, когда нет ресурса на рефакторинг, лучше оставить на первом поколении системы. Первое поколение будет поддерживаться, обнаруженные баги будут фикситься.

Инструмент и инструкции к нему продолжаем совершенствовать каждый день. Будем рады любой обратной связи (баги, пожелания и т.д.). Наша цель создавать и совершенствовать инструменты для разработчиков и дизайнеров, сближая их 🫶

p.s. библиотека на Vue.js на подходе!

🌻 Релиз 7.11.0 (1-е поколение)

Алоха! Мы продолжаем исправлять ошибки

Изменения:

— Input/InputAmount. Теперь, при передаче параметра autoFocus компоненту, стили для фокуса корректно отображаются на первом рендере

— InputDate. Исправлена ошибка, из-за которой в onChange при isRange = true и невалидной второй дате возвращалось прошлое значение второго аргумента

— Switch. Убран отступ справа от переключателя, когда нет лейбла

— Toast/InlineNotification. Добавлен параметр style

— Tooltip/Popover. Добавлен новый параметр usePopperProps, который позволяет более точно настроить поведение всплывающего элемента (например, выставить preventOverflow, чтобы тултип смещался при нехватке места в поле видимости)

— Multiselect/Select. Добавлен параметр isSelectedTextColored

— Select. Добавлена отмена выбора значения

— Multiselect/Select. Теперь выпадающее меню появляется при вводе значения, когда поле ввода находится в фокусе, если меню не было открыто с помощью клика по компоненту

📚 Релиз 1.1.0 (2-е поколение, React)

Алоха! Большое обновление новой библиотеки

Изменения:

— Input/Select/Multiselect: Параметр fixedLabel теперь работает корректно

— InputNumberStepper: Исправлен цвет подсказки в состоянии ошибки

— InputDate/Select: Исправлено положение выпадающего меню в некоторых позициях

— Select: Теперь при повторном нажатии на выбранную опцию значение в поле ввода стирается и в onChange возвращается пустая строка

— Breadcrumbs/Select/Multiselect: Добавлен параметр isSelectedItemColored

— Multiselect: Теперь при autocomplete = false выпадающее меню закрывается при повторном клике по полю ввода

— Multiselect: Теперь теги в поле ввода нельзя удалить в состоянии disabled

— DropdownMenu: Добавлены свойства height: fit-content и width: max-content для рут-элемента

— ToastNotification: Исправлено отображение уведомлений на мобильных разрешениях

— ToastNotification: Теперь можно задать уникальный id для компонента. Двух и более нотификаций с одинаковым id существовать на странице не может

— PickerDate/InputDate: Добавлен новый параметр defaultShownDate , который задаёт дату, на которой пикер отобразит календарь при открытии

— InputDate: Исправлена ошибка из-за которой в onChange при isRange = true и невалидной второй дате возвращалось прошлое значение второго аргумента

— Tabs: Улучшено управление с клавиатуры. Фокус теперь работает корректно

— Textarea: Теперь при включённом autoHeight текст в поле отображается корректно

— Drawer/Modal: Теперь при overlay = false скролл по странице не блокируется. После закрытия компонента не остаётся свойства overflow-y: unset на body

— Во многих компонентах исправлены описания типов

— Много исправлений и улучшений сторибука

📙 Релиз 7.12.0 (1-е поколение, React)

Алоха! Провели работу по улучшению первого поколения

Исправления:

— Multiselect: Добавлена регистронезависимость автокомплита

— Multiselect: Исправлена логика снятия фокуса с поля ввода

— Select: Исправлен баг, из-за которого, при включенном clearable, список открывался не с первого раза

— InputDate: Исправлена ошибка, из-за которой обрезалась последняя цифра года

— InputDate: Теперь дата в поле ввода меняется на ближайшую доступную при редактировании, при условии, что установлены minDate/maxDate

— TabsGroup: Убран параметр iconPosition. Настроить положение иконки можно в TabsItem

— Dropdown/DropdownMenu: Добавлены два новых параметра: rootClassName и rootStyle. Параметры className и style назначаются на само выпадающее меню и могут быть использованы с useInPortal

— Modal/Drawer: Добавлены параметры overlayClassName и overlayStyle для передачи стилей в Overlay

— Drawer: Теперь при overlay = false скролл по странице не блокируется. После закрытия компонента не остаётся свойства overflow-y: unset на body

— ToastProvider: Добавлены параметры className и style для контейнера уведомлений

— Улучшения и исправления в сторибуке

🪲 Релиз 1.2.0 (2-е поколение, React)

Алоха! В эту версию включили ряд изменений для еще более стабильной работы.

Изменения:

— TabsGroup: Убран параметр iconPosition. Настроить положение иконки можно в TabsItem

— DropdownMenu: Исправлена работа и внешний вид компонента при включённом virtualScroll

— DropdownMenu: Добавлено ограничение высоты выпадающего меню

— Tooltip/Popover: Исправлена работа параметра pointerIsCentered

— Tooltip: Теперь дефолтное значение для параметра trigger — hover

— Loader: Добавлен новый вариант — dots

— InputDate: Исправлена ошибка, из-за которой обрезалась последняя цифра года

— InputDate: Теперь дата в поле ввода меняется на ближайшую доступную при редактировании, при условии, что установлены minDate/maxDate

— Select: Добавлен параметр iconPrefix

— Storybook: Добавлен раздел Icons

— Исправления сторибука

❇️ Релиз 1.2.1 (2-е поколение, React)

Алоха! Добавили переход между сторибуками, а также улучшили работу компонентов

Изменения:

— Select: Исправлена логика работы clearable при включённом autocomplete и выбранном значении

— Select: Исправлена работа callback-функции onChange при контролируемом использовании. Теперь onChange не срабатывает при изменении value, только при вводе пользователя. Больше нельзя изменить выбранный элемент при заданном статичном value

— Tooltip/Popover: Всплывающий элемент теперь не находится в DOM-дереве до своего появления

— DropdownMenu: Теперь высота выпадающего меню уменьшается в зависимости от количества опций внутри. Свойство max-height: 280px можно перезаписать, задав css стили по классу dropdown-menu, либо через параметр style. Также рекомендуется выставить высоту при использовании с virtualScroll

— InputPassword: Обновлён пример в сторибуке, положение каретки больше не сбрасывается при взаимодействии с iconSuffix

— Storybook: Добавлен переключатель между разными версиями Дизайн-системы

📎 Релиз 1.3.0 (2-е поколение, React)

Алоха! Обновили пакет с иконками, привели к соответствию описания параметров и поправили несколько багов.

Изменения:

— Select: Исправлена проблема, из-за которой переданное значение не отображалось при асинхронной подгрузке опций

— Drawer/Modal/InlineNotification: Добавлен новый параметр transitionProps, позволяющий настроить анимацию появления/исчезания компонента

— ToastNotification: Добавлены два новых параметра — transitionGroupProps и cssTransitionProps

— ToastNotification: Значение z-index для контейнера уведомлений заменено на токен —atmr-z-index-toast

— Loader: Цвет при type="dots" теперь соответствует дизайну

— Обновление и исправления описания в типах пропсов

— Улучшения и исправления в сторибуке

✏️ Изменения @atomaro/icons 1.0.3:

— Исправлена передача значений в параметры fill и secondaryColor в цветных иконках категорий Alert и Rating

— Значения для дефолтных цветов заменены на соответствующие токены из пакета @atomaro/themes. Цвет иконок не поменялся

🎆 Алоха! Привет-привет! Салют! 🎆

У нас радостная новость для всех, кто ждал дизайн-систему на Vue.js. Вы просили — мы сделали, протестировали и уже опубликовали Vue.js версию дизайн-системы Атомаро (Дизайн-системы Ростелекома) 2-го поколения.

Функциональность элементов системы в React и Vue идентична, те же компоненты, возможности, правила и дизайн-токены. Пакет с CSS-стилями (темы) единый для двух фреймворков. Нейминг некоторых пропсов может отличаться, чтобы следовать привычной логике Vue.js.

Написать новую версию дизайн-системы в короткий срок — большая и сложная задача. Нам помогла новая архитектура Атомаро 2-го поколения, вынесенные отдельно стили. И наши контрибьюторы из команды разработки «Личного кабинета юридического лица». Александр Меркулов, Даниил Галкин, Егор Мальцев, Сергей Чуян — наши герои, спасибо вам за помощь! 🙌

❗️Подключайте дизайн-систему к проектам на Vue.js, пишите нам о своем опыте использования, мы всегда открыты и готовы помочь.

🎄 Релиз 1.4.0 (2-е поколение, React)

Алоха! Предновогоднее обновление с новым переключением тем

✨ atomaro/themes 2.1.0

— Реализовали ссылочную систему для css-переменных

— Добавили описания ко всем токенам в темах

— Добавили классы для каждой темы Ростелекома:

• rostelecom-default-dark.css — .Theme_root_rtk_default_dark

• rostelecom-default-light.css — .Theme_root_rtk_default_light

• rostelecom-purple-dark.css — .Theme_root_rtk_purple_dark

• rostelecom-purple-light.css — .Theme_root_rtk_purple_light

— Инструкция по работе с классами в темах представлена на отдельной странице

✨ atomaro/icons 1.0.4

— Заменили кириллицу в названии иконок EqualiserClear, Speed1x, Speed2x, Speed4x, Speed6x, Speed8x, Cookie

— Убрано предупреждение о неправильном названии атрибута clipRule в консоли

✨ atomaro/ui-kit 1.4.0

— Box: Новый компонент. Служит оберткой для других компонентов, управляя их расположением и обеспечивая консистентность и эффективность в разработке интерфейсов

— BREAKING CHANGE! Stepper: Убран параметр colorScheme. Теперь компонент представлен в двух вариантов — primary и secondary

— Multiselect: Исправлена ситуация, при которой фокус не снимался при повторном нажатии на поле ввода

— Select: Теперь вызов колбеков onBlur и onChange происходит в правильном порядке

— Multiselect: Убраны лишние вызовы onChange при использовании компонента

— Multiselect: Исправлено отображение при включённом virtualScroll

— ToastNotificationsProvider: Теперь можно импортировать по относительному пути из @atomaro/ui-kit

— Обновили документацию и исправили недочёты в сторибуке

⚡️Релиз 7.12.1 (1-е поколение, React)

Алоха! Начинаем неделю с новостей!

Исправления:

— Tooltip: Дефолтное значения для параметра trigger исправлено на hover

— Multiselect/Select: Исправлена проблема с визуальным отображением при clearable = ”true”

— Обновление сторибука

🎄 Релиз 1.1.0 (2-е поколение, Vue)

Хо хо хо! Предновогоднее обновление с новым переключением тем для Vue

✨ atomaro/themes 2.1.0

— Реализовали ссылочную систему для css-переменных

— Добавили описания ко всем токенам в темах

— Добавили классы для каждой темы Ростелекома:

• rostelecom-default-dark.css — .Theme_root_rtk_default_dark

• rostelecom-default-light.css — .Theme_root_rtk_default_light

• rostelecom-purple-dark.css — .Theme_root_rtk_purple_dark

• rostelecom-purple-light.css — .Theme_root_rtk_purple_light

— Инструкция по работе с классами в темах представлена в Сторибуке

✨ atomaro/vue-icons 1.0.1

— Заменили кириллицу в названии иконок EqualiserClear, Speed1x, Speed2x, Speed4x, Speed6x, Speed8x, Cookie

— Убрано предупреждение о неправильном названии атрибута clipRule в консоли

✨ atomaro/vue-ui-kit 1.1.0

— Box: Новый компонент. Служит оберткой для других компонентов, управляя их расположением и обеспечивая консистентность и эффективность в разработке интерфейсов

— Storybook: исправлен баг при котором открывающиеся списки перекрывали таблицу с props

— BREAKING CHANGE! Stepper: Убран параметр colorScheme. Теперь компонент представлен в двух вариантах — primary и secondary

— Multiselect: Исправлена ситуация, при которой фокус не снимался при повторном нажатии на поле ввода

— Multiselect: Исправлено отображение при включённом virtualScroll

📚 Релиз 1.5.0 (2-е поколение, React) и 1.2.0 (Vue)

Алоха! Первый релиз в новом году. Улучшили работу компонентов и добавили новый пропс

📙 atomaro/vue-ui-kit 1.2.0 и atomaro/ui-kit 1.5.0

— Select: добавлен новый prop deselectEnabled, переключающий возможность отмены выбора при повторном клике на опцию

— Modal: Изменены css-стили в компоненте. Убраны статически заданный отступ в контейнере и скругление

— Drawer, Modal, Floating Action Button: исправлена работа Overlay. Tеперь при использовании нескольких компонентов на странице оверлеи не накладываются друг на друга

— InputDate: При повторном клике на иконку не закрывался календарь. Исправлено

— Slider: При включённом disabled можно было выбрать значение по клику на трек. Исправлено

📗 atomaro/vue-ui-kit 1.2.0

— DropdownMenu: Исправлена ошибка, при которой divider выбирался как значение в Select

— Tabs: исправлена ошибка рендера табов при использовании цикла

Аллоха! 🧤

В этом году мы будем активно развивать возможности Атомаро (2-го поколения). Наполнять систему новыми компонентами и инструментами для ускорения вашей работы. 

Хотим поделиться с вами планами на год и первый квартал. Мы добавили новый раздел “Roadmap” в Сторибуке, чтобы актуальная дорожная карта всегда был под рукой. Со временем она будет обновляться. 

Посмотреть планы развития Дизайн-системы

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

🟣 Релиз 7.12.2 (1-е поколение, React)

Алоха! Пара небольших, но важных исправлений в первом поколении

Изменения:

— SegmentedControl: Добавлен атрибут aria-checked в Segment для отслеживания состояния

— PickerDate: Теперь параметры minDate и maxDate задают состояние disabled не только для дней, но и для месяцев и годов

🌱 Релиз 1.6.0 (2-е поколение, React)

C наступлением весны! Мы подготовили новый компонент для ваших проектов и почистили зависимости в ui-kit

— Pagination: новый компонент. Позволяет переключаться между страницами в приложении, либо выводить нужное количество строк в таблице. Предусмотрено несколько типов отображения пагинации, дополнительные контролы и версия для отображения на мобильных устройствах. Примеры в Сторибуке

— Оптимизировали зависимости в пакете