VKUI

Исправления

• Group: карточки в CardScroll наезжали на тень (#2732)
• CustomSelect: Dropdown уезжал при зуме (#2733)
• В source map генерировалось webpack://@vkontakte/vkui/<no source> (#2737)
• В react-scripts <= v5.0.0 сборка падала с ошибкой в vkui.css (#2741)

Улучшения

• Avatar : перевели на vkui-tokens (#2680)
• FixedLayout : перевели на vkui-tokens (#2678)
• Textarea : перевели на vkui-tokens; добавили параметр maxHeight, чтобы была возможность переопределить заданное в стилях значение (#2677)
• UsersStack : перевели на vkui-tokens (#2661)
• Checkbox : перевели на vkui-tokens (#2626)
• Root : перевели на vkui-tokens (#2691)
• View : перевели на vkui-tokens (#2692)
• FocusVisible : перевели на vkui-tokens (#2689)
• FormItem : перевели на vkui-tokens (#2600)
• FormLayoutGroup : перевели на vkui-tokens (#2600)
• Slider : перевели на vkui-tokens (#2683)
• RangeSlider : перевели на vkui-tokens (#2683)
• InitialsAvatar : перевели на vkui-tokens (#2707)
• Gallery : перевели на vkui-tokens (#2701)
• Banner : перевели на vkui-tokens (#2712)
• Tappable : перевели на vkui-tokens (#2714)
• GridAvatar : перевели на vkui-tokens (#2694)
• PopoutWrapper : перевели на vkui-tokens (#2722)
• ContentCard : перевели на vkui-tokens (#2719)
• CellButton : перевели на vkui-tokens (#2720)
• Spacing : перевели на vkui-tokens (#2729)
• IconButton : перевели на vkui-tokens (#2726)
• Button: добавили cursor: progress в режиме loading (#2700)

Исправления

• Alert: при нажатии на фон функция, передаваемая через onClose, вызывалась два раза (#2676)
• Textarea: теперь cols не игнорируется (#2677)
• HorizontalScroll: пролистывание с помощью стрелок больше не зависает (#2706)
• ⚠️ Поправили допустимую версию yarn в "engines". Была ошибка, если у пользователя версия yarn выше v1.22.18 (#2708)
• Gallery: исправили несколько багов, перечисленных в PR (#2686)
• Snackbar: исправили стили Button внутри Snackbar (#2725)
• IconButton: поправили border-radius и проблему сжатия компонента внутри SimpleCell (#2726)
• PanelHeader: вернули тень для VKCOM (#2728)

Internal

• Gallery: переписали на FC (#2686)

Новые фичи

• Select: добавили новый selectType — accent (#2430)

Улучшения

• Button: улучшили доступность для кнопок (#2538)
• Headline : перевели на vkui-tokens, добавили новые свойства level и weight (#2502)
• Text : перевели на vkui-tokens, добавили новые значения weight (#2331)
• Progress : перевели на vkui-tokens (#2596)
• Spinner : перевели на vkui-tokens (#2615)
• PanelSpinner : перевели на vkui-tokens (#2614)
• Footer : перевели на vkui-tokens (#2619)
• Div : перевели на vkui-tokens (#2631)
• SplitCol : перевели на vkui-tokens (#2632)
• Switch : перевели на vkui-tokens (#2602)
• Radio : перевели на vkui-tokens (#2609)
• RadioGroup : перевели на vkui-tokens (#2609)
• InfoRow : перевели на vkui-tokens (#2609)
• PullToRefresh : перевели на vkui-tokens (#2647)
• Counter : перевели на vkui-tokens (#2647)
• PanelHeader и ModalPageHeader: переименовали свойства left и right в before и after для консистентности (#2382)
• Уменьшили размер выходного бандла CSS на 25% 🚀 (#2407)
• Экспортируем хук useNavTransition и тип TransitionContextProps (#2599)
• Button: добавили поддержку новых токенов для кнопок (#2623)

Исправления

• SegmentedControl: добавили стили для компактного sizeY (#2495)
• File: добавили метку о токенизации в документации (#2527)
• DateRangeInput: добавили метку о токенизации в документации (#2606)
• DateInput: добавили метку о токенизации в документации (#2605)
• SplitCol: фиксированный компонент уезжал наверх при блокировке скролла (#2497)
• Calendar: пропадает скругление иконок у Calendar при sizeX=compact (#2635)
• Radio: была проблема с отрисовкой радиокнопки при масштабировании (#2609)
• RichCell: теперь при нехватке места кнопки в actions не обрезаются, а уходят в многоточие (#2598)
• Отключили поддержку VK Sans Text до официального решения вопроса лицензирования шрифта (#2651)
• Предупреждение #1971 больше не будет вызываться (#2654)

Deprecations

• ⚠️ Свойства expanded в компоненте Separator и separator в компоненте Spacing устарели. Для более гибкой настройки положения линии и отступов используйте комбинацию компонентов (#2359)
• ⚠️ Свойства left и right в компонентах PanelHeader и ModalPageHeader устарели. Используйте before и after (#2382)

Internal

• CustomScrollView: переписали на FC (#2646)
• PullToRefresh: переписали на FC (#2660)

Новые фичи

• В Calendar добавилась возможность изменять иконки предыдущего/будущего месяца (viewDate) PR #2494 issue #2490

Улучшения

• Экспортируем хук useScrollLock для блокировки прокрутки при появлении всплывающего окна (#2474)
• Popper: в рамках задачи #2438 вывели компонент в styleguide

Исправления

• ОТКАТИЛИ изменение, которое было в v4.29.1

  FixedLayout: поправлена центровка внутри View > Panel на устройствах с бровкой в landscape режиме (#2422)

  подробности в PR #2472

• Popper: теперь при параметре sameWidth правильно высчитывается ширина если на странице нет скролла (#2438)

• Поправили различные всплывающие окна платформы VKCOM для экранов меньше 768px (#2473)

• DateInput: При клике по заполненному ному полю не открывается календарь (#2486)

• PanelHeader: На платформе VKCOM, в зафиксированном компоненте PanelHeader уезжал сепаратор (#2479)

• Исправлены отступы для платформы iOS в компонентах <Cell draggable mode="removable"> и CardScroll (#2488)

• Для некоторых компонентов в css нет фоллбека при отсутствии vkui-tokens (#2493 fixes #2489)

Новые фичи

• В Calendar добавилась возможность вручную управлять отображаемой датой (viewDate) #2465

Улучшения

• Switch: обновлены примеры использования в кодументации (#2376)

Исправления

• PanelHeader: полностью пропадает тень на vkcom при выключении separator (#2467 , fixes #2240)

Улучшения

• Обновлены токены Appearance (#2436)
• ModalPage, SplitLayout: теперь поддерживают --safe-area-inset-top на android (#2183).
• Поддержка color-scheme в full режиме, для окрашивания системного интерфейса (#2437)
• FormField: добавлен параметр before для возможности размещения иконки слева (#529, #975, #2374)

Исправления

• Платформа VKCOM теперь определяется автоматически (#1632)
• FixedLayout: поправлена центровка внутри View > Panel на устройствах с бровкой в landscape режиме (#2422)
• Snackbar: текст не вылезает за пределы, добавлено ограничение в 3 строки (#2420)
• ModalCard: кнопки не вылезают за пределы экрана (#2090)
• Добавлена блокировка прокрутки для всплывающих окон (#2421)

Новые фичи

• Новый типографический компонент Paragraph 🎉 (https://github.com/VKCOM/VKUI/issues/2396, fixed by #2395)

Улучшения

• Доступность: улучшена семантика ModalCardBase (#2297)
• HorizontalScroll: стрелки по умолчанию прокручивают содержимое на видимую ширину компонента (#2300)
• ModalRoot, ModalPage: добавлены новые пропсы (#680, #1935, #2340):
  • onOpen – срабатывает в начале открытия модалки
  • onOpened – срабатывает после окончательного открытия модалки
  • onClosed – срабатывает после окончательного закрытия модалки
• Теперь экспортируются и доступны следующие типы (#2363):
  • CalendarProps
  • CalendarRangeProps
  • DateInputProps
  • DateRangeInputProps
  • PanelHeaderBackProps
  • AppRootProps
  • AppearanceProviderProps
  • SSRWrapperProps
  • PopperProps
• CustomSelectOption: добавлен параметр hierarchy (#2373)
• Gallery: добавлены параметры onPrevClick и onNextClick. Спасибо, @NebSehemvi ❤️ (#2426)

Исправления

• Touch: поправлена отписка от событий (#2305)
• Header: параметр mode не прокидывался в HeaderSubtitle (#2360)
• Subhead: теперь при weight={undefined} не создается класс Subhead--w-undefined (#2379)
• Tappable: теперь курсор имеет значение по умолчанию если hasHover и hasActive выставлены в false (#2321)
• Root: скролл больше не появляется при переключении View (#2387)
• SegmentedControl: активный сегмент не реагирует на наведение мышкой (#2403). Исправлено внутреннее устройство компонента (#2402)
• Input, Select: теперь имеют одинаковую прозрачность при disabled (#2320)
• Input, Textarea: не меняют цвет на белый после нажатия на них в тёмной теме (#2336)
• Snackbar: не вызывал onClose, когда вкладка была в фоне (#2411)
• Snackbar: при свайпе в Firefox появлась ошибка (#2415)
• TabbarItem: из-за короткого текста, часть label скрывалась (#2412)
• Root, View: преимущественно в React 18, были моргания экрана после перехода назад. @worldwidebaby поправил это, спасибо ❤️ (#2043)

Internal

• GridAvatar теперь располагает элементы по сетке через css (#2334)
• warnOnce теперь использует по умолчанию console.warn вместо console.error (#2291)
• Запрещаем использовать объекты в аргументах classNames и classNamesString (#2335)
• Получили поддержку vkui-tokens следующие компоненты (#2371):
  • Input
  • FormField
  • Select
  • CustomSelect
  • CustomSelectDropdown
  • CustomSelectOption
  • ChipsInput
  • ChipsSelect
• Добавилась поддержка шрифта VK Sans (#2410)

Исправления

• ⚠️ npm: Поправлена проблема, которая появилась в версии v4.28.0. npm не мог установить пакет, т.к. в нём больше не было файла указанного в поле "bin" в package.json

  npm ERR! enoent ENOENT: no such file or directory, chmod '/node_modules/@vkontakte/vkui/tasks/generate_scheme.js'
  npm ERR! enoent This is related to npm not being able to find a file.
  

  При установке через yarn такой проблемы нет.
• CalendarRange: Исправлен цвет выделения ячеек в dark theme (#2304)
• ModalPage: Теперь, на платформе iOS, при смене ориентации устройства, карточка пересчитывает высоту, тем самым контент больше не обрезается (#2303)
• CustomSelect: При параметре searchable были проблемы с выбором элементов списка (#2315)

Internal

• Caption получил поддержку vkui-tokens

Новые фичи

• Новый компонент ButtonGroup 🎉
  • ⚠️ RichCell ✅ – в параметре actions для группировки кнопок следует использовать <ButtonGroup> вместо <React.Fragment>.

    В 5.0.0 из компонента Button будут удалены стили .RichCell__actions .Button

  • ⚠️ Banner ❌ – в параметре actions нельзя использовать ButtonGroup из-за конфликта стилей на уровне дизайна.

    подробности в комментариях src/components/Button/Button.css#L511-L552

  • ⚠️ ModalCardBase ❌ – в параметре actions нельзя использовать ButtonGroup из-за конфликта стилей на уровне дизайна.

    подробности в комментариях src/components/Button/Button.css#L554-L580

• Новый компонент Pagination 🎉 (https://github.com/VKCOM/VKUI/issues/2220)
• Новый компонент Calendar 🎉 (https://github.com/VKCOM/VKUI/issues/2228)
• Новый компонент CalendarRange 🎉 (https://github.com/VKCOM/VKUI/issues/2228)
• Новый компонент DateInput 🎉 (https://github.com/VKCOM/VKUI/issues/2228)
• Новый компонент DateRangeInput 🎉 (https://github.com/VKCOM/VKUI/issues/2228)

Исправления

• Починили сборки для пользователей, у которых postcss-loader прогоняет стили из node_modules/ (#2282).
• Документация: поправили несколько опечаток (спасибо @SevereCloud и @meowto16 ❤️)

Internal

• Перевели на именованные экспорты: ViewInfinite, ChipsSelect, SimpleCheckbox, Div

Исправления

• ConfigProvider: автоматически определяет платформу если передан platform={undefined}
• Cell: onRemove снова выполняется на iOS при mode="removable" (#2279, fixes #2273)

Internal

• Subhead получил поддержку vkui-tokens

Исправления

• На AppRootPortal корректно навешиваются классы для Appearance и vkui-tokens
• Добавили генерацию .d.ts файлов в cssm-сборке
• Card: исправлена тень

Internal

• На vkui-tokens переведены HorizontalScroll и HorizontalScrollArrow

Новые фичи

• Новый компонент SegmentedControl 🎉 (#2159, fixes #2055)

Улучшения

• Привели weight в Title к единому стандарту жирности: 1, 2 и 3
• Документация: токенизированные компоненты теперь отмечены специальным значком
• Документация: устаревшие компоненты теперь отмечены как deprecated в содержании и на страничке самих компонентов

Исправления

• CardScroll и Card теперь экспортируются с поддержкой vkui-tokens (#2242)
• CardScroll: свойство withSpaces помечено как опциональное
• AppearanceProvider: навешиваем vkui-tokens класс на children
• Названия компонентов Alert и ActionSheet снова правильно отображаются в документации (#2252, fixes #2246)

Internal

• Перевели на именованные экспорты: Gradient (#2243), Chip (#2244), Card, CardScroll (#2242)
• Перевели на vkui-tokens Title

Deprecations

• ⚠️ Компонент SliderSwitch устарел. Используйте SegmentedControl
• ⚠️ Свойство weight компонента Title: значения heavy, bold, semibold, medium и regular устарели. Используйте новые стандартные веса 1, 2 и 3

Изменения

• Дали возможность передавать в platform произвольную строку
• Компонент CardScroll получил поддержку vkui-tokens
• Компонент CardScroll теперь можно рисовать без отступов с помощью свойства withSpaces={false}
• В HorizontalScroll появился режим отрисовки стрелок "always", при котором они никогда не прячутся
• ConfigProvider: избавились от пропа schemeTarget, который был нужен только в доке

Internal

• Перевели на именованные экспорты: ActionSheetItem (#2219), AdaptivityProvider (#2224), Alert (#2225), AppRoot (#2226)
• Импортировали значения vkui-tokens для ios/android/vkcom платформ
• Добавили в консоль предупреждения об устаревших свойствах (#2227): ContentCard, PromoBanner, IconButton, Root, View, TabbarItem
• Избавились от платформенных стилей в Button

Исправления

• У некоторых компонентов стали обязательные AdaptivityProps (#2218)

Исправления

• У некоторых компонентов появилось обязательное свойство scheme (#2212)
• HorizontalScroll исправлена работа скрола вправо (#2214, fixes #2213)

Новые фичи

• AppearanceProvider: позволяет переопределять appearance

Улучшения

• ModalPageHeader: рендерит внутри себя PanelHeader вместо дублирования разметки и стилей (#2175, fixes #2067, #2068, #2188)
• Включен useStrict режим typescript (#2195)
• webpack обновлен до v5 (#2197)

Исправления

• View: исправлено предупреждение при переключение панелей (#2171, fixes #2087)
• У Select срабатывает onChange, даже если выбрать опцию, которая и так уже была выбрана (#2172, fixes #2130)
• useKeyboard не перерендеривает приложение каждые 300мс (#2176, fixes #2169)
• Cell: не исчезает кнопка удаления у ячейки (#2178)
• Select: ширина выпадающего списка не равна ширине поля (#2179)

⚠️ В Cell с mode="removable" на iOS не срабатывает onRemove (#2273) — обновитесь до 4.27.2

Новые фичи

• У компонента Avatar появилась возможность задавать badge, можно выбрать один из предопределенных вариантов "online", "online-mobile" либо передать свою иконку (#2120)
• InitialsAvatar: добавлена утилита calcInitialsAvatarColor для расчёта цвета на основании переданного ID (#2125)
• У компонента Button появился проп appearance, который принимает значения "accent", "positive", "negative", "neutral", "overlay". Его следует использовать вкупе с пропом mode, актуальными значениями которого являются "primary", "secondary", "tertiary", "outline". Прочие значения считаются устаревшими и будут удалены в пятой версии.
• У компонентов CustomSelect, ChipsSelect и ActionSheet popup теперь сам определяет направление, в котором он откроется, в зависимости от доступного пространства. Свойство popupDirection теперь означает желаемое направление (при условии, что есть свободное пространство).
• У компонента Avatar появилась возможность задавать overlay (#2145)
• Новый компонент RadioGroup (#2136)
• Добавили поддержку шрифта VK Sans Display (#2155)
• У компонента Checkbox появилось свойства description

Улучшения

• Документация: отключили парсинг свойств и методов компонента при запуске команды yarn styleguide и добавили новую команду yarn styleguide:props для тех случаев, когда такой парсинг необходим (например, при изменении свойств).
• Обновили CONTRIBUTING.md, зафиксировав там наши текущие подходы к разработке (#2129)
• ContentCard: добавлен режим disabled; исправлен дизайн в случае, если карточка является ссылкой (#2135 #1506 )
• Tappable: теперь вместо селектора :focus-visible, который не работает в safari, используется решение на js.

Исправления

• Switch: исправлен курсор в disabled-режиме (#2160, fixes #2149)
• FocusTrap: исправлено падение при серверном рендеринге
• Button: в кнопку теперь можно передавать универсальные touch/mouse события onStart, onEnd, onMove

Новые фичи

• Появился ряд компонентов для отрисовки выпадающих окон (#1785):
  • Dropdown, который показывается при клике или наведении мыши, в зависимости от свойства action. Ограничений по содержимому нет. Предназначен для отрисовки части интерфейса в выпадающем окне;
  • TextTooltip, который показывается при наведении мыши. В качестве содержимого тултипа рекомендуется использовать только текст;
  • RichTooltip, который тоже показывается при наведении мыши. В отличие от TextTooltip, имеет меньше ограничений по содержимому тултипа. Компонент всё ещё предназначен для информирования пользователей, но внутри допускаются кнопки, ссылки, картинки.
• Наличие у девайса ховер-эффекта теперь определяется в AdaptivityProvider и может быть переопределено через свойство deviceHasHover (#2115)
• Документация: теперь у всех компонентов можно посмотреть список всех пропсов (#2119)

Улучшения

• Cell: теперь в режиме selectable можно прокидывать value, которые применится к <input type="checkbox" /> (#2102, спасибо @MrZillaGold)
• Типы: теперь экспортируем FooterProps (#2113, closed #2051)
• В ActionSheet вернули логику отложенного вызова onClick компонента ActionSheetItem. Для решения проблемы актуального объекта события добавили коллбэк onImmediateClick

Исправления

• Progress: исправлено отображение прогресса меньше 0% и больше 100% (#2103, fixes #2105, спасибо @MrZillaGold)
• Cell: исправлен конфликт слушателей для mode="removable" на iOS (#2107, fixes #2100, 🤗 @MrZillaGold)
• ActionSheet: теперь клик по <ActionSheetItem autoclose /> будет срабатывать сразу, а не отложено после анимации закрытия. Это сделано для того, чтобы в onClick попадал эвент с ненулевым currentTarget (#2108)
• TabbarItem: исправлены закруления в режиме segmented (#2097 #2109)

Исправления

• TabbarItem: добавлена документация и исправлены эффекты нажатия (#1361)
• Убрали использования методов NodeList.forEach и Array.from, из-за которых возникали ошибки в Chrome < 51 (#2099, fixes #2098)