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

Tip

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

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

BREAKING CHANGE

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

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

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

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

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

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

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

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)

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

<UsersStack
  photos={['photo1', 'photo2', 'photo3']}
- direction="row-reverse"
+ avatarsPosition="inline-end"
  size="s"
>
  Иван и ещё 2 ваших друга подписаны
</UsersStack>

Button: изменен цвет компонента при appearance="overlay" и mode="secondary" (#7661)
Separator: свойство mode заменено на appearance (#7687)
```
<Separator
-  mode="primary"
+  appearance="primary"
/>
```
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