Исправления:

• AppRoot: исправлено поведение overflow

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

Этот релиз в первую очередь примечателен тем, что VKUI теперь — это адаптивная библиотека

Режимы подключения VKUI и новый компонент AppRoot

Режимы подключения:

• full - приложение полностью на vkui
• embedded - приложение встроенное в html или React приложение
• partial - используются только отдельные компоненты vkui

AppRoot

Новый корневой компонент, автоматически добавляет необходимые классы при full и embedded встраивании
Обязателен во всех случаях кроме partial

Новые компоненты

• ContentCard (спасибо @gbowsky)
• HorizontalCell (спасибо @gbowsky)
• ChipsSelect
• ChipsInput
• CustomSelect
• SliderSwitch
• DatePicker
• NativeSelect (подробности про Select читайте ниже)
• FormItem

Фиксы и улучшения

CellButton

• Под капотом теперь использует SimpleCell. За счет этого избавились от дублирующих стилей и стали больше
  соответствовать дизайну
• Появилось свойство centered, позволяющее при желании отключать центрирование содержимого

Gallery

• Появились кнопки-стрелки для прокрутки по клику
• Если передан slideIndex, но не передан onChange, то компонент "блокируется" аналогично controlled component
• Появилось свойство isDraggable, контролирующее возможность свайпать галерею

Touch

• Добавлены свойства onEnter и onLeave для отслеживания hover
• Добавлено свойство noSlideClick, которое игнорирует клик после слайда по компоненту

Tappable

• Если один Tappable вложен в другой, то при ховере на дочернем Tappable, с родительского эффект наведения будет убран. То же касается и эффекта состояния active
• Добавлены свойства hasHover и hasActive, позволяющие игнорировать Tappable состояния hover и active

PanelHeader

• Появилось свойство shadow, отвечающее за наличие/отсутствие тени

Group

• Теперь у Group два типа отображения — card и plain. Тип выставляется автоматически в зависимости от размера
  контейнера. Так же можно жестко указать тип свойством mode
• Внутрь Group можно вложить одну или несколько <Group mode="plain" />.
  Подробнее в примерах

ActionSheetItem

• Добавлены свойства meta и subtitle для более сложного контента
• Добавлено свойство selectable для создания выделяемых ActionSheetItem
• Стилизовано состояние disabled

Прочее

