VKUI

Улучшения

• Snackbar: добавлена возможность регулировать положение по высоте (отступ от нижнего края) с помощью свойства offsetY (#5162)
• Progress: новое свойство height для возможности задать свою высоту (#5455)
• ActionSheet: больше нет необходимости прокидывать дефолтный iosCloseItem (#5502)
• Search: добавлено свойство noPadding (#5522)
• SubnavigationButton: добавлено свойство appearance (#5527)
• Alert: добавлено свойство renderAction (#5530)
• Alert: добавлено свойство actionsAlign (#5530)

Исправления

• Link: line-height мог выставляться браузерными стилями (#5519)
• NativeSelect: selectType не влиял на отображение (#5539)
• Search: не работал тач по крестику (#5529)
• Button: исправлены цвета фона Counter в mode=primary (#5532)
• Tooltip: больше не скрывается, при активном модальном окне (#5505)
• PopoutWrapper: исправлено наложение элементов (#5555)

Исправления

• Search: исправили цвет placeholder (#5490)
• Поправили типографику некоторых элементов форм (#5430)
• Alert: исправлено дублирование id элементов (#5400)

Исправления

• Switch: компонент выделялся в safari (#5465)
• AppRoot: компонент больше не удаляет внешний портал, переданные через свойство portalRoot при размонтировании (#5046)
• Search: поле ввода не растягивалось на firefox (#5470)
• Search: исправлен вызов onCancel (#5460)
• FormItem: улучшена a11y (#5422 спасибо @scffs)
• SubnavigationBar: улучшена a11y (#5225 спасибо @scffs)
• Slider: в режиме multiple не доходит до конца если длина не кратна step (#5284 спасибо @scffs)

Warning

Обновили @vkontakte/icons до v2.41.0 в peerDependencies. Не забудьте обновиться в своих проектах!

Улучшения

• SimpleCell: добавлено свойство chevronSize и expandable: 'auto' | 'always' (#5329)
• Banner: добавлено свойство noPadding (#5187)
• ChipsInput:
  • добавлено свойство addOnBlur (#5335)
  • добавлен экспорт типов RenderChip и ChipOptions (#5448)

Исправления

• Spinner: спиннер в некоторых условиях мог криво крутиться (#4840)
• ModalCard:
  • размер шрифта заголовка Subhead теперь зафиксирован на sizeY="regular" (#5397)
  • поправлены отступы и закругления (#5425)
• ModalPage: в мобильном виде открывался при каждом открытии с разной высотой (#5402)
• ModalPage: исправлены высота открытия модального окна и отсутствие скролла (#5402)
• TabbarItem: в JSX была лишняя проверка на добавления несуществующего CSS селектора (#5281, спасибо @scffs ❤️)

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

• Group: дополнена информация по автоматическому определению mode (#5370)
• WriteBar: у FixedLayout отсутствовало свойства filled (#5433)
• CONTRIBUTING.md: исправлена документация (#5375, спасибо @mshukilovich)
• Поправили вёрстку документации в styleguide (#5398, #5424)
• Поправили ссылку на VK Mini Apps в README.md (#5277, спасибо @scffs ❤️)

Internal

• mitt обновлён с 3.0.0 до 3.0.1 (#5442)

Unstable улучшения

• unstable_HorizontalCellShowMore: новый unstable компонент HorizontalCellShowMore. Элемент Показать все для использования внутри HorizontalScroll. (#5328)

Исправления

• Group: вернули отступы Group в модальных окнах (#5371)
• Root, Epic, Root, View, ModalRoot: Исправлена типизация свойства children (#5395)

Исправления

• Group: исправлена работа адаптивности (#5364, #5344)
• Header: исправлена работа multiline для subtitle, исправлена работа адаптивности (#5365)

Исправления

• HorizontalScroll: вернули сдвиг контента при наведении на стрелки (#5326)
• PullToRefresh: ширина блока в котором лежит спинер теперь зависит от ширины PullToRefresh (#5279)
• CustomSelect: не работал выбор в 18 реакте, на новом рендере, на тач устройствах (#2432)
• ConfigProvider: исправлено автоопределение через bridge (#5304)
• Spinner: aria-label не зачитывается скринридером (#5262)

Исправления

• FormItem: при передаче htmlFor, текст переданный в top, оборачивается в <label> (#5211, спасибо @scffs)
• ModalCard: не работало свойство getRootRef (#5224)
• TabbarItem: не работало свойство getRootRef (#5269)
• PanelHeader: между несколькими элементами переданных в after не было отступа (#5272)

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

• Страница PanelHeader теперь снова доступна (#5248)

Internal

• @floating-ui/react-dom обновлён с 2.0.0 до 2.0.1 (#5236)

Исправления

• ActionSheetItem: исправлен отступ иконки (#5158)
• Tabbar: исправлен отступ снизу от текста (#5156)
• TabbarItem: жесткое перебитие font-size и line-height компонента Footnote, в контексте Tabbar, заменено на переопределение CSS переменных Footnote (#5196, спасибо @scffs ❤️)
• Элементы с contenteditable теперь можно редактировать на мобильных устройствах (iOS <= 14.*) (#5186)
• Banner: Неверный цвет у крестика при
  mode="image" imageTheme="light" asideMode="dismiss" (#5198)

Улучшения

• Tappable: добавлено свойство hovered (#4636)

• Cell: добавлен новый компонент Cell.Checkbox (#4819)

• Popper, Tooltip, RichTooltip, TextTooltip: добавлена возможность прокидывать кастомную стрелку (#5022)

  const ARROW_HEIGHT = 11;
  
  /**
   * @param {React.SVGAttributes<SVGSVGElement>} props
   */
  const CustomIcon = (props) => {
    return (
      <svg
        width="80"
        height={ARROW_HEIGHT}
        viewBox={`0 0 80 ${ARROW_HEIGHT}`}
        xmlns="http://www.w3.org/2000/svg"
        {...props}
      >
        <path d="M40 0C33 5.5 20 10 0 10v1h80v-1C60 10 47 5.5 40 0Z" fill="currentColor" />
      </svg>
    );
  };
  
  const App = () => {
    return (
      <TooltipContainer>
        <Tooltip
          text="У этого тултипа кастомная стрелка"
          offsetY={ARROW_HEIGHT}
          arrowPadding={6}
          ArrowIcon={CustomIcon}
        >
          <div
            style={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
            }}
          >
            Якорь
          </div>
        </Tooltip>
      </TooltipContainer>
    );
  };
  
  <App />;
  

• Popper: добавлена возможность прокидывать portalRoot (#5097)

• Header: обновлен дизайн для vkcom (#5084)

• ScrollArrow: новый компонент стрелки (#4649)

• CustomScrollView: добавлен параметр onScroll (#5098)

• Slider: добавлена доступность (#4961)

• RangeSlider: отмечен как @deprecated и будет удалён в v6 – используйте Slider (#4961)

• ButtonGroup: добавлена возможность использовать align вместе с mode="horizontal" (#5125)

• Progress: новое свойство appearance (#5131)

• Placeholder: новое свойство withPadding (#4948)

• AspectRatio: добавлен новый компонент для отображения медиа-контента в определенных пропорциях (#5153)

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

• CustomSelect: дополнено описание renderOption (#5165)

• CustomSelectOption: дополнено описание disabled (#5165)

Internal

• Подключили VK stylelint конфиг (#5152)

  CSS | 271.49 KB (-0.03% 🔽)
  CSS (gzip) | 35.38 KB (-0.06% 🔽)
  CSS (brotli) | 28.04 KB (+0.01% 🔺)

Исправления

• PanelHeaderContent: без передачи before у контента отсутстовал отступ слева на платформе VKCOM (#5096)
• View: исправлена тень на ios (#5124)
• WriteBar: исправили стили тёмной темы на ios, исправили позиционирование иконок и привели в соответствие с дизайном (#4850)
• ChipsSelect: исправленно поведения фокуса на элементах в выпадающем меню (#5129)
• CustomSelectOption: вызывался onClick даже если компонент в состоянии disabled (#5126)
• NativeSelect: исправлено двойное озвучивание выбранного элемента скринридером (#5132)
• Calendar: Не обновлялся сегодняшний день, при неактивной вкладке (#5151)
• ModalPage: не сбрасывается сотояние при закрытии модалки (#4380, спасибо @Akcent1132)
• CustomSelect:
  • clearButton показывался при клике на элемент дропдауна даже если props.value не менялось и оставалось пустым (#5126)
  • если при первом нажатии на пункт меню onChange не изменял value, то последующие нажатия на этот пункт меню не вызывали повторно onChange (#5123)

Исправления

• VisuallyHidden: вернули корректное отображение документации (#5020)
• PanelHeader: отметили PanelHeader.Content как @deprecated, вместо него добавили typographyProps (#4990)
• MiniInfoCell: добавили word-break (#4979)
• PullToRefresh: исправили моргание на iOS (#5087)
• Avatar: свойство withBorder всегда добавляет обводку (#4199)
• HorizontalCell: синхронизировали свойства компонента с дизайном (#4199)
• FormLayoutGroup: удалили св-во isolation в корне элемента, из-за него не срабатывал z-index у всплывающего элемента, который рендерится без портала (#5089)
• ActionSheet: синхронизировали вид и свойства компонента с дизайном (#4678)
• ModalRoot: исправили открытие модальной страницы при открытой клавиатуре (#5088)
• Cell: draggable конфликтовал с событиями сворачивания ModalPage (#4985)

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

• Некорректно работал поиск при вводе Header (#4990)

Internal

• Исправили пример компонента Link в Storybook (#5016)
• Добавили в некоторые компоненты скрытые визуально пробелы, чтобы текст внутри этих компонентов корректно читался скринридерами (#4935)

Исправления

• Исправлена сборка css бандла (#4964)
• DateRangeInput: не работал ввод с клавиатуры (#4950)

Улучшения

• Popover: добавили свойство restoreFocus (#4638)
• Типографические компоненты: добавили свойство normalize (#4753)
• Select: добавлено свойство icon (#4503)
• Radio, Checkbox: добавлено свойство titleAfter (#4758)
• HorizontalScroll: добавлено свойство arrowOffsetY (#4530)
• Новый компонент VisuallyHidden (#4640)

CSS Modules

Добавили специальную версию c CSS Modules и ESNext. Сборка позволяет уменьшить размер приложения, однако для её использования необходимо дополнительно настроить сборщики.

Исправления

• SSRWrapper: исправлено определение iOS (#4766)
• NativeSelect: исправлена работа свойства before (#4503)
• ModalPage: исправлена доступность (#4808)
• VisuallyHiddenInput: устарел и будет удален в v6. Используйте <VisuallyHidden Component="input" /> (#4640)
• Placeholder: компонент заходил за заголовок со свойством stretched (#4809)
• Header: компонент не соответствовал дизайн-системе VKUI (#4871)

Internal

• Добавили пробел в getTitleFromChildren, чтобы получившийся текст правильно читался скринридерами (#4573)
• ModalRootDesktop переписан на FC (#4769)
• Обновили @vkontakte/vkui-tokens с 4.32.1 до 4.33.0 (#4831)

Исправления

• Separator, Spacing: исправили доступность для скринридера (#4736)
• SubnavigationButton: теперь скринридер правильно зачитывает весь контент кнопки(#4574)
• ModalPage: Исправлен safe area отступ (#4897)
• RichCell: Добавлен word-break (#4903)
• Button: Исправлено поведение типографики для платформ отличных от android (#4905)

Исправления

• Tappable: исправили поведение курсора (#4628)
• ModalPage: ModalPage__content-in задан height: 100% (#4625)
• ModalPage: исправили закругление без заголовка (#4624)
• Counter: исправили фон для mode=secondary(#4608)
• CustomSelect: исправили работу getRef (#4650)
• TabbarItem: исправили примеры и логику появления варнинга о доступности компонента в консоли (#4629)
• Search: неверный фон в модальных окнах (#4654)
• UsersStack: исправили зачитывание скринридером текста (#4675)
• ChipsInput: теперь свойство mode прокидывается до FormField (#4703)
• FormStatus: добавили getRootRef в типы (#4702)
• Banner: добавили возможность получить ref компонента (#4702)
• PromoBanner: устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd (#4693)

Улучшения

• Новый компонент Accordion (#4452)
• HorizontalScroll: Добавлено свойство scrollOnAnyWheel для прокрутки на любое колесо мыши (#4390)
• Добавили в экспорт типы HasRef и HasRootRef (#4448)
• Counter: изменен цвет secondary счетчика (#4491)
• NativeSelect, CustomSelect, ChipsSelect: по разному сокращался длинный текст в placeholder (#4497, спасибо @Akcent1132 ❤️)
• UsersStack: добавлено свойство direction для управления положением контента (свойство layout устарело) (#4416)
• CustomSelect: добавлено свойство allowClearButton для возможности очистить значение (#4471)

Исправления

• DatePicker: исправлено выравнивание текста (#4579)

Internal

• Мы перешли на swc вместо babel (#4189)

Исправления

• UsersStack: не скрывался счетчик при числе > 99 (#4441)
• WriteBarIcon: сбросили браузерные стили (#4451)
• List: починили пример в документации (#4482)
• SplitCol: свойтво spaced устарело, используйте autoSpaced (#4493)
• Input: больше не уводит введённый текст в многоточие (#4514)
• PopperArrow: исправлена проблема с белой полоской между контентом и стрелкой (#4496)
• AdaptivityProvider: исправлена проблемe с двойным рендером при инициализации компонента (#4558)

Other

• getPlatformClassName() – теперь @deprecated и будет удалён в v6 (#4315)

Улучшения

Group: бэкпорт #4422

Исправления

• Gallery: теперь галерея стабильно обрабатывает событие тапа, следующее за тач-драгом (#4433)