Design-System RT

Алоха! Добавили новый компонент и немного обновлений. Новый компонент: — Wizard: Позволяет создавать многошаговые интерфейсы с последовательным переходом между этапами, обеспечивая удобную навигацию и управление процессом Исправлено: — Drawer: Добавили отдельный раздел с рецептами — PickerDate: Увеличили высоту компонента. Теперь при переходе по месяцам, компонент не будет менять высоту в зависимости от количества дней — PickerDate: По аналогии с Релизом 1.4.0, дали возможность выбирать один и тот же месяц и год — DropdownMenu: Добавили stopPropagation на клик по опции — DropdownMenu: Добавили новый пример в сторибук с кнопкой "Выбрать всё" — Loader: Исправили ошибку, которая появлялась при отсутствии высоты — CheckboxGroup: Исправили баг в сторибуке с кликом по checkbox — Storybook: Исправили отображение show code для сторей — Multiselect: Исправили ошибку, из-за которой иконка наезжала на выбранные теги

Алоха! Небольшое обновление перед праздниками Изменения: — PickerDate: Увеличили высоту компонента. Теперь при переходе по месяцам, компонент не будет менять высоту в зависимости от количества дней — PickerDate: По аналогии с релизом 1.7.0, дали возможность выбирать один и тот же месяц и год — Loader: Исправили ошибку, которая появлялась при отсутствии высоты — Box: Поправили ошибки в типах, расширили интерфейс стандартными значениями — ToastNotification: Убрали устаревший метод findDOMNode — Обновили внутренние зависимости — DropdownMenu: Добавили stopPropagation на клик по опции — DropdownMenu: Добавили новый пример в сторибук с кнопкой "Выбрать всё" — Overlay/Modal/Drawer: Поправили анимацию в компонентах при открытии/закрытии — Drawer: Добавили отдельный раздел с рецептами

Описание работы с дизайн-токенами для разработчиков Ранее мы добавили отображение дизайн-токенов в Storybook. Вы можете посмотреть как базовые токены, так и компонентные токены (вкладка Design Tokens у каждого компонента). В дополнение к этому мы опубликовали инструкцию: что такое токены, как их использовать в проекте и как модифицировать тему, изменяя токены. ➡️ Читать инструкцию по дизайн-токенам Контрибьюция в Дизайн-систему У нас накопился позитивный опыт совместной работы с разработчиками из других команд. Если вы готовы участвовать в разработке Дизайн-системы, у вас есть наработки для нового компонента или новой функциональности – ждём вас! Давайте развивать Дизайн-систему вместе. ➡️ Читать инструкцию по контрибьюции Роадмап Дизайн-системы на 2 квартал Актуализируем наш роадмап. В планах выпуск новых компонентов и улучшение текущих. ➡️ Посмотреть планы развития Дизайн-системы

Алоха! Добавили Pagination на Vue, поработали над функционалом других компонентов. Новый компонент: — Pagination: Позволяет переключаться между страницами в приложении, либо выводить нужное количество строк в таблице Изменения: — Multiselect/Select: Переработали работу clearable. Теперь, при включённом autocomplete, иконка-крест находится слева от иконки-шеврона и появляется при ховере или фокусе. Раньше иконки заменяли друг друга, теперь находятся рядом — Input: Привели в соответствие с макетами отступы в поле ввода. Использовались неправильные токены — PickerDate: Теперь при заданных minDate и maxDate блокируются иконки-шевроны для перехода, если в месяце все даты заблокированы — Overlay/Modal/Drawer: Добавили анимацию исчезновения для компонента с помощью токенов

Алоха! Добавили ещё один компонент, исправили ошибки в других Новый компонент Accordion: Сворачиваемый блок, который может содержать внутри себя контент разного характера. В сторибуке мы сделали много красивых примеров с аккордеоном, которые уже можно посмотреть Изменения: — Pagination: Исправлена логика в подсчёте страниц. Исправлен баг, при котором появлялись дробные числа — Multiselect/Select: Переработали работу clearable. Теперь, при включённом autocomplete, иконка-крест находится слева от иконки-шеврона и появляется при ховере или фокусе. Раньше иконки заменяли друг друга, теперь находятся рядом — Input: Привели в соответствие с макетами отступы в поле ввода. Использовались неправильные токены — PickerDate: Теперь при заданных minDate и maxDate блокируются иконки-шевроны для перехода, если в месяце все даты заблокированы

