Releases: VKCOM/VKUI
v6.7.4
Исправления
- Gallery:
- не работало переключение слайдов в условиях, когда общая ширина слайдов меньше контейнера, но за счёт отступа из-за выравнивания по центру (
align="center"
) слайды немного не помещаются в контейнере. (#7862) - теперь во время
drag
происходит остановка автопереключения слайдов (#7877) - исправлена ошибка при отсутствии слайдов в режиме
looped
(#7686)
- не работало переключение слайдов в условиях, когда общая ширина слайдов меньше контейнера, но за счёт отступа из-за выравнивания по центру (
- HorizontalScroll: исправлена проблема с отсутствием скрола при наведении на стрелки (#7882)
- DateInput: инициализируем секунды и миллисекунды (часы и минуты при вводе без времени) нулевыми значениями при ручном вводе даты (#7872)
- Tappable: вернули работу hasActive свойства, исправили отсутствие activated-состояния при некоторых условиях (#7910)
- Исправлены ошибки в
Content Security Policy (CSP)
связанные с тем, что вCustomResizeObserver
создавалсяiframe
сsrc="javascript:void(0)"
, теперьiframe
создается без явного указанияsrc
, что позволяет браузеру самостоятельно заполнить это поле. Значение по умолчанию для браузеров:src="about:blank"
(#7933)
Улучшения
- DateInput:
- DateRangeInput:
- Calendar:
- CalendarRange: Добавлены свойства для установки
data-testid
у вложенных элементов (#7705) - Popover: расширен тип свойства
restoreFocus
доboolean | 'anchor-element' | HTMLElement
для указания на какой элемент будет возвращен фокус после закрытияPopover
. Полезно для кейса сPopover
сtrigger="hover"
, при установкеrestoreFocus="anchor-element"
фокус всегда будет возвращаться в якорный элемент (#7806)
v6.7.3
Исправления
- Button:
loading
неверно отображался вcssm
-сборке. (#7734) - CustomSelect: для
touch
-устройств исправлен фокус на инпуте при клике наCustomSelect
ближе к правому краю, в районе стрелки. (#7816) - FormLayoutGroup: исправлено возможное переполнение контейнера
FormLayoutGroup
, если внутри используется дваFormField
в горизонтальной ориентации и у первогоFormField
в свойствеtop
находится очень длинный текст. (#7819) - Gallery: исправлена ошибка при отсутствии слайдов в режиме
looped
. (#7686)
v7.0.0-beta.1
Tip
Чтобы упростить переход на новую мажорную версию, можно воспользоваться инструментом по автоматической миграции ваших компонентов
Подробную информацию можно найти на этой странице.
BREAKING CHANGE
🌗 Appearance
→ ColorScheme
Название Appearance
для указания светлой или тёмной темы совпадало с названием параметров некоторых компонентов, что могло путать,
поэтому пришли к названию ColorScheme
, также как свойство в CSS.
Это привело к следующим изменениям:
-
Константа
Appearance
переименована вColorScheme
(#7728)Пример миграции
- export const Appearance = { + export const ColorScheme = { DARK: 'dark', LIGHT: 'light', } as const; - const apperance = Appearance.DARK + const colorScheme = ColorScheme.DARK
-
Тип
AppearanceType
переименован вColorSchemeType
(#7728)Пример миграции
- const appearance: ApperanceType = Appearance.DARK; + const colorScheme: ColorSchemeType = ColorScheme.DARK;
-
AppearanceProvider
переименован вColorSchemeProvider
,AppearanceProviderProps
переименован вColorSchemeProviderProps
(#7728)Пример миграции
- const props: AppearanceProviderProps = { + const props: ColorSchemeProviderProps = { value: 'dark' }
Пример миграции
- <AppearanceProvider value={colorScheme}> + <ColorSchemeProvider value={colorScheme}> <AdaptivityProvider sizeY="regular"> <Div style={{ padding: 10 }}> <Textarea id="textarea" /> </Div> </AdaptivityProvider> - </AppearanceProvider> + </ColorSchemeProvider>
-
Хук
useAppearance
переименован вuseColorScheme
(#7728)Пример миграции
- const appearance = useAppearance(); + const colorScheme = useColorScheme();
-
В
ConfigProvider
иConfigProviderProps
свойствоappearance
переименовано вcolorScheme
(#7728)Пример миграции
<ConfigProvider platform="vkcom" - appearance="light" + colorScheme="light" > <AdaptivityProvider viewWidth={ViewWidth.DESKTOP} hasPointer> <Div>Content</Div> </AdaptivityProvider> </ConfigProvider>
-
В
ConfigProviderContext
свойствоappearance
переименовано вcolorScheme
(#7728)Пример миграции
<ConfigProviderContext.Provider value={{ ...configContext, - appearance: 'light' + colorScheme: 'light' }}> {children} </ConfigProviderContext.Provider>
Пример миграции
const { ...args, - appearance + colorScheme } = useConfigProvider();
💅 CustomScrollView: JS → CSS
Так как дизайн не документирует поведение ползунка и полосы прокрутки, было решено перейти на использование системного поведения
и тем самым облегчить компонент за счёт стилизации прокрутки полностью через CSS (Firefox < 64 стилизация останется браузерной) (#7703).
Note
Если по какой-то причине вам всё же нужна JS-реализация, то советуем присмотреться к готовой библиотеке react-custom-scrollbars или к другим альтернативам.
В связи с этим:
-
удалены свойства
windowResize
,autoHideScrollbar
,autoHideScrollbar
(#7703)Пример миграции
<CustomScrollView className={"className"} - windowResize - autoHideScrollbar - autoHideScrollbarDelay={1000} enableHorizontalScroll > ... </CustomScrollView>
-
удалено свойство
boxRef
, вместо него можно использовать свойствоgetRootRef
(#7703)Пример миграции
<CustomScrollView className={"className"} - boxRef={ref} + getRootRef={ref} enableHorizontalScroll > ... </CustomScrollView>
-
добавлено свойство
scrollbarHidden
для скрытия скроллбара (#7703) -
CustomSelect: удалены свойства
autoHideScrollbar
,autoHideScrollbar
(#7703)Пример миграции
<CustomSelect id="select-type-select-id" value={selectType} placeholder="Не задан" options={selectTypes} - autoHideScrollbar - autoHideScrollbarDelay={1500} onChange={(e) => setSelectType(e.target.value)} />
-
ChipsSelect: удалены свойства
autoHideScrollbar
,autoHideScrollbar
(#7703)Пример миграции
<ChipsSelect id="colors" value={selectedColors} onChange={setSelectedColors} options={colors} - autoHideScrollbar - autoHideScrollbarDelay={1500} placeholder="Не выбраны" creatable="Добавить цвет" allowClearButton={true} />
-
Select: удалены свойства
autoHideScrollbar
,autoHideScrollbar
(#7703)Пример миграции
<Select id="select-type-select-id" value={selectType} placeholder="Не задан" options={selectTypes} - autoHideScrollbar - autoHideScrollbarDelay={1500} onChange={(e) => setSelectType(e.target.value)} />
🎨 Синхронизация параметров с дизайном
Чтобы улучшить разработческий опыт при общении с дизайном, в этом релизе разом сократили расхождения по названиям параметров React с Figma.
-
-
свойство
header
переименовано наtitle
(#7785) -
свойство
text
переименовано наdescription
(#7785)Пример миграции
<ActionSheet onClose={() => {}} - header="Вы действительно хотите удалить это видео из Ваших видео?" + title="Вы действительно хотите удалить это видео из Ваших видео?" - text="Данное действие реально удалит видео, подумайте!" + description="Данное действие реально удалит видео, подумайте!" > <ActionSheetItem mode="destructive">Удалить видео</ActionSheetItem> </ActionSheet>
-
-
-
свойство
header
переименовано наtitle
(#7769) -
свойство
text
переименовано наdescription
(#7769)Пример миграции
<Alert - header="Подтвердите действие" + title="Подтвердите действие" - text="Вы уверены, что хотите лишить пользователя права на модерацию контента?" + description="Вы уверены, что хотите лишить пользователя права на модерацию контента?" actionsAlign="left" actionsLayout="horizontal" />
-
-
-
переименовано свойство
subheader
->subtitle
(#7773) -
переименовано свойство
text
->extraSubtitle
(#7773) -
переименовано свойство
header
->title
(#7773)Пример миграции
<Banner before={<Avatar size={48} src={'user_lihachyov'} />} - header="Сегодня день рождения Михаила Лихачёва" + title="Сегодня день рождения Михаила Лихачёва" - subheader="Подарите подарок" + subtitle="Подарите подарок" - text="Дополнительный текст" + extraSubtitle="Дополнительный текст" asideMode="dismiss" />
-
свойство
asideMode
переименовано наafter
(#7793)Пример миграции
<Banner before={<Avatar size={48} src={'user_lihachyov'} />} title="Сегодня день рождения Михаила Лихачёва" subtitle={"Подарите подарок"} extraSubtitle={"Дополнительный текст"} - asideMode="dismiss" + after="dismiss" />
-
-
CardGrid: свойство
spaced
переименовано наpadding
(#7804)Пример миграции
<CardGrid size="s" - spaced + padding > <Card> <div style={{ paddingBottom: '66%' }} /> </Card> </CardGrid>
-
CardScroll: свойство
noSpaces
заменено наpadding
(#7788)Пример миграции
<CardScroll size="s" - noSpaces + padding={false} > <Card> <div style={{ paddingBottom: '66%' }} /> </Card> </CardScroll>
-
Cell: свойство
expandable
переименовано наchevron
(#7787)Пример миграции
<Cell onClick={() => {}} - expandable="auto" + chevron="auto" indicator="При использовании" > Геолокация </Cell>
v7.0.0-beta.0
Tip
Чтобы упростить переход на новую мажорную версию, можно воспользоваться инструментом по автоматической миграции ваших компонентов
Подробную информацию можно найти на этой странице.
BREAKING CHANGE
- Удалена CommonJS сборка (#7611)
- Импортировать внутренности VKUI теперь запрещено на уровне свойства
exports
вpackage.json
(#7611) - Изменено внутреннее устройство названия CSS-классов – теперь за формирование класса отвечает CSS Modules (#7655)
- Типографика: теперь используется
useAccentWeight = false
по умолчанию. Когда дополнительно требуется переопределить тип начертания текста с помощью свойстваweight
-VKUI
использует токеныfontWeightBase*
. Чтобы включитьfontWeightAccent*
токены, нужно использовать свойствоuseAccentWeight
(#7633) - Header: изменен формат
size
с'regular' | 'large'
на'm' | 'l'
(#7567)- <Header mode="primary" size="large"> + <Header mode="primary" size="l"> Большой заголовок </Header>
- Spinner: изменен формат
size
с'small' | 'regular' | 'medium' | 'large'
на's' | 'm' | 'l' | 'xl'
(#7567)- <Spinner size="large" /> + <Spinner size="xl" /> - <Spinner size="medium" /> + <Spinner size="l" /> - <Spinner size="regular" /> + <Spinner size="m" /> - <Spinner size="small" /> + <Spinner size="s" />
- ScreenSpinner: удалено свойство
size
(#7523)<ScreenSpinner state="loading" - size="regular" /> <ScreenSpinner.Container> - <ScreenSpinner.Loader size="small" /> + <ScreenSpinner.Loader /> <ScreenSpinner.SwapIcon /> </ScreenSpinner.Container>
- Card: изменен тег используемый по умолчанию для ренедеринга компонента с
div
наli
(#7520) - ContentCard: изменен тег используемый по умолчанию для ренедеринга компонента с
div
наli
(#7520) - CardGrid: изменен тег используемый по умолчанию для ренедеринга компонента с
div
наul
(#7520) - CardScroll: изменен тег используемый по умолчанию для ренедеринга компонента с
div
наul
(#7520) - FormItem: у под-компонента
FormItem.TopLabel
свойствоmultiline
было удалено, теперь свойствоtopMultiline
устанавливается у компонентFormItem
(#7578)<FormItem + topMultiline top={ <FormItem.Top> - <FormItem.TopLabel htmlFor="about" multiline>Дополнительная информация</FormItem.TopLabel> + <FormItem.TopLabel htmlFor="about">Дополнительная информация</FormItem.TopLabel> <FormItem.TopAside>0/100</FormItem.TopAside> </FormItem.Top> } > <div/> </FormItem>
- Flex: изменена последовательность отступов в свойстве
gap
на[row, column]
(#7550)<Flex direction="column" - gap={[20, 10]} + gap={[10, 20]} align="center" > <div/> <div/> </Flex>
- SimpleGrid: изменена последовательность отступов в свойстве
gap
на[row, column]
(#7550)<SimpleGrid columns={2} - gap={[20, 10]} + gap={[10, 20]} align="center" > <div/> <div/> </SimpleGrid>
- HorizontalScroll: свойство
inline
удалено и теперь применяется по умолчанию. Если вы использовали дополнительные обертки, чтобы выравнивать ячейки внутри компонента, просьба пересмотреть их использование (#7582) - HorizontalCellShowMore: свойство
compensateLastCellIndent
удалено. Если вы использовали дополнительные обертки внутриHorizontalScroll
, чтобы выравнивать ячейки внутри компонента, просьба пересмотреть их использование и размещатьHorizontalCellShowMore
на том же уровне вложенности, что и остальные ячейки вHorizontalScroll
(#7582) - Spacing: удален вариант значения пропа size
3xs
, вместо него можно использовать2xs
, совпадающий по значению (#7634)- <Spacing size="3xs" /> + <Spacing size="2xs" />
- Image: у под-компонента
Image.Overlay
свойствоdisableInteractive
было удалено, вместо него теперь можно просто не прокидывать свойствоonClick
(#7628) - UsersStack: свойство
direction
заменено наavatarsPosition
со значениями'inline-start' | 'inline-end' | 'block-start'
(#7666)<UsersStack photos={['photo1', 'photo2', 'photo3']} - direction="row-reverse" + avatarsPosition="inline-end" size="s" > Иван и ещё 2 ваших друга подписаны </UsersStack>
- Button: изменен цвет компонента при
appearance="overlay"
иmode="secondary"
(#7661)
- Separator: свойство
mode
заменено наappearance
(#7687)<Separator - mode="primary" + appearance="primary" />
- CellButton: свойство
mode
заменено наappearance
со значениями'accent' | 'neutral' | 'negative'
, также дляappearance="accent"
(a.k.amode="primary"
) возвращён токен--vkui--color_text_accent
, а вот при комбинации сcentered
применяется--vkui--color_text_accent_themed
(#7684)<CellButton - mode="danger" + appearance="negative" > Создать что-нибудь </CellButton> <CellButton - mode="primary" + appearance="accent" > Создать что-нибудь </CellButton>
Улучшения
- Подняты минимальные версии браузеров (#7568)
ChromeAndroid >= 63 iOS >= 12 Chrome >= 63 Firefox >= 55 Edge >= 79 Opera >= 50 Safari >= 12 Samsung >= 8.2
- Поднята целевая версия
ECMAScript
для компиляции доes2017
(#7568) - ScreenSpinner: добавлена возможность прокинуть иконку для
state="custom"
с помощью свойстваcustomIcon
(#7523) - Checkbox: добавлена возможность передавать альтернативные иконки (#7608, спасибо @fuel-coffee ❤️)
- EllipsisText: у компонента был добавлен атрибут
title
, который отображает весь текст, переданный в компонент. Его также можно отключить, передав параметрdisableNativeTitle
(#7681) - CalendarRange: изменена логика выбора промежутка дат, теперь для сброса промежутка надо кликнуть на третью дату и можно выбрать новую дату (#7682)
Исправления
- Placeholder: при
stretched
режиме больше не выставляетсяpadding-block: inherit
(#7583) - Link: из CSS удалён зашитый отступ справа в
4px
, который выставлялся иконке. Был расчёт, что иконка всегда справа, но она может быть и слева, в этом раскладе появлялся ненужный отступ слева. Было решено отдать пользователю управлять отступами. Поэтому, если вам требуется отступ, используйте неразрывный пробел:
либо через HTML-код
,либо через сочетания клавиш ⌥ + ␣ (на MacOS) (#7579)<Link href="https://google.com" target="_blank"> - https://google.com <Icon24ExternalLinkOutline width={16} height={16} /> + https://google.com <Icon24ExternalLinkOutline width={16} height={16} /> </Link>
- Gallery: исправлена ошибка при отсутствии слайдов в режиме
looped
(#7686)
Документация
- Дополнен блок о переопределение темы через
AppearanceProvider
информацией о тонкостях работы некоторых компонентов (#7584) - Раздел CSS Modules дополнен информацией про использование пакета с
'css-loader' >= 7.0.0
(#7668)
Зависимости
v6.7.2
Исправления
- CellButton: исправлен слишком большой отступ между иконкой в
before
и текстом в режимеcentered
(#7658) - AppRoot: мемоизируем контекст
AppRootContext
, чтобы компоненты, зависящие от него, лишний раз не ререндерелись при ререндереAppRoot
(#7667)
v6.7.1
Исправления
- Select:
disabled
для опций не прокидывалось в NativeSelect (#7622) - Gallery: Поправлен баг с переходом между двумя слайдами стрелками (#7615)
- TabsItem: исправлен отступ между элементами при использовании
href
иonClick
вместе (#7629) - Spacing: Поправлен баг с отсутствием верхнего отступа при прокидывании в
size
значение типаstring
(#7632) - CustomSelect: реверт изменений #7235 #7508 (#7619)
- Tooltip: поправлен баг с закрытием тултипа при клике на якорный элемент при прокидывании disableCloseAfterClick=true (#7657)
v6.5.4
Изменения
CustomSelect: реверт изменений #7235 #7508 (#7656)
v6.7.0
Important
Как писали ранее, мы приступили к разработке следующей мажорной версии VKUI
- v7
Это последняя запланированная минорная версия по v6
.
Далее мы будем выпускать только версии с исправлением критических багов.
Исправления
- Search: поправлен баг с опаздывающей анимацией кнопки "Отмена" в iOS (#7487)
- ModalRoot: исправлены повторные вызовы
onClosed
при определенных условиях (#7543) - Alert:
onClose
теперь вызывается послеaction
(#7546) - CustomSelect: типы не соответствовали нативным типам
<input>
(#7569) - Headline: исправлена адаптивность типа начертания шрифта (
weight
) в режимеcompact
(#7551) - Вычисляемые свойства в объектах приведены к обычным там, где они были ненужны (#7571)
Улучшения
-
Calendar: Добавлен пропс
renderDayContent
для отрисовки кастомного контента в ячейке дня. Props также был добавлен вCalendarRange
,DateInput
иDateRangeInput
(#7518) -
PanelHeaderButton: добавлена поддержка компонента
Badge
вlabel
(#7526) -
Typography: добавлено свойство
useAccentWeight
для использованияfontWeightAccent
токенов, если требуется поменять начертание текста с помощью свойстваweight
. По умолчанию в VKUIuseAccentWeight={true}
, то есть при использовании свойстваweight
применяются токеныfontWeightAccent
. Если нужно, чтобы использовались токеныfontWeightBase
необходимо явно указатьuseAccentWeight={false}
(#7549)⚠️ WarningВ
v7
useAccentWeight
по умолчанию будетfalse
. -
Text: добавлено использование
compact
токеновfontWeight/fontFamily
в режимеcompact
(#7564) -
Subhead: добавлена поддержка
compact
режима для токеновfontWeight
иfontFamily
(#7566) -
DisplayTitle: добавлена поддержка
compact
режима (#7553) -
ScreenSpinner: добавлена возможность прокидывать
caption
(#7505)
-
ToolButton: при
direction="row"
теперь применяется режимrounded
что с передачейchildren
, что без; прибивается по левому краю; имеет больший отступ справа при передачеchildren
, чтобы скомпенсировать иконку (#7488) -
- добавлено новое свойство
unlockParentHover
, которое можно использовать в ситуации когда одинTappable
вложен в другой и при на ведении на дочерний нужно, чтобы hover состояние также появлялось на родительскомTappable
. Выставляется на дочернем. По умолчанию hover состояние дочернего элемента родительскому не передаётся. (#7519) - добавлено новое свойство
hasHoverWithChildren
, которое можно использовать в ситуации когда множествоTappable
вложены в другойTappable
и нужно, чтобы при на ведении на каждый из дочернихTappable
hover состояние передавалось родительскомуTappable
. Выставляется на родительскомTappable
. В такой ситуацииunlockParentHover
на дочерних компонентах можно опустить. (#7519)
- добавлено новое свойство
Зависимости
- Обновили
@swc/helpers
с 0.5.12 до 0.5.13
v6.6.0
Important
Мы приступаем к разработке следующей мажорной версии VKUI
- v7
Это значит, что мы вскоре прекратим развитие версии v6
,
выпуская только версии с исправлением критических багов.
Если у вас есть потребность в новой функциональности,
которую вы хотите видеть в v6
, пожалуйста, отпишитесь в соответствующей issue.
Улучшения
Popover
Всплывающие окна получили возможность установки фокуса на рутовом компоненте с помощью свойства auto="root"
(#7302)
ChipsSelect
- добавлено свойство
renderDropdown
(#7303) - добавлена возможность закрыть всплывающее окно кликом на стрелочку (#7462)
RichCell
Добавлено свойство afterAlign
(#7192)
Header
Добавлены свойства before
, beforeTitle
, afterTitle
, beforeSubtitle
, afterSubtitle
(#7202)
Card/CardGrid/ContentCard
Улучшена доступность (#7238)
CardScroll
Touch
Улучшена производительность компонента (#7272)
Switch:
Уменьшен размер в компактном (sizeY="compact"
) режиме (#7440)
Tooltip
Добавлено свойство closable
(#7438)
ScreenSpinner
Добавлено свойство mode="overlay" | "shadow"
(#7484)
Group
- добавлены подкомпоненты
Group.Container
,Group.Header
,Group.Description
(#7395)<Group.Container> <Group.Header> <Header>Адреса</Header> </Group.Header> <CellButton onClick={noop}>Добавить домашний адрес</CellButton> <CellButton onClick={noop}>Добавить рабочий адрес</CellButton> <Group.Description> Для использования в мини-приложениях, Delivery Club, VK Taxi и других сервисах ВКонтакте. Эти адреса видны только Вам. </Group.Description> </Group.Container>
- добавлен подкомпонент
Group.ExpandedContent
, позволяющий игнорировать горизонтальные или вертикальные отступыGroup
(#7396)
Зависимости
- обновлён пакет @vkontakte/vkui-tokens с
4.51.0
до4.53.3
(#7501)
Документация
- Storybook: добавлены пресеты для конфигурации свойств компонента (#7389)
- изменена
CDN
для работы с @vkontakte/vkui-tokens с unpkg на jsdelivr (#7483)
Внутренние изменения
- кодовая база подготовлена для работы с React Compiler, изменения затронули следующие компоненты:
- Checkbox (#7482)
- DatePicker (#7478)
- OnboardingTooltip (#7475)
- Tooltip (#7491)
- Popover (#7472)
- Spacing (#7470)
- CustomScrollView (#7479)
- удалён мертвый код (#7490)
- ModalRoot: сделан
clean-up
кода (#7344)
Исправления
v6.5.3
Исправления
- CustomSelect: исправлена проблема с изменением позиции курсора с помощью мыши (#7508)
- Image: исправлено неверное позиционирование
children
(#7511)