💥 Релиз 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 в зависимости

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

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

Изменения:

— InputAmount: Повышена версия react-number-format до 5.4.4 для совместимости с React 19.1

— InlineNotification, Drawer, Modal: Добавлен метод обхода несовместимости с React 19.1 при использовании библиотеки react-transition-group

— PickerDate: Добавлен формат для времени по умолчанию

— TabsItem: Теперь в функцию onChange можно передать значение false, чтобы не выполнять логику выбора

— Добавлена инструкция по подключению иконок из второго поколения в Introduction

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

Алоха! Перенесли Wizard с Vue, переписали Slider, исправили ошибки


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

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

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

— Slider: Компонент был полностью переписан с нуля и протестирован. Исправлены ошибки, было улучшено взаимодействие пользователя с компонентом

— InputDate: Выпадающее меню вызывалось по клику на hint. Исправлено

— Select: При открытии нескольких селектов подряд на странице, предыдущие не закрывались. Исправлено

— Исправлено отображение параметров в сторе Box

— Добавили инструкцию по подключению обнуляющих стилей на проект в инструкцию Installation

🛠️ Релиз 2.1.0 (Vue)

Алоха! Мы отрефакторили Slider, добавили поддержку CommonJS, исправили пару ошибок

Изменения:

— Изменили сборку проекта, добавили поддержку CommonJS

— Slider: Компонент был полностью переписан с нуля и протестирован. Исправлены ошибки, было улучшено взаимодействие пользователя с компонентом

— InputDate: Выпадающее меню вызывалось по клику на hint. Исправлено

— InputDate: Исправлена ошибка в работе валидации, из-за которой не отображались ошибки из переданного параметра validationRules

— WizardStepsHorizontal: Исправлен баг, при котором неправильно рассчитывалась ширина последнего шага

— Добавили инструкцию по подключению обнуляющих стилей на проект в инструкцию Installation

‼️ Релиз 1.0.0 (TableGrid, React)

Встречайте, таблицы второго поколения в коде!
Представляем релиз компонента Таблиц на втором поколении React.

В наличии:

— Полное соответствие дизайну с использованием токенов для кастомизации

— Гибкие рендер-функции: кастомизируйте ячейки под любые данные (например, с иконками или ссылками)

— Готовые примеры использования: Стори с различным использованием пропсов компонента

— Широкий набор пропсов: с описаниями, контролами в сторибуке

Пробуйте в деле! Делитесь обратной связью в чате, очень её ждём! Продолжим улучшать и дорабатывать компонент

🔸 Atomaro/tablegrid 1.0.2

— Подняли зависимость atomaro/ui-kit до 2.1.0

🔸 Отличия от TableGrid первого поколения:

— Убрали styled-components, остановились на чистом css и переменных. Смена темы лежит на токенах

— Теперь для внутренних компонентов (чекбоксы, фильтры и тд) используется atomaro/ui-kit

— TableGrid: Исправлено название параметров Expand: hasExpanded и expandedKeys

— TableGrid: Добавлена рендер-функция renderFirstColumnHeader в row.selection, служащая для того, например, чтобы добавить общий чекбокс для выбора строк

— TableGrid: Параметры row и column переименованы в rowConfig и columnConfig соответственно

— TableGrid: Исправлено поведение и вид курсора при перетаскивании колонок

— Параметр size принимает значения s и m

— Исправлены, обновлены и дописаны типы передаваемых параметров

— Обновлены, исправлены примеры в сторибуке

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

Алоха! У нас изменения в дизайне инпутов и техдолг по модалке

Изменения:

— Обновили зависимость atomaro/themes до 2.2.0. Увеличили отступ внутри поля ввода в Multiselect и добавили красный фон в состоянии ошибки для всех инпутов

— Modal/Drawer: Добавили новые пропсы для передачи className и style непосредственно на всплывающий элемент, а также на Overlay: modalClassName, modalStyle, drawerClassName, drawerStyle, overlayClassName, overlayStyle

📙 Релиз 1.1.1 (React Icons)

Алоха! Засинхронизировались с дизайном и обновили пакет иконок

atomaro/icons 1.1.1

— Убрали значение по умолчанию для параметра fill для некоторых иконок, которые неправильно отображались в темной теме

atomaro/icons 1.1.0

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

— Перестали использовать styled-components, убрали из зависимостей и оптимизировали все остальные зависимости

Breaking changes

Переименованные иконки:

AlignLeft --> TextAlignLeft
AlignRight --> TextAlignRight
AlignCenter --> TextAlignCenter
AlignJustify --> TextAlignDistance
Divider --> ObjectAlignDividerVertical
StatisticsCircular --> StatisticsCircularOld
StatisticsBoard --> BoardStatistics
MailInbox --> MailNew
NullAdd --> NullDelete
NullDelete --> NullAdd

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

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

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