Алоха! Продолжаем поддерживать первое поколение, исправили пару ошибок Изменения: — InputDate: исправлена ошибка, которая вызывала преждевременное закрытие календаря при использовании с SSR — Input: Исправлена ошибка фокуса — Multiselect: При autocomplete="true" неправильно позиционировался label при снятии фокуса. Исправлено

Алоха! Продолжаем развивать компоненты и повышать качество их работы. Добавили отображение дизайн-токенов в Storybook, как базовых, так и всех компонентных Новые возможности: — InputDate: Добавлена возможность выбирать один и тот же день в формате isRange — Design Tokens: в Storybook в сторях у каждого компонента добавилась вкладка с возможностью просматривать и редактировать токены. Так же добавился новый раздел DESIGN TOKENS с описанием базовых дизайн-токенов Исправлено: — Typography: Добавили токен letter-spacing для вариантов description — InputDate: Исправлена ошибка SSR, из-за которой было невозможно выбрать вторую дату при useInPortal = false — Input: Исправлена ошибка фокуса — DropdownMenu: Переработаны пропсы, некоторые скоро будут удалены, подробнее в документации к компоненту

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

Алоха! Пара небольших, но важных исправлений в первом поколении Изменения: — SegmentedControl: Добавлен атрибут aria-checked в Segment для отслеживания состояния — PickerDate: Теперь параметры minDate и maxDate задают состояние disabled не только для дней, но и для месяцев и годов

В этом году мы будем активно развивать возможности Атомаро (2-го поколения). Наполнять систему новыми компонентами и инструментами для ускорения вашей работы.  Хотим поделиться с вами планами на год и первый квартал. Мы добавили новый раздел “Roadmap” в Сторибуке, чтобы актуальная дорожная карта всегда был под рукой. Со временем она будет обновляться.  Посмотреть планы развития Дизайн-системы Выпуск багфиксов по-прежнему в приоритете. Мы ждём любую обратную связь от вас. Пишите чего вам не хватает в Дизайн-системе, уточняйте планы, предлагайте новую функциональность. На связи!

Алоха! Первый релиз в новом году. Улучшили работу компонентов и добавили новый пропс 📙 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: исправлена ошибка рендера табов при использовании цикла

Хо хо хо! Предновогоднее обновление с новым переключением тем для 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

Алоха! Начинаем неделю с новостей! Исправления: — Tooltip: Дефолтное значения для параметра trigger исправлено на hover — Multiselect/Select: Исправлена проблема с визуальным отображением при clearable = ”true” — Обновление сторибука

У нас радостная новость для всех, кто ждал дизайн-систему на Vue.js. Вы просили — мы сделали, протестировали и уже опубликовали Vue.js версию дизайн-системы Атомаро (Дизайн-системы Ростелекома) 2-го поколения. Функциональность элементов системы в React и Vue идентична, те же компоненты, возможности, правила и дизайн-токены. Пакет с CSS-стилями (темы) единый для двух фреймворков. Нейминг некоторых пропсов может отличаться, чтобы следовать привычной логике Vue.js. Написать новую версию дизайн-системы в короткий срок — большая и сложная задача. Нам помогла новая архитектура Атомаро 2-го поколения, вынесенные отдельно стили. И наши контрибьюторы из команды разработки «Личного кабинета юридического лица». Александр Меркулов, Даниил Галкин, Егор Мальцев, Сергей Чуян — наши герои, спасибо вам за помощь! 🙌 ❗️Подключайте дизайн-систему к проектам на Vue.js, пишите нам о своем опыте использования, мы всегда открыты и готовы помочь.

Алоха! В эту версию включили ряд изменений для еще более стабильной работы. Изменения: — TabsGroup: Убран параметр iconPosition. Настроить положение иконки можно в TabsItem — DropdownMenu: Исправлена работа и внешний вид компонента при включённом virtualScroll — DropdownMenu: Добавлено ограничение высоты выпадающего меню — Tooltip/Popover: Исправлена работа параметра pointerIsCentered — Tooltip: Теперь дефолтное значение для параметра trigger — hover — Loader: Добавлен новый вариант — dots — InputDate: Исправлена ошибка, из-за которой обрезалась последняя цифра года — InputDate: Теперь дата в поле ввода меняется на ближайшую доступную при редактировании, при условии, что установлены minDate/maxDate — Select: Добавлен параметр iconPrefix — Storybook: Добавлен раздел Icons — Исправления сторибука