Design-System RT

Релиз 3.1.0 (Vue)

Алоха! Обновление для Вью, добавили новый компонент счётчик, исправили InputDate и обновили дизайн тегов и табов

vue-ui-kit [3.1.0], core [2.1.0]

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

— Counter / CounterWrapper: счётчик и обёртка для бейджа на элементе. Компонент для отображения числовых значений: количества уведомлений, непрочитанных сообщений, общего числа элементов и т.д.

Изменения:

— TabsGroup: Обновление в соответствии с дизайном

— TabsGroup: Новый параметр maxVisibleTabs - число видимых табов в строке, остальные в выпадающем меню «Ещё»

— TabsGroup: Новый параметр verticalFill - табы заполняют высоту внешнего контейнера

— TabsGroup: Новый параметр horizontalFill - табы заполняют ширину группы. scrollable помечен как deprecated (horizontalFill={!scrollable}), старый проп продолжает работать

— Tags: TagMore переименован в TagAdd (старый импорт остаётся алиасом), изменен класс кнопки добавления - atmr-tagitem вместо atmr-tagmore

— Tags: variant="secondary", состояние disabled и параметр disabledItems в TagGroup помечены как deprecated и будут удалены в следующем мажорном релизе

— Tags: Изменён цвет фона при ховере, исправлены иконки закрытия в размерах s и xs, добавлен фокус на элемент добавления тегов

— Input: Новый параметр maskPlaceholder - оставшаяся часть маски показывается как плейсхолдер при вводе

— InputDate: В режиме isRange теперь раздельные инпуты для начала и конца периода; инвертированный диапазон автоматически меняет даты местами

— InputDate: Слоты time picker ограничиваются через minDate / maxDate

— InputDate: Каретка всегда указывает на конец каждой из дат. Поведение некорректное, будет исправлено в следующих релизах

— InputDate/Select/Multiselect: Новый параметр defaultOpened - меню/календарь можно открыть по умолчанию

— Input/InputDate/Multiselect: Поправлены отступы лейблов

— DropdownMenu/Select/Multiselect: Новый параметр hideEmptyContent - скрывает меню, когда передан пустой массив элементов

themes [3.5.0]

— Counter: Добавлены токены нового компонента

— Tabs: Обновлены токены в соответствии с дизайном

— Tags: Обновлены токены

— Подробнее описание изменений в дизайне компонентов смотрите в чейнджлоге дизайн-библиотеки

Релиз 4.1.0 (React, Core, Themes)

Алоха! Много исправлений ошибок, обновлен дизайн табов и тегов, новый компонент Counter

atomaro/ui-kit 4.1.0, atomaro/core 2.1.0

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

— Counter / CounterWrapper: счётчик и обёртка для бейджа на элементе. Компонент для отображения числовых значений: количества уведомлений, непрочитанных сообщений, общего числа элементов и т.д.

Изменения

— TabsGroup: Обновление в соответствии с дизайном

— TabsGroup: Новый параметр maxVisibleTabs - число видимых табов в строке, остальные в выпадающем меню «Ещё»

— TabsGroup: Новый параметр verticalFill - табы заполняют высоту внешнего контейнера

— TabsGroup: Новый параметр horizontalFill - табы заполняют ширину группы. scrollable помечен как deprecated (horizontalFill={!scrollable}), старый проп продолжает работать

— Tags: TagMore переименован в TagAdd (старый импорт остаётся алиасом), изменен класс кнопки добавления - atmr-tagitem вместо atmr-tagmore

— Tags: variant="secondary", состояние disabled и параметр disabledItems в TagGroup помечены как deprecated и будут удалены в следующем мажорном релизе

— Tags: Изменён цвет фона при ховере, исправлены иконки закрытия в размерах s и xs, добавлен фокус на элемент добавления тегов

— Input: Новый параметр maskPlaceholder - оставшаяся часть маски показывается как плейсхолдер при вводе

— InputDate: В режиме isRange теперь раздельные инпуты для начала и конца периода; инвертированный диапазон автоматически меняет даты местами

— InputDate: Слоты времени (00:00-23:59) ограничиваются через minDate / maxDate

— InputDate: Каретка всегда указывает на конец каждой из дат. Поведение некорректное, будет исправлено в следующих релизах

— InputDate/Select/Multiselect: Новый параметр defaultOpened - меню/календарь можно открыть по умолчанию

— Input/InputDate/Multiselect: Поправлены отступы лейблов

— DropdownMenu: Слоты для header и footer теперь корректно отображаются в состоянии empty. Сами слоты больше не скроллятся

