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.COMPACT40x20
→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)