v2.2.0

Оптимизации :)

v2.1.0

HorizontalScroll

Новый компонент для отрисовки длинных блоков, которые можно скроллить по-горизонтали.

Tabs

• Улучшена документация
• Добавлен новый тип buttons
• Изменилось api (с обратной совместимостью)

FixedTabs

Морально устарел. Если нужно фиксировать Tabs, то их достаточно просто обернуть в FixedLayout. Отдельный компонент тут выглядит избыточным.

List, ListItem

• Теперь root элементы у List и ListItem – это обычные div'ы. Раньше были ul и li. Сделано в первую очередь для того, чтобы ListItem можно было использовать вне List и не париться о list-style.
• iOS сепараторы у ListItem рисуются теперь только при условии вложенности в List.

Button

Поправлен режим отображения stretched.

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

• Поправлен .stylelintrc.
• Поправлен pre-commit хук. Раньше он не выдавал ошибку при падении stylelint.

v2.0.6

Хот-фикс для v2.0.4

Пофишены горизонтальные отстутпы в PanelHeader и HeaderButton.

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