• Для наиболее правильного определения iOS используется IOSDetections из @vkontakte/vkjs
• Скрипты сборки теперь запускаются на всех платформах благодаря фиксу @eolme
• В CardGrid убраны лишние боковые отступы #1026
• В SSRContext добавлена возможность передавать BrowserInfo напрямую, что бы можно было переопределить систему. Может понадобиться для предоставлении информации о том, что iPad это iOS, а не macOS
• Separator: новый режим expanded, превращающий сепаратор в толстую линию
• Link: добавлены hover/active состояния
• Gallery: пофикшен баг с пустыми слайдами (fixes #1151)
• Search: появился параметр before для смены иконки #1186 (спасибо @ilyapishchulin)
• Epic: Теперь состояние скролла сохраняется для всех вкладок отдельно #1225 (fixes #148)
• Typography: добавили свойство Component всем компонентам типографики
• RichCell: добавлено свойство Component
• PullToRefresh: работает даже если мало контента и свайп был за пределами PTR
• Link: под капотом теперь испозует Tappable для реализации hover и active состояний
• HorizontalScroll: появились кнопки-стрелки для прокрутки по клику
• Header: добавлен новый mode tertiary
• FormLayoutGroup: появилось свойство mode, отвечающее за расположение дочерних FormItem
• ConfigProvider: появилось свойство platform, позволяющее жестко задать платформу

Обратно несовместимые изменения

PanelHeader

• Удалено свойство addon. <PanelHeader left={<PanelHeaderBack />} addon="Назад" /> меняется на <PanelHeader left={<PanelHeaderBack label="Назад" />} />

Modal

• ModalCard: в свойство actions теперь нужно передавать обычные ReactNode, а не массив объектов
• ModalCard: свойство caption переименовано в subheader
• ModalPageHeader: удалено свойство noShadow. На его месте теперь свойство separator

Alert

• Заголовок и текст теперь нужно передавать в свойствах header и text

Forms

• FormLayout теперь просто оборачивает children в form. Никакой итерации по детям внутри него нет
• В Input, Select и прочие подобные элементы форм больше не нужно передавать top, bottom и status.
  Компоненты нужно оборачивать в FormItem, передавая ему эти свойства.
• FormLayoutGroup так же лишен свойств top, bottom и status. Он теперь предназначен только для группировки FormItem

Button

• Размеры xl, l и m изменены на l, m и s соответственно
• <Button size="l" /> больше не растягивается автоматически на всё ширину. Чтобы добиться растяжения, нужно передать свойство stretched:

Cell

• Удалено свойство size. Теперь чтобы отрисовать Cell size="l" нужно использовать RichCell
• Свойство asideContent переименовано в after
• Анимация нажатия теперь по-умолчанию включена. Для отключение необходимо передавать свойство disabled={true}

ActionSheet

• Добавлены обязательные свойства toggleRef (для отображения рядом target) и iosCloseItem

Panel

• Удалено устаревшее свойство separator, отвечавшее за отрисовку разделителя после шапки. Свойство перекочевало в PanelHeader

MiniInfoCell

• Удалено свойство multiline. Вместо него нужно использовать textWrap="short".

UsersStack

• Компонент лишился внешних отступов. Теперь их нужно устанавливать в месте использования. Мы стараемся избегать предустановленных внешних отступов, чтобы улучшить компоновку

Card, CardGrid и CardScroll

• У Card больше нет свойства size. Теперь его нужно передавать в CardGrid и CardScroll

Select

• Теперь рендерит CustomSelect/NativeSelect в зависимости от наличия/отсутствия мышки соответственно
• Вместо коллекции <option value={value}>{title}</option> нужно передавать массив объектов options с обязательными полями value и title

Прочее

• OS из platform.ts переименован в Platform
• Содержимое любой панели должно быть обрамлено хотя бы в один Group
• Теперь dist/es6 версия стала единственной и переехала в корень dist/
• Если в Banner.actions использовалась <Button mode="tertiary" />, то теперь этой кнопке нужно так же передать
  hasHover={false}

Фиксы и улучшения

• В компонентах ChipsInput и ChipsSelect исправлен баг с плэйсхолдером в FireFox, и адаптированы размеры под большие экраны и vkcom
• PullToRefresh: не прячется под шапку (fixes #1207)
• Tappable: обновлена анимация нажатия и ховера для устройств с мышкой

Фиксы и улучшения

• В компонентах с useAdaptivity перешли на withAdaptivity, чтобы была возможность переопределить свойства адаптивности
• HorizontalScroll: улучшена документация.
• HorizontalScroll: исправлено зацикливание анимации скролла.
• InfoRow: исправлена проблема со вложенными заголовками (fixes #1153)
• MiniInfoCell: поправлены стили для vkcom
• Progress: обновлен дизайн
• Spinner: поправлен цвет
• FormStatus: обновлен дизайн
• Исправлена работа библиотеки на Webpack 5 (process is not defined).
• Адаптивность - добавлено новое свойство viewHeight со значениями ViewHeight = 'EXTRA_SMALL' | 'SMALL' | 'MEDIUM'
• ModalPage и ModalCard - обновлено адаптивное поведение и добавлена внешняя кнопка закрытия для широких экранов
• Snackbar: переиспользует Button, Typography, адаптирован под большие экраны и vkcom
• Cell: поправлен overflow в removable режиме (fixes #1165)
• CellButton: разрешено передавать атрибуты button (fixes #1174)
• ContentCard: поправлен экспорт и типы (fixes #1176, fixes #1177)
• PanelHeaderContent: все свойства помечены как необязательные (fixes #1172)
• PanelHeader: поправен box-sizing, чтобы padding и height суммировались (fixes #1145)
• Gallery: добавлены getRef и getRootRef (fixes #1135)
• Banner: адаптирован под все размеры и платформы
• PanelSpinner: адаптирован под все размеры и платформы
• Card: адаптирован под все размеры и платформы
• Button: поправлены боковые поля с учетом border
• ModalDismissButton: компонент теперь экспортируется и обзавелся документацией
• Gallery: при слайде не вызывается onClick (fixes #1136)
• Gallery: сделали компонент контролируемым и добавили свойство isDraggable, чтобы разрешать/запрещать пользовательское перетаскивание (fixes #894)
• HorizontalCell: поправлена проблема невлезающего длинного контента (fixes #1171)

Фиксы и улучшения

• View: добавлено коллбэк-свойство onSwipeBackCancel для отслеживания свайпа назад, который был отменен пользователем.
• Placeholder: добавлено свойство getRootRef.
• Исправлена работа библиотеки на Webpack 5 (process is not defined).

Фиксы и улучшения

• Фикс автозаполнения в Input, Textarea
• Select: Вернули возможность передавать свойcтва CustomSelect, типа popupDirection
• Select: Поправлен баг с опциями с одинаковыми label (fixes #1137)
• PullToRefresh: жест срабатывает, даже если пользователь его начал не с содержимого компонента (fixes #933)
• PanelHeader: поправлен размер шрифта (fixes #1073)
• PanelHeader: поправлено обрезание текста (fixes #951)

Обратно несовместимые изменения

• Select: опции больше нельзя передавать как children. Теперь доступен только валидный массив options. (fixes #1139)

Ссылка на документацию: https://vkcom.github.io/VKUI/4.0.0-beta.33/

Фиксы и улучшения

• Новый компонент ContentCard (спасибо @gbowsky)
• Новый компонент HorizontalCell (спасибо @gbowsky)
• Новый компонент WriteBar
• Новый компонент WriteBarIcon
• Обновлен дизайн PanelHeader для платформы vkcom
• У PanelHeader добавлен флаг fixed, позволяющий не фиксировать шапку сверху, если передан fixed={false}
• Фикс длинного текста в FormLayoutGroup
• Документация к адаптивности
• Отдельная секция в документации для unstable-компонент
• SplitCol и SplitLayout разнесены по разным директориям
• Gallery: поправлен баг с удалением последнего элемента (fixes #1123)
• Документация: добавлено автоматическое переключение на TABLET_SIZE, если выбрана платформа VKCOM
• Tabs: поправлено отображение в Group
• TabsItem: реализован уход в троеточие на маленьких размерах, поправлен дизайн mode="segmented" при sizeX="regular"
• Поправлены border-radius у CustomSelect и ChipsSelect на ios
• Select: поправлены getRef и getRootRef
• Select: onBlur и onFocus стали возвращать объекты событий
• Поправлен дизайн Search для платформы vkcom
• Поправлен баг с кликом по правой части Search, после которого не было фокуса (fixes #1082)
• Поправлен баг с длинным placeholder (fixes #1086)
• Добавлен пропущенный экспорт NativeSelect
• FormItem: добавлено свойство Component, переопределяющее тег корневого элемента (fixes #1132)
• Поправлено выравнивание элементов в Header (fixes #738)
• Поправлен фон у Group в режиме card
• Маркеры в Cell сохраняют свои размеры при длинном контенте (fixes #1121)

Обратно несовместимые изменения

• PanelHeader на платформе vkcom не зафиксирована сверху, а находится в потоке с другими элементами панели
• Содержимое любой панели должно быть обрамлено хотя бы в один Group
• <SplitColFixed /> больше нет. Вместо него теперь <SplitCol fixed />
• Select: onChange теперь возвращает корректный объект события change. Это изменение делает компонент более предсказуемым
• CustomSelect: CustomOptionValue теперь идентичен типам SelectHTMLAttributes<HTMLSelectElement>['value'], то есть boolean туда уже не положешь. CustomSelect — это надстройка над нативным select, которая расширяет его возможности, но не меняет базовых принципов
• UsersStack: компонент лишился внешних отступов. Теперь их нужно устанавливать в месте использования. Мы стараемся избегать предустановленных внешних отступов, чтобы улучшить компоновку

Фиксы и улучшения

• Gallery: поправлен баг с удалением последнего элемента #1123
• Group: поправлен дизайн у description

Новые фичи

• Новый компонент WriteBar.
• Новый компонент WriteBarIcon.

Фиксы и улучшения

• Обновлены цветовые схемы.

Ссылка на документацию: https://vkcom.github.io/VKUI/4.0.0-beta.32/

Фиксы и улучшения

• ChipsInput: в renderOption больше не нужно разбираться с key
• ChipsSelect и CustomSelect: поправлены высота выпадающего списка и тени

Ссылка на документацию: https://vkcom.github.io/VKUI/4.0.0-beta.31/

Фиксы и улучшения

Ячейки

• Исправлен баг со срабатывающим onClick у <SimpleCell|Cell|RichCell disabled /> #1038
• Обновлен дизайн InfoRow #747
• Добавлена анимация при наведении на стрелочки в HorizontalScroll
• CellButton под капотом теперь использует SimpleCell. За счет этого избавились от дублирующих стилей и стали больше соответствовать дизайну
• CellButton, SimpleCell, Cell и RichCell адаптированы под sizeY compact

Alert

• Поддержана тема для vkcom
• Поправлена верстка на других платформах в соответствии с дизайном
• Переиспользованы компоненты Button и Typography там, где это было возможно
• Поправил жирность у Button для VKCOM платформы

Group (спасибо @danakt)

• Появилось свойство mode, позволяющее явно задать стиль отображения группы (card, plain)
• В ModalPage Group по-умолчанию рисуется в plain стиле

ChipsSelect

• Новый компонент-надстройка над ChipsInput

CustomSelectOption

• Новый компонент для отрисовки произвольного option

CustomSelect

• Появилась возможность указывать renderOption для отрисовки произвольного option

Прочее

• Поправлена иконка у Radio в vkcom версии #1030
• В CardGrid убраны лишние боковые отступы #1026
• Избавились от размытия модальных окон из процентных transform: translate
• Повысили стабильность работы Slider и RangeSlider
• Скрипты сборки теперь запускаются на всех платформах благодаря фиксу @eolme
• Добавлен пакет @vkontakte/vkjs
• Утилиты из dom.js перенесены в @vkontakte/vkjs
• Для наиболее правильного определения iOS используется IOSDetections из @vkontakte/vkjs
• Переделан модуль browser.ts и BrowserInfo в целом, что бы не полагалось на platform
• BrowserInfo.platfrom -> BrowserInfo.system что бы путать с platform модулем
• Переделан platform.ts -- он теперь полагается на BrowserInfo, вместо userAgent
• В SSRContext добавлена возможность передавать BrowserInfo напрямую, что бы можно было переопределить систему. Может понадобиться для предоставлении информации о том, что iPad это iOS, а не macOS
• Исправлена падающая из-за невалидного vkui.css сборка #1057 #1083

Обратно несовместимые изменения

• ModalCard: в свойство actions теперь нужно передавать обычные ReactNode, а не массив объектов.
• ModalCard: свойство caption переименовано в subheader.
• Alert: Заголовок и текст теперь нужно передавать в свойствах header и text
• Group: теперь для реализации вложенных, нужно рендерить <Group mode="plain" /> внутри Group
• OS из platform.ts переименован в Platform

Обновления

• Card: добавлено свойство getRootRef.

Исправления

• Header: исправлена отрисовка subtitle, indicator и aside.

Ссылка на документацию: https://vkcom.github.io/VKUI/4.0.0-beta.30/

Обновления и фиксы

• Добавлен компонент FormItem — базовый компонент формы
• Slider и RangeSlider переверстаны в соответствии с дизайном
• Radio и Checkbox переверстаны в соответствии с дизайном
• В FormField поправлено обращение к несуществующему цветовому токену
• В SliderSwitch, ChipsInput, Chip, CustomSelect, DatePicker
• В ActionSheet и ActionSheetItem и Switch поддержаны тема vkcom и compact sizeY
• В документации появилась возможность переключать значение sizeY

Обратно несовместимые изменения

• FormLayout теперь просто оборачивает children в form. Никакой итерации по детям внутри него нет.
• В элементы форм больше не нужно передавать top, bottom и status. Компоненты нужно оборачивать в FormItem, передавая ему эти свойства.
• FormLayoutGroup так же лишен свойств top, bottom и status. Он теперь предназначен только для группировки FormItem.

Исправления

• Banner: исправлен лишний z-index у иконки крестика.
• PromoBanner: фиксы по дизайну и исправление в документации.
• Placeholder: убран лишний фон (#967).

Улучшения

• Обновлены цветовые схемы.

Новые фичи

• MiniInfoCell: новые свойства textWrap и textWrap.
• PullToRefresh: вызов события Taptic Engine через vk-brigde при обновлении жестом.

Исправления

• Исправлена циклическая перерисовка Select в некоторых случаях.

Улучшения

• Теперь бандл с библиотекой может подключаться как в head, так и в конец body. Раньше могли возникать ошибки из-за недоступности DOM-дерева в момент исполнения кода библиотеки.
• В документации доступны все иконки из пакета @vkontakte/icons.

Исправлен баг с передачей нулевого значения в CustomSelect

Исправления

• #924
• #935
• Поправился расчет координат куда кликнули
• Поправилась ошибка, когда кликали на серую полоску и ничего не происходило

Обратно несовместимые изменения

• <Button size="l" /> больше не растягивается автоматически на всё ширину. Чтобы добиться растяжения, нужно передать свойство stretched: <Button size="l" stretched />

Исправления

• Фиксы в документации.
• Фикс взаимодействия с модальной страницей во время анимации.

Улучшения

• В ModalCard добавлено пропущенное свойство className.

• Фиксы документации.
• Фикс взаимодействия с модальной страницей во время анимации.
• Фикс смены модальных страниц в десктопной версии.
• Фикс MiniInfoCell для десктопа.
• Avatar: добавлен размер 96.

• Фикс квадратной волны в Safari у кнопок со скругленными уголками
• Компонент Select, теперь сам определяет показывать нативный контрол (NativeSelect) или нет(CustomSelect)
• Фиксы работы CustomSelect с клавиатуры