v8.0.0-rc.2

Исправления

• Button: После завершения загрузки (loading: true → false) кнопка больше не остаётся в визуальном состоянии hover (#9478)
• Calendar:
  • Корректная работа с пропом timezone при выборе дня и при смене часов/минут в режиме выбора времени (время и день больше не сдвигаются из‑за системной таймзоны) (#9474)
  • Исправлен баг с некорректным отображением цифр в меню времени при наличии скролл-бара (#9480)
• DateInput: Корректное отображение и ввод даты/времени при заданном timezone (и в календаре, и при ручном вводе в поля) (#9474)
• Textarea: На safari не было отступа снизу для placeholder (#9481)
• CustomSelectOption: Добавлено свойство textNoWrap для предотвращения переноса текста (#9480)
• Accordion: По интерактивным элементам можно было навигироваться внутри скрытого аккордиона (#9496)

Улучшения

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

Зависимости

• @vkontakte/vkui-tokens обновлен с 4.71.0 до 4.73.1 (#9428)
• @vkontakte/vkui-floating-ui обновлен с 0.2.7 до 0.2.8 (#9477)

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

• При навигации не раскрывалось боковое меню (#9448)

v7.11.5

Исправления

• Свайпбек мог блокировать тач события (#9471)

@vkontakte/vkui-codemods@1.1.0-beta.2

Улучшения

• Добавлен кодмод для компонента ActionSheet на изменение свойства onClose -> onClosed

v7.11.4

Исправления

• SimpleGrid: gap по умолчанию 0 (#9449)
• ModalCard: Исправлена анимация открытия/закрытия (#9447)
• Touch: События onStart, onEnd могли два раза вызываться на Android (#9446)

v8.0.0-rc.1

Note

см. https://github.com/VKCOM/VKUI/releases/tag/v8.0.0-rc.0

Исправления

• Не все свойства, которые должны пробрасываться через корневой элемент, были объявлены в типах, в частности, это касается Input (не хватало min, max) (#9444)

• Улучшена производительность компонентов связанных с датами и временем за счёт кеширования инициализации объекта Intl (#9340)

• Из-за отказа от happy-css-modules, именование всех CSS классов переведёно в camelCase формат (#9355)

• Для возможности использовать scroll-snap-type, ещё немного обновили версии поддерживаемых браузеров (#9377)

  - ChromeAndroid >= 68
  + ChromeAndroid >= 69
  
  - Chrome >= 68
  + Chrome >= 69
  
  - Samsung >= 9
  + Samsung >= 10.1

• Удалена зависимость uuid, т.к. не подходит по браузерной поддержке (#9443)

Улучшения

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

  

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

• Для раздела Компоненты в боковом меню добавлена клавиатурная навигация (#9354)
• Исправлена проблема моргания главной страницы (#9378)
• FixedLayout:
  • Исправлена ссылка на документацию Box (#9382)
  • Исправлен пример миграции для <FixedLayout vertical="bottom" /> (#9382)
• Tooltip: В примере был неверный закрывающий компонент (#9404)
• useModalManager: Исправлена ссылка на исходник хука (#9432)

Зависимости

• @vkontakte/vkui-tokens обновлен с 4.71.0 до 4.72.0 (#9370)

@vkontakte/vkui-codemods@1.1.0-beta.1

Исправления

Поправлены трансформации под slotProps в компонентах: Switch, Checkbox, Radio, File, CustomSelect, NativeSelect, Select, Textarea, WriteBar, Input, Search – теперь для обратной совместимости также переносятся события, т.к. может быть завязка на event.currentTarget и/или может упасть проверка типов (#9445).

v7.11.3

Исправления

• Tooltip: Откатили изменения из v7.11.0 и v7.11.2, связанные с пересчётом ширины (#9410)
• PanelHeaderButton: hoverMode={undeined} и/или activeMode={undeined} не перебивают значения по умолчанию (#9413)
• Calendar: Кнопки переключения месяцев могли быть квадратными (#9416)
• ContentCard, Avatar, Image, ImageBase: Для тега img атрибут loading выставлялся после src, что сопровождается багом в Safari и в старых версиях Firefox (#9433)
• useAdaptivityWithJSMediaQueries: поправлено предупреждение о вызове хука вне браузера. Теперь предупреждение будет выводиться один раз

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

• В браузере Firefox не работал перенос строк в коде превью компонента (#9435)
• Шрифт для кода подгружался не сразу, а после загрузки CSS (#9434)

v7.11.2

Исправления

• Tooltip: Текст мог переходить на новую строку (#9389)

v7.11.1

Исправления

• HorizontalScroll: Контент не прокручивался по краям на сенсорных экранах (#9341)

v8.0.0-rc.0

BREAKING CHANGE

Улучшения

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

  - ChromeAndroid >= 63
  + ChromeAndroid >= 68
  - iOS >= 12
  + iOS >= 13 
  - Chrome >= 63
  + Chrome >= 68
  - Firefox >= 55
  + Firefox >= 69
  Edge >= 79
  - Opera >= 50
  + Opera >= 68
  - Safari >= 12
  + Safari >= 13
  - Samsung >= 8.2
  + Samsung >= 9

• Поднята целевая версия ECMAScript для компиляции до es2018 (#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) => void (#9195)

• DateRangeInput:

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

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

• CalendarRange: Изменен тип свойства onChange на (value: DateRangeType | null) => 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>

• PanelHeader:

  • Изменена реализация fixed, который закрепляет шапку в области видимости при скролле – вместо position: fixed используется position: sticky. Это потребовало изменение раскладки всей страницы – height: 100% на <html> и <body> удалён в пользу display: flex и теперь высота страницы зависит от содержимого (#9252)
  • Если вы получали высоту области видимости через document.body.clientHeight или на элементе с height: 100% по каскаду ниже, то замените такой код либо на VIsualViewport, либо на document.documentElement.clientHeight, либо на window.innerHeight (#9252)
  • Если вам нужно, чтобы какой-то из элементов растягивался на высоты области видимости, то используйте единицы измерения vh или dvh вместо % (height: 100% → height: 100dvh) (#9252)

• SplitCol:

  • Изменена реализация fixed, который закрепляет колонку в области видимости при скролле – вместо position: fixed используется position: sticky (#9252)
  • Исправлена проблема когда переполненный контент при fixed обрезался – теперь высота SplitCol зависит от его содержимого. Чтобы растянуть потомок на всю колонку, используйте flex-grow: 1 на этом потомке (#9252)

• 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)

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

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

• 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">

Исправления

• 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)
• SplitLayout: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9069, прокидываются в корень компонента (#9182)
• Input: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9084, прокидываются в корень компонента (#9183)
• Search: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9084, прокидываются в корень компонента (#9183)
• CustomSelect:
  • Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9045, прокидываются в корень компонента (#9185)
  • Флаг accessible теперь включен по умолчанию (#9194)
• NativeSelect: Раньше свойства в компонента прокидывались в скрытый ин...