v5.10.0

Улучшения

• Snackbar: добавили подкомпонент Snackbar.Basic – это тот же Snackbar, но только вёрстка, без логики (#5932)
• HorizontalCell: теперь принимает все параметры Tappable (#5918)
• Avatar: добавлена функция Avatar.getInitialsFontSize для определения размера шрифта в аватарах (#5923)
• Image:
  • добавлена возможность задавать прозрачный фон с помощью параметра withTransparentBackground. Полезно для отображения картинок с прозрачностью. (#5924)
  • добавленны свойства widthSize и heightSize (#5682)
• SegmentedControl: Добавили возможность добавлять иконку с помощью свойства before (#5959)
• Gradient: добавили новый mode=default, который позволяет подстраиваться под текущую тему (#5827)
• Radio: добавили новыйп проп labelProps для того чтобы можно было передавать data-* аттрибуты лэйблу, в который обёрнут инпут. Основная цель - позволить в e2e-тестах находить именно лейбл. (#6037)
• ModalRoot: новое свойство modalOverlayTestId для передачи data-testid на оверлей (#6052)
• ModalPage, ModalCard: новое свойство modalDismissButtonTestId для передачи data-testid на оверлей (#6051)
• Cell: добавили авто-скролл для draggable режима (#5833)
• ModalCard: новое свойство dismissButtonMode для возможности показать крестик закрытия внутри модальной карточки (#6068)
• CustomSelect, ChipsSelect: новое свойство noMaxHeight для отображения выпадающего меню без скролла (#6045)
• Select/CustomSelect: сделали компонент доступным для скринридеров на десктопах (#6087)
  Рекомендации по использованию компонента для улучшения доступности можно найти в документации по компоненту в разделе "Цифровая доступность (a11y)".
  Были внесены изменения во внутреннюю реализацию компонента, в результате чего e2e-тесты, могут сломаться.
  Рекоммендации по e2e-тестированию компонента можно найти в разделе "Тестирование (e2e)" документации компонента.
  Также поменялся тип ноды, которую можно получить через свойство getRootRef, c HTMLLabelElement на HTMLDivElement.
• Calendar: параметры minDateTime/maxDateTime позволяют запретить выбор определенных дат с учетом времени (#5866)
• Search: добавлена кнопка "Найти" справа как в дизайн-системе (#5790)
• Tabs:
  • добавлен автоскролл до выбранного таба (#5957)
  • добавлено свойство layoutFillMode для возможности управления растягиванием/сжатием вкладок (#6114)

Исправления

• AppRoot: не вызывался useInsets(), если не передан safeAreaInsets (#6071)
• TabsItem: теперь status={0} отображается корректно (#6125)
• Переделали реализацию :focus-visible-состояния, чтобы больше не появлялся скролл в родительском элементе (#5876)

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

• Добавили в шапку ссылки на токены и иконки (#6048)
• View: добавили информацию о важности порядка Panel (#6046)

Other

• withInsets помечен как @deprecated и будет удалён в v6 – используйте useInsets() из @vkontakte/vk-bridge-react (#6071)

Зависимости

• Обновили @vkontakte/vkjs с 1.1.0 до 1.1.1 (#6122)
• Обновили @vkontakte/vkui-tokens с 4.41.1 до 4.41.2 (#6098)
• Обновили @vkontakte/vkui-floating-ui с 0.1.0 до 0.1.2 (#6109)

---

Important

Как сообщалось в Release notes v5.9.4, мы приступили к разработке v6, поэтому это финальная минорная версия VKUI v5. В дальнейшем мы будем править критические проблемы.

v5.9.6

Исправления

• ModalPage/ModalCard: при открытии фокусируемся на контейнер ModalPage/ModalCard, если внутри модалки нет элемента, на котором уже есть фокус (#6054)
• Select/CustomSelect: исправили типы рендер-функции renderOption, чтобы можно было передавать опции с раширенным набором свойств (#6076)

v5.9.5

Исправления

• Alert: кнопка закрытия съезжала вниз (#6035)
• ConfigProvider: передача параметра platform={undefined} перебивала значение по умолчанию из контекста (#6044)

v5.9.4

Исправления

• Исправили наведение, если устройство ввода не основное (#6009)
• ModalPage: поправили поведение в мобильном iOS, раньше жестом, при закрытии модалки, можно было вызвать нативный pull-to-refresh ведущий к перезагрузке страницы. Используем overscroll-behavior: none на html при открытой модальной странице, чтобы исключить возможность появления нативного pull-to-refresh в браузерах, поддерживающих свойство overscroll-behavior. (#6004)
• PullToRefresh: как и в ModalPage дополнительно используем overscroll-behavior: none на html, чтобы в браузерах, поддерживающий свойство overscroll-behavior, исключить вызов нативного pull-to-refresh. (#6004)
• Уменьшили размер бандла (#6030)

Important

Мы приступаем к разработке v6, поэтому начиная с версии v5.10.0 будет отдаваться приоритет новой мажорной версии. По VKUI v5, по возможности, будем править только критические проблемы.

v5.9.3

Исправления

• CustomSelect: исправлена типизация. option всегда передается в renderOption (#5973)
• ActionSheet: убрали неверный тег header (#5966)
• HorizontalScroll: убрали стрелки для скринридера (#5969 by @ntvsx193)
• Header: убрали неверный тег header, поправили доступность (#5996 by @ntvsx193)
• Alert: добавили word-break: break-word для header и text (#5966)
• PullToRefresh: поправили поведение в мобильном iOS, раньше жестом довольно легко можно было вызвать нативный pull-to-refresh ведущий к перезагрузке страницы (#5967)

v5.9.2

Исправления

• Добавлен getRootRef на недостающие элементы (#5916)
• Исправлена проблема с поддержкой старых браузеров (указанных в нашем .browserslistrc) (#5913)
• Snackbar: исправлено закругление (#5944)
• CustomSelect: исправлена типизация свойства renderOption (#5950)
• PanelHeaderButton: исправлены отступы на ios (#5878)
• Button: убрали лишний отступ при параметрах before/after и stretched (#4049)
• Gallery: исправлена работа looped в связке с timeout (#5951)

v5.9.1

Исправления

• Group: Исправлены отступы заголовка для mode=plain (#5906)
• HorizontalScroll: исправлена работа в RTL (#5837)

v5.9.0

Улучшения

• Добавили хук useNavId для определения id панели (#5743)
• ActionSheetItem: добавили свойство after (#5828)
• ActionSheet: добавили свойство mode: 'sheet' | 'menu', позволяющее переключать режим отображения (#5829)
• Alert: добавили возможность отрисовать кнопку закрытия внутри компонента (#5663)
• Avatar, Image: теперь могут быть кликабельными (#5803)
• Button: добавили свойство rounded (#5648)
• Cell: добавили возможность обрабатывать клик по компоненту Cell в режиме removable (#5745)
• FormLayoutGroup: поддержали режим segmented при mode="vertical" (#5802)
• ModalPage: добавили возможность устанавливать фиксированную высоту модального окна с помощью свойства height (#5830)
• Tappable: добавили свойство activated (#5826)
• Добавили возможность передавать data-testid там, где это раньше было невозможно (#5792):
  • Alert: добавили возможность передаваться data-testid компонентам отечающим за действия внутри Alert через элементы actions.
  • ModalPageHeader/PanelHeader: добавили возможность передавать data-testid обертке вокруг основного текста ModalPageHeader через typographyProps.
  • ModalPage: новый проп modalContentTestId, устанавливающий data-testid на обёртку вокруг контента ModalPage, отвечающую за скролл внутри модального окна.
• Gallery: добавили проп looped для возможности работы галереи в режиме карусели (#5744)
• Header: доработали aside часть компонента для выравнивания контента (#5681)
• Увеличили зону триггера SwipeBack (#5725)
• ScrollArrow: добавили пропу direction возможность задать up и down (#5839)
• Импортируем проп FloatingPlacement (#5809)

Исправления

• Button: исправили токен шрифта в компоненте Button (#5885)
• CellButton/SimpleCell: поправили селекторы отвечающие за цвет иконок в элементах before/after, за счёт понижения специфичности и избавления от привязки к .vkuiIcon классу. (#5873)
• HorizontalCell: больше не рендерим обертку контента .HorizontalCell__content если внутри пусто (не переданы header/subtitle/extraSubtitle (#5884)
• ModalPage: починили скролл при повторном открытии модалки на весь экран (#5845)
• View: добавили затемнение следующей панели при свайпбеке в iOS (#5804)
• Panel: исправлен фон при AppRoot layout="card" (#5804)
• Link: добавили font-weight: inherit (#5902)
• ⚠️ убрали overflow-x: hidden у body, так как это ломает библиотеки (react-virtualizer), реализующие виртуальные списки и вешающие обработчик события scroll на window. (#5890). Рекоммендуем пользователям библиотеки самим выставлять overflow-x: hidden на body, если это действительно нужно по какой-то причине.

Internal

• Обновили @vkontakte/vkui-tokens до 4.38.1 и поддержали динамические токены --vkui--size_border--regular и --vkui--color_separator_primary (#5783, #5791)
• Включили опцию declarationMap и добавили TypeScript исходники для пакета @vkontakte/vkui, что позволяет при переходе к определению (go to definition) направлять в .ts файл, а не .d.ts (#5748)

v5.8.2

Исправления

• ActionSheet: исправлен отступ у тени на платформе iOS (#5797)
• Banner: исправлен внутренний отступ (#5824)
• CardScroll: исправлен тип кнопок навигации, чтобы не вызывать внутри формы при нажатии событие отправки (#5863)
• Checkbox: компонент без текста растягивался на всю ширину (#5786)
• Group: исправлено расположение элементов, которые находятся в header (#5799)
• ModalCard: исправлено исчезновение overlay при достаточно быстром переключении между ModalCard (#5805)
• Popper: исправлено позиционирование при первом рендере. Раньше появлялся по координатом (0,0), после чего перерисовывался правильно (#5822)
• SimpleCell: исправлены отступы внутри компонента (#5794)
• WriteBar: исправлено "прыгающее" поведение (смещение) иконок и кнопок во время ввода текста (#5836)

Исправления в документации

• FixedLayout: зафиксировали PanelHeader в документации FixedLayout для всех платформ (#5843)
• MiniInfoCell: убран лишний разделитель из документации (#5844)
• PanelHeaderButton: исправлены ссылки на документацию из компонентов пресетов PanelHeader (#5851)

v5.8.1

Исправления

• ⚠️ Неверное название переменной окружения ломало сборку в vite (#5766)
• ModalDismissButton: поправлено исчезновение кнопки закрытия в примере из документации (#5764)
• TabbarItem: применили токен для текста как в дизайн-системе (#5750)

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

• ActionSheet: поправили ссылку на документацию Apple для разработчиков (#5768)