— DropdownMenu/Select/Multiselect: Новый параметр hideEmptyContent - скрывает меню, когда передан пустой массив элементов

— Popover/DropdownMenu: Переработан usePopper - стабильнее позиционирование, меньше лишних пересчётов

— Select: onChange вызывается при очистке через clear

— Multiselect: Исправлен фокус лейбла в состоянии disabled

themes [3.5.0]

— Counter: Добавлены токены нового компонента

— Tabs: Обновлены токены в соответствии с дизайном

— Tags: Обновлены токены

Подробнее описание изменений в дизайне компонентов смотрите в чейнджлоге дизайн-библиотеки

Релиз 3.1.0 (TableGrid)

Алоха! Обновление таблиц: добавлен actionBar, исправлена куча визуальных дефектов

atomaro/tablegrid 3.1.0

— Изменили расположение текста и иконок внутри ячеек-заголовков таблицы. Теперь контент прижат к верху ячейки при растягивании по высоте

— Добавлен слот renders.actionBar и компонент ActionBar с чекбоксом, счётчиком выбранных строк и кнопками «Удалить» / «Отмена»

— Экспортирован хук useSelection (selectedRows, clearSelection, selectAll — добавляет ключи к текущему выбору)

— Добавлен getRowCheckboxState в rowConfig.selection для кастомного состояния чекбокса (checked / indeterminate), в т.ч. для родительских строк в expand-дереве

— Исправлена вёрстка addon-колонки при одновременном expand и selection: chevron и checkbox остаются сгруппированы и прижаты вправо, отступ вложенности — слева

— Исправлено перекрытие модального оверлея панелью extraBar: sticky и z-index убраны по умолчанию, добавлены пропы extraBarSticky и extraHeaderSticky (по умолчанию false)

— Исправлено скругление ячеек-заголовков

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

atomaro/tree 3.0.2

— Обновили зависимость atomaro/tablegrid до 3.1.0

Алоха! Мы с обновлениями.

MCP-сервер

Вайбкодить на Атомаро стало проще: развернули MCP-сервер для React 2-го поколения.

MCP-сервер позволяет интегрировать сторибук Атомаро с ИИ-агентами, позволяя им получать актуальную информацию о документации, компонентах дизайн-системы, вариантах использования и пропсах.
Подробно о том, как подключить MCP-сервер рассказано в Сторибуке

Релиз 3.0.0 (Vue, Vue-Icons)

Для вью тоже добавили префиксы и исправили билд иконок

atomaro/vue-ui-kit 3.0.0

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

— SideMenu: Один из видов навигации, который позволяет размещать больше элементов меню по вертикали. Может иметь основной и компактный вид. Открывается, как поверх контента, так и внутри, ужимая и адаптируя его. Примеры и инструкцию можно посмотреть тут

Breaking changes:

— Всем DOM-классам компонентов библиотеки добавлен префикс atmr-. Это снижает риск конфликтов с вашими глобальными стилями и сторонними UI-библиотеками: селекторы вроде .button или .input больше не пересекаются с Atomaro

Что изменилось:

— Базовые и BEM-классы компонентов:

button → atmr-button,
input__field → atmr-input__field,
drawer__header → atmr-drawer__header,
dropdown-menu-root → atmr-dropdown-menu-root и т.д.

— Модификаторы:

button—primary → atmr-button—primary,
modal—centered → atmr-modal—centered

— Затронуты пакеты atomaro/ui-kit, atomaro/vue-ui-kit, atomaro/core (SCSS) , atomaro/tree, atomaro/tablegrid, atomaro/sidemenu

— Релиз пакета atomaro/sidemenu с реализациями на React и Vue

Что не изменилось:

— CSS-переменные по-прежнему начинаются с —atmr- - их переименовывать не нужно

— API компонентов, пропсы (className, dropdownMenuClassName, popoverClassName и др.) и ваши собственные классы, переданные через них, не получают префикс автоматически

— Data-атрибуты (data-testid и т.п.) не менялись

Что проверить в своём проекте:

— Кастомные CSS/SCSS, где вы таргетите внутренние классы Atomaro — обновите селекторы:

.input .input__suffix → .atmr-input .atmr-input__suffix

.modal__footer .button → .atmr-modal__footer .atmr-button

.toast-notification-container → .atmr-toast-notification-container

.side-menu__item → .atmr-side-menu__item

— Импорты SideMenu — замените atomaro/ui-kit на atomaro/sidemenu

