⚡️Релиз 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: новый компонент. Позволяет переключаться между страницами в приложении, либо выводить нужное количество строк в таблице. Предусмотрено несколько типов отображения пагинации, дополнительные контролы и версия для отображения на мобильных устройствах. Примеры в Сторибуке

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

Релиз 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: удалена из зависимостей

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

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

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

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

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

Исправлено:

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

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

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

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

🔖 Релиз 7.13.0 (1-е поколение, React)

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

Изменения:

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

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

— Multiselect: При autocomplete="true" неправильно позиционировался label при снятии фокуса. Исправлено

🪗 Релиз 1.8.0 (2-е поколение, React)

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

Новый компонент

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

Изменения:

— Pagination: Исправлена логика в подсчёте страниц. Исправлен баг, при котором появлялись дробные числа

— Multiselect/Select: Переработали работу clearable. Теперь, при включённом autocomplete, иконка-крест находится слева от иконки-шеврона и появляется при ховере или фокусе. Раньше иконки заменяли друг друга, теперь находятся рядом

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

— PickerDate: Теперь при заданных minDate и maxDate блокируются иконки-шевроны для перехода, если в месяце все даты заблокированы

💬 Релиз 1.4.0 (Vue)

Алоха! Добавили Pagination на Vue, поработали над функционалом других компонентов.

Новый компонент:

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

Изменения:

— Multiselect/Select: Переработали работу clearable. Теперь, при включённом autocomplete, иконка-крест находится слева от иконки-шеврона и появляется при ховере или фокусе. Раньше иконки заменяли друг друга, теперь находятся рядом

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

— PickerDate: Теперь при заданных minDate и maxDate блокируются иконки-шевроны для перехода, если в месяце все даты заблокированы

— Overlay/Modal/Drawer: Добавили анимацию исчезновения для компонента с помощью токенов

Привет! Принесли полезные обновления для 2-го поколения Дизайн-системы

Описание работы с дизайн-токенами для разработчиков

Ранее мы добавили отображение дизайн-токенов в Storybook. Вы можете посмотреть как базовые токены, так и компонентные токены (вкладка Design Tokens у каждого компонента).

В дополнение к этому мы опубликовали инструкцию: что такое токены, как их использовать в проекте и как модифицировать тему, изменяя токены.

➡️ Читать инструкцию по дизайн-токенам


Контрибьюция в Дизайн-систему

У нас накопился позитивный опыт совместной работы с разработчиками из других команд. Если вы готовы участвовать в разработке Дизайн-системы, у вас есть наработки для нового компонента или новой функциональности – ждём вас! Давайте развивать Дизайн-систему вместе.

➡️ Читать инструкцию по контрибьюции


Роадмап Дизайн-системы на 2 квартал

Актуализируем наш роадмап. В планах выпуск новых компонентов и улучшение текущих.

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

🏕 Релиз 1.9.0 (2-е поколение, React)

Алоха! Небольшое обновление перед праздниками

Изменения:

— PickerDate: Увеличили высоту компонента. Теперь при переходе по месяцам, компонент не будет менять высоту в зависимости от количества дней

— PickerDate: По аналогии с релизом 1.7.0, дали возможность выбирать один и тот же месяц и год

— Loader: Исправили ошибку, которая появлялась при отсутствии высоты

— Box: Поправили ошибки в типах, расширили интерфейс стандартными значениями

— ToastNotification: Убрали устаревший метод findDOMNode

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

— DropdownMenu: Добавили stopPropagation на клик по опции

— DropdownMenu: Добавили новый пример в сторибук с кнопкой "Выбрать всё"

— Overlay/Modal/Drawer: Поправили анимацию в компонентах при открытии/закрытии

— Drawer: Добавили отдельный раздел с рецептами

🫧 Релиз 1.5.0 (Vue)

Алоха! Добавили новый компонент и немного обновлений.

Новый компонент:

— Wizard: Позволяет создавать многошаговые интерфейсы с последовательным переходом между этапами, обеспечивая удобную навигацию и управление процессом

Исправлено:

— Drawer: Добавили отдельный раздел с рецептами

— PickerDate: Увеличили высоту компонента. Теперь при переходе по месяцам, компонент не будет менять высоту в зависимости от количества дней

— PickerDate: По аналогии с Релизом 1.4.0, дали возможность выбирать один и тот же месяц и год

— DropdownMenu: Добавили stopPropagation на клик по опции

— DropdownMenu: Добавили новый пример в сторибук с кнопкой "Выбрать всё"

— Loader: Исправили ошибку, которая появлялась при отсутствии высоты

— CheckboxGroup: Исправили баг в сторибуке с кликом по checkbox

— Storybook: Исправили отображение show code для сторей

— Multiselect: Исправили ошибку, из-за которой иконка наезжала на выбранные теги