— Select: Компонент не закрывался, находясь в Modal, исправлено

— Multiselect: Добавлен новый параметр hideInvalidTags. При включении больше не добавляет в поле введённые через автокомплит значения, которых нет в переданных items (ранее добавлялось по умолчанию и подсвечивалось красным)

— Multiselect: При включённом autocomplete и срабатывании onBlur поле поиска очищается

— Tooltip: Добавлен проп isOpened. Если параметр передан, компонент работает в контролируемом режиме и не меняет внутреннее состояние

— Tooltip: Добавили onClose при закрытии по клику снаружи и на CloseButton

— Tabs: Тип label изменён со string на ReactNode

— Tabs: Убрана возможность фокуса на TabPanel

— Textarea: Исправили ошибку, которая возникала при передаче className при включённом autoHeight

— Добавили новые рецепты для модального окна. Посмотреть можно в Patterns & Recipes / Modal / Recipes в сторибуке

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

Релиз 2.1.2 (Vue)

Алоха! Повысили качество работы компонентов. Обновили рецепты.

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

— Tabs: Исправили некорректный фокус по табу на контент

— Select: Исправили работу пропса deselectEnabled

Сторибук:

— Accordion: Обновили рецепты, переработали стори

— Select: Добавили примеры с использованием слотов

— Modal: Добавили рецепты

Релиз 1.1.0 (Vue Icons)

Алоха! Вслед за React обновляем пакет иконок на Vue

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

— Добавили поддержку CommonJS

Breaking changes

Переименованные иконки:

AlignLeft --> TextAlignLeft
AlignRight --> TextAlignRight
AlignCenter --> TextAlignCenter
AlignJustify --> TextAlignDistance
Divider --> ObjectAlignDividerVertical
StatisticsCircular --> StatisticsCircularOld
StatisticsBoard --> BoardStatistics
MailInbox --> MailNew
NullAdd --> NullDelete
NullDelete --> NullAdd

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

Алоха! Пара новых фичей в старый пакет

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

— PickerDate/InputDate: Добавлена возможность выбирать один и тот же день, месяц и год в формате isRange

— Multiselect: Добавлен новый параметр в autocomplete clearSearchOnSelect - служит для того, чтобы поле автокомплита очищалось после выбора опции

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

Алоха! Большой релиз, большие исправления, не обошлось без обратно несовместимых изменений

BREAKING CHANGE:

— Исправили возможную путаницу при использовании параметра widthFitContent в компонентах DropdownMenu, Select, Multiselect. Теперь при значении true ширина равняется ширине опций внутри списка. При false ширина подстраивается под родительский элемент. Как и прежде, задать свой width вы можете с помощью dropdownMenuStyle или dropdownMenuClassName. Примечание: если вы не трогали widthFitContent или ширину списка, то для вас не должно ничего измениться

BREAKING CHANGE:

— Для полей ввода, в соответствии с дизайном, обновили состояние required. Теперь слева от лейбла появляется точка. Для работы достаточно передать нативный проп required в компонент

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

— DropdownMenu: Дефолтное значение widthFitContent изменено на true

— Select/Multiselect: Дефолтное значение widthFitContent изменено на false

— DropdownMenu/Select/Multiselect: Добавлен параметр hideOnSelect, по умолчанию true. Закрывает выпадающий список при выборе опции

— Multiselect: в объект-параметр autocomplete добавлен новый пропс clearSearchOnSelect, который позволяет очищать поле поиска при выборе, по умолчанию true

— Input: Новый типизированный параметр inputProps для передачи нативных пропсов в поле

— Input/InputDate: Теперь работают с IMask 7.6.1. В Input добавлен новый параметр mask. Сделано исходя из удобства пользования, можно отказаться от transformationRule в пользу маски

— InputDate: Исправлены ситуации, когда возвращалась неправильная дата при вводе даты вручную и заданных minDate/maxDate

— InputDate: Добавлена возможность передать timeProps, как в компоненте PickerDate

— Textarea: Добавлена валидация, по аналогии с Input

— Tooltip: Теперь при trigger="click" срабатывает onClose при клике вне его области

— Accordion: Раскрывающаяся часть аккордеона (Accordion.Details) теперь динамически подстраивает свою высоту после открытия

— Checkbox: При передаче className компоненту, ломались стили. Исправлено

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

— Tabs: При использовании компонента без лейблов, только с иконками, были лишние отступы. Убраны. Label больше не обязательный параметр

🟢 Релиз 2.2.0 (Vue)

Алоха! Обратно несовместимые изменения теперь и на Vue тоже, а также исправления в компонентах

BREAKING CHANGE:

