Миграция с v6 на v7

⚙️ Сборка

  • Если вы завязывались на CSS-классы компонентов, то необходимо пройтись по таким местам и проверить классы на соответствие, т.к. теперь за их формирование отвечает CSS Modules.

  • Импортирование теперь ограничено свойством "exports" в package.json. Если вам нужен какой-то внутренний функционал, то следует создать issues ↗ на его экспорт, чтобы мы рассмотрели такую возможность.

  • Поднята целевая версия ECMAScript для компиляции до es2017.

  • Удалена CommonJS сборка – теперь библиотека поставляется только как ESM. В зависимости от вашего инструмента для сборки, потребуется настроить трансформацию для пакета @vkontakte/vkui.

    Возможные проблемы в Jest <= 29

    Jest пока не умеет в поле "exports" и ориентируется на поле "main", которого уже нет в VKUI.

    Как Workaround, можно написать свой jest-resolver.js (см. https://github.com/jestjs/jest/issues/9771#issuecomment-776681032 ↗).

    const DEPENDENCIES_WITH_NO_MAIN_FIELD = ['@vkontakte/vkui'];
 
module.exports = (path, options) =>
  options.defaultResolver(path, {
    ...options,
    packageFilter: (pkg) =>
      DEPENDENCIES_WITH_NO_MAIN_FIELD.includes(pkg.name) ? { ...pkg, main: pkg.module } : pkg,
  });
    Возможные проблемы в Vitets

    Может падать с ошибкой SyntaxError: Named export 'IconAppearanceProvider' not found. The requested module '@vkontakte/icons' is a CommonJS module, which may not support all module.exports as named exports..

    Чтобы исправить это, нужно добавить @vkontakte/vkui в параметр test.server.deps.inline в конфиге vitest.config.*.

    import { defineConfig } from 'vite';
 
export default defineConfig(({ mode }) => {
  return {
    resolve: {},
    test: { server: { deps: { inline: [/@vkontakte\/vkui/] } } },
  };
});

🌗 Appearance → ColorScheme

Название Appearance для указания светлой или тёмной темы совпадало с названием параметров некоторых компонентов, что могло путать, поэтому пришли к названию ColorScheme, также как свойство в CSS.

Это привело к следующим изменениям:

  • Константа Appearance переименована в ColorScheme.

    Миграция
    - export const Appearance = {
+ export const ColorScheme = {
  DARK: 'dark',
  LIGHT: 'light',
} as const;
 
- const apperance = Appearance.DARK
+ const colorScheme = ColorScheme.DARK

  • Тип AppearanceType переименован в ColorSchemeType.

    Миграция
    - const appearance: ApperanceType = Appearance.DARK;
+ const colorScheme: ColorSchemeType = ColorScheme.DARK;

  • AppearanceProvider переименован в ColorSchemeProvider, AppearanceProviderProps переименован в ColorSchemeProviderProps.

    Миграция
    - const props: AppearanceProviderProps = {
+ const props: ColorSchemeProviderProps = {
  value: 'dark'
}
    - <AppearanceProvider value={colorScheme}>
+ <ColorSchemeProvider value={colorScheme}>
  <AdaptivityProvider sizeY="regular">
    <Div style={{ padding: 10 }}>
      <Textarea id="textarea" />
    </Div>
  </AdaptivityProvider>
- </AppearanceProvider>
+ </ColorSchemeProvider>

  • Хук useAppearance переименован в useColorScheme.

    Миграция
    - const appearance = useAppearance();
+ const colorScheme = useColorScheme();

  • В ConfigProvider и ConfigProviderProps свойство appearance переименовано в colorScheme.

    Миграция
    <ConfigProvider
  platform="vkcom"
- appearance="light"
+ colorScheme="light"
>
  <AdaptivityProvider viewWidth={ViewWidth.DESKTOP} hasPointer>
    <Div>Content</Div>
  </AdaptivityProvider>
</ConfigProvider>

  • В ConfigProviderContext свойство appearance переименовано в colorScheme.

    Миграция
    <ConfigProviderContext.Provider value={{
  ...configContext,
- appearance: 'light',
+ colorScheme: 'light'
}}>
  {children}
</ConfigProviderContext.Provider>
    const {
  ...args,
- appearance,
+ colorScheme
} = useConfigProvider();

🧩 Компоненты

Типографика

Теперь используется useAccentWeight = false по умолчанию. Когда дополнительно требуется переопределить тип начертания текста с помощью свойства weight - VKUI использует токены fontWeightBase*. Чтобы включить fontWeightAccent* токены, нужно использовать свойство useAccentWeight.

ActionSheet

  • Свойство header переименовано в title.
  • Свойство text переименовано в description.
Миграция
<ActionSheet
  onClose={() => {}}
- header="Вы действительно хотите удалить это видео из Ваших видео?"
+ title="Вы действительно хотите удалить это видео из Ваших видео?"
- text="Данное действие реально удалит видео, подумайте!"
+ description="Данное действие реально удалит видео, подумайте!"
>
  <ActionSheetItem mode="destructive">Удалить видео</ActionSheetItem>
</ActionSheet>

Alert

  • Свойство header переименовано в title.
  • Свойство text переименовано в description.
Миграция
<Alert
- header="Подтвердите действие"
+ title="Подтвердите действие"
- text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
+ description="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
  actionsAlign="left"
  actionsLayout="horizontal"
/>
  • Свойство subheader переименовано в subtitle.
  • Свойство text переименовано в extraSubtitle.
  • Свойство header переименовано в title.
  • Свойство asideMode переименовано в after.
Миграция
<Banner
  before={<Avatar size={48} src={'user_lihachyov'} />}
- header="Сегодня день рождения Михаила Лихачёва"
+ title="Сегодня день рождения Михаила Лихачёва"
- subheader="Подарите подарок"
+ subtitle="Подарите подарок"
- text="Дополнительный текст"
+ extraSubtitle="Дополнительный текст"
- asideMode="dismiss"
+ after="dismiss"
/>

Button

  • Изменен цвет компонента при appearance="overlay" и mode="secondary".

  • Изменен цвет компонента в состоянии mode="primary" и appearance="neutral", при миграции рекомендуется выставлять mode="secondary" при appearance="neutral".

    Миграция
    <Button
  appearance="neutral"
+ mode="secondary"
/>

Calendar

Свойство onClose переименовано в onDoneButtonClick.

Миграция
<Calendar
- onClose={() => void 0}
+ onDoneButtonClick={() => void 0}
/>

CardGrid

Свойство spaced переименовано в padding.

Миграция
<CardGrid
  size="s"
- spaced
+ padding
>
  <Card>
    <div style={{ paddingBottom: '66%' }} />
  </Card>
</CardGrid>

CardScroll

Свойство noSpaces заменено на padding.

Миграция
<CardScroll
  size="s"
- noSpaces
+ padding={false}
>
  <Card>
    <div style={{ paddingBottom: '66%' }} />
  </Card>
</CardScroll>

Cell

  • Свойство subhead переименовано в overTitle.

    Миграция
    <Cell
  onClick={() => {}}
- subhead="Subhead"
+ overTitle="Subhead"
  indicator="При использовании"
>
  Геолокация
</Cell>

  • Свойство expandable переименовано в chevron.

    Миграция
    <Cell
  onClick={() => {}}
- expandable="auto"
+ chevron="auto"
  indicator="При использовании"
>
  Геолокация
</Cell>

CellButton

  • Свойство subhead переименовано в overTitle.

    Миграция
    <CellButton
  onClick={() => {}}
- subhead="Subhead"
+ overTitle="Subhead"
  indicator="При использовании"
>
  Геолокация
</CellButton>

  • Свойство expandable переименовано в chevron.

    Миграция
    <CellButton
  onClick={() => {}}
- expandable="auto"
+ chevron="auto"
  indicator="При использовании"
>
  Геолокация
</CellButton>

  • Свойство mode заменено на appearance со значениями 'accent' | 'neutral' | 'negative', также для appearance="accent" (a.k.a mode="primary") возвращён токен --vkui--color_text_accent, а вот при комбинации с centered применяется --vkui--color_text_accent_themed.

    Миграция
    <CellButton
- mode="danger"
+ appearance="negative"
>
  Создать что-нибудь
</CellButton>
 
<CellButton
- mode="primary"
+ appearance="accent"
>
  Создать что-нибудь
</CellButton>

ContentCard

  • Свойство header переименовано в title.
  • Свойство subtitle переименовано в overTitle.
  • Свойство text переименовано в description.
  • Свойство headerComponent переименовано в titleComponent.
Миграция
<ContentCard
- subtitle="VKUI"
+ overTitle="VKUI"
- header="ContentCard example"
+ title="ContentCard example"
- headerComponent="h4"
+ titleComponent="h4"
  caption="VKUI Styleguide > Blocks > ContentCard"
- text="Badlands is the story about dreams and cruel reality..."
+ description="Badlands is the story about dreams and cruel reality..."
/>

Counter

Изменены значения свойства mode.

Таблица миграции значений
v6v7
mode="inherit"без изменений
mode="primary"mode="primary" appearance="accent"
mode="secondary"mode="primary" appearance="neutral"
mode="prominent"mode="primary" appearance="accent-red"
mode="contrast"mode="contrast" appearance="accent"

CustomScrollView

Так как дизайн не документирует поведение ползунка и полосы прокрутки, было решено перейти на использование системного поведения и тем самым облегчить компонент за счёт стилизации прокрутки полностью через CSS (Firefox < 64 стилизация останется браузерной).

В связи с этим:

  • удалено свойство boxRef, вместо него можно использовать свойство getRootRef;

    Миграция
    <CustomScrollView
  className="className"
- boxRef={ref}
+ getRootRef={ref}
  enableHorizontalScroll
>
...
</CustomScrollView>

  • удалены свойства windowResize, autoHideScrollbar, autoHideScrollbar, это изменение также коснулось CustomSelect, ChipsSelect и Select;

    Миграция
    <CustomScrollView
  className="className"
- windowResize
- autoHideScrollbar
- autoHideScrollbarDelay={1000}
  enableHorizontalScroll
>
...
</CustomScrollView>
    Миграция CustomSelect
    <CustomSelect
  id="select-type-select-id"
  value={selectType}
  placeholder="Не задан"
  options={selectTypes}
- autoHideScrollbar
- autoHideScrollbarDelay={1500}
  onChange={(e) => setSelectType(e.target.value)}
/>
    Миграция ChipsSelect
    <ChipsSelect
  id="colors"
  value={selectedColors}
  onChange={setSelectedColors}
  options={colors}
- autoHideScrollbar
- autoHideScrollbarDelay={1500}
  placeholder="Не выбраны"
  creatable="Добавить цвет"
  allowClearButton={true}
/>
    Миграция Select
    <Select
  id="select-type-select-id"
  value={selectType}
  placeholder="Не задан"
  options={selectTypes}
- autoHideScrollbar
- autoHideScrollbarDelay={1500}
  onChange={(e) => setSelectType(e.target.value)}
/>

🗑️ DatePicker

Компонент был удален, так как являлся устаревшим. На замену ему можно использовать Input, Select и DateInput. О том что лучше использовать, можно прочитать в обсуждении #7070 ↗.

Flex

Изменена последовательность отступов в свойстве gap на [row, column].

Миграция
<Flex
  direction="column"
- gap={[20, 10]}
+ gap={[10, 20]}
  align="center"
>
  <div/>
  <div/>
</Flex>

FormItem

  • Удалено свойство topNode, вместо него можно использовать свойство top.

    Миграция
    <FormItem
- topNode={
+ top={
    <FormItem.Top>
      <FormItem.TopLabel htmlFor="about">Дополнительная информация</FormItem.TopLabel>
      <FormItem.TopAside>0/100</FormItem.TopAside>
    </FormItem.Top>
  }
>
<Textarea id="about" name="about" />
</FormItem>

  • У под-компонента FormItem.TopLabel свойство multiline было удалено, теперь свойство topMultiline устанавливается у компонент FormItem.

    Миграция
    <FormItem
+ topMultiline
  top={
    <FormItem.Top>
-     <FormItem.TopLabel htmlFor="about" multiline>Дополнительная информация</FormItem.TopLabel>
+     <FormItem.TopLabel htmlFor="about">Дополнительная информация</FormItem.TopLabel>
      <FormItem.TopAside>0/100</FormItem.TopAside>
    </FormItem.Top>
  }
>
  <div/>
</FormItem>

FormStatus

Свойство header переименовано в title.

Миграция
<FormStatus
- header="Некорректный мобильный номер"
+ title="Некорректный мобильный номер"
  mode="error"
>
  Необходимо корректно ввести номер в международном формате
</FormStatus>

Gallery

Значение arrowSize="l" удалено, используйте arrowSize="m", а вместо arrowSize="m" используйте arrowSize="s".

Миграция
- <Gallery arrowSize="m">
+ <Gallery arrowSize="s">
- <Gallery arrowSize="l">
+ <Gallery arrowSize="m">

Header

  • Изменен формат size с 'regular' | 'large' на 'm' | 'l'.

    Миграция
    <Header
  mode="primary"
- size="large"
+ size="l"
>
  Большой заголовок
</Header>

  • Свойство mode было удалено. Логика удаления свойства mode.

    Таблица миграции значений
    v6v7
    size="l" mode="primary"size="xl"
    size="m" mode="primary"size="m"
    mode="tertiary"size="m"
    mode="secondary"size="s"

  • Свойство aside переименовано в after.

    Миграция
    <Header
  mode="primary"
  subtitle="SOHN — Conrad"
  subtitleComponent="h3"
- aside={
+ after={<Link>Показать все</Link>}
/>

HorizontalCell

  • Свойство header переименовано в title.

    Миграция
    <HorizontalCell
- header="Header"
+ title="Header"
/>

  • Значение size="l" теперь имеет ограничение по максимальной ширине, воспользуйтесь size="auto" там, где это необходимо.

HorizontalCellShowMore

  • Значение size="l" удалено, используйте size="m".

    Миграция
    - <HorizontalCellShowMore size="l">
+ <HorizontalCellShowMore size="m">

  • Свойство compensateLastCellIndent удалено. Если вы использовали дополнительные обертки внутри HorizontalScroll, чтобы выравнивать ячейки внутри компонента, просьба пересмотреть их использование и размещать HorizontalCellShowMore на том же уровне вложенности, что и остальные ячейки в HorizontalScroll.

HorizontalScroll

  • Значение arrowSize="l" удалено, используйте arrowSize="m", а вместо arrowSize="m" используйте arrowSize="s".

    Миграция
    - <HorizontalScroll arrowSize="m">
+ <HorizontalScroll arrowSize="s">
 
- <HorizontalScroll arrowSize="l">
+ <HorizontalScroll arrowSize="m">

  • Свойство inline удалено и теперь применяется по умолчанию. Если вы использовали дополнительные обертки, чтобы выравнивать ячейки внутри компонента, просьба пересмотреть их использование.

Image

У под-компонента Image.Overlay свойство disableInteractive было удалено, вместо него теперь можно просто не прокидывать свойство onClick.

Link

Теперь для передачи иконок следует использовать параметры before и after,

CSS свойства, которые через каскад задавались переданным иконкам в children, удалены.

Миграция
<Link
  href="#"
+ after={<Icon12Example />}
>
  Текст ссылки
- <Icon12Example />
</Link>

MiniInfoCell

Свойство expandable переименовано в chevron.

Миграция
<MiniInfoCell
  before={<Icon20WorkOutline />}
  mode="add"
  onClick={() => console.log('Указать место учёбы')}
  textWrap="short"
- expandable
+ chevron
>
  Укажите место учёбы
</MiniInfoCell>

ModalCard, ModalCardBase

  • Свойство header переименовано в title.
  • Свойство subheader переименовано в description.
  • Свойство headerComponent переименовано в titleComponent.
  • Свойство subheaderComponent переименовано в descriptionComponent.
Миграция на примере ModalCard
<ModalCard
  dismissButtonMode="inside"
  dismissLabel="Закрыть"
- header="Десктопная и планшетная версии с крестиком внутри"
+ title="Десктопная и планшетная версии с крестиком внутри"
- headerComponent="h1"
+ titleComponent="h1"
- subheader="Сверху будет безопасный отступ до иконки"
+ description="Сверху будет безопасный отступ до иконки"
- subheaderComponent="span"
+ descriptionComponent="span"
  actions={
    <React.Fragment>
      <Button size="l" mode="primary" stretched>
        Некая кнопка
      </Button>
    </React.Fragment>
  }
/>

ModalRoot

Удалена реализация контекста через React.cloneElement, которая требовала передавать settlingHeight и dynamicContentHeight в обёртки над ModalPage / ModalCard.

Миграция (перенос settlingHeight / dynamicContentHeight)
const SomeWrapper = ({ id }) => (
  <ModalPage
    id={id}
+   settlingHeight={100} // или dynamicContentHeight
  />
);
 
<ModalRoot activeModal="m">
  <SomeWrapper
    id="m"
-   settlingHeight={100} // или dynamicContentHeight
  />
</ModalRoot>
Миграция (пробрасывание settlingHeight / dynamicContentHeight)
- const SomeWrapper = ({ id }) => (
+ const SomeWrapper = (props) => (
  <ModalPage
-   id={id}
+   {...props}
  />
);
 
<ModalRoot activeModal="m">
  <SomeWrapper
    id="m"
    settlingHeight={100} // или dynamicContentHeight
  />
</ModalRoot>
Миграция (бизнес-логика в обёртках)
+ const FetchData = () => {
+   const [data, setData] = useState({});
+   useEffect(() => {
+     fetch('...').then((r) => r.json()).then(setData);
+   }, []);
+   return <div>{data}</div>;
+ };
 
const SomeWrapper = ({ id, ...restProps }) => {
-  const [data, setData] = useState({});
-  useEffect(() => {
-    fetch('...').then((r) => r.json()).then(setData);
-  }, []);
 
+  const { activeModal } = useModalRootContext();
  useEffect(function enableSomeEffect() {
+    if (id === activeModal) {
      /* ... */
+    }
  }, [id, activeModal];
 
  return (
    <ModalPage id={id} {...restProps}>
-     <div>{data}</div>
+     <FetchData>
    </ModalPage>
  );
};
 
<ModalRoot activeModal="m">
  <SomeWrapper
    id="m"
    settlingHeight={100} // или dynamicContentHeight
  />
</ModalRoot>

OnboardingTooltip

Переименованы свойства text на description, header на title.

Миграция
<OnboardingTooltip
  placement="right"
- header="Header"
+ title="Header"
- text="Привет"
+ description="Привет"
>
  <Button style={{ margin: 20 }}>Наведи</Button>
</OnboardingTooltip>

PanelHeader

Теперь не переопределяет цвет компонента Spinner, поэтому, если вы использовали компонент Spinner внутри PanelHeader, передавайте <Spinner noColor />.

PanelHeaderButton

  • У пресета PanelHeaderClose удалено свойство children. Теперь для прокидывания текста для a11y нужно прокидывать его в свойствоlabel.
  • У пресета PanelHeaderSubmit удалено свойство children. Теперь для прокидывания текста для a11y нужно прокидывать его в свойствоlabel.
  • У пресета PanelHeaderEdit удалены свойства children и label. Вместо label можно использовать свойства doneLabel и editLabel. Свойство children не использовалось.
  • У пресета PanelHeaderBack удалено свойство children. Теперь для прокидывания текста для a11y нужно прокидывать его в свойство label. Логика отображения label осталась как была, в отличие от других пресетов. Также для более точно настройки label были добавлены свойства hideLabelOnVKCom и hideLabelOnIOS, чтобы можно было скрывать label на соответствующей платформе.

PanelHeaderContent

Свойство status переименовано в subtitle.

Миграция
<PanelHeaderContent
- status="был в сети сегодня, в 18:46"
+ subtitle="был в сети сегодня, в 18:46"
  before={<Avatar size={36} src={'user_va'} />}
>
  Влад Анесов
</PanelHeaderContent>

PanelSpinner

Изменен формат size с 'small' | 'regular' | 'medium' | 'large' на 's' | 'm' | 'l' | 'xl'.

Миграция
- <PanelSpinner size="large" />
+ <PanelSpinner size="xl" />
 
- <PanelSpinner size="medium" />
+ <PanelSpinner size="l" />
 
- <PanelSpinner size="regular" />
+ <PanelSpinner size="m" />
 
- <PanelSpinner size="small" />
+ <PanelSpinner size="s" />

Placeholder

  • свойство header переименовано на title

    Миграция
    <Placeholder
  icon={<Icon56UsersOutline />}
- header={<Button size="m">Подключить сообщества</Button>}
+ title={<Button size="m">Подключить сообщества</Button>}
>
  Подключите сообщества, от которых Вы хотите получать уведомления
</Placeholder>

  • подкомпонент Header переименован на Title, Text переименован на Description

    Миграция
    <Placeholder.Container>
- <Placeholder.Header>
+ <Placeholder.Title>
    Find friends
-  </Placeholder.Header>
+  </Placeholder.Title>
-  <Placeholder.Text>
+  <Placeholder.Description>
    The people you add as your friends will be displayed here
-  </Placeholder.Text>
+  </Placeholder.Description>
</Placeholder.Container>

RichCell

  • Свойство text переименовано в subtitle.
  • Свойство caption переименовано в extraSubtitle.
  • Свойство subhead переименовано в overTitle.
Миграция
<RichCell
- subhead="онлайн"
+ overTitle="онлайн"
- text="Санкт-Петербург"
+ subtitle="Санкт-Петербург"
- caption="сегодня в 18:00"
+ extraSubtitle="сегодня в 18:00"
/>

ScreenSpinner

  • Удалён a11y-текст по умолчанию, передавайте нужный текст в children или label свойства.

  • Удалено свойство size.

    Миграция
    <ScreenSpinner
  state="loading"
- size="regular"
/>
<ScreenSpinner.Container>
- <ScreenSpinner.Loader size="small" />
+ <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>

  • Свойство caption переименовано в label.

    Миграция
    <ScreenSpinner
  state="loading"
- caption="Caption"
+ label="Caption"
/>
 
<ScreenSpinner.Container
- caption="Caption"
+ label="Caption"
>
  <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>

ScrollArrow

Значение size="l" удалено, используйте size="m", а вместо size="m" используйте size="s".

Миграция
- <ScrollArrow size="m">
+ <ScrollArrow size="s">
 
- <ScrollArrow size="l">
+ <ScrollArrow size="m">

Select

  • В колбэк onChange помимо ChangeEvent теперь прокидывается новое значение вторым аргументом. Рекомендуется использовать именно второй аргумент. То же самое относится и к CustomSelect и NativeSelect.

    Миграция
    <Select
  id="select-type-select-id"
  value={selectType}
  placeholder="Не задан"
  options={selectTypes}
- onChange={e => setSelectType(e.target.value)}
+ onChange={(_, newType) => setSelectType(newType)}
/>

  • Для указания невыбранного состояния теперь необходимо использовать null вместо undefined или пустой строки. То же самое и к CustomSelect и NativeSelect.

Separator

  • Свойство mode переименовано в appearance.

    Миграция
    <Separator
- mode="primary"
+ appearance="primary"
/>

  • Свойство wide заменено свойством padding.

    Миграция
    <Separator
-  wide={false}
+  padding
/>
 
<Separator
-  wide
/>
 
<Separator
-  wide={true}
/>

SimpleCell

  • Свойство subhead переименовано в overTitle.

    Миграция
    <SimpleCell
  onClick={() => {}}
- subhead="Subhead"
+ overTitle="Subhead"
  indicator="При использовании"
>
  Геолокация
</SimpleCell>

  • Свойство expandable переименовано в chevron.

    Миграция
    <SimpleCell
  onClick={() => {}}
- expandable="auto"
+ chevron="auto"
  indicator="При использовании"
>
  Геолокация
</SimpleCell>

SimpleGrid

Изменена последовательность отступов в свойстве gap на [row, column].

Миграция
<SimpleGrid
  columns={2}
- gap={[20, 10]}
+ gap={[10, 20]}
  align="center"
>
  <div/>
  <div/>
</SimpleGrid>

Spacing

Удален вариант значения пропа size 3xs, вместо него можно использовать 2xs, совпадающий по значению.

Миграция
- <Spacing size="3xs" />
 
+ <Spacing size="2xs" />

Spinner

Изменен формат size с 'small' | 'regular' | 'medium' | 'large' на 's' | 'm' | 'l' | 'xl'.

Миграция
- <Spinner size="large" />
+ <Spinner size="xl" />
 
- <Spinner size="medium" />
+ <Spinner size="l" />
 
- <Spinner size="regular" />
+ <Spinner size="m" />
 
- <Spinner size="small" />
+ <Spinner size="s" />

SplitLayout

Свойства popout и modal отмечены как @deprecated. Теперь что ModalRoot, что элементы Alert, ScreenSpinner и ActionSheet больше нет необходимости объявлять на верхнем уровне и передавать в SplitLayout.

Такие элементы будут по умолчанию рендерится в document.body. Если хочется вернуть старое поведение, то нужно точечно отключить функцию портала, передав, например, в ModalRoot передать usePortal={false}.

Пример
<SplitLayout
- modal={<ModalRoot>...</ModalRoot>}
>
  <SplitCol>...</SplitCol>
+ <ModalRoot usePortal={false}>...</ModalRoot>
</SplitLayout>

SubnavigationBar

Свойство mode заменено на флаг fixed.

Миграция
<SubnavigationBar
- mode="fixed"
+ fixed
/>
 
<SubnavigationBar
- mode="overflow"
/>

SubnavigationButton

Свойство expandable переименовано в chevron.

Миграция
<SubnavigationButton
- expandable={true}
+ chevron={true}
  selected={true}
  onClick={() => {}}
>
  Button
</SubnavigationButton>

TabbarItem

Свойство text переименовано в label.

Миграция
<Tabbar style={{ position: 'static', margin: '10px 0' }}>
  <TabbarItem
    selected={true}
-   text="Новости"
+   label="Новости"
  >
    <Icon28NewsfeedOutline />
  </TabbarItem>
</Tabbar>

Tooltip

Переименованы свойства text на description, header на title.

Миграция
<Tooltip
  placement="right"
- header="Header"
+ title="Header"
- text="Привет"
+ description="Привет"
>
  <Button style={{ margin: 20 }}>Наведи</Button>
</Tooltip>

UsersStack

Свойство direction заменено на avatarsPosition со значениями 'inline-start' | 'inline-end' | 'block-start'.

Миграция
- <UsersStack direction="row" />
+ <UsersStack avatarsPosition="inline-start" />
 
- <UsersStack direction="row-reverse" />
+ <UsersStack avatarsPosition="block-start" />
 
- <UsersStack direction="column" />
+ <UsersStack avatarsPosition="inline-end" />
Предыдущая
VK Mini Apps
Следующая
Блог