Skip to content

v4.0.0

Choose a tag to compare

View all tags
@ArthurStam ArthurStam released this 21 Dec 14:38
· 10105 commits to master since this release
v4.0.0
99b909f

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

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

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

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

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

AppRoot

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

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

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

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}
Assets 2
Loading