Releases: VKCOM/VKUI
v6.6.0
Important
Мы приступаем к разработке следующей мажорной версии VKUI
- v7
Это значит, что мы вскоре прекратим развитие версии v6
,
выпуская только версии с исправлением критических багов.
Если у вас есть потребность в новой функциональности,
которую вы хотите видеть в v6
, пожалуйста, отпишитесь в соответствующей issue.
Улучшения
Popover
Всплывающие окна получили возможность установки фокуса на рутовом компоненте с помощью свойства auto="root"
(#7302)
ChipsSelect
- добавлено свойство
renderDropdown
(#7303) - добавлена возможность закрыть всплывающее окно кликом на стрелочку (#7462)
RichCell
Добавлено свойство afterAlign
(#7192)
Header
Добавлены свойства before
, beforeTitle
, afterTitle
, beforeSubtitle
, afterSubtitle
(#7202)
Card/CardGrid/ContentCard
Улучшена доступность (#7238)
CardScroll
Touch
Улучшена производительность компонента (#7272)
Switch:
Уменьшен размер в компактном (sizeY="compact"
) режиме (#7440)
Tooltip
Добавлено свойство closable
(#7438)
ScreenSpinner
Добавлено свойство mode="overlay" | "shadow"
(#7484)
Group
- добавлены подкомпоненты
Group.Container
,Group.Header
,Group.Description
(#7395)<Group.Container> <Group.Header> <Header>Адреса</Header> </Group.Header> <CellButton onClick={noop}>Добавить домашний адрес</CellButton> <CellButton onClick={noop}>Добавить рабочий адрес</CellButton> <Group.Description> Для использования в мини-приложениях, Delivery Club, VK Taxi и других сервисах ВКонтакте. Эти адреса видны только Вам. </Group.Description> </Group.Container>
- добавлен подкомпонент
Group.ExpandedContent
, позволяющий игнорировать горизонтальные или вертикальные отступыGroup
(#7396)
Зависимости
- обновлён пакет @vkontakte/vkui-tokens с
4.51.0
до4.53.3
(#7501)
Документация
- Storybook: добавлены пресеты для конфигурации свойств компонента (#7389)
- изменена
CDN
для работы с @vkontakte/vkui-tokens с unpkg на jsdelivr (#7483)
Внутренние изменения
- кодовая база подготовлена для работы с React Compiler, изменения затронули следующие компоненты:
- Checkbox (#7482)
- DatePicker (#7478)
- OnboardingTooltip (#7475)
- Tooltip (#7491)
- Popover (#7472)
- Spacing (#7470)
- CustomScrollView (#7479)
- удалён мертвый код (#7490)
- ModalRoot: сделан
clean-up
кода (#7344)
Исправления
v6.5.3
Исправления
- CustomSelect: исправлена проблема с изменением позиции курсора с помощью мыши (#7508)
- Image: исправлено неверное позиционирование
children
(#7511)
v6.5.2
Исправления
- Исправлена ошибка
TypeError: Uncaught TypeError: Cannot read properties of undefined (reading 'shown')
, которая могла возникать при использовании компонентов Tooltip / Popover при переводе компонента из неконтролируемого состояния в контролируемое (#7285) - Footer: добавлена роль
role="contentinfo"
, если используется тег<footer>
, а также добавлены рекомендации по доступности (#7378) - Flex: поправлен неправильный расчёт
margin
(#7426) - Search: кнопка очистки была доступна несмотря на то, что поиск был в неактивном состоянии (#7422)
- FormLayoutGroup: удален неиспользуемый класс (#7423)
- CustomSelect / ChipsSelect: исправлены скругления границ инпута при открытии дропдауна при определённых условиях (#7419)
- Исправлена поддержка свойства
hidden
(#7430) - Input/FormField: ряд исправлений (#7425)
- исправлено изменение цвета фона и обводки при наведении в состоянии
error/valid
- в режиме
mode="plain"
и состоянииstatus="valid" | "error"
в активном состоянии появилась обводка соответствующего цвета - в режиме
mode="plain"
и состоянииstatus="valid"
фон стал соответствовать дизайн-системе (--vkui--color_background_positive_tint
)
- исправлено изменение цвета фона и обводки при наведении в состоянии
Документация
v6.5.1
Исправления
- Group: поправлено автоматическое определение
mode="card"
, когдаmode
не передан, а параметр адаптивности SizeX определяется как Regular. (#7345) - Tappable: при передаче
Component="button" | "a" | "input"
безonClick
|href
, компонент считался не кликабельным (#7390) - CustomSelect:
- DateRangeInput/DateInput/CustomSelect: из типов убрано неиспользуемое свойство
maxHeight
(#7408) - Cell: добавляем полноценную поддержку
disabled
-свойства. Раньше оно использовалось для того, что сделать ячейки неинтерактивными - теперь это решается отсутствием пропаonClick
.disabled
- помечает ячейку как недоступную (она становится серой) (#7405) - View: после двойного жеста свайпбэка интерфейс переставал быть кликабельным (#7392)
- Image:
keepAspectRatio
больше не требует явного задания ширины/высоты родителя (#7342)
Документация
- CustomScrollView: исправлено отображение заголовка в примере (#7346)
- ActionSheet: обновлен пример в режиме
selectable
вstyleguide
иstorybook
, чтобы показать правильное использование компонента (#7394) - ActionSheetItem: добавлен раздел по цифровой доступности с рекомендациями (#7394)
- WriteBar: пример в
storybook
сделан более интерактивным (#7376) - FormItem: исправлен пример с валидацией почты (#7374)
- Иконка копирования ссылки на тему на маленьких устройствах вылезала за пределы экрана (#7350)
- ModalRoot: исправлен отступ между кнопками в модальной карточке (#7348)
v5.10.2
Исправления
- Select/NativeSelect/DatePicker: убрали передачу неиспользуемых свойств из
Select
вNativeSelect
(#6666) - CalendarRange/DateRangeInput: поправлена типизация передаваемого значения в
onChange
(#6665)
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.
поправили их генерацию (#7354)
v6.5.0
Warning
В рамках #7280 изменились внутренние импорты.
Если вы по какой-то причине использовали внутренние импорты,
рекомендуем ознакомиться с изменениями.
Новые компоненты
SelectionControl + Checkbox / Radio
Компонент для создания ячеек из таких переключателей как Checkbox, Radio и Switch (#7119)
В рамках задачи по созданию этого компонента, <input />
элементов Checkbox и Radio вынесены в под-компоненты <Checkbox.Input />
и <Radio.Input />
, соотвественно.
Пример использования:
<Group>
<SelectionControl>
<Checkbox.Input />
<SelectionControl.Label description="Description">Title</SelectionControl.Label>
</SelectionControl>
<SelectionControl>
<Radio.Input />
<SelectionControl.Label description="Description">Title</SelectionControl.Label>
</SelectionControl>
<SelectionControl>
<SelectionControl.Label description="Description">Title</SelectionControl.Label>
<Switch />
</SelectionControl>
</Group>
Улучшения
-
Flex.Item: свойства
alignSelf
,flex
иflexBasis
теперь необязательны,flexBasis
теперь также принимает строки (#7329) -
ChipsInput: удалены значения по умолчанию для
getOptionValue
,getOptionLabel
,getNewOptionData
(#7280) -
FixedLayout/OnboardingTooltipContainer: добавлено свойство
Component
(#7237) -
CustomScrollView: добавлена поддержка горизонтального скролла (#7130)
-
CellButton: изменен акцентный цвет (#7330)
-
Удалены лишние префиксы
WebkitTransform
иWebkitTransition
(#7299) -
Добавлен экспорт хука
useOrientationChange
(#7324)
Исправления
- TextArea: исправлен некорректный скролл (#7273)
- ActionSheetItem: исправлена навигация с клавиатуры в режиме
selectable
(#7216) - ModalRoot: исправлена работа скролла в модальных окнах (#7325)
- Group: исправлена адаптивность в модальных окнах (#7284)
- Cell: удалены лишние отступы в режиме
draggable
иmode='selectable'
(#7327) - Всплывающие окна с поддержкой
autoFocus
теперь не игнорируют это свойство, когда контент внутри всплывающего окна изменяется (#7331)
Зависимости
- Обновлён пакет @vkontakte/vkui-tokens с 4.49.0 до 4.51.0 (#7297)
- Удалена внутренняя зависимость mitt за ненадобностью (#7319)
- Библиотека dayjs заменена на date-fns (#7320)
Документация
- CustomScrollView: добавлена документация (#7130)
v6.4.1
v6.4.0
Улучшения
Tooltip
Добавили новой свойство disableTriggerOnFocus
, чтобы запретить появление тултипа при фокусе (#7267)
ChipsSelect/ChipsInput/FormField
Добавили новое свойство maxHeight
, чтобы контролировать максимальную высоту компонента, после которой появляется скроллбар (#7124)
Snackbar
В мобильном режиме bottom-end
больше не перебивается на bottom-start
. Также теперь можно закрыть Snackbar
свайпом в любое из направлений по горизонтали (#7265)
ScreenSpinner
v6.3.1
Исправления
- CustomSelect: исправлено поведение в режиме
searchable
. После поиска по опциям по клику выбиралось не то значение (#7226) - Cell: по умолчанию, при передаче
href
, компонент должен использовать тегa
(#7242) - ModalDismissButton: изменён токен состояний
hover
иactive
и сами состояния теперь задаются черезbackground-color
(#7243, спасибо @qurle!)
Улучшения
Popover
Добавлен параметр onShownChanged
, который работает как onShownChange
, но при этом дожидается окончания анимации.
v6.3.0
Новые компоненты
SimpleGrid
Добавлен новый компонент для раскладки элементов, на базе grid
(#6233 )
Улучшения
AspectRatio
Добавили возможность переопределять свойство Component
(#7148)
FormItem / Radio / RadioGroup
Доработали цифровую доступность для компонентов (#7089)
- У FormItem появился параметр
topId
для указания атрибутаid
у<label />
- У RadioGroup теперь объявлена роль
role="radiogroup"
- На страницах Radio и RadioGroup добавили раздел Цифровая доступность
EllipsisText
Добавлен параметр maxLines
(#7091)
CustomSelect
Добавлен параметр getSelectInputRef
для получения ссылки на элемент <input />
(#7118)
Image
Добавлен параметр objectFit
для изменения стиля object-fit
у картинки (#7123)
Добавлено свойство keepAspectRatio
для сохранения оригинальных пропорций картинки (#7187)
Добавлены параметры borderStartStartRadius
, borderStartEndRadius
, borderEndStartRadius
и borderEndEndRadius
для скругления отдельных углов (#7100)
CustomScrollView, CustomSelect, ChipsSelect
Добавлен параметр overscrollBehavior
для возможности изменения стиля overscroll-behavior
у компонента CustomScrollView
(#7111)
Теперь в CustomSelect
и в ChipsSelect
можно прокинуть параметры autoHideScrollbar
и autoHideScrollbarDelay
(#7151)
ChipsSelect
Добавлена кнопка очистки.
Свойства:
allowClearButton
, для отображения кнопки очисткиClearButton
для возможности переопределить кнопку очистки.
Checkbox
Добавлен раздел Цифровая доступность в документации (#7101)
List
Добавлен параметр gap
для установки промежутка между элементами. (#7094)
HorizontalCellShowMore
Добавил параметр centered
. При передаче которого, компонент выравнивается по центру по вертикали относительно родителя (#7110)
Cell/SimpleCell/MiniInfoCell/RichCell
Используем токены расстояний вместо числовых констант (#7033)
Panel
Добавлено свойство disableBackground
, которое отключает фон
UsersStack
Теперь вместо массива ссылок photos
можно передать массив с функциями рендера обертки над аватарками. Это нужно для добавления дополнительных элементов или тултипов над аватаркой (#7116)
Separator
Добавлен prop mode
для управления стилем отображения компонента (#7149)
FormLayoutGroup
Улучшена цифровая доступность компонента:
- по умолчанию используется
fieldset
вместоdiv
- Добавлен раздел "Цифровая доступность" в документацию компонента
(#7155)
Search
Расширена возможность прокидывания prop icon
в компонент Search
. Теперь можно удобно добавлять обертку для компонента. Пример в документации
(#7176)
Textarea
Добавлены параметры before
и after
для компонента TextArea
(#6307)
FormField
Добавлены параметры afterAlign
и beforeAlign
для выравнивания иконок по вертикали (#6307)
Snackbar
Цвет фона изменен на токен colorBackgroundContrastThemed
(#7211)
Gradient
Добавлен новый режим mode="overlay"
(#7236)