Skip to content

Releases: VKCOM/VKUI

v6.2.0

27 Jun 16:14
@SevereCloud SevereCloud
v6.2.0
9ba0c02
Compare
Choose a tag to compare
v6.2.0 Latest
Latest

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

DisplayTitle

Типографический компонент, который используется для крупных заголовков (#7003)

Flex

Базовый компонент для позиционирования элементов. Построен на базе flex layout (#6226)

Улучшения

Accordion

Экспортирован тип AccordionContentProps (#6990)

ActionSheet

Добавлена анимация появления/скрытия на десктопе (#6979)

AppRoot

Добавлено новое свойство userSelectMode для управления режимом выделения текста в приложении (#7005)
По умолчанию теперь выделение текста запрещено, если приложение запущено с флагом isWebView в ConfigProvider

ChipsSelect

  • Добавляем свойство dropdownOffsetDistance как у CustomSelect (#6976)
  • Добавляем свойства onOpen и onClose для событий открытия/закрытия выпадающего элемента

CustomSelect

Экспортирован тип CustomSelectClearButtonProps (#6985)

HorizonalCellShowMore

Для цвета теперь используется токен --vkui--color_text_secondary вместо --vkui--color_icon_secondary (#7040)

Popover

Добавлен параметр keepMounted (#7058)

Slider

Визуально добавлены состояния active и hover (#7014)

Switch

Дизайн приведён к виду Material 3 (#6957)

В связи с этим, в документации поправили переключатели на чекбоксы

Warning

Изменились размеры компонента:

  • 38x18 → 42x26 при SizeType.COMPACT
  • 40x20 → 52x32 при SizeType.REGULAR

Caption / DisplayTitle / EllipsisText / Footnote / Headline / Paragraph / Subhead / Text / Title

Добавлен параметр inline – теперь можно перебить display: block, который выставляется при normalize={true} (#7059)

Заменен цветовой токен применяемый для модальных окон в не модальных компонентах

Изменен цвет фона в следующих компонентах (#7044):

Упрощение анимаций при @media screen and (prefers-reduced-motion: reduce)

В частности, в зависимости от prefers-reduced-motion, анимации с перемещением и с изменением размеров теперь заменяются на анимации через прозрачность там где необходимо. Благодаря такому подходу пользователи, с проблемами с вестибулярным аппаратом, смогут пользоваться вашими приложениями без спецэффектов (#6979)

Popper/FloatingArrow

Меняется логика статического позиционирования (свойство isStaticOffset из arrowProps) стрелочки попапа FloatingArrow, указывающей на целевой элемент.
Раньше при статическом позиционировании горизонтально или вертикально, независимот от значения placement, точкой отсчёта отступпа offset являлся либо левый край попапа при горизонтальном позиционировании, либо верхний край при вертикальном позиционировании.
Теперь, если свойство placement заканчивается на -end (top-end, right-end и т.д), offset отсчитывается от противоположного края: правого при горизонтальном позиционировании, нижнего при вертикальном позиционировании. (#7079)

Подняли версию @vkontakte/vkui-tokens до 4.47.0 (#7024)

Подняли версию @vkontakte/vkjs до 1.2.0 (#7055)

Исправления

Accordion

Если контент динамический, то он обрезался пока не вызовешь резайс страницы или пока не перезагрузишь страницу (#7083)

ActionSheet

Исправлена доступность ActionSheet в виртуальном буфере скринридера NVDA (#6955)

Alert

Переставал работать action с опцией autoClose={true} (#6979)

Calendar/CalendarRange

  • При изменении месяца через select выбранный месяц появлялся не на той же половине где был вызван select (#7074)
  • В селектах выбора месяца и года опции, не входящие в разрешенный диапазон дат (ограниченный через свойства minDateTime, maxDateTime, disablePast, disableFuture), будут неактивны (disabled) (#6937)
    Спасибо @struchkov 👍!

Header

Удалено принудительное разрешение выделение текста с помощью user-select. (#7005)

PanelHeader

Не пересчитывался размер компонента при использовании колонок (#7073)

Tappable

Убрано использование will-change: transform, так как не исправляет проблем с border-radius на iOS, но добавляет нагрузки браузеру (#7080)

Link

Исправляем поведение Link внутри контейнера с переполнением. Раньше он не прятался вместе с контентом в Safari (#7088)

source-map для CSS

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

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

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

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

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

Contributors

struchkov
Assets 2
Loading

v6.1.2

25 Jun 15:47
@BlackySoul BlackySoul
v6.1.2
23f8c68
Compare
Choose a tag to compare
v6.1.2

Исправления

  • CustomScrollView: при изменении контента не пересчитывался трекер (#7060)
  • Popover: исправили некорректное поведение при использовании массива значений в trigger (#6915)
  • FocusTrap: при динамическом изменении children не обновлялся буфер с интерактивными элементами для фокуса, из-за чего на новые элементы фокус не попадал (#7041)
  • Select: исправлен двойной рендер компонента (#7011)
  • Spacing: не применялся числовойsize (#7035)
  • Tappable: состояния вложенных Tappable могли не сбрасываться (#7029)
  • ToolButton: при ширине >= 768px у иконки без передачи children появлялся лишний отступ (#7039)
Assets 2
Loading

v6.1.1

11 Jun 11:40
@inomdzhon inomdzhon
v6.1.1
7cbc11e
Compare
Choose a tag to compare
v6.1.1

Исправления

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

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

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

v6.1.0

28 May 07:07
@SevereCloud SevereCloud
v6.1.0
5c16556
Compare
Choose a tag to compare
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).

image

ChipsInput / ChipsSelect

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

DatePicker / Popper / Popout

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

FormItem

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

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

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

    image

Group

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

image

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)

image

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)

image

TabsItem

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

Contributors

ntvsx193, akcent1132, and rflban
Assets 2
Loading

v6.0.3

15 May 09:03
@SevereCloud SevereCloud
v6.0.3
b2a8856
Compare
Choose a tag to compare
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)
Assets 2
Loading

v6.0.2

02 Apr 13:52
@mendrew mendrew
v6.0.2
75917b9
Compare
Choose a tag to compare
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)

Contributors

Semigradsky
Assets 2
Loading

v6.0.1

05 Mar 12:40
@SevereCloud SevereCloud
v6.0.1
734d31c
Compare
Choose a tag to compare
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)
Assets 2
Loading

v5.10.1

28 Feb 13:25
@inomdzhon inomdzhon
v5.10.1
16e53d7
Compare
Choose a tag to compare
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)
Assets 2
Loading

v6.0.0

16 Jan 15:47
@inomdzhon inomdzhon
v6.0.0
68c7f5d
Compare
Choose a tag to compare
v6.0.0

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
  • Провели работы по улучшению доступности, которые требовали мажорных изменений.
  • Сделали стабильными компоненты:
  • Удалили компонент 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. Для всех остальных обсуждений есть дискуссии :)

Assets 2
Loading

v6.0.0-beta.3

29 Dec 14:20
@inomdzhon inomdzhon
v6.0.0-beta.3
a5edbbb
Compare
Choose a tag to compare
v6.0.0-beta.3 Pre-release
Pre-release

Исправления

  • 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

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

5

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

Assets 2
Loading