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)

v5.8.0

Улучшения

• Поддержали getRootRef на всех компонентах (#5651)
• ActionSheet: добавили информацию об инициаторе закрытия ActionSheet в ActionSheet.onClose (#5597)
• Slider: добавили возможность включения тултипа при наведении/фокусе показывающего значение слайдера (#5472)
• FormItem: добавили возможность отключения внешних отступов с помощью пропа noPadding (#5600)
• Tappable: добавили свойство borderRadiusMode для возможности унаследовать радиус скругления от родителя (#5619)
• useNavDirection(): добавили хук для определение типа перехода (вперёд/назад), с которым была отрисована панель (#5567)
• Typography: для тега <b> в типографических компонентах теперь выставляем font-weight: var(--vkui--font_weight_accent1); (#5622)
• Placeholder: добавили подкомпоненты (#5629)
• AppRoot:
  • добавили свойство layout, отвечающее за вид Group (#5642)
  • добавили свойство disableParentTransformForPositionFixedElements , отключающее создания нового слоя для position: fixed элементов при mode="embedded" (#5692)
• Group: изменили вид карточек в мобильной версии (#5720)
• Card: добавили режим отображения outline-tint (#5533)
• Input: отключили нативные элементы для <input type="number" /> при передаче type="number" (#5607)
• ChipsSelect/CustomSelect: экспортировали filterFnForSelect (defaultFilterFn из lib/select) (#5601)

Исправления

• ConfigProvider: ConfigProvider больше не удаляет из body добавленные другими приложениями классы при размонтировании. (#5633)
• ModalPage: скролл внутри модальной страницы теперь заканчивается на границе с ios env bottom inset. (#5715)
• TextTooltip/Popper: добавили проп hideWhenReferenceHidden, чтобы тултип не прыгал, а сразу автоматически скрывался при исчезновении элемента, к которому тултип привязан. (#5690)
• Checkbox, Root: исправили классы (#5737)
• ChipsInput/ChipsSelect: привели типографику к дизайн-системе (#5695)
• Удалили font-smoothing (#5739)

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

• Добавили ссылки на Storybook для всех компонентов (#5694)
• MiniInfoCell: убрали из документации свойство textLevel, которого нет в интерфейсе компонента (#5736)

Internal

• Обновили @vkontakte/vkui-tokens с 4.35.1 до 4.36.0 (#5580)
• Обновили @floating-ui/react-dom с 2.0.1 до 2.0.2 (#5735)
• Перенесли @vkontakte/icons в прямые зависимости (#5718)

Important

В связи с переносом @vkontakte/icons в прямые зависимости вы можете столкнуться с дублированием зависимостей. Если это случилось, не паникуйте: на помощь придет дедупликация.

Как ее сделать?

npm

Команда npm dedupe

npm dedupe

Yarn Classic

Утилита yarn-deduplicate

npx yarn-deduplicate --packages @vkontakte/icons

Yarn Modern

Команда yarn dedupe

yarn dedupe @vkontakte/icons

pnpm

Команда pnpm dedupe

pnpm dedupe

Подготовка к удалению интеграции с VK Bridge (#5496)

VKUI создавался как инструмент для создания клиентской части мини-приложений ВКонтакте. В связи с этим VKUI изначально интегрирован с библиотекой VK Bridge, которая реализует общение между VK Mini Apps и официальными клиентами ВКонтакте.

Сегодня разработчики используют VKUI, чтобы создавать полноценные независимые приложения, которые никак не связаны с VK Mini Apps, но наследие остается, и иметь с ним дело приходится всем. Поэтому мы приняли решение удалить интеграцию с VK Bridge, начиная со следующей мажорной версии (v6).

В рамках этого релиза в качестве подготовки к удалению интеграции мы:

• добавили советы по подготовке к обновлению на v6 в документации и в предупреждениях в консоли разработчика (☝️ если вы не разработчик VK Mini Apps, просто игнорируйте эти советы);
• создали страницу Интеграция с VK Mini Apps, которая содержит всю информацию об интеграции VKUI с VK Mini Apps в новых реалиях.

v5.7.2

Исправления

• SimpleCell: вернули применение margin-top (#5574)
• HorizontalScroll: поправили отображение стрелок при рендере после display: none(#5595)
• PanelHeaderClose: поправили перекрытие контентом модалки (#5605)
• Group: убрали лишний отступ, который появлялся у последнего Group с пропром separator="show"(#5623)
• Avatar/Image: поправили поведение компонента при SSR, когда изображение загружено до инициализации react, в результате чего обработчик события load не вызывается и компонент имеет не верное состояние (#5602)
• SelectMimicry/CustomSelect: исправлен autoFocus (#5665, #5662)
• Исправлен двойной ререндер при передаче контекста (#5666, #5668)
• Placeholder: не растягивался на высоту блока (#5669)
• ChipsSelect: исправлена работа свойства showSelected, теперь выбранные опции не убираются из списка при showSelected=true (по умолчанию true) (#5684)
• ModalPage:
  • Исправили расчёт первоначальной высоты в мобильном виде, в случае, когда внутри рендерился Select (#5606)
  • Исправили абсолютное позиционирование внутри ModalPage (#5676)
• Banner: цвета иконок, а также иконка закрытия для iOS, не соответствовали дизайну (#5637)
• ActionSheet: компонент невозможно было закрыть на широком экране (#5641)
• Image: применялись неправильные закругления (#5672)
• Checkbox: не работал text-overflow: ellipsis на children (#5672)
• MiniInfoCell: исправлен отступ если отсутствует before (#5696)

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

• Удалили лишнюю информацию в документе Миграция с v4 на v5 (#5592)

v5.7.1

Исправления

• Не работали анимации и переходы между панелями (#5564)

v5.7.0

Улучшения

• Snackbar: добавлена возможность регулировать положение по высоте (отступ от нижнего края) с помощью свойства offsetY (#5162)
• Progress: новое свойство height для возможности задать свою высоту (#5455)
• ActionSheet: больше нет необходимости прокидывать дефолтный iosCloseItem (#5502)
• Search: добавлено свойство noPadding (#5522)
• SubnavigationButton: добавлено свойство appearance (#5527)
• Alert: добавлено свойство renderAction (#5530)
• Alert: добавлено свойство actionsAlign (#5530)

Исправления

• Link: line-height мог выставляться браузерными стилями (#5519)
• NativeSelect: selectType не влиял на отображение (#5539)
• Search: не работал тач по крестику (#5529)
• Button: исправлены цвета фона Counter в mode=primary (#5532)
• Tooltip: больше не скрывается, при активном модальном окне (#5505)
• PopoutWrapper: исправлено наложение элементов (#5555)

v5.6.2

Исправления

• Search: исправили цвет placeholder (#5490)
• Поправили типографику некоторых элементов форм (#5430)
• Alert: исправлено дублирование id элементов (#5400)

v5.6.1

Исправления

• Switch: компонент выделялся в safari (#5465)
• AppRoot: компонент больше не удаляет внешний портал, переданные через свойство portalRoot при размонтировании (#5046)
• Search: поле ввода не растягивалось на firefox (#5470)
• Search: исправлен вызов onCancel (#5460)
• FormItem: улучшена a11y (#5422 спасибо @scffs)
• SubnavigationBar: улучшена a11y (#5225 спасибо @scffs)
• Slider: в режиме multiple не доходит до конца если длина не кратна step (#5284 спасибо @scffs)