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

• улучшена доступность (#7238)
• изменены data-testid (#7343)

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)

Исправления

• удалена возможность выделять и копировать скрытый визуально текст (#7468)
• Gallery: исправлен баг с анимацией смены слайда в контролируемом компоненте (#7485)
• Flex: исправлена работа вложенных Flex (#7492)

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)

Документация

• Search: в описании <input type="text" /> заменён на <input type="search" /> (#7459)
• Chip: из-за опечатки отсутствовала страница документации (#7424)
• Актуализированы ссылки на документацию React (#7447, спасибо @suprunchuk ❤️)

v6.5.1

Исправления

• Group: поправлено автоматическое определение mode="card", когда mode не передан, а параметр адаптивности SizeX определяется как Regular. (#7345)
• Tappable: при передаче Component="button" | "a" | "input" без onClick | href, компонент считался не кликабельным (#7390)
• CustomSelect:
  • в скринридере NVDA не зачитывалось выбранное значение (#6974)
  • в Firefox при переходе по опциям вместо опции зачитывалось слово "секция" (#6974)
• 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)

• Alert: удалено значение по умолчанию для actions (#7280)

• ChipsInput: удалены значения по умолчанию для getOptionValue, getOptionLabel, getNewOptionData (#7280)

• FormField: убрано задание фиксированной высоты (#7264)

• 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

Исправления

• List: исправлено выпадение контента за пределы родителя (#7278)
• ChipsSelect: исправлено появление повторяющихся ключей (key) при рендере options, если есть опции с одинаковым значением option.label (#7276)

v6.4.0

Улучшения

Tooltip

Добавили новой свойство disableTriggerOnFocus, чтобы запретить появление тултипа при фокусе (#7267)

ChipsSelect/ChipsInput/FormField

Добавили новое свойство maxHeight, чтобы контролировать максимальную высоту компонента, после которой появляется скроллбар (#7124)

Snackbar

В мобильном режиме bottom-end больше не перебивается на bottom-start. Также теперь можно закрыть Snackbar свайпом в любое из направлений по горизонтали (#7265)

ScreenSpinner

• добавлены подкомпоненты: ScreenSpinner.Container, ScreenSpinner.Loader, ScreenSpinner.SwapIcon (#7250)
• исправлен фокус на компоненте в режиме state="cancellable" (#7250)

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)

Исправления

• Анимация заднего фона у модальных окон не срабатывала (#7232)
• View: открытие панели из модалки с клавиатурой сохраняло неверное положение скролла (#7208)
• TabsItem: был неверный цвен фона при наведении (#7233)
• Flex: приоритет flexBasis был выше чем в свойстве style (#7240)