VKUI

Breaking changes

• Удален getClassName(), который добавлял CSS селектору компонента платформу (#3258)
• Spacing: удалено свойство separator (#3260)

Исправления

• [Breaking changes] GridAvatar: поправили проблему, что не видны переданные аватары (#3300)

  Была проблема, что внутри использовался Avatar вместо ImageBase. Перевели на ImageBase (см. Миграция с v4 на v5)

• [Breaking changes] Avatar, Image, GridAvatar: вернули параметр shadow – переименовали в withBorder (#3303)
• Search: поправили условия для выставления CSS классов для after и icon (#3398)

Internal

• Поправили проблему с раздуванием конечного пакета в NPM лишними файлами (#3263)
• Полностью переехали на CSS Modules, благодаря чему избавились от атрибута vkuiClass, который выставлял префикс vkui в рантайме (#3289, #3318).
  • [Breaking changes] Tappable: префикс vkui больше не добавляется к CSS классам при передаче своих значений в параметры hoverMode, activeMode (#2442)

Улучшения

• Tabs, TabsItem: добавили a11y (#3337, спасибо @k-egor-smirnov ❤️)
• ActionSheetItem добавлено свойство iconСhecked для изменения иконки в selectable режиме (#3399)

Исправления

• PanelHeaderContext: исправили вызов события onClose при рендере на платформе VKCOM и версии react >= 17.* (#3367)
• ModalPage: исправили сломанные модальные окна в старых браузерах (#3382)
• View: исправляет двойной вызов onSwipeBack во View (#3391)

Исправления

• Обновлен Appearance, исправлены цвета (#3348)

Исправления

• TabsItem: поправили Appearance токен для цвета иконки справа при mode="accent", чтобы цвета соответствовали дизайну VKCOM (#3305)
• ModalPage: поправили позиционирование для старых мобильных устройств (#3316)
• Обновлен Appearance, исправлен токен content_tint_background (#3323)

Исправления

• ModalPage: исправлена работа settlingHeight при первом открытии модальной страницы (#3297)
• PanelHeader: исправлена работа свойство separator в фиксированном PanelHeader на vkcom (#3291)
• Обновили Appearance до версии v9.51.0 (#3301)

Исправления

• FixedLayout: исправили вычисление width при смене платформы (#3233)
• View: поправили проблему со свайпом при открытой клавиатуре в iOS (#3292)
• Вернули типизацию cjs для нестабильных компонентов (#3293)
• WriteBar: заменили тэг form на div; добавили aria-hidden для иконок (#3190)

Это пре-релиз v5 версии. Полный список изменений смотрите в документации по миграции с v4 на v5.

Breaking changes

• Обновили минимально поддерживаемые версии зависимостей: React до 17, Typescript до 4.
• Обновили минимально поддерживаемую версию Android до 5.
• Изменили подход к адаптивности — теперь мы опираемся на CSS — и благодаря этому поддержали SSR.
• Переехали на новую систему токенов, vkui-tokens, и отказались от Appearance. Сделали транслятор токенов, чтобы облегчить переход на vkui-tokens.
• Убрали все устаревшие свойства и компоненты.

Фидбек ❤️

Для очевидных багов создавайте issues. Для всех остальных обсуждений есть дискуссии :)

Новые фичи

• UsersStack: новое свойство count для счетчика (#3079)
• Group: новое свойство padding для карточек (#3078)
• Header: добавили поддержку токенов для padding (#3122)
• Calendar: добавили возможность прокидывать свойства для внутренних компонентов (#3138)
• SimpleCell: привели в соответствие с дизайном в фигме (#3139)

Улучшения

• Экспортирован компонент VisuallyHiddenInput для a11y (#3104)

Исправления

• ChipsSelect: добавили свойство forceDropdownPortal и fixDropdownWidth (#3140)
• Gallery: исправлен прыгающий скролл при изменении элементов (#3131)
• TabsItem: поправили Appearance токен для цвета шрифта и иконки при mode="accent", чтобы цвета соответствовали дизайну VKCOM (#3181)

Исправления

• Link: исправлен токен цвета (#3091)
• View: исправлено закрытие клавиатуры (#3114)

Новые фичи

• FormLayoutGroup: добавили свойство segmented (#2948)
• UsersStack: добавили поддержку SSR для масок (#3054)
• DateInput: возможность отключить календарь (#3068)
• DateRangeInput: возможность отключить календарь (#3068)

Улучшения

• Alert : перевели на vkui-tokens (#2922)
• ModalDismissButton : перевели на vkui-tokens (#2895)
• Panel, PanelHeader, PanelHeader* : перевели на vkui-tokens (#2959)
• Улучшили документацию Calendar (#2978)
• Header : перевели на vkui-tokens (#2990)
• Прописали поддержку React 18 (#2995)
• ActionSheet, ActionSheetItem : перевели на vkui-tokens (#2852)
• FormStatus : перевели на vkui-tokens (#3019)
• PromoBanner : перевели на vkui-tokens (#3019)
• ModalPageHeader : перевели на vkui-tokens (#2944)
• ModalPage: внесли пару изменений (#2944)
  • : перевели на vkui-tokens
  • Добавили параметр size. Теперь можно менять максимальную ширину.
• Search : перевели на vkui-tokens (#2864)

Исправления

• IconButton: вернули возможность перебить свойства activeHover и activeEffectDelay (#2890, см. https://github.com/VKCOM/VKUI/pull/2890/commits/25b1e5b579dc35474b91abbdb28f3cc65b92562d)
• Документация: поправили ссылки на примеры и редактируемый код для страниц, где примеров кода больше одного (#3001)
• Header: цвет текста для mode="tertiary" перебивался при передаче числового значения в параметр indicator (#3026)

Deprecations

• ⚠️ Компонент FormStatus устарел. Используйте Banner

Internal

• ChipsInput и ChipsSelect: улучшили внутреннюю реализацию компонентов (#2890)
• Обновили версию @vkontakte/icons до v1.184.0 (#3024)

⚠️ Версия @vkontakte/icons также изменилась на ^1.184.0 в peerDependencies. Не забудьте обновиться и в своих проектах!

# npm
npm install --save-exact @vkontakte/[email protected]

# yarn
yarn add --exact @vkontakte/[email protected]

Исправления

• Поправили парсинг невалидных uri (#2992)
• PanelHeader, PanelHeaderContent: исправили отсутствие отступа (before = null), добавили скрытие длинного заголовка в троеточие на платформе VKCOM (#3007)
• Spacing: не работали значения separator=top/bottom (#3010)
• Banner: исправили доступность баннера с asideMode !== "expand" (#3008)

Исправления

• Ошибка при нажатии на селектор Select (#2980)
• В Calendar не выбирается январь (#2976)

Исправления

• В react-scripts <= v5.0.0 снова падала сборка с ошибкой в vkui.css (#2964)
• HorizontalScroll: исправлена иконка управления (#2965)

Улучшения

• Epic : перевели на vkui-tokens (#2865)
• SimpleCell : перевели на vkui-tokens (#2810)
• TabbarItem : перевели на vkui-tokens (#2847)
• WriteBar : перевели на vkui-tokens (#2899)
• WriteBarIcon : перевели на vkui-tokens (#2906)
• HorizontalCell : перевели на vkui-tokens (#2902)
• Tabs, TabsItem: внесли несколько изменений (#2781)
  • перевели на vkui-tokens
  • Добавили новый mode – "accent"
  • Добавили параметр status
  • Исправили проблему с переполнением (#2536)
  • ⚠️ Deprecated mode="buttons" и mode="segmented" теперь отмечены как устаревшие (см. подробности в документации компонента)
• Snackbar : перевели на vkui-tokens (#2918)
• SplitLayout : перевели на vkui-tokens (#2921)
• Dropdown: добавили возможность открытия/закрытия с клавиатуры (#2863)

Исправления

• Group: использовался неверный токен для border-radius (#2942)
• CustomSelectOption: для --vkui--size_option_hierarchy--regular не срабатывал плагин custom-properties-fallback (#2951)
• Поправили прозрачность для плейсхолдеров в Firefox (#2949)
• MiniInfoCell: исправили токен иконки, добавили токены на типографию (#2953)
• FixedLayout: поправили документацию (#2939)

Internal

• Перешли на cssnano для сжатия css (#2876)
• View: переписали на FC (#2850)
• CustomScrollView : перевели на vkui-tokens (#2914)
• CustomSelect: переписали на FC (#2455)
• Добавили eslint плагин для проверки поддержки браузерами используемого функционала (#2794)
• Обновили .browserslistrc до актуального состояния (#2794)
• Добавили новые шаблоны для создания багов/фичей (#2927)

Исправления

• Button: align не работал для кнопки размера l (#2870)
• Button: вернули возможность перебить свойства hoverMode и activeMode (#2872)
• RichTooltip: sameWidth=true вызывал бесконечный цикл (#2915)
• Switch: Некорректные отступы у before элемента в SimpleCell (#2929)
• Group: исправлена опечатка в документации (#2930, cпасибо @SecondThundeR)

Исправления

• В режиме StrictMode со Strict Effects удаляется класс vkui (#2874)
• SplitCol: вернулся отступ через margin вместо padding (#2900)
• ChipsSelect: Не обновляется позиция выпадающего окна по смене высоты поля ввода (#2792)
• ScreenSpinner: исправлен цвет при использовании vkui-tokens #2907
• FormField: поправили токены – не был применён токен для высоты (#2898)

Internal

• Исправили ошибку, из-за которой не показывались свойства в документации (#2893)

Улучшения

• ScreenSpinner : перевели на vkui-tokens (#2624)
• Placeholder : перевели на vkui-tokens (#2624)
• Separator : перевели на vkui-tokens (#2624)
• Group : перевели на vkui-tokens (#2772)
• RichCell : перевели на vkui-tokens (#2807), добавили два новых параметра — subhead и afterCaption
• Cell : перевели на vkui-tokens (#2816)
• Gradient : перевели на vkui-tokens (#2833)
• ButtonGroup: добавили свойство align (#2815)
• Поддержали типы из react 18 (#2758)
• Поддержали вложенный ConfigProvider (#2775)
• Добавили возможность задавать кастомный portalRoot (#2824)
• Добавили возможность отключить отображение компонентов в портале (#2843)
• HorizontalCell: добавили параметр arrowSize для регулировки размера стрелок влево/вправо (#2844)

Исправления

• SegmentedControl : поправили токены (#2851)
• Search поправили токены (#2857)

Internal

• Избавились от остатков defaultProps в функциональных компонентах (#1586)
• Избавились от React.FC (#2770)

Исправления

• Avatar: используем object-fit: cover, чтобы не сжимались непропорциональные картинки (#2821)
• Epic: используем верную константу с шириной в предупреждении с рекомендацией (#2809)
• Button: убрали лишнее смещение на 1px (#2819)
• ConfigProvider: по умолчанию устанавливал scheme="undefined" (#2832)
• Dropdown: исправлен цвет фона (#2840)

Исправления

• CustomSelect: не перерассчитывалось расположения асинхронного меню (#2745)
• Не верно задавались fallback значения для css custom properties (#2785)
• File: добавлены свойства after и loading (#2779)
• FixedLayout: исправлен отступ под PanelHeader на iOS и VKCOM (#2796)

Исправления

• Title: тип level опционален (#2753)
• ModalCard: ModalCard при появлении выглядывал снизу на 8px (#2764)
• Добавлен полифил для padstart (#2761)
• WriteBar: убрали прокрутку, пока не достигнуто значение max-height (#2757)
• ModalPage: пока не тапнешь на модалку скролл не работал (#2245, cпасибо @eolme)