VKUI

Новые фичи

• Добавлен хук useAppearance (#1716, см. документацию по Themes)
• appearance автоматически определяется по scheme и при scheme="inherit" для внешних тем vk.com / mvk (#1716)
• Tooltip сам определяет положение, в котором ему нужно открыться и поддерживает alignX="center" (#1686 + #1713 + #1722, спасибо @k-egor-smirnov)

Исправления

• ChipsSelect закрывается при навигации через Tab (#1703, fixes #1702, спасибо @ilyapishchulin)
• Chip внутри ChipsSelect и ChipsInput больше не растягивает контейнер, в котором находится (#1709, fixes #1708)
• ConfigProvider сохраняет scheme="inherit" при platform={VKCOM} (#1715)
• Button прячет текст за многоточие, а не переносит его (#1696, #1678)

Улучшения

• prop-types, @babel/runtime и @vkontakte/vkjs удалены из peerDependencies — ставить их руками необязательно (#1717)
• Доступность Button: кнопки и ссылки на базе компонента теперь подсвечиваются при навигации с клавиатуры, а кастомные кнопки и ссылки обзавелись правильными role и tabIndex и активируются при нажатии на Enter (и кнопки, и ссылки) и Space (только кнопки) — прямо как нативные элементы (#1652)
• Доступность: улучшена семантика Header (#1710), Banner (#1718)

Рефакторинг

• Переписаны на функциональные компоненты: DatePicker (#1666), Slider / RangeSlider (#1691)

Новые фичи

• HorizontalScroll поддерживает getRef (#1694)
• Alert: actions при нимают href и Component для ссылок (#1695)
• HorizontalCell теперь поддерживает пропы disabled, href, target и т.д. (#1692)

Исправления

• DatePicker прокидывает disabled на селекты (#1668, спасибо @Fsss126)
• withModalRootContext убирает updateModalHeight из TS-пропов обернутого компонента (#1688, спасибо @wolframdeus)
• SubnavigationBar: у стрелок в больше нет outline при фокусе (#1685, fixes #1682)
• Slider / RangeSlider при перетягивании не вызывают swipeback (#1690)
• Версия иконок обновлена до 1.109.0

Улучшения

• Ворнинги показываются один раз и убираются из прод-сборки (#1689)
• Tooltip без TooltipContainer или с неподдерживаемым children кидает осмысленную ошибку (#1693)

Исправления

• Button: Tappable__hoverShadow теперь накладывается на всю кнопку (#1663, fixes #1576)
• FormItem: не рендерит bottom, если передана пустая строка (#1656)
• Search: у input по-дефолту type="search" (#1650)
• Touch с mouse-событиями отвязывает листенеры при анмаунте во время жеста (#1657)
• Touch после свайпа не вызывает click на внутренних элементах (#1658, fixes #1644)
• Slider / RangeSlider: step считается от min, значения не вылезают из [min, max] после округления (#1684)

Типы

• Добавили экспорт NavIdProps (#1664, fixes #1276)
• Root поддерживает проп nav вместо id (#1659, fixes #1655)

Доступность

• Постепенно внедряем базовую доступность: заменили в компонентах, где это возможно, div на более подходящие семантически теги, проставили aria-метки и прописали в документации, где эти метки необходимы. (#1611)

Исправления

• Cell: поправлен баг с иконками для selected (fixes #1654)
• PopoutRoot: исправлен брейкпоинт переключения на десктопное поведение (#1647)

Новые фичи

• ActionSheet: в свойстве popupDirection появилась возможность указывать функцию для расчета позиции выпадающего окна (#1621)
• AppRoot поддерживает mode="partial", чтобы включать noLegacyClasses в partial-режиме. Использовать AppRoot в partial-режиме всё ещё не обязательно. (#1474).

Исправления

• Avatar: исправлен цвет вложенных иконок в children и z-index тени (#1614, #1615)
• FormField: исправлена минимальная ширина у after (#1619)
• unstable.css: добавлены фолбеки для CSS custom properties (#1623)
• Textarea: при grow высота инпута учитывает паддинги и не скроллится (#1582)
• Select: значения больше ширины поля больше не выходят за границы поля (#1613)
• ActionSheetItem вызывает onChange при autoclose на десктопе (#1630, fixes #1491)
• Gallery не вешает getRef и getRootRef на DOM-элемент (#1635, fixes #1622)
• SliderSwitch: клик не вызывает submit формы (#1634, fixes #1602)
• Tooltip: свойства onClose, isShown, mode помечены как необязательные (#1633)
• ChipsSelect: поправлен d.ts
• PanelHeader: для платформы vkcom возможность фиксировать шапку

Рефакторинг

• Переписаны на функциональные компоненты: Textarea (#1582), [internal] ActionSheetDropdown (#1631), Tooltip (#1633)
• CSS собирается вебпаком (#1628)

Deprecations

⚠️ Свойства popout и modal у View и Root помечены как устаревшие — используйте SplitLayout (#1616)
⚠️ AppRoot embedded помечен как устаревший — используйте AppRoot mode="embedded" (#1474)

Новые фичи

• Навигационные компоненты View, Panel, ModalCard, ModalPage поддерживают не только id, но и nav, чтобы не вешать id на DOM-элементы (#1595)

Исправления

• Gallery не ломается при ленивой инициализации слайдов (#1609)
• Gallery: исправлено поведение стрелок когда видно сразу несколько слайдов целиком (#1608)
• ModalRoot: исправлен баг при открытии ModalCard после ModalPage с динамической высотой (#1610)

Рефакторинг

• Переписаны на функциональные компоненты: Panel (#1547), PopoutRoot (#1546)

Новые фичи

• ChipsInput: добавилось новое свойство after
• Input: добавилось новое свойство after

Исправления

• CellButton: Исправлен фон внутреннего Avatar
• Cell: в selectable для отрисовки маркера используются готовые иконки вместо самописного дизайна
• Cell: в removable при отсутствии multiline снова обрезаются children (#1527)
• IconButton: свойство Component теперь не игнорируется (#1535)
• DatePicker: убрано свойство monthNames из DOM (#1537)
• CustomSelect: добавлено свойство defaultValue (#1543)
• CustomSelectOption: убрано свойство option из DOM (#1557)
• ChipsInput: уже существующее значение больше не удаляется при повторном вводе, а переносится в конец списка чипов (#1211)
• Switch: вернулась возможность переопределить цвет подложки (#1077)
• Switch: дизайн неактивного состояния для iOS приведен в соответствие с макетом (#1560)
• FixedLayout: исправлен баг с прыгающим PanelHeader при переходах между панелями (#1575)
• PullToRefresh: исправили положение спиннера в мультиколоночном дизайне (#1483)

Рефакторинг

• Переписаны на функциональные компоненты: SplitCol (#1533), Snackbar (#1534), NativeSelect (#1583), Search (#1581), ConfigProvider (#1580)

Новые фичи

• AppRoot: добавлен режим scroll="contain" для embedded-приложений, скроллящихся внутри контейнера (#1503)
• ConfigProvider: добавлен режим theme="inherit" для приложений со своей темой (#1477)

Исправления

• Textarea: исправлен авторесайз при изменении программном value извне
• Select: поправлен z-index у выпадающего списка (#1504)
• Panel: исправлено центрирование (#1454)
• Button: обновлена типографика (#1508)
• Cell: disabled selectable ячейка теперь, во-первых, не выделяется, а во-вторых — корректно стилизуется
• Select: исправления controlled/uncontrolled состояний (#1505)
• Документация: Исправлено отображение props у некоторых компонентов
• Документация: В dev-режиме добавлен хотрелоад стилей (#1482)

Internal

⚠️ Всем CSS-анимациям добавлен префикс vkui: rotator-> vkui-rotator (#1481)
⚠️ Переменные из styles/constants.css теперь установлены на .vkui__root (#1477)

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

• TooltipContainer: позволяет использовать тултипы вне Panel, PanelHeader, FixedLayout (#1460)

Новые фичи

• FixedLayout: поддержано свойство getRef

Исправления

• Banner: исправлены размеры кнопок в документации.
• Banner: исправлено отображение пустого массива actions.
• FixedLayout, View: исправлен баг со скачущим хедером при переходах на панель со скроллом (#1467)
• сборка: исправлены неправильные reference пути в dist (#1456)
• Header: исправлен баг с переносом слов в multiline (#1470)
• ChipsSelect: исправлена передача onClick и onBlur к ChipsInput
• DatePicker: исправлен баг с выходом компонента за пределы контейнера (#1486)
• ModalRoot: исправлен баг с изменением высоты вьюпорта при открытой модалке на iOS (#1490)
• SplitLayout: исправлен неправильный отступ сверху на iOS (#1499)

Новые фичи

• AppRoot: режим noLegacyClasses отключает глобальные css-классы (#1380)

Исправления

• ModalRoot: исправлена ошибка при установленном dynamicContentHeight (#1451)

Contributing

Внутри vkui теперь используем проп vkuiClass вместо className — подробнее в contributing.md

Исправления

• Исправлены импорты типов #1433

Новые фичи

• ActionSheet: добавлено свойство popupDirection

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

• Spacing: более гибкая альтернатива Separator для отступов и разделителей

Исправления

• ModalRoot: исправлены отступы для webviewType = "vkapps" #1384
• Avatar: исправлен цвет иконки-плейсхолдера.
• HorizontalScroll: по умолчанию всегда показывает стрелки на десктопе #1394
• ModalPage: новый проп для передачи рефа getModalContentRef #1390
• Alert: исправлена ширина на десктопе #1387
• ModalPageHeader: исправлены внутренние отступы у кнопок и ширина заголовка #1407, #1417
• ActionSheet: исправлены внутренние отступы и устранена ошибка с двойным срабатыванием onClose на десктопе #1416, #1388

Экспорты типов

Из index.d.ts теперь экспортируются все интерфейсы, описывающие свойства компонент.

Было:

import { Snackbar } from '@vkontakte/vkui/';
import { SnackbarProps } from '@vkontakte/vkui/dist/components/Snackbar/Snackbar';

Стало:

import { Snackbar, SnackbarProps } from '@vkontakte/vkui';

⚠️ Подобные импорты доступны только с версии TypeScript >= 3.8

Новые фичи

• FormItem и FormLayoutGroup теперь имеют removable режим, сделанный по аналогии с Cell
• Новые компоненты: SubnavigationBar и SubnavigationButton
• Теперь можно открывать модальные окна на всю высоту

Исправления

• Избавились от хардкода стилей шрифтов там, где это возможно
• IconButton: свойство icon больше не обязательное. Вместо него рекомендуется использовать children
• TabbarItem: поправлена иконка Dropdown в соответствии с дизайном
• TabbarItem: длинные названия прячутся за ... #1360
• CustomSelectOption: исправлен баг с длинным текстом
• Group: адаптированы отступы у вложенных групп для SizeY = Compact
• Counter без контента скрывается #1357
• Tooltip не перезаписывает ref обернутого элемента #1359
• ModalCard: адаптирована максимальная ширина карточки на мобильных устройствах
• ModalPageHeader: на Android длинный заголовок сокращается ... #1365
• View, Root, PanelHeaderBack: дополнительный className не сносит базовые классы #1301, спасибо @daniil-kaverzin + #1363
• DatePicker: изменение даты не приводит к изменению ширины селектов
• ModalPageHeader: адаптированы отступы для SizeX = Regular
• ModalRoot: исправлено закрытие и одновременный захват модалок
• Banner: исправлен z-index границы

Исправления

• Root: исправлена анимация перехода
• HorizontalCell: исправлен вывод props & methods
• HorizontalScroll: исправлено обновление состояния прокрутки после изменения children
• ChipsSelect: creatableText теперь отвечает за отрисовку опции для создания тегов в режими creatable
• CustomSelectOption: убрано дублирование className
• Gallery: исправлено вычисление ширины слайдов, при использовании внутри SplitLayout (#1315)
• Checkbox: исправлен перенос длинного текста, вылезающего за отступы
• SliderSwitch: поправлен баг с activeValue (#1314)
• Snackbar: исправлен баг анимации при использовании в мультиколоночном SplitLayout

Known Issues

• ModalRoot: отменены исправления для горизонтального скрола #1321 и #1309

Фичи

• Badge: новый компонент (#626)

Исправления

• ModalDismissButton: поправлено центрирование иконки (#1300)
• Скролл в HorizontalScroll скрывал ModalPage (#1321)

Исправления

• ChipsSelect: свойство closeAfterSelect теперь опционально
• Исправлен TreeShaking

⚠️ В этой версии обнаружены два недочёта, которые исправятся в следующей версии.

1. У ChipsSelect новое свойство closeAfterSelect помечено как обязательное. В следующей версии оно будет опциональным.
2. Сломался TreeShaking. В вашем приложении появится много неиспользуемых модулей, что повлияет на скорость загрузки. Так же будет исправлено в следующей версии.

Исправления

• ContentCard: onClick вешается на внутренний Tappable (спасибо @gbowsky)
• Avatar: убрано лишнее условие ломающее проверку размера (спасибо @gbowsky)
• FixedLayout: поправлена демка (спасибо @gbowsky)
• ChipsSelect: добавлены метод onChangeStart и свойство closeAfterSelect
• Документация: исправлен вывод props & methods (#1166)
• UsersStack: добавлен размер xs (16px) (#1179)
• IconButton: поправлены размеры для sizeY="compact" (#1287)
• Counter: поправлен фон при использовании внутри TabsItem (#1232)
• Slider и RangeSlider: стилизовано disabled состояние
• FormItem по-умолчанию теперь div (#1302)
• Все компоненты, в которых можно переопределить корневой элемент (свойство Component), наследуются от AllHTMLAttributes, чтобы дать возможность навешивать специфические для конкретной ноды свойства (типа htmlFor, target и т.д.)
• Text, Caption: добавлено свойство Component
• ModalRoot: поправлен вывод props & methods
• HorizontalCell: поправлен дизайн (#1173)
• Modal: заработали скроллы внутренних компонент (#335)
• PanelHeaderContext: адаптация

Исправления

• Input передаёт проп style на корневой элемент, а не на <input>
• useInsets правильно реагирует на появление клавиатуры на iOS
• Убрана ошибка с noSlideClick (fixes #1253)
• Поддержан React 17 (спасибо @LazyTechwork)
• ModalPage/ModalCard исправлено адаптивное поведение на небольших экранах
• ActionSheet исправлено адаптивное поведение на небольших экранах
• RangeSlider исправлена ошибка со значениями на краях диапазона (#600)

Исправления:

• AppRoot - исправлено применение стилей при первом маунте VKUI приложения
• Tooltip - поправлены отступы в соответсвии с дизайном
• Gallery - исправлен баг с отсутствием анимации в первой смене слайда
• DatePicker - тип DateFormat доступен для импорта
• Исправлена проблема с абсолютными импортами внутри библиотеки
• Убраны импорты иконок из @vkontakte/icon/dist
• Ускорена документация

Обновление документации