v6.1.1

Исправления

• Cell: в режиме draggable прекращался автоскролл при выходе мышки за область видимости (#6971)
• SplitLayout: свойство center не работало (#6987)
• DatePicker: исправили сброс значений неконтролируемого компонента (#6978)
• Textarea: скролл не был скруглен (#6993)
• Исправили падение сборки из-за использования React.use с версией react: 18.*.* (#7008)

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

• Button: были проблемы переключении параметров (#6968)

v6.1.0

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

Skeleton

Долгожданный скелетон (#5941).

DropZone

Компонент позволяет пользователям загружать файлы, перетаскивая файлы в область на странице (#6807).

Mark

Используется для выделения фрагментов текста, например, при поиске определенных слов или выделения текста в цитате (#6310).

ContentBadge

Компонент, который позволяет добавить текстовые или иконочные бейджи. Как правило, используются поверх других элементов или рядом с ними (#6636).

ToolButton

Кнопки, которые используются для вызова инструмента, вставки аттачей или для форматирования. Их можно использовать как кнопки для разового действия или для включения/выключения режима (#6837).

EllipsisText

Убирает текст не помещающийся в ширину контейнера в многоточие (#6692, спасибо @akcent1132 ❤️).

UnstyledTextField

Компонент предоставляет обёртку над <input />/<textarea /> со сбросом браузерных стилей по умолчанию (#6720).

Улучшения

Новая трансформация JSX

Для будущей поддержки React 19 библиотека компилируется используя новую трансформацию JSX (#6873).

Alert

Если action имеет свойство autoCloseDisabled, то в аргументы функции action() передётся метод close(), который можно вызвать, чтобы вручную закрыть Alert при клике на action (#6728).

Badge

Теперь параметр mode необязателен (#6947).

Cell.Checkbox

Добавлена возможность изменения размера компонента (#6438).

ChipsInput / ChipsSelect

Добавлена поддержка сброса новых значений до значений по умолчанию <form_dom_element>.reset() или <input type="reset" /> (#6563).

DatePicker / Popper / Popout

Теперь onPlacemenChange при первом рендере вызывается корректно (#6906).

FormItem

• Добавлена поддержка для многострочного вывода для текста top с помощью свойства topMultiline (#6582, спасибо @ntvsx193 ❤️).

• Добавлено отображение required-индикатора (#6820).

• Добавлено свойство topAside (#6730).

  

Group

Уменьшен отступ между Group и увеличен border-radius (#6769).

HorizontalScroll

Добавлено свойство inline для возможности располагать потомков горизонтально (#6848).

Image.Badge / Avatar.Badge

Поддержано больше свойств для передачи на корневой элемент (#6493).

ModalPage / ModalCard

Добавлена возможность запрещать скрытие модальные окна (обратите внимание, что это негативно сказывается на пользовательском опыте) (#6116)

Pagination

• Добавлена возможность менять режим отображения кнопок навигации с иконками налево/направо:

  

  Используйте для этого параметр navigationButtonsStyle (#6630).

• Добавлены Render Props renderPageButton и renderNavigationButton (#6781, спасибо @rflban ❤️).

Panel

Добавлено свойство mode: 'card' | 'plain', чтобы иметь возможность менять фон Panel. Удобно использовать вместе со свойством mode у компонента Group, позволяет точечно задавать стиль оформления Group, отличный от глобального стиля макета. (#6678)

PanelHeaderBack

Для platform="vkcom" иконка изменена на chevron_left_outline_20, а цвет на icon_secondary (#6941).

Popover

Добавлены свойства: arrow, arrowPadding, arrowHeight, arrowProps, ArrowIcon – для возможности добавлять стрелку (#6725)

Popover / Popper / OnboardingTooltip / Tooltip

Добавили свойство disableFlipMiddleware для возможности отключать автоматическое переопределение placement в зависимости от области видимости (#6922)

Radio

Добавлена возможность переопределения hoverMode и activeMode (#6455).

Snackbar

• Добавлено свойство placement?: 'top-start' | 'top' | 'top-end' | bottom-start' | 'bottom' | 'bottom-end' определяющее положение плашки – в мобильной версии *-start и *-end игнорируются и работают как top/bottom (#6806)
• Добавлено закрытие на ESC, а также добалены атрибуты role для a11y (#3039)
• Отступ у action приведён к дизайну (#6659, спасибо @akcent1132 ❤️)

Spacing

К свойству size добавлена возможность передавать строковые значения размеров, соответствующие размерам из системы расстояний (#6684, #6925)

SplitLayout

Добавлено свойство centered – теперь не придётся руками объявлять CSS в style для центровки (#6951)

Slider

Добавлено свойство size?: 's' | 'm' | 'l' определяющее размер ползунка (#6819)

TabsItem

• Поддержаны свойства ссылок (#6439).
• Добавлена возможность переопреде...

v6.0.3

Исправления

• TabsItem: убрали прозрачность для mode=secondary (#6809)
• ActionSheetItem: исправили отступы (#6813)
• SegmentedControl: исправили зависание hover-состояния на смартфонах (#6818)
• Button: вернули анимацию при смене фона и цвета шрифта (#6880)
• Link: обнулили свойство text-align, т.к. при пустом href компонент использует тэг <button>, которому браузер по умолчанию выставляет text-align: center (#6881)
• SimpleCell: нормализовали отступ от иконки на платформе iOS (#6829)

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

• Основная документация (Styleguide)
  • Добавили пример для демонстрации случая, когда в ActionSheetItem не передавали параметра autoClose (#6876)
  • Исправили работу выпадающих списков в документации (#6800)

v6.0.2

Улучшения

• 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:
    • CustomSelectOption (#6693)
    • ButtonGroup / IconButton (#6697)
    • Tappable (#6698)
    • Image (#6699)

v6.0.1

Исправления

Компоненты

• 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

Улучшения

Компоненты

• 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

Note

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

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

Breaking changes

Зависимости

• Обновили минимально поддерживаемую версию React до v18.2.0.

• Удалили зависимость @vkontakte/vk-bridge в рамках задачи по уменьшению сцепления с VK Mini Apps.

  Для авторов VK Mini Apps, совместно с командой VK Dev, создали страницу Интеграция с VK Mini Apps.

  Команда VK Dev, для будущих авторов, отредактировала раздел VK Dev / Библиотеки / VKUI и продублировала ссылку на нашу страницу интеграции.

Сборка

• Обновили конфигурацию .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)
• Провели работы по улучшению доступности, которые требовали мажорных изменений.
• Сделали стабильными компоненты:
  • ChipsSelect
  • HorizontalCellShowMore
  • Popover
  • Popper
  • TextTooltip Tooltip

    Предыдущий Tooltip (v5) переименован в OnboardingTooltip

• Удалили компонент 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

Исправления

• 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 поздравляет всех с наступающим Новым Годом 🎉

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

v6.0.0-beta.2

Исправления после релиза 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

Note

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

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

Breaking changes

Warning

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

Зависимости

• Обновили минимально поддерживаемую версию React до v18.2.0.

• Удалили зависимость @vkontakte/vk-bridge в рамках задачи по уменьшению сцепления с VK Mini Apps.

  Для авторов VK Mini Apps, совместно с командой VK Dev, создали страницу Интеграция с VK Mini Apps.

  Команда VK Dev, для будущих авторов, отредактировала раздел VK Dev / Библиотеки / VKUI и продублировала ссылку на нашу страницу интеграции.

Сборка

• Обновили конфигурацию .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
• Провели работы по улучшению доступности, которые требовали мажорных изменений.
• Сделали стабильными компоненты:
  • ChipsSelect
  • HorizontalCellShowMore
  • Popover
  • Popper
  • TextTooltip Tooltip

    Предыдущий Tooltip (v5) переименован в OnboardingTooltip

---

Фидбек ❤️

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