Релиз 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.