VKUI

Исправления

• Header: исправили отступ для конструкции Group > Tappable > Header (#4316)
• CustomSelect: placeholder отображался как значение (#4347 by @Akcent1132)
• Input: не пробрасывался mode (#4348 by @Akcent1132)
• WriteBar: привели дизайн в соответствие с макетами (#4136)
• SubnavigationButton: привели дизайн в соответствие с макетами (#4214)
• Snackbar: привели дизайн в соответствие с макетами (#4286)
• RichCell: привели дизайн в соответствие с макетами (#4236)
• UsersStack: убрали margin у UsersStack при пустом children (#4400)
• В некоторых компонентах свойство Component не работало вместе с href (#4379)

Улучшения

• Tabs: бэкпорт #4155

Исправления

• Search: бэкпорт #4138
• TabsItem: бэкпорт #4155

  У первого TabsItem удалили лишний отступ слева при mode="accent"/"secondary"

• Header: исправили отступ для конструкции Group > Tappable > Header (#4317)

Исправления

• Adaptivity: неверно работала адаптивность на сафари и старых браузерах (#4249)
• SegmentedControl: убрали анимацию при первом рендеринге (#4276)

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

• Добавили фавиконку (#4260, спасибо @TipicultBiomassa ❤️)
• Миграция: добавили информацию про VK Sans Display в раздел Типографика (#4302)

Internal

• Добавили автоматическое тестирование доступности (a11y) компонентов с помощью jest-axe (https://github.com/VKCOM/VKUI/pull/4154)

Улучшения

• ContentCard: добавили дефолтный alt="" (#4188)
• Modal: появилась возможность задавать size (#4089)

Internal

• Cell: перевели внутреннюю реализацию чекбокса на VisuallyHiddenInput (#4101)
• FormField: изменили верстку для лучшей доступности компонента (https://github.com/VKCOM/VKUI/pull/4107)
• Обновили @vkontakte/vkui-tokens с 4.29.0 до 4.29.1 (#4171)
• Мигрировали с popperjs на floating-ui (#4014)

  Migrating from Popper 2 to Floating UI

Unstable – BREAKING CHANGE

В рамках миграции с popperjs на floating-ui были внесены следующие изменения:

• unstable_Popper – customModifiers переименован в customMiddlewares и теперь использует Middleware API из Floating UI (см. https://floating-ui.com/docs/middleware). Стоит проверить нужно ли вообще теперь кастомные middleware, т.к. в Floating UI может быть исправлена проблема из Popper, из-за которой писался middleware.
• unstable_PopperProps['onPlacementChange'] – поправили типы исключили типы data.placement удалив из enum 'auto' | 'auto-start' | 'auto-end'

Улучшения

• Tabs: перевели на vkui-tokens боковые отступы при mode="accent"/"secondary" внутри контейнера HorizontalScroll. Также удалили лишний отступ у первого TabsItem (#4155)
• Checkbox: теперь принимает hoverMode, activeMode, hasHover и hasActive (#4140)
• Progress: добавили title для лучшей доступности со скринридеров (https://github.com/VKCOM/VKUI/pull/4103)

Исправления

• Tabs: удалили лишний отступ у Counter (#4026)
• TabsItem: удалили лишний отступ слева при mode="accent"/"secondary" у первого TabsItem (#4155)
• Spacing: удалили лишний отступ у Group (#4022)
• Avatar.BadgeWithPreset: вернули пробрасывание className в компонент (#4032)
• CustomSelect: починили пробрасывание before, сделав его независимым от searchable (#4059)
• Epic: убрали лишний отступ при отсутствии Tabbar (#4033)
• Adaptivity: починили определение адаптивности при дробных размерах (#4037)
• Slider: починили определение состояния ползунка при передаче в value нулевого значения и при отрицательном значении min (#4053)
• Tooltip: снова закрывается, даже если на элементе есть stopPropagation (#4088)
• CustomSelect: убрали вызов onChange при невалидном value (#4099)
• Button: починили размеры кнопки size=s с одной иконкой при использовании внутри ButtonGroup (#4102)
• Popover: клик на правую кнопку навигации в HorizontalScroll больше не закрывает Dropdown (#4088)
• Card: Card с mode="outline" снова пропускает события мыши (#4150)
• Search: токенизировали горизонтальные паддинги (#4138)
• Touch: починили ссылки внутри Tappable после прокрутки в HorizontalScroll в мобильном вебе (#3932, спасибо @bbonch ❤️)
• ActionSheet: исправили дизайн для iOS Dark в соответствии с макетами (#4108)
• PanelHeader: исправили поведение при платформе, отличной от стандартной (#4082)
• AppRoot: вернули vkui__root для mode="full". Теперь задавать высоту для #root не обязательно (#4180)
• DateInput: удалили tabIndex={1} (https://github.com/VKCOM/VKUI/pull/4104)
• Switch: подкрутили роли для лучшей доступности компонента (https://github.com/VKCOM/VKUI/pull/4105)
• Вернули в публикуемый пакет LICENSE и README.md файлы (#4019)

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

• Select снова отображается как Select, а не как SelectTypography (#4052)

Internal

• Унифицировали подход к проверке на dev-окружение (https://github.com/VKCOM/VKUI/pull/4110)

Исправления

• CustomSelect: бэкпорт #4099
• Button: бэкпорт #4102
• Dropdown (в v5 переименован в Popover), Tooltip: бэкпорт #4088

Улучшения

• Checkbox: теперь принимает hoverMode, activeMode, hasHover и hasActive (#4078)

Исправления

• CustomSelect: before теперь пробрасывается не только при параметре searchable (#4058)
• CustomScrollView: бэкпорт #3894
• Search: бэкпорт #3998
• ChipsSelect: бэкпорт #3893

Улучшения

• Добавлены токены для модальных и всплывающих окон (#3875)
• Cell: изменен фон при перетаскивании (#3974)
• View: теперь с помощью параметра onSwipeBackStart() можно предотвращать swipe-back вернув "prevent" при вызове функции (#3468)
• PlatformProvider : добавлен вспомогательный компонент для переопределения платформы (#3815)

Исправления

• Input: неверное расположение поля ввода (#3898)

• Button: теперь корректно принимает значение 0 в параметры before, children и after (#3951)

• Button: некоректно работал stretched с одной иконкой (#3971)

• BaseGallery: возвращено выравнивание по центру (#3957)

• Badge: изменен цвет mode="prominent" на более яркий (#3975)

• UsersStack: исправлены цвет и шрифт у счетчика (#3991)

• Counter: исправлены цвет и шрифт (#3990)

• Search: при нажатии на иконку(свойство icon), очищалось поле ввода (#3998)

• ActionSheet: установлена максимальная ширина (#3988)

• ModalRoot: отключена анимация переходов между модальными окнами для десктопа (#3962)

• SplitCol: исправили неверный размер для автоопределения анимации переходов между панелями (#4012)

• View: свайпбек теперь не срабатывает, если отключена анимация переходов между панелями (#4011)

• Отключена анимация переходов между панелями для платформы VKCOM (#4013)

• Исправлена работа MediaQueryListEvent API для safari < 14 (#4006)

Internal

• Обновили зависимость @vkontakte/vkjs с v0.29.0 на v0.31.0 – теперь hasReactNode() используем из этой библиотеки (#3949)

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

• AppRoot: добавлен шаг про height: 100% для root-элемента (#3977)
• Migration: дополнена информация про vkui__root и vkui__protal-root (#3977)
• ConfigProvider : добавлено замечание про использование нескольких ConfigProvider в приложении (#3815)

Улучшения

• Добавили токены для модальных и всплывающих окон (#3876)

Исправления

• Tooltip: компонент теперь принимает проп className (#3834)
• PanelHeaderButton: исправлено позиционирование счетчика (#3850)
• Если в выпадающем меню потянуть мышкой скролл, то меню закрывалось (#3894)
• Исправлена inside обводка фокуса (#3868)
• Удалена лишняя обводка при фокусе (#3897)
• ChipsSelect: исправлено положение выпадающего меню при forceDropdownPortal={false} (#3893)
• SimpleCell: исправлены боковые отступы для ios (#3913)
• SplitCol: исправили автоопределение анимации переходов между панелей (#3915)
• Gallery: исправлены отсутствующие стрелки при hover'е (#3921)

Пожелания

Команда VKUI поздравляет вас с Наступающим Новым Годом, увидимся в 2023 🎉

Исправления

• Обновили @vkontakte/icons до v2.1.1 — в том числе в peer dependencies (#3753). ⚠️ Не забудьте обновиться в своих проектах!

  # npm
  npm install --save-exact @vkontakte/[email protected]
  
  # yarn
  yarn add --exact @vkontakte/[email protected]
  

• Banner: добавили контекст наложения (#3762)

• Исправлена типизация для ссылок (#3770)

• CustomSelect: исправили неправильный выбор элемента при searchable={true} (#3793)

• SubnavigationButton: поправили адаптив при size="s" (#3798)

• PanelHeader: исправили скругление для VKCOM (#3807)

• SegmentedControl: не работала гидратация (#3799)

Улучшения

• PromoBanner: аватарка и кнопка теперь не отрисовываются если не передали bannerData.iconLink (для аватар) и bannerData.craText (для кнопки) (#3697, спасибо @obviouslymilk ❤️)
• Поддержали новую стабильную версию @vkontakte/icons, начиная от v2.1.1 — теперь и v1, и v2 одинаково хорошо работают с VKUI (#3748)

Почему v5.0.1? Я что, пропустил релиз v5.0.0? 😯

Не пропустили 🙂 Официального релиза v5.0.0 не было ... и не будет 👿

Когда мы создавали пре-релиз v5.0.0-beta.1, мы ошибочно зарелизили его как v5.0.0 🥲 NPM удалять запаблешеные версии не даёт, можно только задепрекейтнуть. Поэтому при попытке установки v5.0.0 вы получите сообщение This is a duplicate of the beta version 'v5.0.0-beta.1'. Use 'v5.0.0-beta.1' and above. Due to this typo, the stable version will be released as 'v5.0.1'..

Зато этот факап помог нам улучшить наш CI/CD #3269 😎 Что впредь уменьшит риски повторения ситуации.

BREAKING CHANGE

Всю информацию по изменениям мы собрали в документации по миграции с v4 на v5.

TL;DR

• Обновили минимально поддерживаемые версии зависимостей: React до 17, Typescript до 4.
• Обновили минимально поддерживаемую версию Android до 5.
• Ready for SSR 🎉 Изменили подход к адаптивности — теперь мы опираемся в первую очередь на CSS.
• Переехали на новую систему токенов, vkui-tokens, и отказались от Appearance. Сделали транслятор токенов, чтобы облегчить переход на vkui-tokens.
• Убрали все устаревшие свойства и компоненты.
• Обновили API некоторых компонентов.
• Полностью переехали на CSS Modules, благодаря чему избавились от атрибута vkuiClass, который выставлял префикс vkui в рантайме (#3289, #3318).
  • Tappable: префикс vkui больше не добавляется к CSS классам при передаче своих значений в параметры hoverMode, activeMode (#2442)

Фидбек ❤️

Для очевидных багов создавайте issues. Для всех остальных обсуждений есть дискуссии :)

Исправления

• Исправили типизацию AppearanceScheme (#3576)
• Tappable: откатили поведение disabled (#3598)
• Group: исправили appearance-токен для обводки (#3594)
• PanelHeaderContext: исправили наложение неактивной области (#3678)
• ChipsInput: исправили выход длинного текста за пределы контейнера (#3692)
• Footer: исправили токен боковых отступов (#3694)

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

• Над заголовком компонента появилась ссылка для быстрого поиска issue (#3525, спасибо @k-egor-smirnov)
  

BREAKING CHANGE

Unstable

Импорт нестабильных компонентов использует подход как в React (смотри #3581)

- import { ChipsSelect } from "@vkontakte/vkui/dist/unstable";
+ import { unstable_ChipsSelect as ChipsSelect } from "@vkontakte/vkui";

Нестабильные стили теперь находятся в vkui.css

import "@vkontakte/vkui/dist/vkui.css";
- import "@vkontakte/vkui/dist/unstable.css";

vkui__root и vkui__portal-root (#3483)

Теперь для Partial режима подключения
не требуется добавлять класс vkui__root.

Также для portalRoot портала не требуется добавлять класс vkui__portal-root.

Адаптивность

• Переименовали параметры адаптивности (#3693)
  • hasMouse был переименовал в hasPointer
  • deviceHasHover был переименовал в hasHover
• Удалили из экспорта утилитарные классы для параметров адаптивности, т.к. они на данный момент Вам бесполезны (#3685)

Разное

• Counter: Свойство mode теперь не игнорируется в кнопке (#3496)
• LocaleProviderContext был удален. Используйте LocaleProvider и useConfigProvider

Улучшения

• Snackbar: добавлено свойство subtitle для подзаголовка (#3490)
• Button: добавлен новый стиль accent_invariable (#3652)
• Создан хук useAdaptivityConditionalRender() (см. Adaptivity) для удобства переключения видимости элементов при том или ином параметре адаптивности (#3660)

Исправления

• PopoutRoot: поправили сообщение об ошибке в консоли при SSR (#3662)
• ConfigProvider: исправлен автодетект темы (#3574)
• Tappable: исправлено наложение состояний (#3641)
• Button: исправлены цвета состояний (#3604)
• SplitCol: исправлено срабатывание autoSpace для планшетов (#3654)
• Хук useAdaptivity() вызывал ре-рендер для отложенного получения hasMouse, чтобы не ломать SSR – вынесли эту логику в отдельные служебные хуки (#3673)

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

• Adaptivity: не работал пример кода, т.к. он был редактируемый (#3575, спасибо @SecondThundeR ❤️)

Улучшения

• Проставили токены типографики для font-family и letter-spacing из @vkontakte/vkui-tokens для поддержки шрифта VK Sans Text (#3557)
  • ⚠️ Шрифт VK Sans Text нужно подключить на своей стороне. В VKUI его пока не предоставляет.
• Обновили @vkontakte/vkui-tokens до v4.22.0, где VK Sans Text установлен как шрифт по умолчанию (#3565)

Улучшения

• ActionSheet:
  • Добавлен параметр popupOffsetDistance для Desktop версии (#3445)
  • Декомпозированы параметры для ActionSheetDropdownDesktop и ActionSheetDropdown (#3445)
• Calendar: добавили параметр listenDayChangesForUpdate, чтобы исправить проблему обновления текущей даты при фактической смене дня (#3482, спасибо @DonVadimon ❤️)
• Gallery:
  • Добавлен проброс события для onPrevClick/onNextClick (#3537)
  • Добавлена возможность изменять размер стрелок (#3535)

Исправления

• PanelHeaderContext: компонент больше не перекрывается FixedLayout (#3519)
• NativeSelect: теперь можно открыть список, нажав на стрелку (#3520)
• Gallery: исправили вид курсора при draggable=true (#3534)
• Button: исправили цвета для счетчика в <Button appearance="neutral" /> (#3541)
• CardGrid: заменили зашитые значения на токены (#3510, #3546)

Breaking changes

• Alert: свойство onClose стало обязательным (#3465)

Улучшения

• Экспортируем хук useAdaptivityJSWithMediaQueries() (#3523)

Исправления

• ActionSheetItem: добавлена компактная иконка (#3432)
• Counter: исправлены контрастные цвета (#3513)
• Button: вернули изменения из v4, которые потерялись при мерже в v5 (#3503, #3514)

Исправления

• ContentCard: исправили поведение свойств hasActive и hasHover (#3429)
• Исправили шрифт в примерах кода в документации (#3433)
• FormLayoutGroup: исправили отображение segmented FormItem's на экранах меньше 2dppx (#3436)
• Tappable: исправили поведение ссылок при disabled (#3447)
• UsersStack:
  • удалили clip-path из CSS для поддержки старых браузеров (#3448)
  • исправили лишний отступ в случае, когда в photos нет элементов (#3462)
• Link: исправили наведение на телефонах Samsung (#3470)
• InfoRow: исправили семантику для лучшей доступности (#3492)
• MiniInfoCell: исправили проблему доступности ссылок в некликабельной ячейке (#3491)