VKUI

Новые фичи

• Компонент GridAvatar спасибо @k-egor-smirnov
• Компонент InitialsAvatar спасибо @k-egor-smirnov

Исправления

• Cell снова нормально принимает className и style (#2093, fixes #2092)

Исправления

• Убрали лишние пробелы между классами (#2075, fixes #2050)
• Cell корректно отображается, если разместить ее внутри FormItem (#2003, fixes #1825)
• View не ломается при отключенных анимациях (#2081, since 4.21.0)
• Select: при наведении на иконку дропдауна курсор меняется на pointer (#2085, fixes #2026)

⚠️ В Cell некорректно прокидываются className и style (#2092) — обновитесь до 4.22.0

Новые фичи

• Gallery без явного height подстраивается к высоте слайдов (#1992)
• View не ловит свайпбек из элементов с data-vkui-swipe-back={false} (#1959)
• SplitCol: в свойства width, minWidth и maxWidth можно передавать как string, так и number (#2035)
• Touch передает isX/Y = isSlide[X/Y] = false, shiftX/Y = shift(X/Y)Abs = 0 вместо undefined в onStart* и onEnd* после чистого тапа (#1993)

Исправления

• Button: починили (снова) вертикальное выравнивание (#2007, fixes #1423)
• Removable: кнопка "Удалить" снова исчезает плавно (#1996)
• SubnavigationBar: в HorizontalScroll пробрасываются свойства, отвечающие за прокрутку (#2036)
• View не ломается при быстрой смене activePanel (#2052)
• ModalRoot не ломается при быстрой смене activeModal (#1995)
• Типографические компоненты: теперь у свойств weight и level есть дефолты (#2005)
• Исправлен токен, красящий поля с ошибкой (#2002, спасибо @NovaStream2030)
• ActionSheet: исправлена ошибка при клике по элементу с autolose (#2033, спасибо @tayurus)
• Search: исправлен баг с покраской текстового поля, проявившийся в iOS 15 (#2039, 🤗 @tayurus)
• Link: исправлен баг типизации (#2064)
• Switch стал доступным для скринридеров; также на десктопе теперь показывается правильный cursor: pointer; (#2006, fixes #2096)
• Textarea: улучшен механизм ресайз (#2073, fixes #1976)

⚠️ View сломан в <SplitCol без animate и <ConfigProvider transitionMotionEnabled={false}> (#2079) — обновитесь до 4.21.1

Новые фичи

• Добавили ловушку фокуса при клавиатурной навигации по Modal, Alert и ActionSheet (#1973)

Исправления

• Search: исправлены иконки очистки (#1983)
• Touch на тач-девайсах не залипает при удалении элемента, на котором начался жест (#1988, fixes #235)
• Touch при слайде не переходит по ссылке, даже если в ссылке есть вложенные элементы (#1979, fixes #1977)
• CustomSelect не сваливается в бесконечный цикл при value={NaN} (#1980, fixes #1975)
• Контент Root не сжимается из-за лишнего div (#1991, fixes #1981, since v4.18.0)

Новые фичи

• Поддержали тёмную тему для vk.com. Чтобы отобразить в ней интерфейс, нужно в ConfigProvider передать platform="vkcom" scheme={Scheme.VKCOM_DARK}
• Схема Scheme.VKCOM помечена устаревшей. При передаче этой схемы, ConfigProvider применит Scheme.VKCOM_LIGHT
• Обновили цветовые токены

Улучшения

• Textarea: поддерживает поле row. При row={1} компонент принимает вид Input
• NativeSelect теперь поддерживает multiline (#1936)

Исправления

• SelectMimicry снова поддерживает multiline (#1858, #1936)
• CustomSelect: исправлено дергание скролла при наведении на опции (#1922)
• ChipsInput: исправлена коллизия key при передаче численной и строковой опции (#1919)
• SimpleCell: исправлен уход в троеточие у description и отступ между ним и children (#1955)
• TabsItem: исправлено выравнивание Counter (#1961)
• PanelHeaderContext не промаргивает при первом рендере (#1965)
• FixedLayout не сползает при переходе вперед (#1949) и вообще не подстраивается под скролл — изменили механизм компенсации скроллов при переходах View / Root (#1958)
• Tooltip отображается после завершения анимации перехода к панели и не косит (#1956)
• Tappable не залипает (и переписан на FC) (#1944)

Новые фичи

• Touch: хендлеры жестов получают duration — время с начала жеста (#1930).
• Touch: проп slideThreshold изменяет сдвиг, начиная с которого определяется слайд (#1930).
• ActionSheet принимает в toggleRef реф с current, а не только DOM-элемент (#1937).

Улучшения

• Tappable не перерендеривает все вложенные Tappable и не ремаунтит контент при переключении disabled (#1928)

Исправления

• Tappable не теряет ховер на при переключении disabled (#1928)
• ActionSheet на десктопе в react@17 не закрывается сразу при открытии (#1939, #1940, c v4.15.0).
• ActionSheet: пропы onClose, toggleRef, iosCloseItem снова стали необязательными для совместимости с версиями 4.2.0..4.14.2. Без этих пропов компонент не будет работать на некоторых платформах — правильное поведение вернется в v5. (#1937)

Исправления

• Header и Banner: вложенные заголовки заменены на span (#1932)

Исправления

• Обновленные инсеты теперь вешаются на родителя элемента .vkui__root (#1915)
• В cssm-режиме импортируется AppRoot.css (#1924)
• В ActionSheetItem на iOS теперь правильно показывается фокус при навигации с клавиатуры и проставляется border-radius для десктопа (#1918)

Internal

• Touch переписан на FC (#1893)
• Tappable не теряет таймауты волн при анмаунте (#1926)

Новые фичи

• SimpleCheckbox - добавлен новый компонент простого чекбокса без отступов. Он предназначен для использования внутри других блоков таких как таблицы. Это unstable-компонент.
• CustomSelect & ChipsSelect: унифицированная и улучшенная дефолтная фильтрация (#1899)

Исправления

• UsersStack: исправлен баг с неработающей маской (#1889)
• Глобальные стили, css-переменные и keyframes не удаляются из cssm-бандла (#1907)
• ChipsSelect: исправил попадание свойства options в атрибуты вложенного input (#1899)
• PanelHeaderContent: исправлена уехавшая верстка (#1912)

Internal

• Избавились от собственных типов Ref и RefWithCurrent (#1902)
• Root (#1886), FixedLayout (#1887) переписаны на FC

Новые фичи

• FormField теперь экспортируется и доступен для того, чтобы оборачивать в него кастомные компоненты форм (#1879, fixes #1862)

Исправления

• Alert: пропсы AlertAction теперь включают в себя все атрибуты ссылок, а сам AlertAction принимает target (#1865, fixes #1864, спасибо @ilyapishchulin)
• withAdaptivity/useAdaptivity: AdaptivityProps экспортируются корректно (#1866 + #1861, спасибо @ItzNeviKat)
• ViewInfinite, RangeSlider, SelectMimicry, NativeSelect импортируют свой CSS в cssm-сборке (#1847)
• HorizontalScroll: у стрелочек в Safari не обрезается тень (#1884)
• Avatar: исправлено выравнивание изображения, переданного через backgroundImage (#1888)
• Search: исправлена стилизация компонента в Safari 13 (#1891)
• Link: убран лишний border-radius (#1898)

Internal

• PanelHeaderContext (#1705), ActionSheet (#1883) и PopoutWrapper (#1882) переписаны на FC
• Импорты react переделаны на import * as React from 'react'

⚠️ Пропы ActionSheet onClose, toggleRef, iosCloseItem стали обязательными. Это правильное поведение, случайно сломавшееся в v4.2 — без этих пропов компонент не будет работать на некоторых платформах. В v4.17 пропы снова стали необязательными, но правильное поведение вернется в v5.

Исправления

• FormItem: getRootRef больше не прокидывается в DOM (#1848)
• RichCell: caption снова корректно сворачивается при иконке в after (#1856)

Исправления

• Cell: клик по области перетаскивания больше не перемещает ячейку в верх списка (#1835, fixes #1446)
• ChipsSelect: список опций снова открывается после удаления всех чипов без дополнительного клика (#1838)
• ChipsSelect: исчезла ошибка про deprecate свойства option при использовании дефолтного renderOption (#1843)

Новые фичи

• Button: добавили свойство loading, позволяющее отрисовать спиннер в кнопке (#1802)

Улучшения

• Доступность: сделали доступным ChipsInput (#1822)

Исправления

• ModalCardBase: добавили перенос длинных слов (#1813)
• ModalPage: поправили скругления, чтобы они соответствовали макетам (#1815)
• FormItem: поправили цвет токена для top в соответствии с дизайном (#1810)
• Tooltip: исправили проп cornerOffset (#1818)
• Button: починили выравнивание текста в кнопке-ссылке (#1826, #1828)
• TabsItem: изменили токен цвета для неактивных табов на text_tertiary (#1817)
• Cell [Android]: изменили иконку чекбокса с круглой на квадратную в режиме selectable (#1817)
• Alert [Android]: дали возможность рисовать destructive action на десктопе (#1817)
• ModalCard: изменили типографику subheader на Headline Regular (#1817)
• Header: обновили indicator (#1817)
  • изменили токен цвета на text_subhead в режиме primary,
  • изменили типографику на Caption 1 Medium в режимах primary и secondary
• поменяли типографику на Subhead Regular (#1817)
  • Banner — для subheader в размере s
  • Header — для subtitle в режиме primary
  • Radio — для description
  • RichCell — для caption
  • SimpleCell — для description
  • UsersStack — для .UsersStack__text
• поменяли opacity на 0.64 для disabled-состояния (#1817)
  • Button — в режимах primary, secondary, tertiary и outline
  • FormField,
  • PanelHeaderButton

Улучшения

• ContentCard: изменена передача пропсов — теперь {...restProps} накидывается на внутренний Tappable, а не на внутренний img (#1772)
• WriteBarIcon: приведены в порядок внутренности компонента и добавлен дефолтный aria-label для каждого из mode с возможностью его переопределить (#1806)
• Доступность: при навигации с клавиатуры подсветка теперь есть у всех интерактивных элементов 🎉

Исправления

• Button: зафиксировали свойство Component у ButtonTypography (#1811)

CustomSelectOption

• Добавлено свойство description (#1779)
• Исправлено выравнивание after (#1779)
• Добавлено свойство disabled (#1804)

CustomSelect

• Добавлено свойство fetching, рисующее в выпадающем списке Spinner вместо опций (#1778)
• Добавлен рендер-проп renderDropdown, позволяющее рисовать в выпадающем списке произвольный контент (#1778)

Deprecations

• ⚠️ ContentCard: свойство image помечено как устаревшее — используйте src (#1772)
• ⚠️ CustomSelectOption: свойство option помечено как устаревшее. Оно было добавлено по ошибке и нигде в коде не использовалось (#1779)

Исправления

• Placeholder: исправлено переполнение контента (#1777)
• Avatar: скрываем незагрузившееся изображение (#1396)
• Avatar: упростили разметку и исправили распределение переданных свойств (#1788 #1780)
• AppRoot: избавились от sizeY в DOM (#1794 #1783)
• Экспортируем ConfigProviderProps (#1794 #1769)
• Root: избавились от nav в DOM (#1794 #1766)
• Исправлена навигация по табу (#1789 #1781)

Исправлен баг в Tappable с залипающим hover #1775 #1773

CustomSelect (#1759)

• Исправлено закрытие дропдауна по клику за пределами компонента.
• Исправлена подсветка выбранного значения.
• Задепрейчена фильтрация через return у onInputChange. Такой подход приводит к конфликтам props.options и state.options.
• Добавлено свойство filterFn для кастомной фильтрации.
• Исправлена работа props.onClick в searchable режиме.

Прочие исправления

• ConfigProvider: исправлена ошибка, ломающая SSR (#1770)

Рефакторинг

• Tappable: исправлена логика проставления Component, role, type, tabindex, disabled, а также навешивания onClick и onKeyDown (#1760).

Исправления

• Footer: поправлены типы, чтобы больше не вываливалась ошибка (#1765).

Новые фичи

• У CustomSelect появился режим searchable для поиска по options (#1727)
• Появился компонент ModalCardBase. Он может быть полезен, если вам нужен дизайн карточки без ограничений по ширине, логики переходов и так далее. Компонент уже встроен внутрь ModalCard.

Исправления

• Search: отрицательный margin-top внутри Group теперь есть только в том случае, если Search — первый дочерний компонент (#1738).
• Select: теперь всегда ловит onClick (#1743).

Улучшения

• Доступность: улучшена семантика, добавлены роли и aria-метки для для Avatar, Gradient (#1719), ContentCard, Counter, Footer, Group, List, MiniInfoCell, Progress, Separator, Spacing, Spinner, SubnavigationButton, WriteBarIcon (#1730).
• Доступность: у типографических компонентов Caption и Text дефолтный Component теперь — span, подкладывать его руками больше не нужно (#1732).
• UsersStack: добавлен дефолтный серый фон на случай, если картинка грузится долго или не грузится вовсе (#1741).