Skip to content

Releases: VKCOM/VKUI

v7.2.0

26 Mar 10:20
@inomdzhon inomdzhon
v7.2.0
8065f10
Compare
Choose a tag to compare
v7.2.0 Latest
Latest

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

CellButtonGroup

Компонент для группировки CellButton (#8325)

DirectionProvider

Добавлен компонент для переопределения direction (#8236)

Поддержка RTL

  • Avatar: Поправлено отображение AvatarBadge в rtl режиме (#8128)
  • CardScroll: Добавлена поддержка rtl (#8110)
  • Cell: Поправлено отображение компонента в rtl (#8116)
  • Gallery: Добавлена поддержка rtl (#8085)
  • Pagination: Поправлено отображение компонента в rtl (#8117)
  • PanelHeaderButton: Поправлено отображение прессета PanelHeaderBack в rtl режиме (#8129)
  • HorizontalScroll: Добавлена поддержка rtl (#8110)
  • Search: Добавлена поддержка компонента в rtl (#8105)
  • SegmentedControl: Добавлена корректная поддержка rtl (#8092)
  • Snackbar: Добавлена поддержка rtl (#8109)
  • Slider: Добавлена поддержка rtl (#8098)
  • Switch: Добавлена поддержка компонента в rtl (#8104)

Улучшения

  • ModalCard:
    • Добавлена возможность прокинуть свойство restoreFocus, которое управляет тем, нужно ли восстанавливать фокус после закрытия модалки (#8120)
    • добавлено свойство outsideButtons для отображения дополнительных кнопок после кнопки закрытия в compact-режиме (#8214)
  • Search:
    • добавляем новое свойство clearButtonTestId для передачи data-testid кнопке очистки (#8333)
    • добавлено новое свойство findButtonTestId для e2e тестирования кнопки поиска. (#8366)
  • Tooltip: добавлена возможность установки своего якорного элемента для Popover снаружи (#8040)
  • Cell: Увеличена активная область действия контрола для Drag And Drop (#8288)
  • ChipsSelect: Добавлено свойство sortFn, которое позволяет сортировать опции на основании значения в поле ввода (#8119)
  • Image: добавлено свойство filter, которое применяет одноименный стиль к изображению (#8171)
  • Popper:
    • Добавлено свойство strategy (#8178)
    • Добавлено свойство flipMiddlewareFallbackAxisSideDirection позволяющее контролировать поведение при позиционирование по противоположной оси, если по основной позиционирование не удалось (см. [fallbackAxisSideDirection](https://floating-ui.com/docs/flip#fallbackaxissidedirection) (#8332)
  • Progress:
    • Теперь в свойство appearance можно прокинуть кастомный цвет полоски (#8167)
    • Добавлено свойство trackDisable для того, чтобы сделать фон прогрессбара прозрачным (#8167)
  • Alert:
    • экспортирован тип AlertActionProps, тип аргументов функции, которую можно передать в renderAction (#8197)
    • добавлены data-testid для title (titleTestId) и description (descriptionTestId) (#8298)
  • DateInput:
    • добавлено свойство renderCustomValue, которое позволяет отрендерить кастомный текст в зависимости от значения в поле (#8168)
    • добавлено свойство defaultValue, теперь можно использовать как неконтролируемый компонент (#8364)
    • Добавлено свойство timezone для отображения времени в нужной таймзоне (#8331)
  • HorizontalScroll: Добавлены свойства ContentWrapperComponent, contentWrapperRef и contentWrapperClassName для кастомизации обертки над контентом, прокинутом в children (#8140)
  • CardScroll: Добавлено свойство CardsListComponent, которое позволяет поменять тег используемый для списка карточек (#8140)
  • ModalPage:
    • добавлено свойство outsideButtons для отображения дополнительных кнопок после кнопки закрытия в compact-режиме (#8214)
    • добавлено свойство modalDismissButtonLabel для возможности переопределить текст для скринридера у кнопки закрытия (#8214)
  • ModalOutsideButton: добавлен компонент для отображения дополнительных кнопок после кнопки закрытия в compact-режиме (#8214)
  • PopoutWrapper: Добавлено свойство strategy для управления способом позиционирования компонентом (#8217)
  • Для компонентов Popper, Popover и Tooltip добавлено свойство onReferenceHiddenChanged колбэк срабатывающий при скрытии/появлении якорного элемента при использовании hideWhenReferenceHidden (#8126)
  • SubnavigationButton: добавлено disabled состояние (#8243)
  • Добавлен плагин для сортировки стилей в проекте stylelint-config-recess-order (#8235)
  • Добавлен хук useScroll, который позволяет скролить ScrollContext из AppRoot вручную. (#8137)
  • ConfigProvider: Добавлен параметр direction, который по умолчанию определяется исходя из атрибута dir в body страницы (#8236)
  • Экспортирован хук useFocusVisible (#8310)
  • ModalCardBase: добавлено свойство titleId, чтобы можно было задать имя модальному окну, связав title и модальное окно через aria-labelledby. (#8309)
  • Popover: Добавлено свойство disableFocusTrap для отключения захвата фокуса (#8322)
  • OnboardingTooltip: Добавлено свойство disableFocusTrap для отключения захвата фокуса (#8322)
  • Calendar:
    • добавлено свойство defaultValue, теперь можно использовать как неконтролируемый компонент (#8364)
    • Добавлено свойство timezone для отображения времени в нужной таймзоне (#8331)
  • CalendarRange: добавлено свойство defaultValue, теперь можно использовать как неконтролируемый компонент (#8364)
  • DateRangeInput: добавлено свойство defaultValue, теперь можно использовать как неконтролируемый компонент (#8364)
  • Flex: Исправлен баг из #7492 избавлением от наследования gap-ов (#8360)
  • ContentCard: Добавлено свойство imageObjectFit, для изменения object-fit у картинки (#8386)

Исправления

  • Tooltip: Теперь в качестве children можно прокинуть обычный текст (#8040)
  • CardScroll:
    • Поправлена проблема с доступностью компонента, теперь li(карточки) являются прямыми потомками ul(списка карточек) (#8140)
    • Изменено значение по умолчанию для свойства Component с "ul", на "div". Для правильно семантики тегов нужно использовать свойство CardsListComponent, которое по умолчанию теперь "ul" (#8140)
  • WriteBarIcon: Исправили фоновый цвет count (#8227)
  • Textarea: Компонент со свойством disabled теперь можно прокручивать (#8297)
  • ModalCard: По умолчанию title является именем модального окна для скринридеров (#8309)
  • Исправлена доступность для disabled ссылок (#8329)
  • Snackbar: Длинный текст выходил за пределы компонента (#8357)
  • Исправление предупреждения vite о циклической зависимости (#8354)
  • CustomSelect:
    • При нехватке места запрещаем позиционирование дропдауна сбоку (#8332)
    • Исправлена задержки вывода опций, переданных в props.options при асинхронной загрузке (#8365)
  • DateInput: Исправляем постоянную смену позиции календаря при переключении месяца (#8332)
  • DateRangeInput: Исправляем постоянную смену позиции календаря при переключении месяца (#8332)
  • [...
Read more
Assets 2
Loading

v7.1.3

19 Feb 13:38
@github-actions github-actions
v7.1.3
016fe5e
Compare
Choose a tag to compare
v7.1.3

Исправления

  • Pagination: исправлены лэйблы заголовка и кнопок навигации, создающий избыточную информацию для пользователей скринридеров (#8237)
  • TabItem: исправляем необходимость дважды нажимать таб на одном элементе (#8241)
  • Исправлена проблема с конфликтом FocusTrap-ов при нескольких открытых модалках (#8248)
  • OnboardingTooltip: улучшена поддержка доступности (#8247)
    Фокус пользователя зациклен внутри тултипа.
    Подложка (overlay) стала прозрачной кнопкой с лэйблом "Закрыть", который можно поменять c помощью свойства overlayLabel.
    title теперь описывает имя тултипа. Если title не задан, то следует задать aria-label.
  • Исправлена проблема с использованием библиотеки в проектах, где у всех элементов установлен стиль box-sizing: border-box (#8268)
  • Alert: улучшена доступность компонента (#8266)
    Кнопка закрытия, при наличии, первой получает фокус при открытии алерта
    В документацию по доступности компонента добавлен пункт по поводу имен кнопок с одинаковыми действиями
  • HorizontalScroll: отменён фикс #7774 из-за проблем перерисовок в Firefox при прокрутке через тач-пад, теперь невозможность прокрутить колесом мыши над стрелкой навигации будет считаться ограничением компонента (#8293)
  • Gallery: поправлено перелистывание слайдов при быстром изменении slideIndex (#8292)

Улучшения

  • ModalPage: добавлено свойство disableFocusTrap для отключения захвата фокуса (#8248)
    Нужно для кейса, когда поверх одной модалки открывается другая, чтобы несколько FocusTrap не конфликтовали между собой
  • ModalCard: добавлено свойство disableFocusTrap для отключения захвата фокуса (#8248)
    Нужно для кейса, когда поверх одной модалки открывается другая, чтобы несколько FocusTrap не конфликтовали между собой

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

  • Accordion: поправлена документация свойства onChange (#8242)
  • В storybook исправлен двойной скролл во вкладке Controls (#8245)
Loading

v7.1.2

31 Jan 09:25
@github-actions github-actions
v7.1.2
cec3927
Compare
Choose a tag to compare
v7.1.2

Исправления

  • HorizontalScroll: поправлена остановка всплытия события onwheel при прокидывании scrollOnAnyWheel (#8177)
  • ToolButton:
    • при mode="secondary" у фона теперь нет прозрачности (#8201)
    • для mode="primary" appearance="neutral" заменён токен с --vkui--color_background_modal_inverse на --vkui--color_background_content_inverse (#8201)
  • ModalPage:
    • для deskktop версии возвращено ограничение по высоте (#8200)
    • возвращена адаптация через AdaptivityProvider (#8200)
    • числовые значения в height не приводились к ${height}px (#8209)
  • ModalPageHeader: возвращена адаптация через AdaptivityProvider (#8200)
  • ModalCard: возвращена адаптация через AdaptivityProvider (#8200)
  • FormItem: отступы привязаны к токенам. (#8215)
  • RichCell: поправлена логика расчета минимальной ширины у after (#8199)

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

  • Tabs: исправлено отображение страницы компонента (#8203)
Loading

v7.1.1

16 Jan 08:07
@github-actions github-actions
v7.1.1
9dbcfa5
Compare
Choose a tag to compare
v7.1.1

Исправления

  • AppRoot: исправлено отключение блокировки прокрутки при первом рендере (#8124)
  • ImageBase: добавлено свойство elementTiming для поддержки elementtiming (#8127)
  • Avatar: добавлено свойство elementTiming для поддержки elementtiming (#8127)
  • Image: добавлено свойство elementTiming для поддержки elementtiming (#8127)
  • TabsItem: разрешили прокидывать Component (#8125)
  • Alert: добавлены свойства FocusTrap в свойства Alert, так как они итак прокидывались в FocusTrap, но ругался TS (#8136)
  • Поправлена двойная прозрачность у элементов ввода (#8123)
  • Gallery: не корректно срабатывал align="center" при одном слайде (#8141)
  • SimpleCell: поправлено отображение иконок после текста при multiline=true (#8144)
  • Header: поправлено отображение иконок после текста при multiline=true (#8144)
Loading

v7.1.0

20 Dec 12:58
@github-actions github-actions
v7.1.0
4e0f4e1
Compare
Choose a tag to compare
v7.1.0

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

  • Image: добавлен сабкомпонент Image.FloatElement для позиционирования компонента относительно картинки (#7166)

Улучшения

  • ChipsInput: добавлено свойство maxHeight, которое позволяет ограничить высоту компонента (#7998)

  • CustomScrollView: добавлено свойство scrollBehavior, которое отвечает за настройку стиля scroll-behavior (#7976)

  • Calendar:

    • добавлено свойство DoneButton для отрисовки кастомной кнопки "Готово" (#7971)

      Пример 
      <Calendar
  value={value}
  onChange={setValue}
+ DoneButton={(doneButtonProps) => (
+   <Button {...doneButtonProps} mode="primary" />
+ )}
/>

    • Реализована возможность прямого ввода значений времени (#8002)

    • Доработано отображение компонента в rtl режиме (#8068)

  • DateInput:

    • добавлено свойство DoneButton для отрисовки кастомной кнопки "Готово" (#7971)

      Пример 
      <DateInput
  value={value}
  onChange={setValue}
+ DoneButton={(doneButtonProps) => (
+   <Button {...doneButtonProps} mode="primary" />
+ )}
/>

    • Добавлено свойство onApply, которое срабатывается при нажатии на кнопку Done, которая отображается при использовании флага enableTime (#7929)

    • Теперь при использовании флага enableTime при выборе в календаре не срабатывается onChange. Теперь он сработает, только при нажатии на кнопку "Готово" (#7929)

  • UsersStack: добавлена поддержка отображения компонента в RTL (#7944)

  • Popover:

    • добавлена возможность установки своего якорного элемента для Popover снаружи (#7969)
    • добавлено свойство strategy, которое позволяет изменять способ позиционирования элемента (#8017)

  • Tooltip: добавлено свойство strategy, которое позволяет изменять способ позиционирования элемента (#8017)

  • Slider: добавлена возможность прокинуть data-testid на ползунки с помощью свойств startThumbTestId, endThumbTestId (#8039)

  • Pagination: добавлены новые свойства pageButtonTestId, prevButtonTestId, nextButtonTestId для передачи data-testid в интерактивные элементы (#8038)

  • Gallery:

    • добавлено свойство arrowClickableArea для изменения кликабельной области стрелок (#7907)
    • добавлены data-testid для стрелок переключения слайдов: nextArrowTestId, prevArrowTestId (#8015)
    • добавлена возможность прокинуть data-testid для bullet'ов – bulletTestId (#8015)
    • добавлена возможность прокинуть data-testid для слайдов – slideTestId (#8015)
    • добавлено свойство resizeSource для возможности выбрать тип источника, на котором нужно отслеживать изменения размеров (#8055)
      • 'window' – пересчет позиции слайдов будет происходить при изменении размеров window
      • 'element' – пересчет позиции слайдов будет происходить при изменении размеров компонента

  • HorizontalScroll: добавлена возможность передать data-testid в стрелки навигации с помощью новых свойств prevButtonTestId и nextButtonTestId (#8032, #8062)

  • CardScroll: добавлена возможность передать data-testid в стрелки навигации с помощью новых свойств prevButtonTestId и nextButtonTestId (#8032, #8062)

  • RichCell:

    • добавлено свойство contentAlign для выравнивания центрального контента по вертикали (#8043)
    • добавлено свойство beforeAlign для выравнивания компонента before по вертикали (#8043)

  • SegmentedControl: добавлена поддержка использования компонента в качестве табов. Для этого нужно прокинуть role="tablist" (#7960)

  • CustomSelect: добавлено свойство onInputKeyDown для обработки события нажатия клавиши (#8002)

  • Image: добавлено свойство objectPosition для управления css-свойством object-position (#8016)

  • CalendarRange: доработано отображение компонента в rtl режиме (#8068)

  • AspectRatio: добавлена возможность прокинуть в свойство ratio значения в виде строки (#8088)

  • Исправлена типизация для React 19 (#8058)

  • экспортирован AccordionContext (#8063)

  • экспортирован DOMContext (#8063)

  • экспортирован unstable_useCSSKeyframesAnimationController (#8063)

Исправления

  • DateInput:
    • исправлена проблема с неправильным отображением пикеров года и месяца в заголовке календаря (#8007)
    • исправлена проблема с доступностью, а именно связь с label через id (#7953)
  • DateRangeInput: исправлена проблема с доступностью, а именно связь с label через id (#7953)
  • UsersStack: счетчик теперь адаптивно меняет свою ширину (#8066)

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

  • В docs/CONTRIBUTING.md добавлен пункт про то, как надо описывать свойства для прокидывания data-testid до внутренних компонентов (#8056)

Зависимости

Loading

v7.0.1

19 Dec 09:18
@github-actions github-actions
v7.0.1
90e11c7
Compare
Choose a tag to compare
v7.0.1

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

  • исправлен hover-эффекта в навигации (#8031)
  • Header: исправлено расположение ссылки с иконкой в теме vkcom (#8034)
  • NativeSelect: исправлено наименование компонента (#8003)
  • ModalRoot: добавлен FAQ с информацией как создавать обёртки над ModalPage и ModalCard (#8100)
  • В документе Миграция с v6 на v7 дополнена секция ModalRoot информацией касаемой обёртки над ModalPage / ModalCard (#8100)

Исправления

  • ModalCard: в DOM попадал параметр shouldPreserveSnapPoint, из-за чего React кидал предупреждение в консоль. (#8033)
  • ModalPage: не применялся height на desktop экране (#8036)
  • ContentCard: поправлен баг с растягиванием контента карточки на всю высоту карточки (#7945)
  • PanelHeader:
    • отключен разделитель при прозрачном PanelHeader и delimiter="none" (#8006)
    • поправлен отступ для Avatar в компоненте PanelHeader при прокидывании в after/before (#8004)
  • ActionSheet: Добавлена возможность прокидывать свойства FocusTrapв компонент (#8057)
  • Popper: свойство zIndex теперь корректно устанавливает свойство z-index (#8091)
  • Tooltip: добавлен перенос на следующую строчку для title и tooltip, если длинное неразрывное слово не помещается в ширину тултипа. (#8101)
Loading

v7.0.0

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

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