Design-System RT
651 subscribers
263 photos
4 videos
128 links
Канал с новостями и анонсами Дизайн-Системы РТ. design.rt.ru Чат @ds_develop
Download Telegram
Релиз 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
👍6🔥2
Релиз 7.15.0 (1-е поколение, React)

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

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

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

— Multiselect: Добавлен новый параметр в autocomplete clearSearchOnSelect - служит для того, чтобы поле автокомплита очищалось после выбора опции
👍3🔥3
🟠 Релиз 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 больше не обязательный параметр
👍7
🟢 Релиз 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: Визуальное отображение выпадающего списка теперь соответствует дизайну
👍3🔥2
Релиз 2.5.0 (2-е поколение, React)

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

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

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

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

— Breadcrumbs: Некорректно присваивался key внутреннему элементу, из-за чего было предупреждение в консоли об уникальных ключах. Исправлено
👍4🙏2
Релиз 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

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

— Обновлены, исправлены примеры в сторибуке
👍5❤2
🎄 Релиз 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
👍10⚡2❤1
Релиз 7.16.0 (1-е поколение, React)

Алоха! Новый год, новое обновление старого пакета. Добавили красную точку для обязательных полей

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

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

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

— Multiselect: Добавлен новый параметр separator, позволяющий изменять разделитель для тегов при включённом autocomplete
🔥5👍4
Релиз 2.3.0 (Vue)

Алоха! Большое обновление с оптимизацией и улучшениями в полях ввода

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

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

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

— Для выпадающих меню (DropdownMenu, Select, Multiselect) в Modal добавлен новый класс с вычислением z-index для того, чтобы меню не перекрывалось модальным окном

— Input: Параметр forceError помечен как устаревший, вместо него используется validationOnChange, позволяющий включить валидацию при изменении значения. По умолчанию выключен

— Input: Изменения в верстке, добавлен общий контейнер для самого поля ввода и подсказки. Теперь рут классы вешаются на блок уровнем выше, для старого блока добавлен класс input__container

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

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

— Textarea: Добавлены параметры clearable и showClearable. Механизм действия такой же, как и в Input

— Исправления и улучшения в сторибуке
🔥4👍3❤1👨‍💻1
Релиз 7.17.0 (1-е поколение, React)

Алоха! Выпускаем хотфикс для иконок

Для иконок ниже исправлены импорты. Теперь они находятся в static16/actions:

AttachmentLinkBreak16
DragHorizonatalDots16
Filterclear16
Forward16
ForwardFill16
Hashtag16
Number16
Reply16
ReplyFill16
Reuse16
SignOut16
SignIn16
❤2👍2👀1
Релиз 2.7.0 (2-е поколение, React)

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

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

— Input: Изменения в верстке, добавлен общий контейнер для самого поля ввода и подсказки. Теперь рут классы вешаются на блок уровнем выше, для старого блока добавлен класс input__container

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

— InputDate: Исправили баг при валидации, в случае, когда был передан только параметр maxDate

—
InputCard: При required не отображалась красная точка у заголовка, исправлено

— Drawer/Modal/Overlay/Notifications: Не поддерживали React 19, так как использовали стороннюю библиотеку react-transition-group, исправлено

— Textarea: Добавлены параметры clearable и showClearable. Механизм действия такой же, как и в Input

—
Box: Исправили ошибку в типах, из-за которой в подсказках в IDE (контекстное меню при вводе значения в пропс) не было переменных

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

— Select: Исправили ошибку в консоли, возникавшую при отсутствии лейбла

— Breadcrumbs: Дочерние элементы breadcrumbs__text теперь корректно наследуют шрифт

atomaro/themes [2.5.0]

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

atomaro/themes [2.4.0]

— О
бновились токены для отступов в компоненте Textarea
👍5
Релиз 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