Релиз 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/тестов, после обновления версий достаточно пересобрать проект — визуально ничего не должно измениться