Design-System RT

❇️ Релиз 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.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

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

📙 Релиз 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.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.11.0 (1-е поколение)

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

Изменения:

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

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

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

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

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

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

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

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

Всем привет!

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

Можно.

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

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

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

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

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

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

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

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

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

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

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

Дизайнеры, всем приветик 🤍

В дизайн-системе много обновлений: больших и маленьких!

— Добавили в библиотеку много новых иконок, а некоторые иконки обновили свой внешний вид

— Поменяли цвета теней в темной теме, теперь они более контрастные и без свечения

— Добавили дополнительный цвет страницы (page-filled). Помимо основного белого, теперь есть фон с серой заливкой, чтобы разнообразить иерархию контента на экранах

— Overlay: поменяли цвет компонента

— Chips: изменили цвет фона выбранного secondary чипса

— InputNumberStepper: сделали фон компонента более контрастным

— FunctionButton: поменяли цвет tertiary кнопки

— FloatingActionButton: уменьшили размер иконок в MenuItem до 20px

👶 Мини-правки:

— Hint: Отступ между хинтом и счетчиком теперь 4px

— Slider: Counter поменял название на subLabel

— PickerDate: на градиенты в пикере теперь назначены переменные, и они корректно отрабатывают в темной теме

— DropdownMenu: отступ от скролла до правой границы теперь 4px

Желаем отличного дня и настроения!

🔆 Релиз 7.10.0

Алоха! Врываемся в жаркое лето с багфиксами

Изменения:

— DropdownMenu/Select/Multiselect: При передаче пустого массива в options список не изменялся. Исправлено

— DropdownMenu: Добавлен атрибут data-key для option и className dropdown-menu__option-text для текста

— Select/Multiselect: Добавлены новые параметры itemClassName и itemStyle, позволяющие задать класс и стили для элементов списка в выпадающем меню

— DropdownMenu/Multiselect/Select: В callback-функциях onSelect, onMultiselect и onChange теперь вторым аргументом возвращается event. Раньше был только один аргумент — выбранные options

— Notifications: Теперь можно задать id для компонента. По дефолту id проставлены в порядке возрастания. Уведомления с одинаковым идентификатором существовать на странице не могут

🔥 Релиз 7.9.0

Алоха! Исправляем баги по заявкам от пользователей

Изменения:

— DropdownMenu. Изменён тип параметра title на ReactNode. Добавлены два новых пропса: headerSlot и footerSlot

— DropdownMenu: Исправлено отображение опций с длинным текстом внутри. Теперь текст переносится корректно

— Modal: Изменено дефолтное значение для параметра unmount на true. Теперь без передачи unmount модалка не блокирует взаимодействие со страницей после закрытия

— Modal/Drawer: Невозможно было прокинуть className на элемент, исправлено

— Modal/Drawer: Теперь при открытии компонента страница не скролится в начало. На своей стороне запретили возможность скролить по странице при уже открытой модалке

— Slider: Исправлен баг с отсутствующим вызовом onChange при клике на шкалу

Подняли версию библиотеки react-number-format, которая использовалась в компоненте InputAmount, до @4.9.4, теперь поддерживается react 18

🤗Всем приветик! Мы с небольшими, но приятными новостями для дизайнеров:

— В файле дизайн-системы теперь можно найти страничку «Motion», где описаны основные принципы анимации, которая используется в Атомаро

— В компоненте Badge добавилась иконка-индикатор dot

— Добавились новые иконки, а у некоторых иконок изменились названия (подробнее на странице «✎ История изменений»)

Временный нюанс:

Какое-то время в проектах будут доступны переменные от компонентов TableGrid и Tree. Извините за неудобства, скоро мы их скроем 🙏

Всем классного дня!

⚡️ Релиз 7.8.1

Алоха! У нас пачка багфиксов.

На данный момент действуют ограничения на внесение изменений в прод. Мы обновили NPM пакет, новая версия доступна.
По обновлению сайта и сторибука сообщим отдельно, когда это произойдет.

— InputEmail. Теперь валидация срабатывает при контролируемом изменении value

— Notifications. Добавлен перенос строки в title и subtitle

— InputDate. Callback onCalendarOpened больше не вызывается при уже открытом календаре

— Textarea. Цвет label в размере medium теперь соответствует макету

— Select. Исправлено позиционирование иконки-шеврона в размере small и xsmall при включённом hideLabel

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

#Дайджест Дизайн-системы, 24.11.23

Сегодня в выпуске:

— Результаты Дизайн-системы Атомаро за 2023;
— Планы на 2024.

Всем привет!

У нас супер новость для дизайнеров: встречайте новую версию «Дизайн-системы Ростелекома» 🔥

Что нового:

— Новая версия библиотеки поддерживает токены и variables

— Теперь стили, variables, компоненты и иконки в одной библиотеке

— Обновили типографику и цветовые палитры

— Компоненты тоже преобразились: добавились состояния, обновился внешний вид компонентов, а количество вариантов сильно сократилось

— Расширенные возможности темизации: темная тема, orange и purple режимы

— Использованы последние возможности фигмы, библиотека стала легче, а компоненты оптимизированы

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

Стало гибко, быстро и удобно!

Про переход:

В 2024 году новая библиотека Atomaro Pro Rostelecom станет основной. Библиотеки Atomaro Web, Atomaro Style, Atomaro Icons будут поддерживаться, фикситься, но не развиваться.

Привет всем пользователям Дизайн-системы Ростелекома. Запрос в коммьюнити: есть ли у вас фидбэк и данные о влиянии дс на производительность и скорость веб-приложений на проде?

❄️Релиз 7.8.0

Алоха! Разрабатывали Атомаро 0.1, вернулись с фичами

— InputDate. Добавлен callback onCalendarOpened, вызываемый при открытии календаря InputDate

— InputDate. Новые callback-функции — onChangeMonth и onChangeYear. События отрабатывают при клике по стрелкам в календаре

— InputDate. По аналогии с PickerDate теперь параметр renderDate возвращает не только дату, но и view активного календаря (day, month, year)

— Notification. В хук useNotificationsStack добавлены новые методы: closeAllNotifications и getNotificationId