Skip to content

Releases: VKCOM/VKUI

v7.0.0-beta.0

01 Oct 13:41
@github-actions github-actions
v7.0.0-beta.0
8b37c69
Compare
Choose a tag to compare
v7.0.0-beta.0 Pre-release
Pre-release

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](https://vkcom.github.io/VKUI/7.0.0-beta.0/#/Scre...
Read more

Contributors

fuel-coffee
Loading

v6.7.2

30 Sep 13:20
@github-actions github-actions
v6.7.2
2345d45
Compare
Choose a tag to compare
v6.7.2

Исправления

  • CellButton: исправлен слишком большой отступ между иконкой в before и текстом в режиме centered (#7658)
  • AppRoot: мемоизируем контекст AppRootContext, чтобы компоненты, зависящие от него, лишний раз не ререндерелись при ререндере AppRoot (#7667)
Loading

v6.7.1

24 Sep 14:22
@github-actions github-actions
v6.7.1
fd45ecd
Compare
Choose a tag to compare
v6.7.1

Исправления

  • Select: disabled для опций не прокидывалось в NativeSelect (#7622)
  • Gallery: Поправлен баг с переходом между двумя слайдами стрелками (#7615)
  • TabsItem: исправлен отступ между элементами при использовании href и onClick вместе (#7629)
  • Spacing: Поправлен баг с отсутствием верхнего отступа при прокидывании в size значение типа string (#7632)
  • CustomSelect: реверт изменений #7235 #7508 (#7619)
  • Tooltip: поправлен баг с закрытием тултипа при клике на якорный элемент при прокидывании disableCloseAfterClick=true (#7657)
Loading

v6.5.4

24 Sep 14:04
@SevereCloud SevereCloud
v6.5.4
0cff748
Compare
Choose a tag to compare
v6.5.4

Изменения

CustomSelect: реверт изменений #7235 #7508 (#7656)

Loading

v6.7.0

11 Sep 16:46
@github-actions github-actions
v6.7.0
caac1c8
Compare
Choose a tag to compare
v6.7.0

Important

Как писали ранее, мы приступили к разработке следующей мажорной версии VKUI - v7

Это последняя запланированная минорная версия по v6.

Далее мы будем выпускать только версии с исправлением критических багов.

Исправления

  • Search: поправлен баг с опаздывающей анимацией кнопки "Отмена" в iOS (#7487)
  • ModalRoot: исправлены повторные вызовы onClosed при определенных условиях (#7543)
  • Alert: onClose теперь вызывается после action (#7546)
  • CustomSelect: типы не соответствовали нативным типам <input> (#7569)
  • Headline: исправлена адаптивность типа начертания шрифта (weight) в режиме compact (#7551)
  • Вычисляемые свойства в объектах приведены к обычным там, где они были ненужны (#7571)

Улучшения

  • Calendar: Добавлен пропс renderDayContent для отрисовки кастомного контента в ячейке дня. Props также был добавлен в CalendarRange, DateInput и DateRangeInput (#7518)

  • Skeleton: изменена анимация (#7515)

  • PanelHeaderButton: добавлена поддержка компонента Badge в label (#7526)

  • Typography: добавлено свойство useAccentWeight для использования fontWeightAccent токенов, если требуется поменять начертание текста с помощью свойства weight. По умолчанию в VKUI useAccentWeight={true}, то есть при использовании свойства weight применяются токены fontWeightAccent. Если нужно, чтобы использовались токены fontWeightBase необходимо явно указать useAccentWeight={false} (#7549)

    ⚠️ Warning

    В v7 useAccentWeight по умолчанию будет false.

  • Text: добавлено использование compact токенов fontWeight/fontFamily в режиме compact (#7564)

  • Subhead: добавлена поддержка compact режима для токенов fontWeight и fontFamily (#7566)

  • Caption: добавлена поддержка compact режима (#7555)

  • Paragraph: добавлена поддержка compact режима (#7565)

  • Footnote: добавлена поддержка compact режима (#7563)

  • Title: добавлена поддержка compact режима (#7554)

  • DisplayTitle: добавлена поддержка compact режима (#7553)

  • ScreenSpinner: добавлена возможность прокидывать caption (#7505)

  • ToolButton: при direction="row" теперь применяется режим rounded что с передачей children, что без; прибивается по левому краю; имеет больший отступ справа при передаче children, чтобы скомпенсировать иконку (#7488)

  • Tappable:

    • добавлено новое свойство unlockParentHover, которое можно использовать в ситуации когда один Tappable вложен в другой и при на ведении на дочерний нужно, чтобы hover состояние также появлялось на родительском Tappable. Выставляется на дочернем. По умолчанию hover состояние дочернего элемента родительскому не передаётся. (#7519)
    • добавлено новое свойство hasHoverWithChildren, которое можно использовать в ситуации когда множество Tappable вложены в другой Tappable и нужно, чтобы при на ведении на каждый из дочерних Tappable hover состояние передавалось родительскому Tappable. Выставляется на родительском Tappable. В такой ситуации unlockParentHover на дочерних компонентах можно опустить. (#7519)

Зависимости

  • Обновили @swc/helpers с 0.5.12 до 0.5.13
Loading

v6.6.0

02 Sep 16:16
@mendrew mendrew
v6.6.0
ba6b605
Compare
Choose a tag to compare
v6.6.0

Important

Мы приступаем к разработке следующей мажорной версии VKUI - v7

Это значит, что мы вскоре прекратим развитие версии v6,
выпуская только версии с исправлением критических багов.

Если у вас есть потребность в новой функциональности,
которую вы хотите видеть в v6, пожалуйста, отпишитесь в соответствующей issue.

Улучшения

Popover

Всплывающие окна получили возможность установки фокуса на рутовом компоненте с помощью свойства auto="root" (#7302)

ChipsSelect

  • добавлено свойство renderDropdown (#7303)
  • добавлена возможность закрыть всплывающее окно кликом на стрелочку (#7462)

RichCell

Добавлено свойство afterAlign (#7192)

Header

Добавлены свойства before, beforeTitle, afterTitle, beforeSubtitle, afterSubtitle (#7202)

Card/CardGrid/ContentCard

Улучшена доступность (#7238)

CardScroll

  • улучшена доступность (#7238)
  • изменены data-testid (#7343)

Touch

Улучшена производительность компонента (#7272)

Switch:

Уменьшен размер в компактном (sizeY="compact") режиме (#7440)

Tooltip

Добавлено свойство closable (#7438)

ScreenSpinner

Добавлено свойство mode="overlay" | "shadow" (#7484)

Group

  • добавлены подкомпоненты Group.Container, Group.Header, Group.Description (#7395) 
     <Group.Container>
  <Group.Header>
    <Header>Адреса</Header>
  </Group.Header>
  <CellButton onClick={noop}>Добавить домашний адрес</CellButton>
  <CellButton onClick={noop}>Добавить рабочий адрес</CellButton>
  <Group.Description>
    Для использования в мини-приложениях, Delivery Club, VK Taxi и других сервисах ВКонтакте.
    Эти адреса видны только Вам.
  </Group.Description>
</Group.Container>
  • добавлен подкомпонент Group.ExpandedContent, позволяющий игнорировать горизонтальные или вертикальные отступы Group (#7396)

Зависимости

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

Внутренние изменения

Исправления

  • удалена возможность выделять и копировать скрытый визуально текст (#7468)
  • Gallery: исправлен баг с анимацией смены слайда в контролируемом компоненте (#7485)
  • Flex: исправлена работа вложенных Flex (#7492)
Loading

v6.5.3

02 Sep 16:05
@SevereCloud SevereCloud
v6.5.3
71a756d
Compare
Choose a tag to compare
v6.5.3

Исправления

  • CustomSelect: исправлена проблема с изменением позиции курсора с помощью мыши (#7508)
  • Image: исправлено неверное позиционирование children (#7511)
Loading

v6.5.2

28 Aug 07:41
@mendrew mendrew
v6.5.2
21291ce
Compare
Choose a tag to compare
v6.5.2

Исправления

  • Исправлена ошибка TypeError: Uncaught TypeError: Cannot read properties of undefined (reading 'shown'), которая могла возникать при использовании компонентов Tooltip / Popover при переводе компонента из неконтролируемого состояния в контролируемое (#7285)
  • Footer: добавлена роль role="contentinfo", если используется тег <footer>, а также добавлены рекомендации по доступности (#7378)
  • Flex: поправлен неправильный расчёт margin (#7426)
  • Search: кнопка очистки была доступна несмотря на то, что поиск был в неактивном состоянии (#7422)
  • FormLayoutGroup: удален неиспользуемый класс (#7423)
  • CustomSelect / ChipsSelect: исправлены скругления границ инпута при открытии дропдауна при определённых условиях (#7419)
  • Исправлена поддержка свойства hidden (#7430)
  • Input/FormField: ряд исправлений (#7425)
    • исправлено изменение цвета фона и обводки при наведении в состоянии error/valid
    • в режиме mode="plain" и состоянии status="valid" | "error" в активном состоянии появилась обводка соответствующего цвета
    • в режиме mode="plain" и состоянии status="valid" фон стал соответствовать дизайн-системе (--vkui--color_background_positive_tint)

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

  • Search: в описании <input type="text" /> заменён на <input type="search" /> (#7459)
  • Chip: из-за опечатки отсутствовала страница документации (#7424)
  • Актуализированы ссылки на документацию React (#7447, спасибо @suprunchuk ❤️)

Contributors

suprunchuk
Loading

v6.5.1

20 Aug 15:01
@inomdzhon inomdzhon
v6.5.1
b235f82
Compare
Choose a tag to compare
v6.5.1

Исправления

  • Group: поправлено автоматическое определение mode="card", когда mode не передан, а параметр адаптивности SizeX определяется как Regular. (#7345)
  • Tappable: при передаче Component="button" | "a" | "input" без onClick | href, компонент считался не кликабельным (#7390)
  • CustomSelect:
    • в скринридере NVDA не зачитывалось выбранное значение (#6974)
    • в Firefox при переходе по опциям вместо опции зачитывалось слово "секция" (#6974)
  • DateRangeInput/DateInput/CustomSelect: из типов убрано неиспользуемое свойство maxHeight (#7408)
  • Cell: добавляем полноценную поддержку disabled-свойства. Раньше оно использовалось для того, что сделать ячейки неинтерактивными - теперь это решается отсутствием пропа onClick. disabled - помечает ячейку как недоступную (она становится серой) (#7405)
  • View: после двойного жеста свайпбэка интерфейс переставал быть кликабельным (#7392)
  • Image: keepAspectRatio больше не требует явного задания ширины/высоты родителя (#7342)

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

  • CustomScrollView: исправлено отображение заголовка в примере (#7346)
  • ActionSheet: обновлен пример в режиме selectable в styleguide и storybook, чтобы показать правильное использование компонента (#7394)
  • ActionSheetItem: добавлен раздел по цифровой доступности с рекомендациями (#7394)
  • WriteBar: пример в storybook сделан более интерактивным (#7376)
  • FormItem: исправлен пример с валидацией почты (#7374)
  • Иконка копирования ссылки на тему на маленьких устройствах вылезала за пределы экрана (#7350)
  • ModalRoot: исправлен отступ между кнопками в модальной карточке (#7348)
Loading

v5.10.2

09 Aug 10:21
@SevereCloud SevereCloud
v5.10.2
b23935b
Compare
Choose a tag to compare
v5.10.2

Исправления

source-map для CSS

После обновления PostCSS до 8.4.38 при импорте файлов со стилями из @vkontakte/vkui:

@import 'node_modules/@vkontakte/vkui/dist/components.css';
/* или */
@import 'node_modules/@vkontakte/vkui/dist/vkui.css';

в консоль начали сыпаться предупреждения из-за не валидного source-map для CSS:

original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.

поправили их генерацию (#7354)

Loading