Заметка дополняется

Breaking changes

Button

• Поменялись значения свойства size. Было m, l, xl, стало — s, m, l
• Кнопки размера l теперь автоматически не растягиваются на всю ширину. Для достижения эффекта растягивания нужно передать streteched={true}

Cell

• Удалено свойство size. Теперь чтобы отрисовать Cell size="l" нужно использовать RichCell
• Свойство asideContent переименовано в after

ActionSheet

• Добавлены обязательные свойства toggleRef (desktop only) и iosCloseItem (ios only)

Panel

• (надо сделать) Удалено устаревшее свойство separator, отвечавшее за отрисовку разделителя после шапки. Свойство перекочевало в PanelHeader

MiniInfoCell

• Удалено свойство multiline. Вместо него нужно использовать textWrap="short".

Формы

• FormLayout Теперь просто оборачивает children в form. Никакой итерации по детям внутри него нет.
• В элементы форм больше не нужно передавать top, bottom и status. Компоненты нужно оборачивать в FormItem, передавая ему эти свойства.
• FormLayoutGroup так же лишен свойств top, bottom и status. Он теперь предназначен только для группировки FormItem.

New

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

Основные инструменты адаптивности:

• <AdaptivityProvider>
• <SplitLayout>, <SplitCol>, <SplitFixedCol>
• withAdaptivity HOC и SizeType тип

В будущем будет добавлены абстракции инкапсулирующие самые популярные лаяуты адаптивности, сейчас это нужно делать вручную через <SplitLayout>.

Пример:

const App = ({ children }) => {
  return <AdaptivityProvider>
    <SplitFixedCol width="280px">
      <Nav />
    </SplitFixedCol>
    <SplitLayout>
      <SplitCol spaced width="800px">{children}</SplitCol>
    </SplitLayout>
  </AdaptivityProvider>
};

Создание адаптивного компонента

Для создания адаптивного компонента, его нужно обернуть в withAdpativity HOC.

const AdaptiveBox = withAdaptivity(({ sizeX, sizeY }) => {
  if (sizeX === SizeType.COMPACT) {
    return <div style={{ padding: '8px' }} />
  } else {
    return <div style={{ padding: '20px' }} />
  }
}, {
  sizeX: true,
  sizeY: true,
});