Releases: VKCOM/VKUI
v6.0.2
Улучшения
Исправления
- DateInput: в Calendar не прокидывались свойства
minDateTime
иmaxDateTime
(#6767) - Banner: нельзя было размешять внутри блочные элементы (#6675 by @Semigradsky)
- PullToRefresh: исключена возможность повторного вызова
onRefresh()
на iOS (#6723) - Pagination: "заедали" состояния
hover
/active
у элементаPaginationPageButton
(#6712) - HorizontalCell: теперь для переноса длинного текста используется CSS свойство
break-word
вместоbreak-all
(#6771) - Select/NativeSelect/DatePicker: отключена передача не используемых свойств из
Select
вNativeSelect
(#6663) (#6667) - Search: выровнены боковые отступы (#6724)
- Snackbar: значение свойства
layout
теперь приоритетней значения, вычисленного на основе окружения (#6731) - ModalPageHeader: исправлены боковые отступы у сепаратора (#6726)
- HorizontalScroll: кнопки для навигации фокусировались через клавиатуру, хотя они должны быть
aria-hidden
(#6687) - ModalRoot: при нажатии Esc сафари переходил в оконный режим (#6681)
- CustomSelectOption: добавлен пробел для скринридеров (#6694)
- File: убрана лишняя надпись "Выбрать файл" (#6696)
- FormStatus: добавлена роль
status
илиalert
в зависимости отmode
(#6701)
Документация
- Основная документация (Styleguide)
- Песочница (Storybook)
- Добавлена возможность переключать направление текста (#6703)
- В следующих компонентах были поправлены примеры под a11y:
- CustomSelectOption (#6693)
- ButtonGroup / IconButton (#6697)
- Tappable (#6698)
- Image (#6699)
v6.0.1
Исправления
Компоненты
- AdaptivityProvider: значение параметра адаптивности
sizeY
, если не переопределено через свойствоsizeY
, определяется автоматически, если хотя бы одно из свойствAdaptivityProvider
viewWidth
илиviewHeight
определено. В автоматическом определенияsizeY
теперь также участвует свойствоhasPointer
. Раньше его значение определялось методом из библиотеки @vkontakte/vkjs, далее передавалось напрямую в контекст и в логикеAdaptivityProvider
не участвовало, что было неправильно (#6489) - Accordion: контент мог быть скрыт не полностью (#6429)
- Cell: в
draggable
не работал автоскролл, если у родителя нетheight: 100%
(#6456) - ChipsSelect / ChipsInput
- ChipsSelect / CustomSelect
- CustomScrollView: отключена кастомная полоса прокрутки для сенсорных экранов (#6437)
- DatePicker: свойство
monthNames
могло стать html-аттрибутом (#6386)
-DateInput: программный фокус теперь сбрасывается при клике на кнопку "Готово" в режимеenableTime
(#6446) - FormField: фокус в элементах отрисовывался неправильно на некоторых iPhone устройствах (#6557)
- Group: исправлен отступ для
description
(#6577) - ModalPage:
- ModalPage / ActionSheet: исправлена позиция скролла
body
, которая сбрасывалась при вызовеActionSheet
изModalPage
(#6614) - OnboardingTooltip:
- PullToRefresh:
- Popover:
- Popper:
- IconButton: больше не растягивается в режиме ссылки (#6440)
- Image.Badge: тень перекрывала содержимое (#6494)
- Snackbar: исправлен маунт компонента при
<AppRoot mode="full" />
(#6389) - SimpleCell: текст в параметр
indicator
больше не обрезается (#6477) - SubnavigationBar: исправлен рендер
children
, когда при использовании Conditional Rendering в DOM попадали пустые<li>
(#6442) - Textarea / Writebar: метод HTMLFormElement.reset() не сбрасывал значения (#6561)
- Tooltip: возвращён параметр
onPlacementChange
(#6482)
Типы
Добавлен экспорт ImageBaseProps
(#6483)
Оптимизация
В CSS, из-за негативного влияния на потребление памяти, удалено использование универсального селекторов, которые содержали в себе CSS переменные (#6532)
Документация
v5.10.1
Улучшения
Компоненты
- Alert: добавили возможность передавать
data-testid
крестику через свойствоdismissButtonTestId
(#6394)
Исправления
Компоненты
- AdaptivityProvider: значение параметра адаптивности
sizeY
, если не переопределено через свойствоsizeY
, опеределяется автоматически если хотя бы одно из свойствAdaptivityProvider
viewWidth
илиviewHeight
определено. В автоматическом определенияsizeY
теперь также учавствует свойствоhasPointer
. Раньше оно передавалось напрямую в контекст, и в логикеAdaptivityProvider
не учавствовало, что было неправильно. Раньше в логике использовалось значениеhasPointer
из библиотеки, определяемое библиотекой, что могло идти вразрез со значением явно переданным вAdoptivityProvider
. (#6585) - View: на iOS сбрасывался скролл при отмене свайп-бэка (#6393)
- Cell:
- ActionSheet: убрали лишнее закругление у элементов меню при наведении на десктопе (#6399)
- DateInput: программный фокус теперь сбрасывается при клике на кнопку "Готово" в режиме
enableTime
(#6401) (#6639) - DateRangeInput: починили вызов
onChange
при передаче вvalue={[null, null]}
. Исправили пример в Storybook, он теперь реагирует на изменение даты. (#6404) - Switch/SegmentedControl(a11y): исправили видимость фокуса TalkBack на Android у компонентов основанных на
input
. Теперь при фокусе на таком элементе фокус визуально виден (#6405) - WriteBarIcon: сообщение о том, что текстовое описание у компонента отсутствует, больше не выводится если такое описание есть, исправлено условие. (#6385)
- DatePicker: больше не прокидываем свойство
monthNames
в DOM, если на тач устройствах используется NativeDatePicker. Чтобы не было предупреждения в консоли. (#6410) - CustomSelect:
- передаем свойство
required
нативному селекту вместо инпута. Начиная с версии 5.10.0 мы передавали свойствоrequired
в инпут, используемый только для поиска опций селекта. Это блокировало отправку формы, даже если селект имел выбранное значение. Всё потому, что инпут для поиска по умолчанию имеет пустоеvalue
. (#6411) - спрятали тултип "Aвтозаполнение", появляющийся на iOS при фокусе на селекте (#6402)
- исправили некорректную высоту плавающего элемента (#6571)
- передаем свойство
- Tooltip: исправили передачу свойства
getRootRef
. Больше мы это свойство не перебиваем своим значением. (#6216) - ModalPage:
- ChipsSelect:
- ModalPage/ActionSheet: исправили позицию скролла
body
, которая сбрасывалась при вызовеActionSheet
изModalPage
. (#6642) - PanelHeaderButton/TabsItem: вернули прежние
hover
-эффекты (#6602) - PullToRefresh: исправили позиционирование контента внтури
PullToRefresh
.PullToRefresh
теперь растягивается на всю высоту контейнера и контент (например<Placeholder stretched />
) можно отцентровать по вертикали. (#6644)
Оптимизация
- в CSS, из-за негативного влияния на потребление памяти, удалено использование универсального селекторов, которые содержали в себе CSS переменные (#6507)
v6.0.0
Note
Полный список изменений смотрите в документации по миграции с v5 на v6.
Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.
Breaking changes
Зависимости
-
Удалили зависимость @vkontakte/vk-bridge в рамках задачи по уменьшению сцепления с VK Mini Apps.
Для авторов VK Mini Apps, совместно с командой VK Dev, создали страницу Интеграция с VK Mini Apps.
Команда VK Dev, для будущих авторов, отредактировала раздел VK Dev / Библиотеки / VKUI и продублировала ссылку на нашу страницу интеграции.
Сборка
-
Обновили конфигурацию
.browserlistrc
:- android >= 5 + ChromeAndroid >= 57 - iOS >= 10 + iOS >= 10.3 - Chrome >= 51 + Chrome >= 57 Firefox >= 54 Edge >= 18 - Opera >= 38 + Opera >= 44 - Safari >= 10 + Safari >= 10.1 + Samsung >= 7.2
-
В отдельной сборке теперь используется CSS Logical.
Это изменение влияет только на пользователей, использующих специальную сборку. Такие пользователи, при необходимости, должны использовать плагин postcss-logical, чтобы продолжать поддерживать старые версии браузеров.
Компоненты
- Переработали API многих компонентов:
- Изменились API у компонентов, которые наследуются от
Tappable
. - Некоторые булевые пропы по умолчанию теперь
falsy
- PanelHeader:
visor
заменён наfloat
,separator
заменён наdelimiter
(#6277) - ModalPanelHeader:
separator
заменён наnoSeparator
(#6277) - Avatar:
withBorder
заменён наnoBorder
(#6286) - CardScroll:
withSpaces
заменён наnoSpaces
(#6286) - CustomSelect:
fixDropdownWidth
заменён наdropdownAutoWidth
(#6286) - Image:
withBorder
заменён наnoBorder
(#6286) - ImageBase:
withBorder
заменён наnoBorder
(#6286) - Gallery:
isDraggable
заменён наdragDisabled
(#6286) - GridAvatar:
withBorder
заменён наnoBorder
(#6286) - Placeholder:
withPadding
заменён наnoPadding
(#6286) - Select:
fixDropdownWidth
заменён наdropdownAutoWidth
(#6286) - Tabbar:
shadow
заменён наplain
(#6286) - ChipsSelect:
fixDropdownWidth
заменён наdropdownAutoWidth
(#6286)
- PanelHeader:
- Изменились API у компонентов, которые наследуются от
- Провели работы по улучшению доступности, которые требовали мажорных изменений.
- Сделали стабильными компоненты:
ChipsSelect
HorizontalCellShowMore
Popover
Popper
TextTooltip
Tooltip
Предыдущий
Tooltip (v5)
переименован вOnboardingTooltip
- Удалили компонент
FormLayout
, используйте нативныйform
(#6302) - ModalCard: удалили стили, задающие отступы через каскад, теперь отступ, при необходимости, надо выставлять самостоятельно через Spacing (#5419)
- PopoutWrapper:
- AppRoot: теперь при
mode="embedded
класс с названием темы навешивается на ближайший контейнерAppRoot
, а не на<body>
. Также приmode="full"
классыvkui
иvkui--*
навешиваются на<html>
вместо<body>
(#6263, #6279) - ConfigProvider: логика связанная с токенами вынесена из
platform
в отдельный параметрtokensClassNames
(#5121) - HorizontalCell: при
size="m"
фиксированная ширина заменена на максимальную ширину как приsize="s"
(#6318)
Фидбек ❤️
Для очевидных багов создавайте issues. Для всех остальных обсуждений есть дискуссии :)
v6.0.0-beta.3
Исправления
- ActionSheetItem: убрали закругление при активном состоянии на Desktop (#6204)
- DateInput: не сбрасывался фокус с календаря после клика на кнопку "Готово" (#6244)
- View: на iOS сбрасывался скролл при отмене свайп-бэка (#6320)
Исправления после релиза v6.0.0-beta.2
- Tappable: поправлена проблема со специфичностью стилей (#6318)
- Снова актуализировали наш основной
README.md
(#6324) - Документация
Breaking changes
Note
Полный список изменений смотрите в документации по миграции с v5 на v6 (страница миграции обновлена).
Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.
- ConfigProvider: логика связанная с токенами вынесена из
platform
в отдельный параметрtokensClassNames
(#5121) - HorizontalCell: при
size="m"
фиксированная ширина заменена на максимальную ширину как приsize="s"
(#6318) - Некоторые булевые пропы по умолчанию теперь
falsy
- PanelHeader:
visor
заменён наfloat
,separator
заменён наdelimiter
(#6277) - ModalPanelHeader:
separator
заменён наnoSeparator
(#6277) - Avatar:
withBorder
заменён наnoBorder
(#6286) - CardScroll:
withSpaces
заменён наnoSpaces
(#6286) - CustomSelect:
fixDropdownWidth
заменён наdropdownAutoWidth
(#6286) - Image:
withBorder
заменён наnoBorder
(#6286) - ImageBase:
withBorder
заменён наnoBorder
(#6286) - Gallery:
isDraggable
заменён наdragDisabled
(#6286) - GridAvatar:
withBorder
заменён наnoBorder
(#6286) - Placeholder:
withPadding
заменён наnoPadding
(#6286) - PopoutWrapper:
hasMask
заменён наnoBackground
(#6286) - Select:
fixDropdownWidth
заменён наdropdownAutoWidth
(#6286) - Tabbar:
shadow
заменён наplain
(#6286) - ChipsSelect:
fixDropdownWidth
заменён наdropdownAutoWidth
(#6286)
- PanelHeader:
Команда VKUI поздравляет всех с наступающим Новым Годом 🎉
Увидимся в следующем году 😎
v6.0.0-beta.2
Исправления после релиза v6.0.0-beta.1
- Был сломан SSR из-за ошибки при определении
appearance
(#6243) - Поправили проблему с прыгающими модальными окнами (#6276)
- Актуализировали наш основной
README.md
(#6257) - View: починили страницу с документацией (#6269)
- В содержание страницы Миграция с v5 на v6 добавили подзаголовки (#6275)
Breaking changes
Note
Полный список изменений смотрите в документации по миграции с v5 на v6 (страница миграции обновлена).
Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.
- Удалили компонент
FormLayout
, используйте нативныйform
(#6302) - ModalCard: удалили стили, задающие отступы через каскад, теперь отступ, при необходимости, надо выставлять самостоятельно через Spacing (#5419)
- PopoutWrapper: поправили проблему с не скролящимся контентом (#6265)
- AppRoot: теперь при
mode="embedded
класс с названием темы навешивается на ближайший контейнерAppRoot
, а не на<body>
. Также приmode="full"
классыvkui
иvkui--*
навешиваются на<html>
вместо<body>
(#6263, #6279)
v6.0.0-beta.1
Note
Полный список изменений смотрите в документации по миграции с v5 на v6.
Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.
Breaking changes
Warning
Это мажорные изменения в рамках текущей беты. В ближайшее время будет ещё несколько таких изменений.
Зависимости
-
Удалили зависимость @vkontakte/vk-bridge в рамках задачи по уменьшению сцепления с VK Mini Apps.
Для авторов VK Mini Apps, совместно с командой VK Dev, создали страницу Интеграция с VK Mini Apps.
Команда VK Dev, для будущих авторов, отредактировала раздел VK Dev / Библиотеки / VKUI и продублировала ссылку на нашу страницу интеграции.
Сборка
-
Обновили конфигурацию
.browserlistrc
:- android >= 5 + ChromeAndroid >= 57 - iOS >= 10 + iOS >= 10.3 - Chrome >= 51 + Chrome >= 57 Firefox >= 54 Edge >= 18 - Opera >= 38 + Opera >= 44 - Safari >= 10 + Safari >= 10.1 + Samsung >= 7.2
-
В отдельной сборке теперь используется CSS Logical.
Это изменение влияет только на пользователей, использующих специальную сборку. Такие пользователи, при необходимости, должны использовать плагин postcss-logical, чтобы продолжать поддерживать старые версии браузеров.
Компоненты
- Переработали API многих компонентов. Например, API изменилось у компонентов, которые наследуются от
Tappable
- Провели работы по улучшению доступности, которые требовали мажорных изменений.
- Сделали стабильными компоненты:
ChipsSelect
HorizontalCellShowMore
Popover
Popper
TextTooltip
Tooltip
Предыдущий
Tooltip (v5)
переименован вOnboardingTooltip
Фидбек ❤️
Для очевидных багов создавайте issues. Для всех остальных обсуждений есть дискуссии :)
v5.10.0
Улучшения
- Snackbar: добавили подкомпонент
Snackbar.Basic
– это тот жеSnackbar
, но только вёрстка, без логики (#5932) - HorizontalCell: теперь принимает все параметры
Tappable
(#5918) - Avatar: добавлена функция
Avatar.getInitialsFontSize
для определения размера шрифта в аватарах (#5923) - Image:
- SegmentedControl: Добавили возможность добавлять иконку с помощью свойства
before
(#5959) - Gradient: добавили новый
mode=default
, который позволяет подстраиваться под текущую тему (#5827) - Radio: добавили новыйп проп
labelProps
для того чтобы можно было передаватьdata-*
аттрибуты лэйблу, в который обёрнут инпут. Основная цель - позволить в e2e-тестах находить именно лейбл. (#6037) - ModalRoot: новое свойство
modalOverlayTestId
для передачи data-testid на оверлей (#6052) - ModalPage, ModalCard: новое свойство
modalDismissButtonTestId
для передачи data-testid на оверлей (#6051) - Cell: добавили авто-скролл для
draggable
режима (#5833) - ModalCard: новое свойство
dismissButtonMode
для возможности показать крестик закрытия внутри модальной карточки (#6068) - CustomSelect, ChipsSelect: новое свойство
noMaxHeight
для отображения выпадающего меню без скролла (#6045) - Select/CustomSelect: сделали компонент доступным для скринридеров на десктопах (#6087)
Рекомендации по использованию компонента для улучшения доступности можно найти в документации по компоненту в разделе "Цифровая доступность (a11y)".
Были внесены изменения во внутреннюю реализацию компонента, в результате чего e2e-тесты, могут сломаться.
Рекоммендации по e2e-тестированию компонента можно найти в разделе "Тестирование (e2e)" документации компонента.
Также поменялся тип ноды, которую можно получить через свойствоgetRootRef
, cHTMLLabelElement
наHTMLDivElement
. - Calendar: параметры
minDateTime
/maxDateTime
позволяют запретить выбор определенных дат с учетом времени (#5866) - Search: добавлена кнопка "Найти" справа как в дизайн-системе (#5790)
- Tabs:
Исправления
- AppRoot: не вызывался
useInsets()
, если не переданsafeAreaInsets
(#6071) - TabsItem: теперь
status={0}
отображается корректно (#6125) - Переделали реализацию
:focus-visible
-состояния, чтобы больше не появлялся скролл в родительском элементе (#5876)
Документация
- Добавили в шапку ссылки на токены и иконки (#6048)
- View: добавили информацию о важности порядка Panel (#6046)
Other
withInsets
помечен как@deprecated
и будет удалён в v6 – используйтеuseInsets()
из @vkontakte/vk-bridge-react (#6071)
Зависимости
- Обновили @vkontakte/vkjs с 1.1.0 до 1.1.1 (#6122)
- Обновили @vkontakte/vkui-tokens с 4.41.1 до 4.41.2 (#6098)
- Обновили @vkontakte/vkui-floating-ui с 0.1.0 до 0.1.2 (#6109)
Important
Как сообщалось в Release notes v5.9.4, мы приступили к разработке v6, поэтому это финальная минорная версия VKUI v5. В дальнейшем мы будем править критические проблемы.
v5.9.6
v5.9.5
Исправления
- Alert: кнопка закрытия съезжала вниз (#6035)
- ConfigProvider: передача параметра
platform={undefined}
перебивала значение по умолчанию из контекста (#6044)