Skip to content

v8.0.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 30 Mar 14:04
· 266 commits to master since this release
v8.0.0
139963a

TL;DR

Документация по миграции с v7 на v8

BREAKING CHANGE

Tip

Чтобы упростить переход на новую мажорную версию, можно воспользоваться инструментом по автоматической миграции ваших компонентов

Подробную информацию можно найти на этой странице.

Улучшения

  • Обновлён список поддерживаемых браузеров

    - ChromeAndroid >= 63
+ ChromeAndroid >= 84
- iOS >= 12
+ iOS >= 15
- Chrome >= 63
+ Chrome >= 84
- Firefox >= 55
+ Firefox >= 115
- Edge >= 79
+ Edge >= 109
- Opera >= 50
+ Opera >= 90
- Safari >= 12
+ Safari >= 15
- Samsung >= 8.2
+ Samsung >= 14

  • Поднята целевая версия ECMAScript для компиляции с es2017 до es2020 (#9306)

  • Для поддержки React Compiler изменен внутренний код ряда компонентов (#6919)

  • ActionSheet:

    • Обработчик onClose переименован в onClosed, сам onClose теперь срабатывает перед началом анимации закрытия (#9285)
    • Параметр передаваемый в onClosed помечен как устаревший и будет удален в v10. Для получения причины закрытия используйте reason, передаваемый в onClose (#9285)
    • Экспортируемый тип ActionSheetOnCloseOptions устарел и будет удален в v10 – испозьуйте тип ActionSheetOnCloseReason (#9285)

  • ChipsSelect:

    • Переключение между управляемым и неуправляемым состоянием компонента больше не обрабатывается (#9246)
    • Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9063, прокидываются в корень компонента (#9186)

  • Banner: В свойстве imageTheme добавлено значение auto для того, чтобы imageTheme определялось автоматически, в зависимости от цветовой схемы приложения – auto теперь используется как значение по умолчанию (#9188)

  • Alert:

    • Добавлен обработчик закрытия, срабатывающий перед анимацией закрытия onClose, в которое передается reason – причина закрытия (#9282)
    • Свойство onClose переименовано на onClosed (#9282)

  • DateInput:

    • Флаг accessible теперь включен по умолчанию (#9194)
    • Изменен тип свойства onChange на (value: Date | null) => void (#9195)

  • DateRangeInput:

    • Флаг accessible теперь включен по умолчанию (#9194)
    • Изменен тип свойства onChange на (value: DateRangeType | null) => void. Теперь value может быть null при сбросе выбранного промежутка дат (#9195)

  • Calendar: Изменен тип свойства onChange на (value: Date) => void (#9195)

  • CalendarRange: Изменен тип свойства onChange на (value: DateRangeType) => void. Теперь value может быть null при сбросе выбранного промежутка дат (#9195)

  • PopoutWrapper: Свойство fixed было удалено. Вместо него можно использовать свойство strategy (#9232)
    Примеры правильной миграции:

    <PopoutWrapper
  closing={closing}
  onClick={close}
- fixed={false}
+ strategy="none"
>

</PopoutWrapper>
    <PopoutWrapper
  closing={closing}
  onClick={close}
- fixed
>

</PopoutWrapper>

  • ContentBadge: Изменены цвета компонента при appearance="neutral" в режимах primary и secondary (#9190)

  • Snackbar: Переименовано свойство onClose в onClosed (#8839)
    Свойство onClose переименовано в onClosed для улучшения семантики. Обработчик onClosed вызывается после окончания анимации закрытия снекбара, а не в момент начала закрытия.
    Пример миграции:

    - <Snackbar onClose={() => setSnackbar(null)}>
+ <Snackbar onClosed={() => setSnackbar(null)}>
  Message
</Snackbar>

  • RichCell:

    • Изменена структура рендеринга контента. Свойства after и afterCaption теперь рендерятся справа от основного блока, а новые свойства meta и submeta - внутри основного блока после основного контента (#9304)
    • Свойство afterCaption помечено как deprecated и будет удалено в v10. Используйте submeta вместо afterCaption (#9304)

  • SegmentedControl: Улучшено выведение типов (#9160)

  • Свойства baseClassName и baseStyle были удалены (#9214)

  • Удален устаревший HOC withModalRootContext, вместо него можно использовать хук useModalRootContext. Также из контекста были удалены методы updateModalHeight, registerModal (#9278)

Исправления

  • RichCell: Минимальная высота RichCell уменьшена до 48px - compact и 44px - regular (#9283)
  • File: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9044, прокидываются в корень компонента (#9181)
  • Checkbox: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9043, прокидываются в корень компонента (#9180)
  • Radio: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9043, прокидываются в корень компонента (#9180)
  • Switch: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9043, прокидываются в корень компонента (#9180)
  • WriteBar: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9086, прокидываются в корень компонента (#9184)
  • Textarea:
    • Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9086, прокидываются в корень компонента (#9184)
    • Изменены внутренние отступы для компактного режима (#9247)
    • На safari не было отступа снизу для placeholder (#9481)
  • SplitLayout: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9069, прокидываются в корень компонента (#9182)
  • Input: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9084, прокидываются в корень компонента (#9183)
  • Search: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9084, прокидываются в корень компонента (#9183)
  • CustomSelect:
    • Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9045, прокидываются в корень компонента (#9185)
    • Флаг accessible теперь включен по умолчанию (#9194)
  • NativeSelect: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9045, прокидываются в корень компонента (#9185)
  • ChipsInput: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9063, прокидываются в корень компонента (#9186)
  • Button:
    • Исправлена потеря фокуса при loading={true} (#9312)
      Кнопки со свойством loading больше не получают атрибут disabled, что позволяет сохранять фокус во время загрузки. Добавлены ARIA-атрибуты (aria-busy, aria-disabled) для правильной работы со скринридерами.
    • Добавлено свойство loadingLabel для указания лейбла при loading={true} (#9312)
    • Улучшена доступность ссылок с loading и disabled согласно WAI-ARIA (#9312)
      Для ссылок (href) с состоянием loading или disabled теперь корректно удаляется атрибут href, добавляется role="link" и устанавливаются необходимые ARIA-атрибуты для правильной работы с ассистивными технологиями.
  • HorizontalCell: Ширина для размеров теперь фиксированная (#9316)
  • Из-за отказа от happy-css-modules, именование всех CSS классов переведёно в camelCase формат (#9355)

Не ломающие изменения

Улучшения

  • AdaptivityProvider: Свойства sizeX и sizeY теперь @deprecated, используйте density вместо sizeY, viewWidth={ViewWidth.MOBILE} вместо sizeX="compact" и viewWidth={ViewWidth.SMALL_TABLET} вместо sizeX="regular" (#9334)

    Пример миграции 

    - <AdaptivityProvider sizeX="compact">
+ <AdaptivityProvider viewWidth={ViewWidth.MOBILE}>

- <AdaptivityProvider sizeX="regular">
+ <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET}>

- <AdaptivityProvider sizeY="compact">
+ <AdaptivityProvider density="compact">

- <AdaptivityProvider sizeY="regular">
+ <AdaptivityProvider density="regular">

- <AdaptivityProvider sizeX="compact" sizeY="compact">
+ <AdaptivityProvider viewWidth={ViewWidth.MOBILE} density="compact">

- <AdaptivityProvider sizeX="regular" sizeY="regular">
+ <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET} density="regular">

- <AppRootProvider sizeX="regular" sizeY="compact">
+ <AppRootProvider viewWidth={ViewWidth.SMALL_TABLET} density="compact">

- <AppRootProvider sizeX="compact" sizeY="regular">
+ <AppRootProvider viewWidth={ViewWidth.MOBILE} density="regular">

  • Box, Flex, SimpleGrid:

    • Свойство position расширено значением sticky (#9279)
    • Свойство padding, включая его производные, теперь поддерживает значение 'system', которое применяет платформенные отступы из @vkontakte/vkui-tokens – это упростит миграцию с устаревшего компонента Div на Box (#9388)

  • ActionSheet: Добавлена поддержка slotProps.iosCloseItem для упрощения локализации кнопки "Отмена" (#9307)
    Теперь можно передавать пропсы напрямую в ActionSheetDefaultIosCloseItem без необходимости создавать обёртку:

    <ActionSheet
  slotProps={{
    iosCloseItem: {
      children: i18n("cancel"),
    },
  }}
/>

  • ActionSheetItem: Свойства mode="cancel" и isCancelItem отмечены как устаревшие. Вместо этого используйте компонент ActionSheetDefaultIosCloseItem (#9307)

  • RichCell: Добавлены новые свойства meta и submeta для размещения дополнительного контента внутри основного блока (#9304)

  • ModalRoot: Компонент помечен как устаревший. В VKUI v10 станет внутренним. Вместо него используйте хук useModalManager (#8847)

  • ModalRoot, ModalCard, ModalPage: Добавлены свойства disableOpenAnimation и disableCloseAnimation для отключения анимаций открытия и закрытия модальных окон (#8847)

  • Button: Добавлено свойство elevation для тени (#9379)

  • FormLayoutGroup: Добавлено свойство noPadding (#9415)

  • Удалены проверки типа hasOwnProperty (#9581)

  • Snackbar: Экспортирован тип компонента Snackbar.Basic - SnackbarBasicProps (#9611)

  • Search: В slotProps был добавлены слоты clearButton, свойство clearButtonTestId отмечено как @depracated (#9638)

Исправления

  • Улучшена производительность компонентов связанных с датами и временем за счёт кеширования инициализации объекта Intl (#9340)
  • FormField: Исправлена обработка onMouseEnter и onMouseLeave (#9331)
  • Button: После завершения загрузки (loading: true → false) кнопка больше не остаётся в визуальном состоянии hover (#9478)
  • Все токены с --vkui--opacity_disable_accessibilty заменены на --vkui--opacity_disable, т.к. первый отмечен устаревшим VKCOM/vkui-tokens#1371 (#9473)
  • Calendar:
    • Корректная работа с пропом timezone при выборе дня и при смене часов/минут в режиме выбора времени (время и день больше не сдвигаются из‑за системной таймзоны) (#9474)
    • Исправлен баг с некорректным отображением цифр в меню времени при наличии скролл-бара (#9480)
  • DateInput: Корректное отображение и ввод даты/времени при заданном timezone (и в календаре, и при ручном вводе в поля) (#9474)
  • CustomSelectOption: Добавлено свойство textNoWrap для предотвращения переноса текста (#9480)
  • Accordion: По интерактивным элементам можно было навигироваться внутри скрытого аккордиона (#9496)
  • Tappable: active состояние у вложенных элементов всплывало на верх (#9573)

Новые компоненты

  • useSnackbarManager: Хук для централизованного управления снекбарами в приложении (#8839)
    Хук предоставляет удобный API для работы со снекбарами: открытие, закрытие, обновление, поддержка очереди с настраиваемым лимитом и стратегией переполнения. Также поддерживает создание кастомных снекбаров с произвольным компонентом.
  • useModalManager: Хук для централизованного управления модальными окнами в приложении (#8847)
    Хук предоставляет удобный API для работы с модальными окнами (ModalPage и ModalCard): открытие, закрытие, обновление, поддержка истории открытия. Также поддерживает создание кастомных модальных окон с произвольным компонентом.
  • FocusTrap: Компонент для управления фокусом, который зацикливает навигацию через Tab и Shift + Tab внутри определённой области. Используется для обеспечения доступности модальных окон, диалогов, всплывающих меню и других интерактивных элементов (#9330)

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

  • Добавлена инструкция по переходу с v7 на v8 (#9333)
  • Для раздела Компоненты в боковом меню добавлена клавиатурная навигация (#9354)
  • Исправлена проблема моргания главной страницы (#9378)
  • При навигации не раскрывалось боковое меню (#9448)
  • Сбрасывался код в редакторе после скрытия и раскрытия блока (#9511)
  • Storybook: Изменена иконка с обозначением направления текста (#9552)
  • Badge: Обновлено описание компонента (#9551)
  • Flex.Item: исправлен JSDoc c @depracated – рекомендуется использовать Box, а не Flex (#9615)

Зависимости

Assets 2
Loading