— querySelector / closest / E2E-тесты — замените старые имена классов на версии с atmr-

— Снапшоты и unit-тесты, если в них зашиты классы из разметки компонентов.

— Переопределение стилей через SCSS — если импортируете стили atomaro/core и расширяете селекторы библиотеки, обновите их под новые имена

Примечание: если вы не переопределяли внутренние классы компонентов и не обращались к ним из JS/тестов, после обновления версий достаточно пересобрать проект — визуально ничего не должно измениться

atomaro/vue-icons 2.1.1

— Исправили публикацию пакета: в билд не попадала папка dist, из‑за чего не резолвились импорты atomaro/vue-icons/24 и atomaro/vue-icons/16 (в т.ч. при подключении ToastPlugin в atomaro/vue-ui-kit)

Релиз 4.0.0 (2-е поколение, React, Core, TableGrid, Tree)

⚠️ Мажорный релиз с глобальным добавлением префиксов к классам, будьте внимательны ⚠️

atomaro/ui-kit 4.0.0, atomaro/core 2.0.0

Breaking changes:

— Компонент SideMenu удалён из atomaro/ui-kit. Импортируйте из atomaro/sidemenu

— Всем DOM-классам компонентов библиотеки добавлен префикс atmr-. Это снижает риск конфликтов с вашими глобальными стилями и сторонними UI-библиотеками: селекторы вроде .button или .input больше не пересекаются с Atomaro

Что изменилось:

— Базовые и BEM-классы компонентов:

button → atmr-button,
input__field → atmr-input__field,
drawer__header → atmr-drawer__header,
dropdown-menu-root → atmr-dropdown-menu-root и т.д.

— Модификаторы:

button—primary → atmr-button—primary,
modal—centered → atmr-modal—centered

— Затронуты пакеты atomaro/ui-kit, atomaro/vue-ui-kit, atomaro/core (SCSS), atomaro/tree, atomaro/tablegrid, atomaro/sidemenu

— Релиз пакета atomaro/sidemenu с реализациями на React и Vue

Что не изменилось:

— CSS-переменные по-прежнему начинаются с —atmr-, их переименовывать не нужно

— API компонентов, пропсы ( className, dropdownMenuClassName, popoverClassName и др.) и ваши собственные классы, переданные через них, не получают префикс автоматически

— Data-атрибуты ( data-testid и т.п.) не менялись

Что проверить в своём проекте:

— Кастомные CSS/SCSS, где вы таргетите внутренние классы Atomaro — обновите селекторы:

.input .input__suffix → .atmr-input .atmr-input__suffix

.modal__footer .button → .atmr-modal__footer .atmr-button

.toast-notification-container → .atmr-toast-notification-container

.side-menu__item → .atmr-side-menu__item

— Импорты SideMenu — замените atomaro/ui-kit на atomaro/sidemenu

— querySelector / closest / E2E-тесты — замените старые имена классов на версии с atmr-

— Снапшоты и unit-тесты, если в них зашиты классы из разметки компонентов.

— Переопределение стилей через SCSS — если импортируете стили atomaro/core и расширяете селекторы библиотеки, обновите их под новые имена

Примечание: если вы не переопределяли внутренние классы компонентов и не обращались к ним из JS/тестов, после обновления версий достаточно пересобрать проект — визуально ничего не должно измениться

Релиз 2.2.3 (Tree)
 
Алоха! Небольшое и важное исправление в деревьях
 
atomaro/tree 2.2.3
 
— Теперь onClick вызывается при клике на строку с текстом
 
— Значение чекбокса в выбранных узлах некорректно передавалось родительскому элементу, исправили

Релиз 2.7.0 (Vue, Themes)

Алоха! Версия для Вью не забыта, также обновлён дизайн и добавлен новый компонент

atomaro/vue-ui-kit 2.7.0

Breaking changes:

— Tooltip: Удалён размер m. Используйте size=s. Передача size=m временно обрабатывается как s с предупреждением в консоли, но в типах размер m больше не поддерживается

— Popover: Исправили ошибку в семантике класса для триггера: с popover_trigger на popover__trigger

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

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

Изменения:

— Доработали focus-visible и убрали лишний фокус при клике на некоторые компоненты

— Box: Теперь параметры для одной стороны бордера (например, bottomBorderColor) работают; flex-grow, flex-shrink, flex-basis и order применяются только при передаче соответствующих пропсов (модификаторы), а не на все .box—flex; добавлены пропсы p и m, исправлена ошибка при передаче flex-grow

— Multiselect: Длинный текст в плейсхолдере теперь отображается корректно

