Skip to content

Releases: VKCOM/VKUI

v7.0.0

02 Dec 16:24
@inomdzhon inomdzhon
v7.0.0
90bb0cc
Compare
Choose a tag to compare
v7.0.0 Latest
Latest

TL;DR

Документация по миграции с v6 на v7

BREAKING CHANGE

Tip

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

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

⚙️ Сборка

Глобальные настройки
  • Подняты минимальные версии браузеров (#7568) 
    ChromeAndroid >= 63
iOS >= 12
Chrome >= 63
Firefox >= 55
Edge >= 79
Opera >= 50
Safari >= 12
Samsung >= 8.2
  • Импортирование теперь ограничено свойством "exports" в package.json. Если вам нужен какой-то внутренний функционал, то следует создать issues на его экспорт, чтобы мы рассмотрели такую возможность. (#7611)
CSS-бандл

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

    ⚠️ Мы всё ещё не рекомендуем завязываться на CSS-классы компонентов – в любой момент они могут измениться.

  • Сборка переведена на rspack (#7249)

JS-бандл

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

  • Были добавлены use client директивы (#7702)

  • Удалена CommonJS сборка – теперь библиотека поставляется только как ESM. В зависимости от вашего инструмента для сборки, потребуется настроить трансформацию для пакета @vkontakte/vkui. (#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/] } } },
  };
});

🌗 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();

🖼️ Layout

  • AppRoot:

    • переработана логика автоматического добавления классов, необходимых для работы VKUI, на документ. Постарались максимально уменьшить их количество. (#7739)
      В режиме mode="full" на html-элемент добавляется класс .vkui и класс токенов темы, которая сейчас используется. На точку монтирования приложения добавляется класс .vkui__root.
      В режиме mode="embedded" на точку монтирования добавляются классы .vkui__root и .vkui__root--embedded.
      В режиме mode="partial" дополнительные классы не добавляются.
      Добавление классов можно отключить с помощью нового свойства disableSettingVKUIClassesInRuntime. Это отключит добавление всех классов, кроме класса токенов.
      SSR. Для того, чтобы минимизировать затраты браузера на рендер страницы нужно на стороне сервера проставить все классы самостоятельно.
    • по умолчанию все плавающие элементы (модальные окна, попапы) рендеряться в document.body. Раньше в VKUI дополнительно создавался контейнер для порталов. Мы его убрали, чтобы при старте приложения дополнительно не создавать контейнер в document.body, который может быть не нужен. Переопределить контейнер для рендера порталов всё также можно с помощью portalRoot. (#7739)

  • SplitLayout: свойства popout и modal помечены как @deprecated (#7739)

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

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

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

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

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

  • ActionSheet:

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

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

  • [Alert](https://vkcom.github.io/VKUI...

Read more

Contributors

fuel-coffee
Assets 2
Loading

v7.0.0-beta.2

25 Nov 17:05
@github-actions github-actions
v7.0.0-beta.2
4955860
Compare
Choose a tag to compare
v7.0.0-beta.2 Pre-release
Pre-release

BREAKING CHANGE

  • Button: изменен цвет компонента в состоянии mode="primary" и appearance="neutral", при миграции рекомендуется выставлять mode="secondary" при appearance="neutral" (#7802)

    Пример миграции 
    <Button
  appearance="neutral"
+ mode="secondary"
/>

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

  • PanelHeader: теперь не переопределяет цвет компонента Spinner, поэтому, если вы использовали компонент Spinner внутри PanelHeader, передавайте <Spinner noColor /> (#7820)

  • FormItem: удалено свойство topNode, вместо него можно использовать свойство top (#7837)

    Пример миграции 
    <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>

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

  • SimpleCell: свойство subhead переименовано в overTitle (#7861)

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

  • Cell: свойство subhead переименовано в overTitle (#7861)

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

  • CellButton: свойство subhead переименовано в overTitle (#7861)

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

  • Header: свойство mode было удалено. Логика удаления свойства mode: (#7863)
    size="l" mode="primary" заменяется на size="xl"
    size="m" mode="primary" заменяется на size="m"
    mode="tertiary" заменяется на size="m"
    mode="secondary" заменяется на size="s"

  • Calendar: свойство onClose переименовано на onDoneButtonClick (#7880)

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

  • Counter: изменены значения свойства mode (#7919)
    Было 'secondary' | 'primary' | 'prominent' | 'contrast' | 'inherit'
    Стало 'primary' | 'contrast' | 'tertiary' | 'inherit'
    Логика перехода на новые значения:
    Таблица миграции значений:

    Старое значение Новые свойства
    inherit mode="inherit" (без изменений)
    primary mode="primary" appearance="accent"
    secondary mode="primary" appearance="neutral"
    prominent mode="primary" appearance="accent-red"
    contrast mode="contrast" appearance="accent"

  • Link: теперь для передачи иконок следует использовать параметры before и after, CSS свойства, которые через каскад задавались переданным иконкам в children, удалены (#7957)

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

  • PanelHeaderButton:

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

Улучшения

  • Header: добавлены значения для свойства size: 's' и 'xl' (#7863)

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

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

  • useScrollLock: теперь при <AppRoot scroll="global" /> в <html> добавляется overscroll-behavior: none, чтобы избегать pull-to-refresh. (#7881)

  • Card: добавлен mode "plain" (#7824)

  • Flex: импортирован тип FlexItem для Flex.Item (#7892)

  • ChipsInput: импортированы типы ChipOptionValue и ChipOptionLabel (#7892)

  • CustomScrollView: импортирован тип CustomScrollViewProps (#7892)

  • DateInput:

    • добавлено свойство onCalendarOpenChanged - колбэк, срабатывающий при открытии/закрытии календаря (#7878)
    • Добавлены свойства для установки data-testid у вложенных элементов (#7705)

  • DateRangeInput:

    • добавлено свойство onCalendarOpenChanged - колбэк, срабатывающий при открытии/закрытии календаря (#7878)
    • Добавлены свойства для установки data-testid у вложенных элементов (#7705)

  • Calendar:

    • Добавлено свойство doneButtonShow для скрытия кнопки "done" (#7736)
    • Добавлено свойство doneButtonDisabled для блокирования кнопки "disabled" (#7736)
    • Добавлены свойства для установки data-testid у вложенных элементов (#7705)

  • CalendarRange: Добавлены свойства для установки data-testid у вложенных элементов (#7705)

  • Popover: расширен тип свойства restoreFocus до boolean | 'anchor-element' | HTMLElement для указания на какой элемент будет возвращен фокус после закрытия Popover. Полезно для кейса с Popover с trigger="hover", при установке restoreFocus="anchor-element" фокус всегда будет возвращаться в якорный элемент (#7806)

  • Counter:

    • добавлено свойство appearance, которое отвечает за цвет (#7919)
    • добавлено свойство color, с помощью которого можно изменить цвет компонента. Работает только совместно с appearance="custom" (#7919)

  • Link: появился параметр noUnderline, отключающий подчеркивание при наведении (#7957)

  • Spacing: добавлена возможность передать css-переменную в size (#7955)

  • Separator: добавлена возможность передать css-переменную в size (#7955)

  • добавлен экспорт AppRootPortal (#7996)

  • HorizontalCell:

    • добавлено свойство textAlign для выравнивания типографических элементов (#7980)
    • добавлено свойство noPadding, отключающее отступы у крайних элементов (#7980)

Новые компоненты

  • Добавлен экспорт FloatingArrow, использующийся компонентами Popover, Tooltip, Popper (#7977)

Исправления

Read more
Assets 2
Loading

v6.7.4

13 Nov 08:30
@github-actions github-actions
v6.7.4
cd62f80
Compare
Choose a tag to compare
v6.7.4

Исправления

  • Gallery:
    • не работало переключение слайдов в условиях, когда общая ширина слайдов меньше контейнера, но за счёт отступа из-за выравнивания по центру (align="center") слайды немного не помещаются в контейнере. (#7862)
    • теперь во время drag происходит остановка автопереключения слайдов (#7877)
    • исправлена ошибка при отсутствии слайдов в режиме looped (#7686)
  • HorizontalScroll: исправлена проблема с отсутствием скрола при наведении на стрелки (#7882)
  • DateInput: инициализируем секунды и миллисекунды (часы и минуты при вводе без времени) нулевыми значениями при ручном вводе даты (#7872)
  • Tappable: вернули работу hasActive свойства, исправили отсутствие activated-состояния при некоторых условиях (#7910)
  • Исправлены ошибки в Content Security Policy (CSP) связанные с тем, что в CustomResizeObserver создавался iframe с src="javascript:void(0)", теперь iframe создается без явного указания src, что позволяет браузеру самостоятельно заполнить это поле. Значение по умолчанию для браузеров: src="about:blank" (#7933)

Улучшения

  • DateInput:
    • добавлено свойство onCalendarOpenChanged - колбэк, срабатывающий при открытии/закрытии календаря (#7878)
    • Добавлены свойства для установки data-testid у вложенных элементов (#7705)
  • DateRangeInput:
    • добавлено свойство onCalendarOpenChanged - колбэк, срабатывающий при открытии/закрытии календаря (#7878)
    • Добавлены свойства для установки data-testid у вложенных элементов (#7705)
  • Calendar:
    • Добавлено свойство doneButtonShow для скрытия кнопки "done" (#7736)
    • Добавлено свойство doneButtonDisabled для блокирования кнопки "disabled" (#7736)
    • Добавлены свойства для установки data-testid у вложенных элементов (#7705)
  • CalendarRange: Добавлены свойства для установки data-testid у вложенных элементов (#7705)
  • Popover: расширен тип свойства restoreFocus до boolean | 'anchor-element' | HTMLElement для указания на какой элемент будет возвращен фокус после закрытия Popover. Полезно для кейса с Popover с trigger="hover", при установке restoreFocus="anchor-element" фокус всегда будет возвращаться в якорный элемент (#7806)
Assets 2
Loading

v6.7.3

24 Oct 10:39
@github-actions github-actions
v6.7.3
fad7e93
Compare
Choose a tag to compare
v6.7.3

Исправления

  • Button: loading неверно отображался в cssm-сборке. (#7734)
  • CustomSelect: для touch-устройств исправлен фокус на инпуте при клике на CustomSelect ближе к правому краю, в районе стрелки. (#7816)
  • FormLayoutGroup: исправлено возможное переполнение контейнера FormLayoutGroup, если внутри используется два FormField в горизонтальной ориентации и у первого FormField в свойстве top находится очень длинный текст. (#7819)
  • Gallery: исправлена ошибка при отсутствии слайдов в режиме looped. (#7686)
Assets 2
Loading

v7.0.0-beta.1

23 Oct 14:55
@github-actions github-actions
v7.0.0-beta.1
702a6fe
Compare
Choose a tag to compare
v7.0.0-beta.1 Pre-release
Pre-release

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](https://vkcom.github.io/VKUI...

Read more
Assets 2
Loading

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
Assets 2
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)
Assets 2
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)
Assets 2
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)

Assets 2
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
Assets 2
Loading