Releases: VKCOM/VKUI
v6.1.1
Исправления
- Cell: в режиме
draggable
прекращался автоскролл при выходе мышки за область видимости (#6971) - SplitLayout: свойство
center
не работало (#6987) - DatePicker: исправили сброс значений неконтролируемого компонента (#6978)
- Textarea: скролл не был скруглен (#6993)
- Исправили падение сборки из-за использования
React.use
с версиейreact: 18.*.*
(#7008)
Документация
v6.1.0
Новые компоненты
Skeleton
Долгожданный скелетон (#5941).
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). -
Добавлено свойство
topAside
(#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 ❤️).
Panel
Добавлено свойство 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 ❤️)
Spacing
К свойству size
добавлена возможность передавать строковые значения размеров, соответствующие размерам из системы расстояний (#6684, #6925)
SplitLayout
Добавлено свойство centered
– теперь не придётся руками объявлять CSS в style
для центровки (#6951)
Slider
Добавлено свойство size?: 's' | 'm' | 'l'
определяющее размер ползунка (#6819)
TabsItem
- Поддержаны свойства ссылок (#6439).
- Добавлена возможность переопреде...
v6.0.3
Исправления
- TabsItem: убрали прозрачность для
mode=secondary
(#6809) - ActionSheetItem: исправили отступы (#6813)
- SegmentedControl: исправили зависание
hover
-состояния на смартфонах (#6818) - Button: вернули анимацию при смене фона и цвета шрифта (#6880)
- Link: обнулили свойство
text-align
, т.к. при пустомhref
компонент использует тэг<button>
, которому браузер по умолчанию выставляетtext-align: center
(#6881) - SimpleCell: нормализовали отступ от иконки на платформе
iOS
(#6829)
Документация
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 переменные
Документация
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. Для всех остальных обсуждений есть дискуссии :)