v2.0.4

SearchIOS

Полностью переделан. Убраны баги, улучшена оптимизация.

Button

Добавлено свойство align. Примеры тут.

v2.0.3

ListItem

Добавлена возможность делать из элемента ссылку. Для этого нужно прокинуть свойство href. Важное замечание: при указании свойства href, ...restProps будут навешиваться не на корневой элемент li, а на Tappable. Это сделано для того, чтобы остальные свойства, присущие ссылке, типа rel или target, навешивались на нее, а не на li.

HeaderButton

В Tappable передается component="button", то есть теперь это "настоящая" кнопка. Например, если передать в HeaderButton свойство disabled, то onClick отрабатывать не будет.

FixedLayout

По-умолчанию у этого элемента z-index: 2.

Progress

Убран Object.values, ломающий код на старых девайсах

v2.0.2

Avatar

Добавлена возможность прокидывать children. Это нужно, например, для того чтобы рисовать иконку placeholder.

ListItem

Поправлены padding

Инфраструктура

Конфиг postcss вынесен в отдельный файл postss.config.js

v2.0.1

Переход на css custom properties

• Убран src/helpers/font.js.
• В *.css все map(...) конвертированы в var(--...).

В результате этих изменений, удалось избавиться от postcss-map. Сборка стала проще.

FormLayout

Было решено использовать padding вместо margin для вертикального позиционирования .FormLayout__row.

PanelHeader

Поддержка theme="light"

v2.0.0

ScrollView => Panel

Тут все просто, мы решили, что ScrollView – не самое подходящее название, Panel гораздо лучше отражает назначение этого компонента

Свойства header у Panel больше нет

Мы давно хотели избавить пользователей от декларации шапки в виде объекта, да еще и не в коде компонента панели. О чем речь?

Вот так было раньше:

<ScrollView header={{ title: 'Some Panel Title', left: '...', right: '...' }}>
  <SomePanel />
</ScrollView>

Проблема в том, что логика отображения панели "размазывается" в двух компонентах: там, где декларируется <ScrollView /> и непосредственно в <SomePanel />.

Как сейчас:

// App.js

<Panel>
  <SomePanel />
</Panel>

// SomePanel.js
<div>
  <PanelHeader left="..." right="...">
    Some Panel Title
  </PanelHeader>
  Panel content
</div>

PanelHeader можно располагать где угодно внутри Panel, он все равно будет отрисовываться сверху (привет, React.createPortal)

Кнопки в PanelHeader

Слегка поменялась логика отрисовки кнопок слева в PanelHeader

Как было раньше:

<ScrollView header={{
  left: <HeaderButton>{osname === IOS ? 'Назад' : <Icon24Back />}</HeaderButton>
  icon: osname === IOS && <HeaderButton><Icon28Chevron_back /></HeaderButton>
}} />

Как сейчас:

<PanelHeader
  left={<HeaderButton>{osname === IOS ? <Icon28Chevron_back /> : <Icon24Back />}</HeaderButton>}
  addon={<HeaderButton>Назад</HeaderButton>}
>
  Some Panel Title
</PanelHeader>

Больше примеров можно посмотреть вот тут: https://vkcom.github.io/vkui-styleguide/#!/HeaderButton

Новый дизайн

Компоненты Input, Select, Button, Textarea, Radio, Checkbox, FormLayout переехали на новый дизайн, который раньше включался свойством v="new".

Иконки

Иконки больше не являются частью VKUI. Теперь это самостоятельный пакет @vkonktakte/icons.
Вся информация об иконках содержится тут.

FormLayout

Свойство allowSubmit больше не используется. Submit формы будет только в том случае, если передан onSubmit. Разработчики должны сами управлять такими сценариями, как e.preventDefault().

Tappable

Используется почти во всех "кликабельных" компонентах. Раньше, для того чтобы заставить Tappable реагировать на прикосновения, ему обязательно нужно было передавать onClick. В некоторых случаях это приводило к навешиванию пустых обработчиков. Сейчас эффект нажатия будет работать всегда по-умолчанию.
Для отключения эффекта нужно передавать свойство disabled, по аналогии с Input, Button, Radio.

Удалены ненужные компоненты

• Pane – оказалось, что этот компонент лишний и может запутать разработчиков. Чтобы понять, как жить без него,
  достаточно полистать доку. Практически во всех случаях можно обойтись комбинацией Div и Group.

• Flex – не имеет отношения к VKUI.

View

Свойство header теперь по-дефолту true

v1.5.8

Button

• Тач события в Tappable не всплывают наверх

Tappable

• Добавлено свойство stopPropagation, чтобы предотвращать всплытие onStart, onMove и onEnd. По-умолчанию равно false

ListItem

• Вернулось событие onClick в selectable режиме

v1.5.7

• Added market_outline icon, 24px
• Added flex-shrink: 0 for .Entity__aside

v2.0.0-beta.1

Breaking changes

ScrollView

Renamed to Panel.

PanelHeader

New paradigm for defining header of Panel.

InnerScroll

Component for creating scrollable blocks. Fixes problem with iOS oversroll.

New design

For <FormLayout />, <Input />, <Button />, <Select />, <Textarea />, <Radio /> property v is new by default.

v1.5.6

ListItem HOTFIX

fixed bug with passing ...restProps into <input />, when ListItem is in selectable mode

v1.5.5

Touch

Removed disabling vertical scroll hacks. Using onMoveX handler insetad.

Radio

• Added transitions for <Radio v="new" /> markers.
• Changed activeEffectDelay for iOS and Android.

Tappable

Added active state transition for iOS .

PopoutWrapper

Fixed disabling window scroll, when PopoutWrapper is mounted.