Design-System RT
651 subscribers
263 photos
4 videos
128 links
Канал с новостями и анонсами Дизайн-Системы РТ. design.rt.ru Чат @ds_develop
Download Telegram
Релиз 2.4.0 (Vue)

Алоха! Добавили исправления с предыдущих релизов React и решили проблему с передачей ошибки в поле ввода

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

— Switch: Некорректно отображался фокус в размере xs, исправили

— Input: Исправили передачу ошибки в компонент через параметр error. Теперь текст ошибки должен отображаться не только с помощью слота

— Multiselect: Добавлены новые пропсы: separator - задаёт разделитель для вводимых строк, при включённом autocomplete, hideInvalidTags - определяет, скрывать ли не валидные теги

— InputDate: При передаче только maxDate или только minDate и снятии фокуса с поля ввода при пустом значении в нём, появлялась подсказка с ошибкой о некорректном интервале. Исправлено

— Box: Теперь, при передаче параметров, связанных с бордером только для одной стороны (top, right, bottom, left), css-переменные правильно применяются и отображаются на компоненте

atomaro/themes 2.5.0:

— Поменяли базовый цвет для зелёной палитры на #00AC43. Теперь токены из группы success имеют другой оттенок

atomaro/themes 2.4.0:

— Обновились токены для отступов в компоненте Textarea
👍3❤2
Релиз 3.0.9 (2-е поколение, React)

Алоха! Добавлена поддержка Tree-shaking, пакеты теперь содержат ESM + CJS модули

atomaro/ui-kit 3.0.9
atomaro/themes 3.0.1
atomaro/icons 4.0.0

BREAKING CHANGE:

— Добавлена поддержка Tree-shaking, пакет теперь содержит ESM + CJS модули. Поменялась внутренняя структура пакетов, требуется убедиться, что это не повлияло на сборку вашего проекта.

atomaro/icons 3.0.3

— 24 / Document / ArchiveColor: Заменены переданные по умолчанию цвета на корректные

— Добавлены новые цветные иконки для раздела Document, а также некоторые другие. Полный список можно посмотреть в changelog'е в Pixso

— Исправили цветные иконки в разделе Alert, убрали лишнюю прозрачность

— Добавлен новый параметр - tertiaryColor, отвечающий за третичный цвет в трехцветных иконках

— Исправлена передача цвета через параметр fill. Теперь такая запись имеет больший приоритет, нежели css-свойства компонентов из atomaro/ui-kit

BREAKING CHANGES

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

Arhive --> DocumentArchived

Arhive16 --> DocumentArchived16

FaceFrouning --> FaceFrowning

FaceFrouningColor --> FaceFrowningColor

LoadProgramm --> ProgramLoad

ObjectAlignDistanseHorizontal --> ObjectAlignDistanceHorizontal

ObjectAlignDistanseHorizontal16 --> ObjectAlignDistanceHorizontal16

ObjectAlignDistanseVertical --> ObjectAlignDistanceVertical

ObjectAlignDistanseVertical16 --> ObjectAlignDistanceVertical16

Registator --> Registrator
👍7🔥2
Релиз 2.1.1 (TableGrid, React)

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

atomaro/themes 3.2.0

— Удалены токены, случайно попавшие в пакет раньше времени

atomaro/ui-kit 3.1.1, atomaro/icons 4.0.2

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

atomaro/tablegrid 2.1.1

— Обновили зависимость atomaro/ui-kit до 3.1.1

atomaro/tree 2.1.1

— Обновили зависимость atomaro/ui-kit до 3.1.1

atomaro/tablegrid 2.1.0

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

— Добавили выравнивание (align) в заголовках колонок и обновили вёрстку хедера таблицы в соответствии с дизайном.

— Для фильтров добавлен отступ 4px для выпадающих списков, чтобы корректно отображались попапы

— Добавили сторю с подгрузкой данных, показывающую работу таблицы с динамическими датасетами

— Обновили сторю с кастомными колонками: добавили описание и исправили поведение

— Добавили возможность передавать свой кастомный фильтр в колонку

— Исправили поведение при ресайзе колонки при первом использовании без заданной ширины

atomaro/tree 2.1.0

— Актуализировали описание типов пропсов компонента (TreeProps) и привели их к единому виду с TableGrid

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

atomaro/ui-kit 3.1.0

— Popover: В callback onСlose добавлен event. В outsideClick добавлен таймаут для корректной работы с выпадающими списками внутри самого поповера

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

atomaro/themes 3.1.0

— Добавлены новые токены для компонента FileUpload

— Обновили токены цветов в темной теме: 

bg.surface1
bg.surface2
bg.surface3 
bg.surface4 
bg.surface5 
bg.elevated.s
bg.elevated.m
bg.elevated.l
bg.elevated.xl
❤5👍3
Релиз 2.5.0 (Vue, Vue Icons)

Алоха! Мы обновили иконки и тему

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

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

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

atomaro/vue-icons 2.0.0

— 24 / Document / ArchiveColor: Заменены переданные по умолчанию цвета на корректные

— Добавлены новые цветные иконки для раздела Document, а также некоторые другие. Полный список можно посмотреть в changelog'е в Pixso

— Исправили цветные иконки в разделе Alert, убрали лишнюю прозрачность

— Добавлен новый параметр - tertiaryColor, отвечающий за третичный цвет в трехцветных иконках

— Исправлена передача цвета через параметр fill. Теперь такая запись имеет больший приоритет, нежели css-свойства компонентов из atomaro/ui-kit

Breaking changes

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

Arhive --> DocumentArchived

Arhive16 --> DocumentArchived16

FaceFrouning --> FaceFrowning

FaceFrouningColor --> FaceFrowningColor

LoadProgramm --> ProgramLoad

ObjectAlignDistanseHorizontal --> ObjectAlignDistanceHorizontal

ObjectAlignDistanseHorizontal16 --> ObjectAlignDistanceHorizontal16

ObjectAlignDistanseVertical --> ObjectAlignDistanceVertical

ObjectAlignDistanseVertical16 --> ObjectAlignDistanceVertical16

Registator --> Registrator
👍3
Релиз 3.2.0 (2-е поколение, React)

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

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/ui-kit 3.2.0

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

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

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

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

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

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

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

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

— Улучшена поддержка React 16 (добавлен полифил для useId)

— ToastNotification: исправлена заливка фона иконок

— InputDate: исправлена валидация пустого значения только с одним minDate/maxDate

— Select: исправлен баг с разделителем для значений
👍4❤2
Релиз 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
👍1
Релиз 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-ой версии
🔥3👍1
Релиз 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. Хотим доработать этот момент, поэтому ждём с обратной связью в наших чатиках
❤3👍1
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.
Релиз 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
👍1
Релиз 2.2.3 (Tree)
 
Алоха! Небольшое и важное исправление в деревьях
 
atomaro/tree 2.2.3
 
— Теперь onClick вызывается при клике на строку с текстом
 
— Значение чекбокса в выбранных узлах некорректно передавалось родительскому элементу, исправили
👍3
Релиз 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/тестов, после обновления версий достаточно пересобрать проект — визуально ничего не должно измениться
👍4❤1🥰1