VKUI Versions Save

VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.

v6.0.2

1 month ago

Улучшения

  • Panel: добавлена возможность устанавливать в качестве фона Panel градиент (#6736)

Исправления

  • DateInput: в Calendar не прокидывались свойства minDateTime и maxDateTime (#6767)
  • Banner: нельзя было размешять внутри блочные элементы (#6675 by @Semigradsky)
  • PullToRefresh: исключена возможность повторного вызова onRefresh() на iOS (#6723)
  • Pagination: "заедали" состояния hover/active у элемента PaginationPageButton (#6712)
  • HorizontalCell: теперь для переноса длинного текста используется CSS свойство break-word вместо break-all (#6771)
  • Select/NativeSelect/DatePicker: отключена передача не используемых свойств из Select в NativeSelect (#6663) (#6667)
  • Search: выровнены боковые отступы (#6724)
  • Snackbar: значение свойства layout теперь приоритетней значения, вычисленного на основе окружения (#6731)
  • ModalPageHeader: исправлены боковые отступы у сепаратора (#6726)
  • HorizontalScroll: кнопки для навигации фокусировались через клавиатуру, хотя они должны быть aria-hidden (#6687)
  • ModalRoot: при нажатии Esc сафари переходил в оконный режим (#6681)
  • CustomSelectOption: добавлен пробел для скринридеров (#6694)
  • File: убрана лишняя надпись "Выбрать файл" (#6696)
  • FormStatus: добавлена роль status или alert в зависимости от mode (#6701)

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

  • Основная документация (Styleguide)
    • Была проблема с долгой загрузкой (#6689, #6690, #6691)
    • Теперь при поиске компонента, в запросе автоматически удаляются лишние пробелы (#6714)
  • Песочница (Storybook)
    • Добавлена возможность переключать направление текста (#6703)
    • В следующих компонентах были поправлены примеры под a11y:

v6.0.1

2 months ago

Исправления

Компоненты

  • AdaptivityProvider: значение параметра адаптивности sizeY, если не переопределено через свойство sizeY, определяется автоматически, если хотя бы одно из свойств AdaptivityProvider viewWidth или viewHeight определено. В автоматическом определения sizeY теперь также участвует свойство hasPointer. Раньше его значение определялось методом из библиотеки @vkontakte/vkjs, далее передавалось напрямую в контекст и в логике AdaptivityProvider не участвовало, что было неправильно (#6489)
  • Accordion: контент мог быть скрыт не полностью (#6429)
  • Cell: в draggable не работал автоскролл, если у родителя нет height: 100% (#6456)
  • ChipsSelect / ChipsInput
    • навигация между добавленными значениями теперь циклична (#6395)
    • поправлена проблема, что при readOnly можно было удалять значения (#6395)
  • ChipsSelect / CustomSelect
    • теперь disabled свойство на опции влияет на поведение (#6640)
    • исправили некорректную высоту плавающего элемента (#6571)
    • исправлена ошибка позиционирования опций, если опции вынуждены распологаться над селектом (#6567)
  • CustomScrollView: отключена кастомная полоса прокрутки для сенсорных экранов (#6437)
  • DatePicker: свойство monthNames могло стать html-аттрибутом (#6386) -DateInput: программный фокус теперь сбрасывается при клике на кнопку "Готово" в режиме enableTime (#6446)
  • FormField: фокус в элементах отрисовывался неправильно на некоторых iPhone устройствах (#6557)
  • Group: исправлен отступ для description (#6577)
  • ModalPage:
    • исправлен подсчёт высоты при изменении ориентации мобильного устройства (#6538)
    • исправлена работа dynamicContentHeight при height более чем 100% (#6637)
  • ModalPage / ActionSheet: исправлена позиция скролла body, которая сбрасывалась при вызове ActionSheet из ModalPage (#6614)
  • OnboardingTooltip:
    • добавлен параметр disableArrow, взамен arrow, которое было в v5, когда компонент назывался Tooltip (#6482)
    • возвращён параметр onPlacementChange (#6482)
  • PullToRefresh:
    • компонент больше не влияет на поведение горизонтального скролла (#6540)
    • исправлено позиционирование контента внутри PullToRefresh. PullToRefresh теперь растягивается на всю высоту контейнера, и контент (например <Placeholder stretched />) можно отцентровать по вертикали (#6613)
  • Popover:
    • починена передача ref в children, если children это пользовательский компонент, обёрнутый в React.forwardRef (#6525)
    • возвращён параметр onPlacementChange (#6482)
  • Popper:
    • исправлен пересчёт позиции при изменении текстовых нод при включенном свойстве autoUpdateOnTargetResize (#6572)
    • возвращён параметр onPlacementChange (#6482)
  • IconButton: больше не растягивается в режиме ссылки (#6440)
  • Image.Badge: тень перекрывала содержимое (#6494)
  • Snackbar: исправлен маунт компонента при <AppRoot mode="full" /> (#6389)
  • SimpleCell: текст в параметр indicator больше не обрезается (#6477)
  • SubnavigationBar: исправлен рендер children, когда при использовании Conditional Rendering в DOM попадали пустые <li> (#6442)
  • Textarea / Writebar: метод HTMLFormElement.reset() не сбрасывал значения (#6561)
  • Tooltip: возвращён параметр onPlacementChange (#6482)

Типы

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

Оптимизация

  • в CSS, из-за негативного влияния на потребление памяти, удалено использование универсального селекторов, которые содержали в себе CSS переменные

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

  • документация в мобильном представлении теперь определяет наличие курсора автоматически (#6647)
  • интерактивные компоненты снова реагируют на клики (#6508)
  • поправлена подсветка выделения текста под Chrome (#6447)

v5.10.1

2 months ago

Улучшения

Компоненты

  • Alert: добавили возможность передавать data-testid крестику через свойство dismissButtonTestId (#6394)

Исправления

Компоненты

  • AdaptivityProvider: значение параметра адаптивности sizeY, если не переопределено через свойство sizeY, опеределяется автоматически если хотя бы одно из свойств AdaptivityProvider viewWidth или viewHeight определено. В автоматическом определения sizeY теперь также учавствует свойство hasPointer. Раньше оно передавалось напрямую в контекст, и в логике AdaptivityProvider не учавствовало, что было неправильно. Раньше в логике использовалось значение hasPointer из библиотеки, определяемое библиотекой, что могло идти вразрез со значением явно переданным в AdoptivityProvider. (#6585)
  • View: на iOS сбрасывался скролл при отмене свайп-бэка (#6393)
  • Cell:
    • в draggable режиме исправили двойной рендеринг плэйсхолдера (#6398)
    • в draggable не работал автоскролл если у родителя нет height: 100% (#6461)
  • ActionSheet: убрали лишнее закругление у элементов меню при наведении на десктопе (#6399)
  • DateInput: программный фокус теперь сбрасывается при клике на кнопку "Готово" в режиме enableTime (#6401) (#6639)
  • DateRangeInput: починили вызов onChange при передаче в value={[null, null]}. Исправили пример в Storybook, он теперь реагирует на изменение даты. (#6404)
  • Switch/SegmentedControl(a11y): исправили видимость фокуса TalkBack на Android у компонентов основанных на input. Теперь при фокусе на таком элементе фокус визуально виден (#6405)
  • WriteBarIcon: сообщение о том, что текстовое описание у компонента отсутствует, больше не выводится если такое описание есть, исправлено условие. (#6385)
  • DatePicker: больше не прокидываем свойство monthNames в DOM, если на тач устройствах используется NativeDatePicker. Чтобы не было предупреждения в консоли. (#6410)
  • CustomSelect:
    • передаем свойство required нативному селекту вместо инпута. Начиная с версии 5.10.0 мы передавали свойство required в инпут, используемый только для поиска опций селекта. Это блокировало отправку формы, даже если селект имел выбранное значение. Всё потому, что инпут для поиска по умолчанию имеет пустое value. (#6411)
    • спрятали тултип "Aвтозаполнение", появляющийся на iOS при фокусе на селекте (#6402)
    • исправили некорректную высоту плавающего элемента (#6571)
  • Tooltip: исправили передачу свойства getRootRef. Больше мы это свойство не перебиваем своим значением. (#6216)
  • ModalPage:
    • исправили подсчёт высоты ModalPage при изменении ориентации мобильного устройства. (#6583)
    • исправлен расчёт высоты экрана при изменении высоты содержимого страницы с dynamicContentHeight (#6641)
  • ChipsSelect:
    • теперь disabled свойство на опции влияет на поведение (#6640)
    • исправили некорректную высоту плавающего элемента (#6571)
  • ModalPage/ActionSheet: исправили позицию скролла body, которая сбрасывалась при вызове ActionSheet из ModalPage. (#6642)
  • PanelHeaderButton/TabsItem: вернули прежние hover-эффекты (#6602)
  • PullToRefresh: исправили позиционирование контента внтури PullToRefresh. PullToRefresh теперь растягивается на всю высоту контейнера и контент (например <Placeholder stretched />) можно отцентровать по вертикали. (#6644)

Оптимизация

  • в CSS, из-за негативного влияния на потребление памяти, удалено использование универсального селекторов, которые содержали в себе CSS переменные (#6507)

v6.0.0

4 months ago

[!NOTE] Полный список изменений смотрите в документации по миграции с v5 на v6.

Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.

Breaking changes

Зависимости

Сборка

  • Обновили конфигурацию .browserlistrc:

    - android >= 5
+ ChromeAndroid >= 57
- iOS >= 10
+ iOS >= 10.3
- Chrome >= 51
+ Chrome >= 57
Firefox >= 54
Edge >= 18
- Opera >= 38
+ Opera >= 44
- Safari >= 10
+ Safari >= 10.1

+ Samsung >= 7.2

  • В отдельной сборке теперь используется CSS Logical.

    Это изменение влияет только на пользователей, использующих специальную сборку. Такие пользователи, при необходимости, должны использовать плагин postcss-logical, чтобы продолжать поддерживать старые версии браузеров.

Компоненты

  • Переработали API многих компонентов:
    • Изменились API у компонентов, которые наследуются от Tappable.
    • Некоторые булевые пропы по умолчанию теперь falsy
      • PanelHeader: visor заменён на float, separator заменён на delimiter (#6277)
      • ModalPanelHeader: separator заменён на noSeparator (#6277)
      • Avatar: withBorder заменён на noBorder (#6286)
      • CardScroll: withSpaces заменён на noSpaces (#6286)
      • CustomSelect: fixDropdownWidth заменён на dropdownAutoWidth (#6286)
      • Image: withBorder заменён на noBorder (#6286)
      • ImageBase: withBorder заменён на noBorder (#6286)
      • Gallery: isDraggable заменён на dragDisabled (#6286)
      • GridAvatar: withBorder заменён на noBorder (#6286)
      • Placeholder: withPadding заменён на noPadding (#6286)
      • Select: fixDropdownWidth заменён на dropdownAutoWidth (#6286)
      • Tabbar: shadow заменён на plain (#6286)
      • ChipsSelect: fixDropdownWidth заменён на dropdownAutoWidth (#6286)
  • Провели работы по улучшению доступности, которые требовали мажорных изменений.
  • Сделали стабильными компоненты:
  • Удалили компонент FormLayout, используйте нативный form (#6302)
  • ModalCard: удалили стили, задающие отступы через каскад, теперь отступ, при необходимости, надо выставлять самостоятельно через Spacing (#5419)
  • PopoutWrapper:
    • поправили проблему с не скролящимся контентом (#6265)
    • hasMask заменён на noBackground (#6286)
  • AppRoot: теперь при mode="embedded класс с названием темы навешивается на ближайший контейнер AppRoot, а не на <body>. Также при mode="full" классы vkui и vkui--* навешиваются на <html> вместо <body> (#6263, #6279)
  • ConfigProvider: логика связанная с токенами вынесена из platform в отдельный параметр tokensClassNames (#5121)
  • HorizontalCell: при size="m" фиксированная ширина заменена на максимальную ширину как при size="s" (#6318)

Фидбек ❤️

Для очевидных багов создавайте issues. Для всех остальных обсуждений есть дискуссии :)

v6.0.0-beta.3

4 months ago

Исправления

  • ActionSheetItem: убрали закругление при активном состоянии на Desktop (#6204)
  • DateInput: не сбрасывался фокус с календаря после клика на кнопку "Готово" (#6244)
  • View: на iOS сбрасывался скролл при отмене свайп-бэка (#6320)

Исправления после релиза v6.0.0-beta.2

  • Tappable: поправлена проблема со специфичностью стилей (#6318)
  • Снова актуализировали наш основной README.md (#6324)
  • Документация
    • Удалены абсолютные пути (#6339)
    • Input: улучшен пример с кнопкой очистки поля (#6342)

Breaking changes

[!NOTE] Полный список изменений смотрите в документации по миграции с v5 на v6 (страница миграции обновлена).

Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.

  • ConfigProvider: логика связанная с токенами вынесена из platform в отдельный параметр tokensClassNames (#5121)
  • HorizontalCell: при size="m" фиксированная ширина заменена на максимальную ширину как при size="s" (#6318)
  • Некоторые булевые пропы по умолчанию теперь falsy
    • PanelHeader: visor заменён на float, separator заменён на delimiter (#6277)
    • ModalPanelHeader: separator заменён на noSeparator (#6277)
    • Avatar: withBorder заменён на noBorder (#6286)
    • CardScroll: withSpaces заменён на noSpaces (#6286)
    • CustomSelect: fixDropdownWidth заменён на dropdownAutoWidth (#6286)
    • Image: withBorder заменён на noBorder (#6286)
    • ImageBase: withBorder заменён на noBorder (#6286)
    • Gallery: isDraggable заменён на dragDisabled (#6286)
    • GridAvatar: withBorder заменён на noBorder (#6286)
    • Placeholder: withPadding заменён на noPadding (#6286)
    • PopoutWrapper: hasMask заменён на noBackground (#6286)
    • Select: fixDropdownWidth заменён на dropdownAutoWidth (#6286)
    • Tabbar: shadow заменён на plain (#6286)
    • ChipsSelect: fixDropdownWidth заменён на dropdownAutoWidth (#6286)

Команда VKUI поздравляет всех с наступающим Новым Годом 🎉

5

Увидимся в следующем году 😎

v6.0.0-beta.2

4 months ago

Исправления после релиза v6.0.0-beta.1

  • Был сломан SSR из-за ошибки при определении appearance (#6243)
  • Поправили проблему с прыгающими модальными окнами (#6276)
  • Актуализировали наш основной README.md (#6257)
  • View: починили страницу с документацией (#6269)
  • В содержание страницы Миграция с v5 на v6 добавили подзаголовки (#6275)

Breaking changes

[!NOTE] Полный список изменений смотрите в документации по миграции с v5 на v6 (страница миграции обновлена).

Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.

  • Удалили компонент FormLayout, используйте нативный form (#6302)
  • ModalCard: удалили стили, задающие отступы через каскад, теперь отступ, при необходимости, надо выставлять самостоятельно через Spacing (#5419)
  • PopoutWrapper: поправили проблему с не скролящимся контентом (#6265)
  • AppRoot: теперь при mode="embedded класс с названием темы навешивается на ближайший контейнер AppRoot, а не на <body>. Также при mode="full" классы vkui и vkui--* навешиваются на <html> вместо <body> (#6263, #6279)

v6.0.0-beta.1

5 months ago

[!NOTE] Полный список изменений смотрите в документации по миграции с v5 на v6.

Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.

Breaking changes

[!WARNING] Это мажорные изменения в рамках текущей беты. В ближайшее время будет ещё несколько таких изменений.

Зависимости

Сборка

  • Обновили конфигурацию .browserlistrc:

    - android >= 5
+ ChromeAndroid >= 57
- iOS >= 10
+ iOS >= 10.3
- Chrome >= 51
+ Chrome >= 57
Firefox >= 54
Edge >= 18
- Opera >= 38
+ Opera >= 44
- Safari >= 10
+ Safari >= 10.1

+ Samsung >= 7.2

  • В отдельной сборке теперь используется CSS Logical.

    Это изменение влияет только на пользователей, использующих специальную сборку. Такие пользователи, при необходимости, должны использовать плагин postcss-logical, чтобы продолжать поддерживать старые версии браузеров.

Компоненты

  • Переработали API многих компонентов. Например, API изменилось у компонентов, которые наследуются от Tappable
  • Провели работы по улучшению доступности, которые требовали мажорных изменений.
  • Сделали стабильными компоненты:

Фидбек ❤️

Для очевидных багов создавайте issues. Для всех остальных обсуждений есть дискуссии :)

v5.10.0

5 months ago

Улучшения

  • Snackbar: добавили подкомпонент Snackbar.Basic – это тот же Snackbar, но только вёрстка, без логики (#5932)
  • HorizontalCell: теперь принимает все параметры Tappable (#5918)
  • Avatar: добавлена функция Avatar.getInitialsFontSize для определения размера шрифта в аватарах (#5923)
  • Image:
    • добавлена возможность задавать прозрачный фон с помощью параметра withTransparentBackground. Полезно для отображения картинок с прозрачностью. (#5924)
    • добавленны свойства widthSize и heightSize (#5682)
  • SegmentedControl: Добавили возможность добавлять иконку с помощью свойства before (#5959)
  • Gradient: добавили новый mode=default, который позволяет подстраиваться под текущую тему (#5827)
  • Radio: добавили новыйп проп labelProps для того чтобы можно было передавать data-* аттрибуты лэйблу, в который обёрнут инпут. Основная цель - позволить в e2e-тестах находить именно лейбл. (#6037)
  • ModalRoot: новое свойство modalOverlayTestId для передачи data-testid на оверлей (#6052)
  • ModalPage, ModalCard: новое свойство modalDismissButtonTestId для передачи data-testid на оверлей (#6051)
  • Cell: добавили авто-скролл для draggable режима (#5833)
  • ModalCard: новое свойство dismissButtonMode для возможности показать крестик закрытия внутри модальной карточки (#6068)
  • CustomSelect, ChipsSelect: новое свойство noMaxHeight для отображения выпадающего меню без скролла (#6045)
  • Select/CustomSelect: сделали компонент доступным для скринридеров на десктопах (#6087)
    Рекомендации по использованию компонента для улучшения доступности можно найти в документации по компоненту в разделе "Цифровая доступность (a11y)". Были внесены изменения во внутреннюю реализацию компонента, в результате чего e2e-тесты, могут сломаться. Рекоммендации по e2e-тестированию компонента можно найти в разделе "Тестирование (e2e)" документации компонента. Также поменялся тип ноды, которую можно получить через свойство getRootRef, c HTMLLabelElement на HTMLDivElement.
  • Calendar: параметры minDateTime/maxDateTime позволяют запретить выбор определенных дат с учетом времени (#5866)
  • Search: добавлена кнопка "Найти" справа как в дизайн-системе (#5790)
  • Tabs:
    • добавлен автоскролл до выбранного таба (#5957)
    • добавлено свойство layoutFillMode для возможности управления растягиванием/сжатием вкладок (#6114)

Исправления

  • AppRoot: не вызывался useInsets(), если не передан safeAreaInsets (#6071)
  • TabsItem: теперь status={0} отображается корректно (#6125)
  • Переделали реализацию :focus-visible-состояния, чтобы больше не появлялся скролл в родительском элементе (#5876)

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

  • Добавили в шапку ссылки на токены и иконки (#6048)
  • View: добавили информацию о важности порядка Panel (#6046)

Other

  • withInsets помечен как @deprecated и будет удалён в v6 – используйте useInsets() из @vkontakte/vk-bridge-react (#6071)

Зависимости

[!IMPORTANT]
Как сообщалось в Release notes v5.9.4, мы приступили к разработке v6, поэтому это финальная минорная версия VKUI v5. В дальнейшем мы будем править критические проблемы.

v5.9.6

6 months ago

Исправления

  • ModalPage/ModalCard: при открытии фокусируемся на контейнер ModalPage/ModalCard, если внутри модалки нет элемента, на котором уже есть фокус (#6054)
  • Select/CustomSelect: исправили типы рендер-функции renderOption, чтобы можно было передавать опции с раширенным набором свойств (#6076)

v5.9.5

6 months ago

Исправления

  • Alert: кнопка закрытия съезжала вниз (#6035)
  • ConfigProvider: передача параметра platform={undefined} перебивала значение по умолчанию из контекста (#6044)