Release v7.0.0-beta.1 · VKCOM/VKUI

Tip

Чтобы упростить переход на новую мажорную версию, можно воспользоваться инструментом по автоматической миграции ваших компонентов

Подробную информацию можно найти на этой странице.

BREAKING CHANGE

🌗 `Appearance` → `ColorScheme`

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

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

Константа Appearance переименована в ColorScheme (#7728)

Пример миграции

- export const Appearance = {
+ export const ColorScheme = {
  DARK: 'dark',
  LIGHT: 'light',
} as const;

- const apperance = Appearance.DARK
+ const colorScheme = ColorScheme.DARK

Тип AppearanceType переименован в ColorSchemeType (#7728)

Пример миграции

- const appearance: ApperanceType = Appearance.DARK;
+ const colorScheme: ColorSchemeType = ColorScheme.DARK;

AppearanceProvider переименован в ColorSchemeProvider, AppearanceProviderProps переименован в ColorSchemeProviderProps (#7728)

Пример миграции

- 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 (#7728)
Пример миграции
```
- const appearance = useAppearance();
+ const colorScheme = useColorScheme();
```

В ConfigProvider и ConfigProviderProps свойство appearance переименовано в colorScheme (#7728)

Пример миграции

<ConfigProvider
  platform="vkcom"
- appearance="light"
+ colorScheme="light"
>
  <AdaptivityProvider viewWidth={ViewWidth.DESKTOP} hasPointer>
    <Div>Content</Div>
  </AdaptivityProvider>
</ConfigProvider>

В ConfigProviderContext свойство appearance переименовано в colorScheme (#7728)

Пример миграции

<ConfigProviderContext.Provider value={{
  ...configContext,
  - appearance: 'light'
  + colorScheme: 'light'
}}>
  {children}
</ConfigProviderContext.Provider>

Пример миграции

const {
  ...args,
- appearance
+ colorScheme
} = useConfigProvider();

💅 CustomScrollView: JS → CSS

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

Note

Если по какой-то причине вам всё же нужна JS-реализация, то советуем присмотреться к готовой библиотеке react-custom-scrollbars или к другим альтернативам.

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

удалены свойства windowResize, autoHideScrollbar, autoHideScrollbar (#7703)

Пример миграции

<CustomScrollView
  className={"className"}
- windowResize
- autoHideScrollbar
- autoHideScrollbarDelay={1000}
  enableHorizontalScroll
>
...
</CustomScrollView>

удалено свойство boxRef, вместо него можно использовать свойство getRootRef (#7703)
Пример миграции
```
<CustomScrollView
  className={"className"}
- boxRef={ref}
+ getRootRef={ref}
  enableHorizontalScroll
>
...
</CustomScrollView>
```
добавлено свойство scrollbarHidden для скрытия скроллбара (#7703)

CustomSelect: удалены свойства autoHideScrollbar, autoHideScrollbar (#7703)

Пример миграции

<CustomSelect
  id="select-type-select-id"
  value={selectType}
  placeholder="Не задан"
  options={selectTypes}
- autoHideScrollbar
- autoHideScrollbarDelay={1500}
  onChange={(e) => setSelectType(e.target.value)}
/>

ChipsSelect: удалены свойства autoHideScrollbar, autoHideScrollbar (#7703)

Пример миграции

<ChipsSelect
  id="colors"
  value={selectedColors}
  onChange={setSelectedColors}
  options={colors}
- autoHideScrollbar
- autoHideScrollbarDelay={1500}
  placeholder="Не выбраны"
  creatable="Добавить цвет"
  allowClearButton={true}
/>

Select: удалены свойства autoHideScrollbar, autoHideScrollbar (#7703)

Пример миграции

<Select
  id="select-type-select-id"
  value={selectType}
  placeholder="Не задан"
  options={selectTypes}
- autoHideScrollbar
- autoHideScrollbarDelay={1500}
  onChange={(e) => setSelectType(e.target.value)}
/>

🎨 Синхронизация параметров с дизайном

Чтобы улучшить разработческий опыт при общении с дизайном, в этом релизе разом сократили расхождения по названиям параметров React с Figma.

ActionSheet:

свойство header переименовано на title (#7785)
свойство text переименовано на description (#7785)

Пример миграции

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

Alert:

свойство header переименовано наtitle (#7769)
свойство text переименовано на description (#7769)

Пример миграции

<Alert
- header="Подтвердите действие"
+ title="Подтвердите действие"
- text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
+ description="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
  actionsAlign="left"
  actionsLayout="horizontal"
/>

Banner:

переименовано свойство subheader -> subtitle (#7773)
переименовано свойство text -> extraSubtitle (#7773)
переименовано свойство header -> title (#7773)

Пример миграции

<Banner
  before={<Avatar size={48} src={'user_lihachyov'} />}
-  header="Сегодня день рождения Михаила Лихачёва"
+  title="Сегодня день рождения Михаила Лихачёва"
-  subheader="Подарите подарок"
+  subtitle="Подарите подарок"
-  text="Дополнительный текст"
+  extraSubtitle="Дополнительный текст"
/>

свойство asideMode переименовано на after (#7793)

Пример миграции

<Banner
  before={<Avatar size={48} src={'user_lihachyov'} />}
  title="Сегодня день рождения Михаила Лихачёва"
  subtitle={"Подарите подарок"}
  extraSubtitle={"Дополнительный текст"}
- asideMode="dismiss"
+ after="dismiss"
/>

CardGrid: свойство spaced переименовано на padding (#7804)

Пример миграции

<CardGrid
  size="s"
- spaced
+ padding
>
  <Card>
    <div style={{ paddingBottom: '66%' }} />
  </Card>
</CardGrid>

CardScroll: свойство noSpaces заменено на padding (#7788)

Пример миграции

<CardScroll
  size="s"
- noSpaces
+ padding={false}
>
  <Card>
    <div style={{ paddingBottom: '66%' }} />
  </Card>
</CardScroll>

Cell: свойство expandable переименовано на chevron (#7787)

Пример миграции

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

CellButton: свойство expandable переименовано в chevron (#7787)

Пример миграции

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

ContentCard:

переименовано свойство header на title (#7771)
переименовано свойство subtitle на overTitle (#7771)
переименовано свойство text на description (#7771)
переименовано свойство headerComponent на titleComponent (#7771)

Пример миграции

<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..."
/>

FormStatus: переименовано свойство header -> title (#7773)

Пример миграции

<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: свойство aside переименовано в after (#7764)

Пример миграции

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

HorizontalCell:
- свойство header переименовано на title (#7698)
  Пример миграции
```
<HorizontalCell
- header="Header"
+ title="Header"
/>
```
- значение size="l" теперь имеет ограничение по максимальной ширине, воспользуйтесь size="auto" там, где это необходимо (#7807)
HorizontalCellShowMore: значение size="l" удалено, используйте size="m" (#7807)
Пример миграции
```
- <HorizontalCellShowMore size="l">
+ <HorizontalCellShowMore size="m">
```
HorizontalScroll: значение arrowSize="l" удалено, используйте arrowSize="m", а вместо arrowSize="m" используйте arrowSize="s".
Пример миграции
```
- <HorizontalScroll arrowSize="m">
+ <HorizontalScroll arrowSize="s">
- <HorizontalScroll arrowSize="l">
+ <HorizontalScroll arrowSize="m">
```

MiniInfoCell: свойство expandable переименовано на chevron (#7787)

Пример миграции

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

ModalCard:

переименовано свойство header на title (#7782)
переименовано свойство subheader на description (#7782)
переименовано свойство headerComponent на titleComponent (#7782)
переименовано свойство subheaderComponent на descriptionComponent (#7782)

Пример миграции

<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>
  }
/>

OnboardingTooltip: переименованы свойства text на description, header на title (#7765)

Пример миграции

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

PanelHeaderContent: свойство status переименовано на subtitle (#7781)

Пример миграции

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

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 (#7719)
- переименовано свойство caption на extraSubtitle (#7719)
- переименовано свойство subhead на overTitle (#7719)

ScreenSpinner: свойство caption переименовано на label (#7790)

Пример миграции

<ScreenSpinner
  state="loading"
- caption="Caption"
+ label="Caption"
/>

<ScreenSpinner.Container
- caption="Caption"
+ label="Caption"
>
  <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>

Separator: свойство wide заменено свойством padding (#7720)
Пример миграции
```
<Separator
-  wide={false}
+  padding
/>
<Separator
-  wide
/>
<Separator
-  wide={true}
/>
```

SimpleCell: свойство expandable переименовано на chevron (#7787)

Пример миграции

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

SubnavigationButton: свойство expandable переименовано на chevron (#7787)

Пример миграции

<SubnavigationButton
- expandable={true}
+ chevron={true}
  selected={true}
  onClick={() => {}}
>
  Button
</SubnavigationButton>

SubnavigationBar: свойство mode заменено на флаг fixed (#7792)
Пример миграции
```
<SubnavigationBar
- mode={"fixed"}
+ fixed
/>

<SubnavigationBar
- mode={"overflow"}
/>
```
ScrollArrow: значение size="l" удалено, используйте size="m", а вместо size="m" используйте size="s" (#7807)
Пример миграции
```
- <ScrollArrow size="m">
+ <ScrollArrow size="s">
- <ScrollArrow size="l">
+ <ScrollArrow size="m">
```

TabbarItem: свойство text переименовано на label (#7783)

Пример миграции

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

Tooltip: переименованы свойства text на description, header на title (#7765)

Пример миграции

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

Улучшения

Были добавлены use client директивы (#7702)
Banner:
- в свойство after (в бывшем asideMode) теперь можно прокинуть любое значение (#7793)
- корневой элемент компонента теперь сделан через Tappable, соответственно, в компонент теперь можно прокидывать соответствующие Tappable параметры (#7793)
HorizontalCell: значения size расширены до 's' | 'm' | 'l' | 'xl' | 'auto' | number (#7807)
Flex: свойства теперь наследуются из RootComponentProps (#7700)
SimpleGrid: свойства теперь наследуются из RootComponentProps (#7700)
Separator: добавлены новые свойства direction, size и align (#7720)

Типы

Добавлен экспорт типа FloatingPlacementWithAuto (#7810)

Хуки

useOrientationChange()
- поправлена проблема с гидрациией при SSR (#7811)
- добавлен экспорт типа Orientation (#7811)
Добавлен экспорт usePatchChildren() (#7812)
Хук позволяет пропатчить переданный компонент так, чтобы можно было получить ссылку на его DOM-элемент. Также есть возможность прокинуть в компонент дополнительные параметры

Исправления

в поле "exports" добавлен package.json (#7751)
При использовании нескольних компонентов блокирующих прокрутку, на демонтировании одного из них могло происходить разблокирование прокрутки (#7817)
Calendar: исправлены active/hover-состояния у дня календаря (#7738)
CalendarRange: поправлены моргания промежутка при выборе (#7750)
SimpleCell : стили SimpleCell перебивают стили CellButton в cssm сборке (#7737)
RichCell: поправлена проблема с длинным текстом и выходом за границы компонента (#7730)

Сборка

CSS-бандл теперь собирается с помощью rspack (#7249)

Зависимости

@vkontakte/vkui-tokens обновлён с 4.54.0 to 4.55.0 (#7800)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v7.0.0-beta.1

BREAKING CHANGE

🌗 `Appearance` → `ColorScheme`

💅 CustomScrollView: JS → CSS

🎨 Синхронизация параметров с дизайном

Улучшения

Типы

Хуки

Исправления

Сборка

Зависимости

v7.0.0-beta.1

BREAKING CHANGE

🌗 Appearance → ColorScheme

💅 CustomScrollView: JS → CSS

🎨 Синхронизация параметров с дизайном

Улучшения

Типы

Хуки

Исправления

Сборка

Зависимости

🌗 `Appearance` → `ColorScheme`