v4.0.0

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

Этот релиз в первую очередь примечателен тем, что 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}