• Поправлен layout у PanelHeader.
• Поддержано свойство style у ListItem.

• Поддержан верхний inset у Panel.
• SearchIOS вынесен на отдельный слой для улучшения производительности.
• Пакет @vkontakte/icons обновлен до 1.1.1.

• Оптимизации в Root.
• FormLayout: добавлены стили для Input и Select, которые рисуются в пределах одного .FormLayout__row.
• Мелкие багфиксы

• Поправлены отступы в области подчеркивания у Textarea на Android
• Добавлено состояние disabled у Checkbox
• Мелкие багфиксы

• Поправлены шрифты. Теперь при отладке шрифты будут выставляться в зависимости от выбранного user agent. Раньше, при отладке на маке, в версии Android показывались шрифты для iOS.
• Поправлена проблема с margin collapse у первого дочернего элемента в .Panel__in.

Багфиксы и мелкие фичи

• Поправлены вертикальные отступы у Footer.
• Поддержаны ...restProps у Gallery, Slider и RangeSlider.
• У SearchIOS и SearchAndroid ...inputProps перенесены в начало.
• Обновлен основной Readme.md.

Обновления Avatar

Документация. Изменения:

• Появились два дополнительных типа – для приложений и для музыки.
• children будет рисоваться вне зависимости от наличия или отсутствия src.

Footer

Новый компонент для отрисовки подвала списков. Документация.

HorizontalScroll

Обзавелся документацией.

Багфиксы и мелкие фичи

• Вернулся .Select-underline для Android.
• Поддержано свойство alignment для Input, Select и SelectMimicry.
• Пофикшены стили для кнопок-ссылок.

HeaderContext

Новый компонент для контекстного меню шапки. Документация.

ListItem

Поправлены отступы у Android версии

ActionSheet

Убрана шапка для Android версии

PanelHeaderContent

Новый компонент. Подробности здесь.

PanelHeader

• Поправлены горизонтальные отступы между левой, правой и контентной частью.
• Поправлена ширина контента.

Avatar

Вернул свойство style элементу img. Сделано для удобства.

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

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.4

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

SearchIOS

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

Button

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

ListItem

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

HeaderButton

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

FixedLayout

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

Progress

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

Avatar

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

ListItem

Поправлены padding

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

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

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

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

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

FormLayout

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

PanelHeader

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

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

Button

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

Tappable

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

ListItem

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

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.