v4.0.0-beta.1

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

Breaking changes

Button

• Поменялись значения свойства size. Было m, l, xl, стало — s, m, l

Cell

• Удалено свойство size. Теперь чтобы отрисовать Cell size="l" нужно использовать RichCell
• Свойство asideContent переименовано в after
• Анимация нажатия теперь по-умолчанию включена. Для отключение необходимо передавать свойство disabled={true}

ActionSheet

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

Panel

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

New

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

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

• <AdaptivityProvider>
• <SplitLayout>, <SplitCol>, <SplitFixedCol>
• withAdaptivity HOC

В будущем будет добавлены абстракции инкапсулирующие самые популярные лаяуты адаптивности, сейчас это нужно делать вручную через <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,
});