v6.5.0

Warning

В рамках #7280 изменились внутренние импорты.

Если вы по какой-то причине использовали внутренние импорты,
рекомендуем ознакомиться с изменениями.

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

SelectionControl + Checkbox / Radio

Компонент для создания ячеек из таких переключателей как Checkbox, Radio и Switch (#7119)

В рамках задачи по созданию этого компонента, <input /> элементов Checkbox и Radio вынесены в под-компоненты <Checkbox.Input /> и <Radio.Input />, соотвественно.

Пример использования:

<Group>
  <SelectionControl>
    <Checkbox.Input />
    <SelectionControl.Label description="Description">Title</SelectionControl.Label>
  </SelectionControl>
  <SelectionControl>
    <Radio.Input />
    <SelectionControl.Label description="Description">Title</SelectionControl.Label>
  </SelectionControl>
  <SelectionControl>
    <SelectionControl.Label description="Description">Title</SelectionControl.Label>
    <Switch />
  </SelectionControl>
</Group>

Улучшения

• Flex.Item: свойства alignSelf, flex и flexBasis теперь необязательны, flexBasis теперь также принимает строки (#7329)

• Alert: удалено значение по умолчанию для actions (#7280)

• ChipsInput: удалены значения по умолчанию для getOptionValue, getOptionLabel, getNewOptionData (#7280)

• FormField: убрано задание фиксированной высоты (#7264)

• FixedLayout/OnboardingTooltipContainer: добавлено свойство Component (#7237)

• CustomScrollView: добавлена поддержка горизонтального скролла (#7130)

• CellButton: изменен акцентный цвет (#7330)

  

• Удалены лишние префиксы WebkitTransform и WebkitTransition (#7299)

• Добавлен экспорт хука useOrientationChange (#7324)

Исправления

• TextArea: исправлен некорректный скролл (#7273)
• ActionSheetItem: исправлена навигация с клавиатуры в режиме selectable (#7216)
• ModalRoot: исправлена работа скролла в модальных окнах (#7325)
• Group: исправлена адаптивность в модальных окнах (#7284)
• Cell: удалены лишние отступы в режиме draggable и mode='selectable' (#7327)
• Всплывающие окна с поддержкой autoFocus теперь не игнорируют это свойство, когда контент внутри всплывающего окна изменяется (#7331)

Зависимости

• Обновлён пакет @vkontakte/vkui-tokens с 4.49.0 до 4.51.0 (#7297)
• Удалена внутренняя зависимость mitt за ненадобностью (#7319)
• Библиотека dayjs заменена на date-fns (#7320)

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

• CustomScrollView: добавлена документация (#7130)

v6.4.1

Исправления

• List: исправлено выпадение контента за пределы родителя (#7278)
• ChipsSelect: исправлено появление повторяющихся ключей (key) при рендере options, если есть опции с одинаковым значением option.label (#7276)

v6.4.0

Улучшения

Tooltip

Добавили новой свойство disableTriggerOnFocus, чтобы запретить появление тултипа при фокусе (#7267)

ChipsSelect/ChipsInput/FormField

Добавили новое свойство maxHeight, чтобы контролировать максимальную высоту компонента, после которой появляется скроллбар (#7124)

Snackbar

В мобильном режиме bottom-end больше не перебивается на bottom-start. Также теперь можно закрыть Snackbar свайпом в любое из направлений по горизонтали (#7265)

ScreenSpinner

• добавлены подкомпоненты: ScreenSpinner.Container, ScreenSpinner.Loader, ScreenSpinner.SwapIcon (#7250)
• исправлен фокус на компоненте в режиме state="cancellable" (#7250)

v6.3.1

Исправления

• CustomSelect: исправлено поведение в режиме searchable. После поиска по опциям по клику выбиралось не то значение (#7226)
• Cell: по умолчанию, при передаче href, компонент должен использовать тег a (#7242)
• ModalDismissButton: изменён токен состояний hover и active и сами состояния теперь задаются через background-color (#7243, спасибо @qurle!)

Улучшения

Popover

Добавлен параметр onShownChanged, который работает как onShownChange, но при этом дожидается окончания анимации.

v6.3.0

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

SimpleGrid

Добавлен новый компонент для раскладки элементов, на базе grid (#6233 )

Улучшения

AspectRatio

Добавили возможность переопределять свойство Component (#7148)

FormItem / Radio / RadioGroup

Доработали цифровую доступность для компонентов (#7089)

• У FormItem появился параметр topId для указания атрибута id у <label />
• У RadioGroup теперь объявлена роль role="radiogroup"
• На страницах Radio и RadioGroup добавили раздел Цифровая доступность

EllipsisText

Добавлен параметр maxLines (#7091)

CustomSelect

Добавлен параметр getSelectInputRef для получения ссылки на элемент <input /> (#7118)

Image

Добавлен параметр objectFit для изменения стиля object-fit у картинки (#7123)

Добавлено свойство keepAspectRatio для сохранения оригинальных пропорций картинки (#7187)

Добавлены параметры borderStartStartRadius, borderStartEndRadius, borderEndStartRadius и borderEndEndRadius для скругления отдельных углов (#7100)

CustomScrollView, CustomSelect, ChipsSelect

Добавлен параметр overscrollBehavior для возможности изменения стиля overscroll-behavior у компонента CustomScrollView (#7111)
Теперь в CustomSelect и в ChipsSelect можно прокинуть параметры autoHideScrollbar и autoHideScrollbarDelay
(#7151)

ChipsSelect

Добавлена кнопка очистки.
Свойства:

• allowClearButton, для отображения кнопки очистки
• ClearButton для возможности переопределить кнопку очистки.

Checkbox

Добавлен раздел Цифровая доступность в документации (#7101)

List

Добавлен параметр gap для установки промежутка между элементами. (#7094)

HorizontalCellShowMore

Добавил параметр centered. При передаче которого, компонент выравнивается по центру по вертикали относительно родителя (#7110)

Cell/SimpleCell/MiniInfoCell/RichCell

Используем токены расстояний вместо числовых констант (#7033)

Panel

Добавлено свойство disableBackground, которое отключает фон

UsersStack

Теперь вместо массива ссылок photos можно передать массив с функциями рендера обертки над аватарками. Это нужно для добавления дополнительных элементов или тултипов над аватаркой (#7116)

Separator

Добавлен prop mode для управления стилем отображения компонента (#7149)

FormLayoutGroup

Улучшена цифровая доступность компонента:

• по умолчанию используется fieldset вместо div
• Добавлен раздел "Цифровая доступность" в документацию компонента
  (#7155)

Search

Расширена возможность прокидывания prop icon в компонент Search. Теперь можно удобно добавлять обертку для компонента. Пример в документации
(#7176)

Textarea

Добавлены параметры before и after для компонента TextArea (#6307)

FormField

Добавлены параметры afterAlign и beforeAlign для выравнивания иконок по вертикали (#6307)

Snackbar

Цвет фона изменен на токен colorBackgroundContrastThemed (#7211)

Gradient

Добавлен новый режим mode="overlay" (#7236)

Исправления

• Анимация заднего фона у модальных окон не срабатывала (#7232)
• View: открытие панели из модалки с клавиатурой сохраняло неверное положение скролла (#7208)
• TabsItem: был неверный цвен фона при наведении (#7233)
• Flex: приоритет flexBasis был выше чем в свойстве style (#7240)

v6.2.2

Исправления

• PanelHeaderContext: если контекст был изначально скрыт, наблюдалась блинкуюущая менюшка (#7193)
• Popover:
  • при trigger={['focus', 'click', 'hover']} событие onMouseLeave игнорировалось в случае, если триггером выступал focus или click, что приводило к путающему поведению (#7170)
  • при trigger="hover" и динамическом изменении контента в Popover, глючило состояние открытия/закрытия (#7199)
• ModalPage: ломалась анимация открытия/закрытия (#7147)
• Snackbar: в мобильной версии при placement="bottom-start"/placement="bottom"/placement="bottom-end" компонент всегда появлялся снизу-верх и закрывался через смахивание вниз, что приводило к тому, что вызывался pull-to-refresh и/или режим одного пальца. Чтобы избежать этих проблем, теперь компонент всегда будет появляться слева-направо и смахиваться в то же направление (#7135)
• ChipsSelect: список опций не открывался по клику на иконку со стрелкой (#7167)
• Search: на iOS запаздывала анимация кнопки Отмена (#7196)

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

• Исправлена навигация из styleguide в storybook (#7047)
• Актуализированы страницы DateRangeInput и CustomSelect (#7189, #7197)
• На странице Кастомизация поправлен пример импорта иных тем (#7205)

Зависимости

• @vkontakte/vkjs обновлён с 1.2.0 до 1.2.1 (#7186)

v6.2.1

Исправления

• CustomSelect:
  • не переносилась неразрывная строка (#7092)
  • наведение работало неверно (#7126)
  • вернули скролл к выбранному элементу при открытии выпадающего окна (#7131)
• ChipsInput: не прокидывались disabled-состояния (#7098)
• Popover: возвращён параметр customMiddlewares (#7134)
• CustomScrollView: в v6.1.2 появилась дополнительная обёртка над children – в ней не хватало стилей для растягивания её на всю высоту (#7097)
• Компоненты, наследующие Typography, использовали только системную тему (#7090)
• Исправление ошибки TypeError: Uncaught TypeError: Cannot read properties of undefined (reading 'shown') (#7099)
• ModalDismissButton: вернули hover и active состояния (#7082)
• GridAvatar: исправили key для одинаковых ссылок в src (#7146)
• Image: исправили некорретное поведение ImageBase.Overlay для вложенных интерактивных элементов (#7006)

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

• Snackbar: исправили описание жестов для закрытия (#7120)

v6.2.0

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

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

• Card
• Calendar
• CalendarRange
• CustomSelectDropdown (под-компонент CustomSelect)
• Popover
• ScreenSpinner
• ScrollArrow
• SubnavigationButton
• TabsItem
• TooltipBase
• WriteBar

Упрощение анимаций при @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)

v6.1.2

Исправления

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

v6.1.1

Исправления

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

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

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