— Modal/Drawer: Добавили тень —atmr-shadow-bottom-xl

— Modal/Drawer: Исправили логику работы коллбеков, в том числе onEsc и onClose

— Tooltip: Добавлен параметр autoWidth (по умолчанию true) — ширина подстраивается под контент; при false остаётся фиксированная ширина из стилей

— Tooltip: Добавлен параметр content для произвольного контента внутри тултипа

— Tooltip: Больше не закрывается при наведении на сам всплывающий элемент

— Popover: обновили API и вёрстку компонента под новый дизайн — добавили структурированный контент (title, subtitle, body, footer) с сохранением legacy-режима через произвольный контент (content слот), добавили параметр showCloseButton. trigger=hover теперь считается deprecated в соответствии с дизайном и будет убран в следующем мажорном обновлении

— Input/Textarea: Добавлены стили для состояния readOnly

— Input/Textarea: Для состояния error добавлена иконка AttentionMonochrome в правой части компонента

— Input: Исправлена синхронизация значения в controlled-режиме при использовании mask

— InputDate: Исправлена валидация для isRange, диапазона при передаче только minDate или maxDate, а также отображение ошибок из validationRules

— ToastNotification: showIcon теперь включен по умолчанию, контейнер со статусным цветом растянут на всю высоту и показывается всегда. Добавлена горизонтальная раскладка при отсутствии subtitle

— FloatingActionMenuItem: Добавлены новые параметры iconPrefix и iconSuffix. Проп icon помечен как deprecated и при отсутствии iconSuffix подставляется как суффикс (справа от текста)

SegmentedControl: Уменьшили отступ между текстом и иконкой, исправили цвет фона выбранного сегмента для корректного отображения в темной теме

Loader: Типы компонента spinner и dots помечены как устаревшие

— Подняли версию atomaro/themes до 3.4.0

Подробнее описание изменений в дизайне компонентов смотрите в чейнджлоге дизайн-библиотеки

atomaro/vue-icons 2.1.0:

— Добавили новые иконки: Stop, StopFill, StopObject, StopColor, StopMonochrome, File, FileColor, FileMonochrome, DocumentErrorColor, DocumentSuccessColor, LikeFill, DislikeFill

atomaro/themes 3.4.0

— Tooltip: Изменения в токенах в соответствии с дизайном

— Button: Изменены значения токенов цветов для состояния disabled

— ToastNotification: Обновили токены под новый дизайн компонента. Изменены отступы внутри компонента

— FloatingActionButton: Небольшое обновление в соответствии с дизайном, изменены отступы внутри компонента

Подробнее описание изменений в дизайне компонентов смотрите в чейнджлоге дизайн-библиотеки

atomaro/icons 4.1.0

— Добавили новые иконки: Stop, StopFill, StopObject, StopColor, StopMonochrome, File, FileColor, FileMonochrome, DocumentErrorColor, DocumentSuccessColor, LikeFill, DislikeFill.

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

Алоха! Большое обновление пакета. Обновили дизайн, добавили новые компоненты, исправили баги

atomaro/ui-kit 3.3.0

Breaking changes:

— Tooltip: Удалён размер m. Используйте size="s". Передача size="m" временно обрабатывается как s с предупреждением в консоли, но в типах размер m больше не поддерживается

— Popover: Исправили ошибку в семантике класса для триггера: с popover_trigger на popover__trigger

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

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

— TopMenu: Новый паттерн, один из видов навигации, предоставляет пользователю сквозную навигацию по продуктам и доступ к системным инструментам и функциям вроде уведомлений или профиля

Изменения:

— Доработали focus-visible и убрали лишний фокус при клике на некоторые компоненты

— Box: Теперь параметры для одной стороны бордера (например, bottomBorderColor) работают; flex-grow, flex-shrink, flex-basis и order применяются только при передаче соответствующих пропсов (модификаторы), а не на все .box—flex; добавлены пропсы p и m, исправлена ошибка при передаче flex-grow

— Multiselect: Длинный текст в плейсхолдере теперь отображается корректно

— Modal/Drawer: Добавили тень —atmr-shadow-bottom-xl

— Modal/Drawer: Исправили логику работы коллбеков, в том числе onEsc и onClose

— Tooltip: Добавлен параметр autoWidth (по умолчанию true) — ширина подстраивается под контент; при false остаётся фиксированная ширина из стилей

— Tooltip: Добавлен параметр innerChildren для произвольного контента внутри тултипа

— Tooltip: Больше не закрывается при наведении на сам всплывающий элемент

