Релиз VKUI v7

VKUI v7 вышел из беты и стал полностью стабильным. Поддержка v6 прекращена — рекомендуем обновиться, чтобы использовать новые возможности и вовремя получать исправления.

⚙️ Сборка

• библиотека теперь поставляется только в ESM-формате, CommonJS-сборка удалена. ESM получил достаточно широкую поддержку, поэтому от устаревшего формата мы отказались.

• поднята целевая версия ECMAScript для компиляции до es2017, а также минимальные версии поддерживаемых браузеров:

  ChromeAndroid >= 63
  iOS >= 12
  Chrome >= 63
  Firefox >= 55
  Edge >= 79
  Opera >= 50
  Safari >= 12
  Samsung >= 8.2

  Это позволит использовать новое API без полифиллов.

• изменились названия CSS-классов — теперь они формируются на основе CSS Modules. В будущем мы хотим отказаться от статичных классов, поэтому исключите их использование в своём коде.

🧩 Компоненты

У многих компонентов изменилось публичное API. Мы улучшаем опыт разработчиков при работе с дизайном и в этом релизе сократили расхождения в названиях параметров между React и Figma. Также избавились от deprecated-свойств и унифицировали API разных компонентов.

Модальные окна

В новой версии мы переработали подход к модальным окнам и исправили большое количество багов.

• ModalPage/ModalCard можно определять в любом месте приложения, без оборачивания в ModalRoot
• ModalRoot нужен только для последовательно открывающихся модальных окон; можно создавать динамические модальные окна

SplitLayout

Компонент больше не обязателен при наличии в приложении всплывающих окон. Свойства popout и modal отмечены как @deprecated и будут удалены в следующем релизе.

DatePicker

Компонент удалён в пользу Input, Select и DateInput. Подобрать замену поможет обсуждение ↗.

Типографика

По умолчанию для всех типографических элементов отключены акцентные начертания. Чтобы вернуть прежнее поведение, используйте useAccentWeight={true}.

🌗 Светлая/тёмная тема

Раньше для светлой и тёмной темы использовалось название Appearance, которое совпадало с названиями параметров некоторых компонентов (например, Button) и могло путать. Поэтому мы перешли на ColorScheme — так это свойство называется в CSS.

Из-за этого изменились названия типов, хуков и провайдеров для работы со светлой и тёмной темами.

🚀 Хочу обновиться

Начните с инструкции по миграции. Большинство изменений не придётся делать вручную — есть автоматизации, о которых рассказано в инструкции.

Если возникнут сложности, задайте вопрос в Дискуссиях ↗ на GitHub или в публичном чате ↗ в VK Messenger.