Release v7.0.0-beta.2 · VKCOM/VKUI

BREAKING CHANGE

Button: изменен цвет компонента в состоянии mode="primary" и appearance="neutral", при миграции рекомендуется выставлять mode="secondary" при appearance="neutral" (#7802)
Пример миграции
```
<Button
  appearance="neutral"
+ mode="secondary"
/>
```
ScreenSpinner: удалён a11y-текст по умолчанию, передавайте нужный текст в children или label свойства. (#7821)
PanelHeader: теперь не переопределяет цвет компонента Spinner, поэтому, если вы использовали компонент Spinner внутри PanelHeader, передавайте <Spinner noColor /> (#7820)

FormItem: удалено свойство topNode, вместо него можно использовать свойство top (#7837)

Пример миграции

<FormItem
- topNode={
+ top={
    <FormItem.Top>
      <FormItem.TopLabel htmlFor="about">Дополнительная информация</FormItem.TopLabel>
      <FormItem.TopAside>0/100</FormItem.TopAside>
    </FormItem.Top>
  }
>
  <Textarea id="about" name="about" />
</FormItem>

DatePicker: компонент был удален, так как являлся устаревшим. На замену ему можно использовать Input, Select и DateInput. О том что лучше использовать, можно прочитать в обсуждении #7070 (#7840)

SimpleCell: свойство subhead переименовано в overTitle (#7861)

Пример миграции

<SimpleCell
  onClick={() => {}}
- subhead={"Subhead"}
+ overTitle={"Subhead"}
  indicator="При использовании"
>
  Геолокация
</SimpleCell>

Cell: свойство subhead переименовано в overTitle (#7861)

Пример миграции

<Cell
  onClick={() => {}}
- subhead={"Subhead"}
+ overTitle={"Subhead"}
  indicator="При использовании"
>
  Геолокация
</Cell>

CellButton: свойство subhead переименовано в overTitle (#7861)

Пример миграции

<CellButton
  onClick={() => {}}
- subhead={"Subhead"}
+ overTitle={"Subhead"}
  indicator="При использовании"
>
  Геолокация
</CellButton>

Header: свойство mode было удалено. Логика удаления свойства mode: (#7863)
size="l" mode="primary" заменяется на size="xl"
size="m" mode="primary" заменяется на size="m"
mode="tertiary" заменяется на size="m"
mode="secondary" заменяется на size="s"
Calendar: свойство onClose переименовано на onDoneButtonClick (#7880)
Select: для указания невыбранного состояния теперь необходимо использовать null вместо undefined или пустой строки. То же самое относится и к CustomSelect и NativeSelect (#7822)

Старое значение	Новые свойства
inherit	mode="inherit" (без изменений)
primary	mode="primary" appearance="accent"
secondary	mode="primary" appearance="neutral"
prominent	mode="primary" appearance="accent-red"
contrast	mode="contrast" appearance="accent"

Link: теперь для передачи иконок следует использовать параметры before и after, CSS свойства, которые через каскад задавались переданным иконкам в children, удалены (#7957)
Пример миграции
```
<Link
  href="#"
+ after={<Icon12Example />}
>
  Текст ссылки
- <Icon12Example />
</Link>
```
PanelHeaderButton:
- у пресета PanelHeaderClose удалено свойство children. Теперь для прокидывания текста для a11y нужно прокидывать его в свойствоlabel (#7874)
- у пресета PanelHeaderSubmit удалено свойство children. Теперь для прокидывания текста для a11y нужно прокидывать его в свойствоlabel (#7874)
- у пресета PanelHeaderEdit удалены свойства children и label. Вместо label можно использовать свойства doneLabel и editLabel. Свойство children не использовалось. (#7874)
- у пресета PanelHeaderBack удалено свойство children. Теперь для прокидывания текста для a11y нужно прокидывать его в свойство label. Логика отображения label осталась как была, в отличие от других пресетов. Также для более точно настройки label были добавлены свойства hideLabelOnVKCom и hideLabelOnIOS, чтобы можно было скрывать label на соответствующей платформе.

Улучшения

Header: добавлены значения для свойства size: 's' и 'xl' (#7863)
Select: в колбэк onChange помимо ChangeEvent теперь прокидывается новое значение вторым аргументом. Рекомендуется использовать именно второй аргумент. То же самое относится и к CustomSelect и NativeSelect (#7822)
Пример
```
<Select
  id="select-type-select-id"
  value={selectType}
  placeholder="Не задан"
  options={selectTypes}
- onChange={e => setSelectType(e.target.value)}
+ onChange={(_, newType) => setSelectType(newType)}
/>
```
useScrollLock: теперь при <AppRoot scroll="global" /> в <html> добавляется overscroll-behavior: none, чтобы избегать pull-to-refresh. (#7881)
Card: добавлен mode "plain" (#7824)
Flex: импортирован тип FlexItem для Flex.Item (#7892)
ChipsInput: импортированы типы ChipOptionValue и ChipOptionLabel (#7892)
CustomScrollView: импортирован тип CustomScrollViewProps (#7892)
DateInput:
- добавлено свойство onCalendarOpenChanged - колбэк, срабатывающий при открытии/закрытии календаря (#7878)
- Добавлены свойства для установки data-testid у вложенных элементов (#7705)
DateRangeInput:
- добавлено свойство onCalendarOpenChanged - колбэк, срабатывающий при открытии/закрытии календаря (#7878)
- Добавлены свойства для установки data-testid у вложенных элементов (#7705)
Calendar:
- Добавлено свойство doneButtonShow для скрытия кнопки "done" (#7736)
- Добавлено свойство doneButtonDisabled для блокирования кнопки "disabled" (#7736)
- Добавлены свойства для установки data-testid у вложенных элементов (#7705)
CalendarRange: Добавлены свойства для установки data-testid у вложенных элементов (#7705)
Popover: расширен тип свойства restoreFocus до boolean | 'anchor-element' | HTMLElement для указания на какой элемент будет возвращен фокус после закрытия Popover. Полезно для кейса с Popover с trigger="hover", при установке restoreFocus="anchor-element" фокус всегда будет возвращаться в якорный элемент (#7806)
Counter:
- добавлено свойство appearance, которое отвечает за цвет (#7919)
- добавлено свойство color, с помощью которого можно изменить цвет компонента. Работает только совместно с appearance="custom" (#7919)
Link: появился параметр noUnderline, отключающий подчеркивание при наведении (#7957)
Spacing: добавлена возможность передать css-переменную в size (#7955)
Separator: добавлена возможность передать css-переменную в size (#7955)
добавлен экспорт AppRootPortal (#7996)
HorizontalCell:
- добавлено свойство textAlign для выравнивания типографических элементов (#7980)
- добавлено свойство noPadding, отключающее отступы у крайних элементов (#7980)

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

Добавлен экспорт FloatingArrow, использующийся компонентами Popover, Tooltip, Popper (#7977)

Исправления

Gallery:
- исправлено мерцание при переключении слайдов (#7842)
- не работало переключение слайдов в условиях, когда общая ширина слайдов меньше контейнера, но за счёт отступа из-за выравнивания по центру (align="center") слайды немного не помещаются в контейнере. (#7862)
- теперь во время drag происходит остановка автопереключения слайдов (#7877)
- исправлена ошибка при отсутствии слайдов в режиме looped (#7686)
Button: кнопка со свойством loading была кликабельна (#7830)
В некоторых компонентах свойство style имело мало приоритетности (#7854)
CustomSelect: Исправлена проблема с элементами списка у которых value="" issue #7696 (#7822)
Tappable:
- вернули работу hasActive свойства, исправили отсутствие activated-состояния при некоторых условиях (#7906)
- в кликабельных компонентах исправлена проблема, когда при касании через тач появлялся системный оверлей (#7908)
- возвращена компенсация отступа при оборачивании Header (#7958)
EllipsisText: не срабатывал параметр Component (#7909)
HorizontalCell: добавлено корректное вычисление ширины внутреннего контента (#7916)
Group: исправлено отображение сепаратора на iPhone 15 (#7930)
HorizontalScroll: исправлена проблема с отсутствием скрола при наведении на стрелки (#7882)
DateInput: инициализируем секунды и миллисекунды (часы и минуты при вводе без времени) нулевыми значениями при ручном вводе даты (#7872)
Исправлены ошибки в Content Security Policy (CSP) связанные с тем, что в CustomResizeObserver создавался iframe с src="javascript:void(0)", теперь iframe создается без явного указания src, что позволяет браузеру самостоятельно заполнить это поле. Значение по умолчанию для браузеров: src="about:blank" (#7933)
Search: исправлен отступ при Group в режиме mode="plain" (#7962)

Сборка

package.json:
- добавлено пропущенное поле "type": "module" (#7939)
- добавлен default в поля в "exports" (#7983)
Поправлена проблема с Avatar.Overlay для Next.JS (#7984)

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

Flex: добавили возможность не задавать свойство gap (#7899)

Зависимости

@vkonktate/vkjs обновлён с 1.3.0 до 2.0.1 (#7939)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v7.0.0-beta.2

BREAKING CHANGE

Улучшения

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

Исправления

Сборка

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

Зависимости