— Popover: обновили API и вёрстку компонента под новый дизайн — добавили структурированный контент (title, subtitle, body, footer) с сохранением legacy-режима через произвольный контент (innerChildren), добавили параметр showCloseButton. trigger="hover" теперь считается deprecated в соответствии с дизайном, и будет убран в следующем мажорном обновлении

— Input/Textarea: Добавлены стили для состояния readOnly

— Input/Textarea: Для состояния error добавлена иконка
AttentionMonochrome в правой части компонента

— Input: Исправлена синхронизация значения в controlled-режиме при использовании mask

— InputDate: Исправлена валидация для isRange, диапазона при передаче только minDate или maxDate, а также отображение ошибок из validationRules

— ToastNotification: showIcon теперь включен по умолчанию, контейнер со статусным цветом растянут на всю высоту и показывается всегда. Добавлена горизонтальная раскладка при отсутствии subtitle

— FloatingActionMenuItem: Добавлены новые параметры iconPrefix и iconSuffix. Проп icon помечен как deprecated и при отсутствии iconSuffix подставляется как суффикс (справа от текста)

— SegmentedControl: Уменьшили отступ между текстом и иконкой, исправили цвет фона выбранного сегмента для корректного отображения в темной теме

— Loader: Типы компонента spinner и dots помечены как устаревшие

— В сторибук добавлена отдельная страница с deprecated параметрами для удобного отслеживания

— Обновили сторибук. Вкладка Code стала чуть лучше отображать код компонентов и Code v2 работает пока экспериментально в паттернах SideMenu и TopMenu. Хотим доработать этот момент, поэтому ждём с обратной связью в наших чатиках

Релиз 2.6.1 (Vue, Themes)

Алоха! Подняли версию сторибука, обновили дизайн компонентов

atomaro/themes 3.3.0

— Breadcrumbs: добавлен токен item.border-width, dividermenu переименовано в morebutton, изменение значений цветов

— Checkbox: добавлены токены padding-horizontal, padding-vertical вместо padding. Изменения по цветам и размерам.

— Chip: добавлен размер s, состояние pressed, добавлен цвет active

— FunctionButton: изменение значений цветов

— InlineNotification: добавлен токен text.padding-top

— Radiobutton: добавлены токены padding-horizontal, padding-vertical вместо padding. Изменения по цветам и размерам.

— Switch: добавлены токены для прозрачности фона opacity.checked.disabled, opacity.disabled. Добавлен токен padding-vertical

atomaro/vue-ui-kit 2.6.0

— Применены изменения по токенам из нового themes, компоненты приведены в соответствие с обновленным дизайном в Pixso

— Включен фокус только с клавиатуры для компонентов Button, Checkbox, Switch и других

— Для полей ввода (InputDate, InputCard, TextArea, Select, Multiselect), в соответствии с дизайном, добавили состояние required

— Input: Также обернули текст в лейбле поля ввода в span для корректной работы text-overflow: ellipsis при активном required

— Select, TextArea: исправлена анимация открытия/закрытия

— Textarea: Исправлено отображение скролла при autoHeight

— Textarea: Добавлен браузерный функционал ресайза с примером в сторибуке. Переключается параметром resize

— Tooltip: убран рендеринг выпадающего элемента до появления

— Сторибук: исправили отображение props, events и expose, обновили до 9-ой версии

Релиз 2.2.0 (Tree, TableGrid)

Алоха! Устранили критический баг в Tree, обновили dependencies

atomaro/tree 2.2.0

— Удалили неиспользуемые зависимости: atomaro/core, dayjs, imask, immutability-helper, jsdom, prop-types, react-number-format, react-resize-detector, react-textarea-autosize, react-transition-group, react-virtual, react-virtualized-auto-sizer, react-window, react-cool-inview, react-virtualized

— Удалили из peerDependencies: prop-types, react-transition-group, styled-components

— Исправили передачу состояния при выборе узла: дочерние элементы теперь корректно становятся невыбранными, а родительские узлы — неопределенными

— Вертикальные бордеры не отображались, починено

— Вкладка Controls в сторибуке теперь работает корректно

atomaro/tablegrid 2.2.0

— Удалили неиспользуемые зависимости: atomaro/core, dayjs, imask, immutability-helper, jsdom, prop-types, react-number-format, react-resize-detector, react-textarea-autosize, react-transition-group, react-virtual, react-virtualized-auto-sizer, react-window, react-virtualized-tree

— Удалили из peerDependencies: prop-types, react-transition-group, styled-components