🔥 Релиз 1.9.1 (2-е поколение, React)

Алоха! Мы выпустили хотфикс!

— Multiselect: Исправили визуальный баг при использовании iconPrefix, теги больше не наезжают на иконку

— Accordion: Исправлена ошибка с состоянием defaultOpen

💥 Релиз 2.0.0 (2-е поколение, React)

Breaking changes!

— Input/InputCard/InputDate/Select/Multiselect/Textarea: Из стилей компонента убрана минимальная ширина в 280px. Теперь компонент растягивается на всю ширину контейнера. Теперь вы можете, не переопределяя стили задать width всем нашим инпутам, либо оставить их адаптивными под ширину родителя

— DropdownMenu/Tooltip/Popover: Ширина рутового элемента-обертки теперь ориентирована на ширину родителя, а не содержимого. Width: fit-content; заменён на width: 100%;

— DropdownMenu: Удалены deprecated props: onChange, value, defaultValue, controlledComponent, deselectEnabled. В параметры headerSlot и footerSlot теперь передаётся два аргумента, вместо трёх (selectedItems отчасти дублировал dropdownItems). Теперь, для того, чтобы компонент работал корректно нужно передавать актуальные items с выбранными опциями isSelected и менять их в зависимости от колбека onClickItem. С примером можно ознакомится в сторе компонента. Дефолтное значение теперь можно задать, передав в items одной или нескольким опциями isSelected: true

— Переработана передача таких атрибутов как className, style, id, /^data-/ в компоненты. Исключены ситуации, когда эти пропсы попадали не на рутовые элементы. Например, при передаче className="123″ DropdownMenu мы увидим класс 123 на самом верхнем уровне рядом с dropdown-menu-root. Если же мы хотим передать класс самому выпадающему меню, то нужно воспользоваться параметром dropdownMenuClassName

— PickerDate: удалены пропсы dayClassName и dayStyle

Изменения:

— Сторибук обновлён до версии 8.6.14, что позволило нам добавить новую вкладку Code с более полным кодом компонента. Реализация вкладки требует доработки, поэтому ждём ваших предложений по улучшению!

— Перенесли лишние зависимости в devDependencies, убрали неиспользуемые

— Исправили инструкции в сторибуке. Добавили раздел «Как отключить визуальный фокус на компоненте» в конец Installation

— Tabs: Добавили возможность вернуть false в onChange, чтобы предотвратить переход на другой TabItem

— Accordion: Добавили пример как можно импортировать компонент к себе в проект

💥 Релиз 2.0.0 (Vue)

🔸 Breaking changes!

— Input/InputCard/InputDate/Select/Multiselect/Textarea: Из стилей компонента убрана минимальная ширина в 280px. Теперь компонент растягивается на всю ширину контейнера. Теперь вы можете, не переопределяя стили задать width всем нашим инпутам, либо оставить их адаптивными под ширину родителя

— DropdownMenu/Tooltip/Popover: Ширина рутового элемента-обертки теперь ориентирована на ширину родителя, а не содержимого. Width: fit-content; заменён на width: 100%

— DropdownMenu: Удалены deprecated props: update:modelValue, modelValue, isMultiselect, deselectEnabled. В параметры header и footer теперь передаётся два аргумента, вместо трёх (selectedItems отчасти дублировал dropdownItems). Теперь, для того, чтобы компонент работал корректно нужно передавать актуальные items с выбранными опциями isSelected и менять их в зависимости от колбека click:item. С примером можно ознакомится в сторе компонента. Дефолтное значение теперь можно задать, передав в items одной или нескольким опциями isSelected: true

— Переработана передача таких атрибутов как className, style, id, /^data-/ в компоненты. Исключены ситуации, когда эти пропсы попадали не на рутовые элементы. Например, при передаче className="123″ DropdownMenu мы увидим класс 123 на самом верхнем уровне рядом с dropdown-menu-root. Если же мы хотим передать класс самому выпадающему меню, то нужно воспользоваться параметром dropdownMenuClassName

— PickerDate: удалены пропсы dayClassName и dayStyle

— Поднята минимальная версия Vue с «3.4» до «3.5.0»

🔸 Новый компонент:

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

🔸 Изменения:

— Исправили инструкции в сторибуке. Добавили раздел «Как отключить визуальный фокус на компоненте» в конец Installation

— Tabs: Добавили возможность вернуть false в onChange, чтобы предотвратить переход на другой TabItem

— InputDate: Исправлена работа параметров transformationRule, activeDate. Также теперь locale работает не только на календарь, но и на поле ввода

— Multiselect: Не работал параметр isSelectedItemColored, исправлено

— Select: Теперь clearable работает корректно, очищая поле ввода

— Добавили atomaro/themes в зависимости