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

Tip

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

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

BREAKING CHANGE

⚙️ Сборка

Удалена CommonJS сборка – теперь библиотека поставляется как ESM (#7611)
Jest <= 29

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

Как Workaround, можно написать свой jest-resolver.js (см. jestjs/jest#9771 (comment)).
```
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/] } } },
  };
});
```
Импортировать внутренности VKUI теперь запрещено на уровне свойства "exports" в package.json (#7611)
Изменено внутреннее устройство названия CSS-классов – теперь за формирование класса отвечает CSS Modules (#7655)

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

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

UsersStack: свойство direction заменено на avatarsPosition со значениями 'inline-start' | 'inline-end' | 'block-start' (#7666)

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

- <UsersStack direction="row" />
+ <UsersStack avatarsPosition="inline-start" />

- <UsersStack direction="row-reverse" />
+ <UsersStack avatarsPosition="block-start" />

- <UsersStack direction="column" />
+ <UsersStack avatarsPosition="inline-end" />

Separator: свойство mode заменено на appearance (#7687)
Пример миграции
```
<Separator
-  mode="primary"
+  appearance="primary"
/>
```

📐 Унификация формата размеров

Header: изменен формат size с 'regular' | 'large' на 'm' | 'l' (#7567)

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

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

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

Spinner: изменен формат size с 'small' | 'regular' | 'medium' | 'large' на 's' | 'm' | 'l' | 'xl' (#7567)

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

- <Spinner size="large" />
+ <Spinner size="xl" />

- <Spinner size="medium" />
+ <Spinner size="l" />

- <Spinner size="regular" />
+ <Spinner size="m" />

- <Spinner size="small" />
+ <Spinner size="s" />

🤔 Приведение в порядок семантики

Card: изменен тег используемый по умолчанию для ренедеринга компонента с div на li (#7520)
ContentCard: изменен тег используемый по умолчанию для ренедеринга компонента с div на li (#7520)
CardGrid: изменен тег используемый по умолчанию для ренедеринга компонента с div на ul (#7520)
CardScroll: изменен тег используемый по умолчанию для ренедеринга компонента с div на ul (#7520)

🧩 Остальные изменения в компонентах

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

ScreenSpinner: удалено свойство size (#7523)

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

<ScreenSpinner
  state="loading"
-  size="regular"
/>
<ScreenSpinner.Container>
- <ScreenSpinner.Loader size="small" />
+ <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>

FormItem: у под-компонента FormItem.TopLabel свойство multiline было удалено, теперь свойство topMultiline устанавливается у компонент FormItem (#7578)

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

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

Flex: изменена последовательность отступов в свойстве gap на [row, column] (#7550)
Пример миграции
```
<Flex
  direction="column"
-  gap={[20, 10]}
+  gap={[10, 20]}
  align="center"
>
  <div/>
  <div/>
</Flex>
```
SimpleGrid: изменена последовательность отступов в свойстве gap на [row, column] (#7550)
Пример миграции
```
<SimpleGrid
  columns={2}
-  gap={[20, 10]}
+  gap={[10, 20]}
  align="center"
>
  <div/>
  <div/>
</SimpleGrid>
```
HorizontalScroll: свойство inline удалено и теперь применяется по умолчанию. Если вы использовали дополнительные обертки, чтобы выравнивать ячейки внутри компонента, просьба пересмотреть их использование (#7582)
HorizontalCellShowMore: свойство compensateLastCellIndent удалено. Если вы использовали дополнительные обертки внутри HorizontalScroll, чтобы выравнивать ячейки внутри компонента, просьба пересмотреть их использование и размещать HorizontalCellShowMore на том же уровне вложенности, что и остальные ячейки в HorizontalScroll (#7582)
Spacing: удален вариант значения пропа size 3xs, вместо него можно использовать 2xs, совпадающий по значению (#7634)
Пример миграции
```
- <Spacing size="3xs" />
+ <Spacing size="2xs" />
```
Image: у под-компонента Image.Overlay свойство disableInteractive было удалено, вместо него теперь можно просто не прокидывать свойство onClick (#7628)
Button: изменен цвет компонента при appearance="overlay" и mode="secondary" (#7661)
CellButton: свойство mode заменено на appearance со значениями 'accent' | 'neutral' | 'negative', также для appearance="accent" (a.k.a mode="primary") возвращён токен --vkui--color_text_accent, а вот при комбинации с centered применяется --vkui--color_text_accent_themed (#7684)
Пример миграции
```
<CellButton
-  mode="danger"
+  appearance="negative"
>
  Создать что-нибудь
</CellButton>

<CellButton
-  mode="primary"
+  appearance="accent"
>
  Создать что-нибудь
</CellButton>
```

Улучшения

Подняты минимальные версии браузеров (#7568)

ChromeAndroid >= 63
iOS >= 12
Chrome >= 63
Firefox >= 55
Edge >= 79
Opera >= 50
Safari >= 12
Samsung >= 8.2

Поднята целевая версия ECMAScript для компиляции до es2017 (#7568)
ScreenSpinner: добавлена возможность прокинуть иконку для state="custom" с помощью свойства customIcon (#7523)
Checkbox: добавлена возможность передавать альтернативные иконки (#7608, спасибо @fuel-coffee ❤️)
EllipsisText: у компонента был добавлен атрибут title, который отображает весь текст, переданный в компонент. Его также можно отключить, передав параметр disableNativeTitle (#7681)
CalendarRange: изменена логика выбора промежутка дат, теперь для сброса промежутка надо кликнуть на третью дату и можно выбрать новую дату (#7682)

Исправления

Placeholder: при stretched режиме больше не выставляется padding-block: inherit (#7583)
Link: из CSS удалён зашитый отступ справа в 4px, который выставлялся иконке. Был расчёт, что иконка всегда справа, но она может быть и слева, в этом раскладе появлялся ненужный отступ слева. Было решено отдать пользователю управлять отступами. Поэтому, если вам требуется отступ, используйте неразрывный пробел:
либо через HTML-код  ,
Пример миграции
```
<Link href="https://google.com" target="_blank">
-  https://google.com <Icon24ExternalLinkOutline width={16} height={16} />
+  https://google.com&nbsp;<Icon24ExternalLinkOutline width={16} height={16} />
</Link>
```
либо через сочетания клавиш _⌥ + ␣_ (на **MacOS**) (#7579)
Gallery: исправлена ошибка при отсутствии слайдов в режиме looped (#7686)

Документация

Дополнен блок о переопределение темы через AppearanceProvider информацией о тонкостях работы некоторых компонентов (#7584)
Раздел CSS Modules дополнен информацией про использование пакета с 'css-loader' >= 7.0.0 (#7668)

Зависимости

date-fns обновлён с 4.0.0 до 4.1.0 (#7645)
@vkontakte/vkui-floating-ui обновлён с 2.1.1 до 2.1.3 (#7649)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v7.0.0-beta.0

BREAKING CHANGE

⚙️ Сборка

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

📐 Унификация формата размеров

🤔 Приведение в порядок семантики

🧩 Остальные изменения в компонентах

Улучшения

Исправления

Документация

Зависимости

Contributors