— Исправили возможную путаницу при использовании параметра widthFitContent в компонентах DropdownMenu, Select, Multiselect. Теперь при значении true ширина равняется ширине опций внутри списка. При false ширина подстраивается под родительский элемент. Как и прежде, задать свой width вы можете с помощью dropdownMenuStyle или dropdownMenuClassName. Примечание: если вы не трогали widthFitContent или ширину списка, то для вас не должно ничего измениться

BREAKING CHANGE:

— Для полей ввода, в соответствии с дизайном, обновили состояние required. Теперь слева от лейбла появляется точка. Для работы достаточно передать нативный проп required в компонент

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

— DropdownMenu: Дефолтное значение widthFitContent изменено на true

— Select/Multiselect: Дефолтное значение widthFitContent изменено на false

— DropdownMenu/Select/Multiselect: Добавлен параметр hideOnSelect, по умолчанию true. Закрывает выпадающий список при выборе опции

— Multiselect: В объект-параметр autocomplete добавлен новый пропс clearSearchOnSelect, который позволяет очищать поле поиска при выборе, по умолчанию true

— Input: Новый типизированный параметр inputProps для передачи нативных пропсов в поле

— InputDate: Добавлена возможность передать timeProps, как в компоненте PickerDate

— InputDate: Не вызывались колбеки blur и focus. Исправлено

— Accordion: Раскрывающаяся часть аккордеона (Accordion.Details) теперь динамически подстраивает свою высоту после открытия

— Tabs: При использовании компонента без лейблов, только с иконками, были лишние отступы. Убраны. Label больше не обязательный параметр

— Breadcrumbs: Визуальное отображение выпадающего списка теперь соответствует дизайну

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

Алоха! Летим с хотфиксом

— Multiselect: При clearable поле не очищалось при клике на крестик. Исправлено

— Multiselect: Добавлен новый проп clearAll, позволяющий очищать при clearable не только поле автокомплита, но и сами значения внутри мультиселекта

— Multiselect: При autoHeight префикс и суффикс компонента неправильно позиционировались относительно всего поля. Исправлено

— Breadcrumbs: Некорректно присваивался key внутреннему элементу, из-за чего было предупреждение в консоли об уникальных ключах. Исправлено

Релиз 1.0.4 (Tree, React)

Сегодня добавим еще новость!
Представляем релиз компонента Tree на втором поколении React.

Простой компонент, отображающий список в виде иерархического дерева. Представляет собой многоуровневую структуру записей. Каждая строка, отображаемая деревом, содержит ровно один элемент данных.

Примеры использования и инструкция по установке

Делитесь обратной связью в чате, очень её ждём! Продолжим улучшать и дорабатывать компонент

atomaro/tree 1.0.4

— Исправлены цвета иконок при ховере

— Добавлен новый параметр itemSuffix для добавления элементов в конец строки

atomaro/tree 1.0.3

— Подняли зависимость atomaro/ui-kit до 2.1.0

— Исправлено отображение бордеров между элементами в дереве

Отличия от Tree первого поколения:

— Убрали styled-components, остановились на чистом CSS и переменных. Смена темы лежит на токенах

— Теперь для внутренних компонентов используется atomaro/ui-kit

— Tree: Добавлен параметр disabledKeys для отключения элементов

— Tree: Убран параметр maxHeight

— Параметр size принимает значения s и m

— Исправлены, обновлены и дописаны типы передаваемых параметров

— Обновлены, исправлены примеры в сторибуке

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

Алоха! Предновогодний компонент-рецепт SideMenu и закрытие долгов.

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

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

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

— Drawer: Добавлен колбек onEsc. Исправлена ошибка в консоли при закрытии компонента

— Tooltip: Заменили использование таймаутов внутри компонента на CSSTransition, что должно положительно сказаться на производительности

— Проработали механизм определения темы при использовании компонентов с React.createPortal. Теперь название темы для выпадающих элементов ищется и наследуется от ближайшего элемента. Пример можно посмотреть в инструкции Themes

— Также оптимизировали внутреннюю функцию по поиску токенов, которая использовалась в компонентах с появляющимися элементами. Ранее она вызывалась при каждом рендере, что влияло на производительность приложения. Исправили

atomaro/icons 2.0.1

— Убрали импорт styles.css в компоненте Icon, вызывавший ошибку на Next. Теперь для корректного отображения импортируйте стили самостоятельно в корень проекта: import'atomaro/icons/styles.css'

— Для тех, кто использует не только пакет иконок, но и компоненты из atomaro/ui-kit, добавили css-файл в общий бандл в atomaro/core. Работает начиная с версии 1.3.5

— Расширен тип fill и secondaryColor,теперь при вводе предлагаются как общедоступные значения и цвета, так и переменные --atmr-...

— Исправлены цвета OkColor и OkColor16