Skip to content

Releases: VKCOM/VKUI

v6.5.2

28 Aug 07:41
Compare
Choose a tag to compare

Исправления

  • Исправлена ошибка TypeError: Uncaught TypeError: Cannot read properties of undefined (reading 'shown'), которая могла возникать при использовании компонентов Tooltip / Popover при переводе компонента из неконтролируемого состояния в контролируемое (#7285)
  • Footer: добавлена роль role="contentinfo", если используется тег <footer>, а также добавлены рекомендации по доступности (#7378)
  • Flex: поправлен неправильный расчёт margin (#7426)
  • Search: кнопка очистки была доступна несмотря на то, что поиск был в неактивном состоянии (#7422)
  • FormLayoutGroup: удален неиспользуемый класс (#7423)
  • CustomSelect / ChipsSelect: исправлены скругления границ инпута при открытии дропдауна при определённых условиях (#7419)
  • Исправлена поддержка свойства hidden (#7430)
  • Input/FormField: ряд исправлений (#7425)
    • исправлено изменение цвета фона и обводки при наведении в состоянии error/valid
    • в режиме mode="plain" и состоянии status="valid" | "error" в активном состоянии появилась обводка соответствующего цвета
    • в режиме mode="plain" и состоянии status="valid" фон стал соответствовать дизайн-системе (--vkui--color_background_positive_tint)

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

  • Search: в описании <input type="text" /> заменён на <input type="search" /> (#7459)
  • Chip: из-за опечатки отсутствовала страница документации (#7424)
  • Актуализированы ссылки на документацию React (#7447, спасибо @suprunchuk ❤️)

v6.5.1

20 Aug 15:01
Compare
Choose a tag to compare

Исправления

  • Group: поправлено автоматическое определение mode="card", когда mode не передан, а параметр адаптивности SizeX определяется как Regular. (#7345)
  • Tappable: при передаче Component="button" | "a" | "input" без onClick | href, компонент считался не кликабельным (#7390)
  • CustomSelect:
    • в скринридере NVDA не зачитывалось выбранное значение (#6974)
    • в Firefox при переходе по опциям вместо опции зачитывалось слово "секция" (#6974)
  • DateRangeInput/DateInput/CustomSelect: из типов убрано неиспользуемое свойство maxHeight (#7408)
  • Cell: добавляем полноценную поддержку disabled-свойства. Раньше оно использовалось для того, что сделать ячейки неинтерактивными - теперь это решается отсутствием пропа onClick. disabled - помечает ячейку как недоступную (она становится серой) (#7405)
  • View: после двойного жеста свайпбэка интерфейс переставал быть кликабельным (#7392)
  • Image: keepAspectRatio больше не требует явного задания ширины/высоты родителя (#7342)

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

  • CustomScrollView: исправлено отображение заголовка в примере (#7346)
  • ActionSheet: обновлен пример в режиме selectable в styleguide и storybook, чтобы показать правильное использование компонента (#7394)
  • ActionSheetItem: добавлен раздел по цифровой доступности с рекомендациями (#7394)
  • WriteBar: пример в storybook сделан более интерактивным (#7376)
  • FormItem: исправлен пример с валидацией почты (#7374)
  • Иконка копирования ссылки на тему на маленьких устройствах вылезала за пределы экрана (#7350)
  • ModalRoot: исправлен отступ между кнопками в модальной карточке (#7348)

v5.10.2

09 Aug 10:21
Compare
Choose a tag to compare

Исправления

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. 

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

v6.5.0

07 Aug 14:38
Compare
Choose a tag to compare

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)

Зависимости

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

v6.4.1

01 Aug 10:40
Compare
Choose a tag to compare

Исправления

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

v6.4.0

30 Jul 11:16
Compare
Choose a tag to compare

Улучшения

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

29 Jul 09:34
Compare
Choose a tag to compare

Исправления

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

Улучшения

Popover

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

v6.3.0

25 Jul 15:22
Compare
Choose a tag to compare

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

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

17 Jul 13:06
Compare
Choose a tag to compare

Исправления

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

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

Зависимости

v6.2.1

08 Jul 16:33
Compare
Choose a tag to compare

Исправления

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