Release v6.1.0 · VKCOM/VKUI

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

DropZone

Компонент позволяет пользователям загружать файлы, перетаскивая файлы в область на странице (#6807).

Mark

Используется для выделения фрагментов текста, например, при поиске определенных слов или выделения текста в цитате (#6310).

ContentBadge

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

ToolButton

Кнопки, которые используются для вызова инструмента, вставки аттачей или для форматирования. Их можно использовать как кнопки для разового действия или для включения/выключения режима (#6837).

EllipsisText

Убирает текст не помещающийся в ширину контейнера в многоточие (#6692, спасибо @akcent1132 ❤️).

UnstyledTextField

Компонент предоставляет обёртку над <input />/<textarea /> со сбросом браузерных стилей по умолчанию (#6720).

Улучшения

Новая трансформация JSX

Для будущей поддержки React 19 библиотека компилируется используя новую трансформацию JSX (#6873).

Alert

Если action имеет свойство autoCloseDisabled, то в аргументы функции action() передётся метод close(), который можно вызвать, чтобы вручную закрыть Alert при клике на action (#6728).

Badge

Теперь параметр mode необязателен (#6947).

Cell.Checkbox

Добавлена возможность изменения размера компонента (#6438).

ChipsInput / ChipsSelect

Добавлена поддержка сброса новых значений до значений по умолчанию <form_dom_element>.reset() или <input type="reset" /> (#6563).

DatePicker / Popper / Popout

Теперь onPlacemenChange при первом рендере вызывается корректно (#6906).

FormItem

Добавлена поддержка для многострочного вывода для текста top с помощью свойства topMultiline (#6582, спасибо @ntvsx193 ❤️).
Добавлено отображение required-индикатора (#6820).
Добавлено свойство topNode (#6730).

Group

Уменьшен отступ между Group и увеличен border-radius (#6769).

HorizontalScroll

Добавлено свойство inline для возможности располагать потомков горизонтально (#6848).

Image.Badge / Avatar.Badge

Поддержано больше свойств для передачи на корневой элемент (#6493).

ModalPage / ModalCard

Добавлена возможность запрещать скрытие модальные окна (обратите внимание, что это негативно сказывается на пользовательском опыте) (#6116)

Pagination

Добавлена возможность менять режим отображения кнопок навигации с иконками налево/направо:

Используйте для этого параметр navigationButtonsStyle (#6630).
Добавлены Render Props renderPageButton и renderNavigationButton (#6781, спасибо @rflban ❤️).

Добавлено свойство mode: 'card' | 'plain', чтобы иметь возможность менять фон Panel. Удобно использовать вместе со свойством mode у компонента Group, позволяет точечно задавать стиль оформления Group, отличный от глобального стиля макета. (#6678)

PanelHeaderBack

Для platform="vkcom" иконка изменена на chevron_left_outline_20, а цвет на icon_secondary (#6941).

Popover

Добавлены свойства: arrow, arrowPadding, arrowHeight, arrowProps, ArrowIcon – для возможности добавлять стрелку (#6725)

Popover / Popper / OnboardingTooltip / Tooltip

Добавили свойство disableFlipMiddleware для возможности отключать автоматическое переопределение placement в зависимости от области видимости (#6922)

Radio

Добавлена возможность переопределения hoverMode и activeMode (#6455).

Snackbar

Добавлено свойство placement?: 'top-start' | 'top' | 'top-end' | bottom-start' | 'bottom' | 'bottom-end' определяющее положение плашки – в мобильной версии *-start и *-end игнорируются и работают как top/bottom (#6806)
Добавлено закрытие на ESC, а также добалены атрибуты role для a11y (#3039)
Отступ у action приведён к дизайну (#6659, спасибо @akcent1132 ❤️)