v6.2.0

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

DisplayTitle

Типографический компонент, который используется для крупных заголовков (#7003)

Flex

Базовый компонент для позиционирования элементов. Построен на базе flex layout (#6226)

Улучшения

Accordion

Экспортирован тип AccordionContentProps (#6990)

ActionSheet

Добавлена анимация появления/скрытия на десктопе (#6979)

AppRoot

Добавлено новое свойство userSelectMode для управления режимом выделения текста в приложении (#7005)
По умолчанию теперь выделение текста запрещено, если приложение запущено с флагом isWebView в ConfigProvider

ChipsSelect

• Добавляем свойство dropdownOffsetDistance как у CustomSelect (#6976)
• Добавляем свойства onOpen и onClose для событий открытия/закрытия выпадающего элемента

CustomSelect

Экспортирован тип CustomSelectClearButtonProps (#6985)

HorizonalCellShowMore

Для цвета теперь используется токен --vkui--color_text_secondary вместо --vkui--color_icon_secondary (#7040)

Popover

Добавлен параметр keepMounted (#7058)

Slider

Визуально добавлены состояния active и hover (#7014)

Switch

Дизайн приведён к виду Material 3 (#6957)

В связи с этим, в документации поправили переключатели на чекбоксы

Warning

Изменились размеры компонента:

• 38x18 → 42x26 при SizeType.COMPACT
• 40x20 → 52x32 при SizeType.REGULAR

Caption / DisplayTitle / EllipsisText / Footnote / Headline / Paragraph / Subhead / Text / Title

Добавлен параметр inline – теперь можно перебить display: block, который выставляется при normalize={true} (#7059)

Заменен цветовой токен применяемый для модальных окон в не модальных компонентах

Изменен цвет фона в следующих компонентах (#7044):

• Card
• Calendar
• CalendarRange
• CustomSelectDropdown (под-компонент CustomSelect)
• Popover
• ScreenSpinner
• ScrollArrow
• SubnavigationButton
• TabsItem
• TooltipBase
• WriteBar

Упрощение анимаций при @media screen and (prefers-reduced-motion: reduce)

В частности, в зависимости от prefers-reduced-motion, анимации с перемещением и с изменением размеров теперь заменяются на анимации через прозрачность там где необходимо. Благодаря такому подходу пользователи, с проблемами с вестибулярным аппаратом, смогут пользоваться вашими приложениями без спецэффектов (#6979)

Popper/FloatingArrow

Меняется логика статического позиционирования (свойство isStaticOffset из arrowProps) стрелочки попапа FloatingArrow, указывающей на целевой элемент.
Раньше при статическом позиционировании горизонтально или вертикально, независимот от значения placement, точкой отсчёта отступпа offset являлся либо левый край попапа при горизонтальном позиционировании, либо верхний край при вертикальном позиционировании.
Теперь, если свойство placement заканчивается на -end (top-end, right-end и т.д), offset отсчитывается от противоположного края: правого при горизонтальном позиционировании, нижнего при вертикальном позиционировании. (#7079)

Подняли версию @vkontakte/vkui-tokens до 4.47.0 (#7024)

Подняли версию @vkontakte/vkjs до 1.2.0 (#7055)

Исправления

Accordion

Если контент динамический, то он обрезался пока не вызовешь резайс страницы или пока не перезагрузишь страницу (#7083)

ActionSheet

Исправлена доступность ActionSheet в виртуальном буфере скринридера NVDA (#6955)

Alert

Переставал работать action с опцией autoClose={true} (#6979)

Calendar/CalendarRange

• При изменении месяца через select выбранный месяц появлялся не на той же половине где был вызван select (#7074)
• В селектах выбора месяца и года опции, не входящие в разрешенный диапазон дат (ограниченный через свойства minDateTime, maxDateTime, disablePast, disableFuture), будут неактивны (disabled) (#6937)
  Спасибо @struchkov 👍!

Header

Удалено принудительное разрешение выделение текста с помощью user-select. (#7005)

PanelHeader

Не пересчитывался размер компонента при использовании колонок (#7073)

Tappable

Убрано использование will-change: transform, так как не исправляет проблем с border-radius на iOS, но добавляет нагрузки браузеру (#7080)

Link

Исправляем поведение Link внутри контейнера с переполнением. Раньше он не прятался вместе с контентом в Safari (#7088)

source-map для CSS

После обновления PostCSS до 8.4.38 при импорте файлов со стилями из @vkontakte/vkui:

@import 'node_modules/@vkontakte/vkui/dist/components.css';
/* или */
@import 'node_modules/@vkontakte/vkui/dist/vkui.css';

в консоль начали сыпаться предупреждения из-за не валидного source-map для CSS:

original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values. 

поправили их генерацию (#7034)