Design-System RT
652 subscribers
263 photos
4 videos
128 links
Канал с новостями и анонсами Дизайн-Системы РТ. design.rt.ru Чат @ds_develop
Download Telegram
📚 Релиз 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

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

— Много исправлений и улучшений сторибука
🔥5❤2👍2🥰1
📙 Релиз 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 для контейнера уведомлений

— Улучшения и исправления в сторибуке
❤6👍4
🪲 Релиз 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

— Исправления сторибука
👍3🔥3
❇️ Релиз 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: Добавлен переключатель между разными версиями Дизайн-системы
❤5👍1
📎 Релиз 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. Цвет иконок не поменялся
👍4🔥2
🎆 Алоха! Привет-привет! Салют! 🎆

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

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

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

❗️Подключайте дизайн-систему к проектам на Vue.js, пишите нам о своем опыте использования, мы всегда открыты и готовы помочь.
🔥7👍6❤2
🎄 Релиз 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

— Обновили документацию и исправили недочёты в сторибуке
🔥5❤1👍1🏆1
⚡️Релиз 7.12.1 (1-е поколение, React)

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

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

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

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

— Обновление сторибука
👍2
🎄 Релиз 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
❤3👍3🔥3
📚 Релиз 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: исправлена ошибка рендера табов при использовании цикла
👍5❤1
Аллоха! 🧤

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

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

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

Выпуск багфиксов по-прежнему в приоритете. Мы ждём любую обратную связь от вас. Пишите чего вам не хватает в Дизайн-системе, уточняйте планы, предлагайте новую функциональность. На связи!
🔥8👍1
🟣 Релиз 7.12.2 (1-е поколение, React)

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

Изменения:

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

— PickerDate: Теперь параметры minDate и maxDate задают состояние disabled не только для дней, но и для месяцев и годов
👍4🔥2
🌱 Релиз 1.6.0 (2-е поколение, React)

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

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

— Оптимизировали зависимости в пакете
👍8
Релиз 1.3.0 (Vue)

Алоха! Продолжаем развивать компоненты и повышать качество их работы. Добавили отображение дизайн-токенов в Storybook, как базовых, так и всех компонентных

Новые возможности:

— InputDate: Добавлена возможность выбирать один и тот же день в формате isRange

— Design Tokens: В Storybook в сторях у каждого компонента добавилась вкладка с возможностью просматривать и редактировать токены. Так же добавился новый раздел DESIGN TOKENS с описанием базовых дизайн-токенов

Исправлено:

— Slider: исправлена проблема с событием change, которое не вызывалось при перетаскивании ползунка

— Typography: Добавили токен letter-spacing для вариантов description

— Input: исправлена работа фокуса

— DropdownMenu: переработаны пропсы, некоторые скоро будут удалены, подробнее в документации к компоненту

— SegmentedControl: исправлена работа v-model

— Box: исправили проблему с импортом компонента по относительному пути и ошибку с зависимостями компонента

— Core: исправлена проблема использования нескольких тем на странице

— atomaro/cli: удалена из зависимостей
👍6
Релиз 1.7.0 (2-е поколение, React)

Алоха! Продолжаем развивать компоненты и повышать качество их работы. Добавили отображение дизайн-токенов в Storybook, как базовых, так и всех компонентных

Новые возможности:

— InputDate: Добавлена возможность выбирать один и тот же день в формате isRange

— Design Tokens: в Storybook в сторях у каждого компонента добавилась вкладка с возможностью просматривать и редактировать токены. Так же добавился новый раздел DESIGN TOKENS с описанием базовых дизайн-токенов

Исправлено:

— Typography: Добавили токен letter-spacing для вариантов description

— InputDate: Исправлена ошибка SSR, из-за которой было невозможно выбрать вторую дату при useInPortal = false

— Input: Исправлена ошибка фокуса

— DropdownMenu: Переработаны пропсы, некоторые скоро будут удалены, подробнее в документации к компоненту
👍6🔥2