VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.
MIT License
Bot releases are hidden (Show)
Panel
градиент (#6736)minDateTime
и maxDateTime
(#6767)onRefresh()
на iOS (#6723)hover
/active
у элемента PaginationPageButton
(#6712)break-word
вместо break-all
(#6771)Select
в NativeSelect
(#6663) (#6667)layout
теперь приоритетней значения, вычисленного на основе окружения (#6731)aria-hidden
(#6687)status
или alert
в зависимости от mode
(#6701)Published by SevereCloud 8 months ago
sizeY
, если не переопределено через свойство sizeY
, определяется автоматически, если хотя бы одно из свойств AdaptivityProvider
viewWidth
или viewHeight
определено. В автоматическом определения sizeY
теперь также участвует свойство hasPointer
. Раньше его значение определялось методом из библиотеки @vkontakte/vkjs, далее передавалось напрямую в контекст и в логике AdaptivityProvider
не участвовало, что было неправильно (#6489)draggable
не работал автоскролл, если у родителя нет height: 100%
(#6456)readOnly
можно было удалять значения (#6395)disabled
свойство на опции влияет на поведение (#6640)monthNames
могло стать html-аттрибутом (#6386)enableTime
(#6446)description
(#6577)dynamicContentHeight
при height
более чем 100%
(#6637)body
, которая сбрасывалась при вызове ActionSheet
из ModalPage
(#6614)disableArrow
, взамен arrow
, которое было в v5, когда компонент назывался Tooltip (#6482)onPlacementChange
(#6482)PullToRefresh
. PullToRefresh
теперь растягивается на всю высоту контейнера, и контент (например <Placeholder stretched />
) можно отцентровать по вертикали (#6613)ref
в children
, если children
это пользовательский компонент, обёрнутый в React.forwardRef
(#6525)onPlacementChange
(#6482)autoUpdateOnTargetResize
(#6572)onPlacementChange
(#6482)<AppRoot mode="full" />
(#6389)indicator
больше не обрезается (#6477)children
, когда при использовании Conditional Rendering в DOM попадали пустые <li>
(#6442)onPlacementChange
(#6482)ImageBaseProps
(#6483)Published by inomdzhon 8 months ago
data-testid
крестику через свойство dismissButtonTestId
(#6394)sizeY
, если не переопределено через свойство sizeY
, опеределяется автоматически если хотя бы одно из свойств AdaptivityProvider
viewWidth
или viewHeight
определено. В автоматическом определения sizeY
теперь также учавствует свойство hasPointer
. Раньше оно передавалось напрямую в контекст, и в логике AdaptivityProvider
не учавствовало, что было неправильно. Раньше в логике использовалось значение hasPointer
из библиотеки, определяемое библиотекой, что могло идти вразрез со значением явно переданным в AdoptivityProvider
. (#6585)draggable
режиме исправили двойной рендеринг плэйсхолдера (#6398)draggable
не работал автоскролл если у родителя нет height: 100%
(#6461)enableTime
(#6401) (#6639)onChange
при передаче в value={[null, null]}
. Исправили пример в Storybook, он теперь реагирует на изменение даты. (#6404)input
. Теперь при фокусе на таком элементе фокус визуально виден (#6405)monthNames
в DOM, если на тач устройствах используется NativeDatePicker. Чтобы не было предупреждения в консоли. (#6410)required
нативному селекту вместо инпута. Начиная с версии 5.10.0 мы передавали свойство required
в инпут, используемый только для поиска опций селекта. Это блокировало отправку формы, даже если селект имел выбранное значение. Всё потому, что инпут для поиска по умолчанию имеет пустое value
. (#6411)getRootRef
. Больше мы это свойство не перебиваем своим значением. (#6216)ModalPage
при изменении ориентации мобильного устройства. (#6583)dynamicContentHeight
(#6641)disabled
свойство на опции влияет на поведение (#6640)body
, которая сбрасывалась при вызове ActionSheet
из ModalPage
. (#6642)hover
-эффекты (#6602)PullToRefresh
. PullToRefresh
теперь растягивается на всю высоту контейнера и контент (например <Placeholder stretched />
) можно отцентровать по вертикали. (#6644)css
, потому что это негативно влияло на потребление памяти (#6507)Published by inomdzhon 9 months ago
[!NOTE]
Полный список изменений смотрите в документации по миграции с v5 на v6.Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.
Удалили зависимость @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, чтобы продолжать поддерживать старые версии браузеров.
Tappable
.falsy
visor
заменён на float
, separator
заменён на delimiter
(#6277)separator
заменён на noSeparator
(#6277)withBorder
заменён на noBorder
(#6286)withSpaces
заменён на noSpaces
(#6286)fixDropdownWidth
заменён на dropdownAutoWidth
(#6286)withBorder
заменён на noBorder
(#6286)withBorder
заменён на noBorder
(#6286)isDraggable
заменён на dragDisabled
(#6286)withBorder
заменён на noBorder
(#6286)withPadding
заменён на noPadding
(#6286)fixDropdownWidth
заменён на dropdownAutoWidth
(#6286)shadow
заменён на plain
(#6286)fixDropdownWidth
заменён на dropdownAutoWidth
(#6286)ChipsSelect
HorizontalCellShowMore
Popover
Popper
TextTooltip
Tooltip
Предыдущий
Tooltip (v5)
переименован вOnboardingTooltip
FormLayout
, используйте нативный form
(#6302)hasMask
заменён на noBackground
(#6286)mode="embedded
класс с названием темы навешивается на ближайший контейнер AppRoot
, а не на <body>
. Также при mode="full"
классы vkui
и vkui--*
навешиваются на <html>
вместо <body>
(#6263, #6279)platform
в отдельный параметр tokensClassNames
(#5121)size="m"
фиксированная ширина заменена на максимальную ширину как при size="s"
(#6318)Для очевидных багов создавайте issues. Для всех остальных обсуждений есть дискуссии :)
Published by inomdzhon 10 months ago
README.md
(#6324)[!NOTE]
Полный список изменений смотрите в документации по миграции с v5 на v6 (страница миграции обновлена).Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.
platform
в отдельный параметр tokensClassNames
(#5121)size="m"
фиксированная ширина заменена на максимальную ширину как при size="s"
(#6318)falsy
visor
заменён на float
, separator
заменён на delimiter
(#6277)separator
заменён на noSeparator
(#6277)withBorder
заменён на noBorder
(#6286)withSpaces
заменён на noSpaces
(#6286)fixDropdownWidth
заменён на dropdownAutoWidth
(#6286)withBorder
заменён на noBorder
(#6286)withBorder
заменён на noBorder
(#6286)isDraggable
заменён на dragDisabled
(#6286)withBorder
заменён на noBorder
(#6286)withPadding
заменён на noPadding
(#6286)hasMask
заменён на noBackground
(#6286)fixDropdownWidth
заменён на dropdownAutoWidth
(#6286)shadow
заменён на plain
(#6286)fixDropdownWidth
заменён на dropdownAutoWidth
(#6286)Команда VKUI поздравляет всех с наступающим Новым Годом 🎉
Увидимся в следующем году 😎
Published by inomdzhon 10 months ago
appearance
(#6243)README.md
(#6257)[!NOTE]
Полный список изменений смотрите в документации по миграции с v5 на v6 (страница миграции обновлена).Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.
FormLayout
, используйте нативный form
(#6302)mode="embedded
класс с названием темы навешивается на ближайший контейнер AppRoot
, а не на <body>
. Также при mode="full"
классы vkui
и vkui--*
навешиваются на <html>
вместо <body>
(#6263, #6279)Published by inomdzhon 11 months ago
[!NOTE]
Полный список изменений смотрите в документации по миграции с v5 на v6.Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.
[!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, чтобы продолжать поддерживать старые версии браузеров.
Tappable
ChipsSelect
HorizontalCellShowMore
Popover
Popper
TextTooltip
Tooltip
Предыдущий
Tooltip (v5)
переименован вOnboardingTooltip
Для очевидных багов создавайте issues. Для всех остальных обсуждений есть дискуссии :)
Published by BlackySoul 11 months ago
Snackbar.Basic
– это тот же Snackbar
, но только вёрстка, без логики (#5932)Tappable
(#5918)Avatar.getInitialsFontSize
для определения размера шрифта в аватарах (#5923)withTransparentBackground
. Полезно для отображения картинок с прозрачностью. (#5924)widthSize
и heightSize
(#5682)before
(#5959)mode=default
, который позволяет подстраиваться под текущую тему (#5827)labelProps
для того чтобы можно было передавать data-*
аттрибуты лэйблу, в который обёрнут инпут. Основная цель - позволить в e2e-тестах находить именно лейбл. (#6037)modalOverlayTestId
для передачи data-testid на оверлей (#6052)modalDismissButtonTestId
для передачи data-testid на оверлей (#6051)draggable
режима (#5833)dismissButtonMode
для возможности показать крестик закрытия внутри модальной карточки (#6068)noMaxHeight
для отображения выпадающего меню без скролла (#6045)getRootRef
, c HTMLLabelElement
на HTMLDivElement
.minDateTime
/maxDateTime
позволяют запретить выбор определенных дат с учетом времени (#5866)layoutFillMode
для возможности управления растягиванием/сжатием вкладок (#6114)useInsets()
, если не передан safeAreaInsets
(#6071)status={0}
отображается корректно (#6125):focus-visible
-состояния, чтобы больше не появлялся скролл в родительском элементе (#5876)withInsets
помечен как @deprecated
и будет удалён в v6 – используйте useInsets()
из @vkontakte/vk-bridge-react (#6071)[!IMPORTANT]
Как сообщалось в Release notes v5.9.4, мы приступили к разработке v6, поэтому это финальная минорная версия VKUI v5. В дальнейшем мы будем править критические проблемы.
Published by mendrew 12 months ago
ModalPage
/ModalCard
, если внутри модалки нет элемента, на котором уже есть фокус (#6054)renderOption
, чтобы можно было передавать опции с раширенным набором свойств (#6076)Published by SevereCloud 12 months ago
platform={undefined}
перебивала значение по умолчанию из контекста (#6044)Published by SevereCloud 12 months ago
overscroll-behavior: none
на html
при открытой модальной странице, чтобы исключить возможность появления нативного pull-to-refresh в браузерах, поддерживающих свойство overscroll-behavior
. (#6004)overscroll-behavior: none
на html
, чтобы в браузерах, поддерживающий свойство overscroll-behavior
, исключить вызов нативного pull-to-refresh. (#6004)[!IMPORTANT]
Мы приступаем к разработке v6, поэтому начиная с версииv5.10.0
будет отдаваться приоритет новой мажорной версии. По VKUI v5, по возможности, будем править только критические проблемы.
Published by SevereCloud about 1 year ago
option
всегда передается в renderOption
(#5973)header
(#5966)header
, поправили доступность (#5996 by @ntvsx193)word-break: break-word
для header
и text
(#5966)Published by BlackySoul about 1 year ago
getRootRef
на недостающие элементы (#5916)renderOption
(#5950)before
/after
и stretched
(#4049)looped
в связке с timeout
(#5951)Published by BlackySoul about 1 year ago
mode=plain
(#5906)Published by SevereCloud about 1 year ago
useNavId
для определения id панели (#5743)after
(#5828)mode: 'sheet' | 'menu'
, позволяющее переключать режим отображения (#5829)rounded
(#5648)removable
(#5745)segmented
при mode="vertical"
(#5802)height
(#5830)activated
(#5826)data-testid
там, где это раньше было невозможно (#5792):
data-testid
компонентам отечающим за действия внутри Alert через элементы actions
.data-testid
обертке вокруг основного текста ModalPageHeader
через typographyProps
.modalContentTestId
, устанавливающий data-testid
на обёртку вокруг контента ModalPage
, отвечающую за скролл внутри модального окна.looped
для возможности работы галереи в режиме карусели (#5744)aside
часть компонента для выравнивания контента (#5681)direction
возможность задать up
и down
(#5839)FloatingPlacement
(#5809)before
/after
, за счёт понижения специфичности и избавления от привязки к .vkuiIcon
классу. (#5873).HorizontalCell__content
если внутри пусто (не переданы header
/subtitle
/extraSubtitle
(#5884)font-weight: inherit
(#5902)overflow-x: hidden
у body
, так как это ломает библиотеки (react-virtualizer), реализующие виртуальные списки и вешающие обработчик события scroll
на window
. (#5890). Рекоммендуем пользователям библиотеки самим выставлять overflow-x: hidden
на body
, если это действительно нужно по какой-то причине.4.38.1
и поддержали динамические токены --vkui--size_border--regular
и --vkui--color_separator_primary
(#5783, #5791)@vkontakte/vkui
, что позволяет при переходе к определению (go to definition) направлять в .ts
файл, а не .d.ts
(#5748)Published by SevereCloud about 1 year ago
header
(#5799)overlay
при достаточно быстром переключении между ModalCard
(#5805)PanelHeader
(#5851)Published by SevereCloud about 1 year ago
Published by inomdzhon about 1 year ago
getRootRef
на всех компонентах (#5651)ActionSheet
в ActionSheet.onClose
(#5597)noPadding
(#5600)borderRadiusMode
для возможности унаследовать радиус скругления от родителя (#5619)<b>
в типографических компонентах теперь выставляем font-weight: var(--vkui--font_weight_accent1);
(#5622)layout
, отвечающее за вид Group
(#5642)disableParentTransformForPositionFixedElements
, отключающее создания нового слоя для position: fixed
элементов при mode="embedded"
(#5692)outline-tint
(#5533)<input type="number" />
при передаче type="number"
(#5607)filterFnForSelect
(defaultFilterFn
из lib/select
) (#5601)ConfigProvider
больше не удаляет из body
добавленные другими приложениями классы при размонтировании. (#5633)hideWhenReferenceHidden
, чтобы тултип не прыгал, а сразу автоматически скрывался при исчезновении элемента, к которому тултип привязан. (#5690)Storybook
для всех компонентов (#5694)textLevel
, которого нет в интерфейсе компонента (#5736)4.35.1
до 4.36.0
(#5580)2.0.1
до 2.0.2
(#5735)Important
В связи с переносом @vkontakte/icons в прямые зависимости вы можете столкнуться с дублированием зависимостей. Если это случилось, не паникуйте: на помощь придет дедупликация.
npm
Команда npm dedupe
npm dedupe
Yarn Classic
Утилита yarn-deduplicate
npx yarn-deduplicate --packages @vkontakte/icons
Yarn Modern
Команда yarn dedupe
yarn dedupe @vkontakte/icons
pnpm
Команда pnpm dedupe
pnpm dedupe
VKUI создавался как инструмент для создания клиентской части мини-приложений ВКонтакте. В связи с этим VKUI изначально интегрирован с библиотекой VK Bridge, которая реализует общение между VK Mini Apps и официальными клиентами ВКонтакте.
Сегодня разработчики используют VKUI, чтобы создавать полноценные независимые приложения, которые никак не связаны с VK Mini Apps, но наследие остается, и иметь с ним дело приходится всем. Поэтому мы приняли решение удалить интеграцию с VK Bridge, начиная со следующей мажорной версии (v6).
В рамках этого релиза в качестве подготовки к удалению интеграции мы:
Published by BlackySoul about 1 year ago
margin-top
(#5574)display: none
(#5595)Group
с пропром separator="show"
(#5623)load
не вызывается и компонент имеет не верное состояние (#5602)autoFocus
(#5665, #5662)showSelected
, теперь выбранные опции не убираются из списка при showSelected=true
(по умолчанию true
) (#5684)Select
(#5606)ModalPage
(#5676)text-overflow: ellipsis
на children
(#5672)before
(#5696)Published by SevereCloud about 1 year ago