v6: Migration guide #6182

inomdzhon · 2023-12-01T13:28:19Z

Описание

Собираем документ по миграции с v5 на v6.

@VKCOM/vkui пишите в комментариях свои изменения из PR, будем их вносить сюда.

нужно удалить страницу миграции на v5, оставить только на v6

github-actions · 2023-12-01T13:33:35Z

👀 Docs deployed

✅ Styleguide
❌ Storybook

Commit 714b66e

codesandbox-ci · 2023-12-01T13:34:23Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 714b66e:

Sandbox	Source
VKUI TypeScript	Configuration

codecov · 2023-12-01T13:35:15Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (f22c11f) 80.78% compared to head (714b66e) 80.83%.
Report is 30 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6182      +/-   ##
==========================================
+ Coverage   80.78%   80.83%   +0.05%     
==========================================
  Files         315      307       -8     
  Lines        9800     9685     -115     
  Branches     3301     3265      -36     
==========================================
- Hits         7917     7829      -88     
+ Misses       1883     1856      -27

Flag	Coverage Δ
unittests	`80.83% <ø> (+0.05%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

inomdzhon · 2023-12-01T13:44:34Z

Дополнить доку

[BREAKING CHANGE] refactor: resolve TODO [>=] 6 #6160 – перенести из тела коммитов информацию о изменениях

inomdzhon · 2023-12-04T11:17:17Z

Note

Для раздела ## Unstable -> Stable

Popper

<Popper
- renderContent

- arrowClassName=""
+ arrowProps={{ iconClassName: "" }}

- offsetDistance={0}
+ offsetByMainAxis={0}

- offsetSkidding={0}
+ offsetByCrossAxis={0}

- onPlacementChange={({ placement }) => {}}
+ onPlacementChange={(placement) => {}}

- forcePortal
+ usePortal

- portalRoot={someHTMLElement}
+ usePortal={someHTMLElement}
/>
  <div>Target</div>
</Popper>

onPlacementChange теперь вызывается только в случае, если Popper подобрал оптимальный placement вместо пользовательского.
renderContent удалён в пользу children. Раньше из renderContent можно было получить className, который задаёт Popper, сейчас этот className пустой.
targetRef теперь умеет принимать VirtualElement.
arrowProps принимает атрибуты HTMLDivElement, а также iconStyle и iconClassName.

inomdzhon · 2023-12-05T07:48:41Z

Note

Для раздела ## Unstable -> Stable

RichTooltip

- <RichTooltip style={{maxWidth: 320}} content={
+ <Tooltip maxWidth={320} placement="bottom-start" enableInteractive text={
  <RichCell>
    Lorem
  </RichCell>
}>
  <Link style={{display: 'inline-block', margin: 20, userSelect: 'none'}}>Илья Гришин</Link>
- </RichTooltip>
+ </Tooltip>

inomdzhon · 2023-12-05T08:25:53Z

`Chip`

Свойство removeAriaLabel переименовано в removeLabel

<Chip
  value="Чип"
  removable={true}
-  removeAriaLabel="Удалить"
+  removeLabel="Удалить"
>
  Чип
</Chip>

`ChipsInput`

Свойство inputAriaLabel переименовано в inputLabel

<ChipsInput
-  inputAriaLabel="Введите название цвета"
+  inputLabel="Введите название цвета"
  id="color"
  value={colors}
  after={
    <IconButton hoverMode="opacity" label="Очистить поле" onClick={onClick}>
      <Icon16Clear />
    </IconButton>
  }
/>

inomdzhon · 2023-12-05T08:26:24Z

`Pagination`

Свойство prevButtonAriaLabel переименовано в prevButtonLabel
Свойство nextButtonAriaLabel переименовано в nextButtonLabel
Свойство getPageAriaLabel переименовано в getPageLabel и обновлено: теперь оно принимает только (isCurrent: boolean) и не нуждается в номере страницы. Возвращайте текст с учетом того, что номер страницы добавится автоматически через пробел в конце.

 <Pagination
-   prevButtonAriaLabel="На предыдущую"
+   prevButtonLabel="На предыдущую"
-   nextButtonAriaLabel="На следующую"
+   nextButtonLabel="На следующую"
-   getPageAriaLabel={(page, isCurrent) => { isCurrent ? `${page} страница` : `Го на ${page} страницу` }}
+   getPageLabel={(isCurrent) => { isCurrent ? "Стр." : "Го на страницу" }}

`Calendar`

Свойство prevMonthAriaLabel переименовано в prevMonthLabel
Свойство nextMonthAriaLabel переименовано в nextMonthLabel
Свойство changeDayAriaLabel переименовано в changeDayLabel
Свойство changeMonthAriaLabel переименовано в changeMonthLabel
Свойство changeYearAriaLabel переименовано в changeYearLabel
Свойство changeMinutesAriaLabel переименовано в changeMinutesLabel
Свойство changeHoursAriaLabel переименовано в changeHoursLabel

`CalendarRange`

Свойство prevMonthAriaLabel переименовано в prevMonthLabel
Свойство nextMonthAriaLabel переименовано в nextMonthLabel
Свойство changeDayAriaLabel переименовано в changeDayLabel
Свойство changeMonthAriaLabel переименовано в changeMonthLabel
Свойство changeYearAriaLabel переименовано в changeYearLabel

`DateInput`

Свойство prevMonthAriaLabel переименовано в prevMonthLabel
Свойство nextMonthAriaLabel переименовано в nextMonthLabel
Свойство changeMinutesAriaLabel переименовано в changeMinutesLabel
Свойство changeHoursAriaLabel переименовано в changeHoursLabel
Свойство changeDayAriaLabel переименовано в changeDayLabel
Свойство changeMonthAriaLabel переименовано в changeMonthLabel
Свойство changeYearAriaLabel переименовано в changeYearLabel
Свойство clearFieldAriaLabel переименовано в clearFieldLabel
Свойство showCalendarAriaLabel переименовано в showCalendarLabel

`DateRangeInput`

Свойство prevMonthAriaLabel переименовано в prevMonthLabel
Свойство nextMonthAriaLabel переименовано в nextMonthLabel
Свойство changeDayAriaLabel переименовано в changeDayLabel
Свойство changeMonthAriaLabel переименовано в changeMonthLabel
Свойство changeYearAriaLabel переименовано в changeYearLabel
Свойство changeStartDayAriaLabel переименовано в changeStartDayLabel
Свойство changeStartMonthAriaLabel переименовано в changeStartMonthLabel
Свойство changeStartYearAriaLabel переименовано в changeStartYearLabel
Свойство changeEndDayAriaLabel переименовано в changeEndDayLabel
Свойство changeEndMonthAriaLabel переименовано в changeEndMonthLabel
Свойство changeEndYearAriaLabel переименовано в changeEndYearLabel
Свойство clearFieldAriaLabel переименовано в clearFieldLabel
Свойство showCalendarAriaLabel переименовано в showCalendarLabel

`Search`

Свойство iconAriaLabel переименовано в iconLabel
Свойство clearAriaLabel переименовано в clearLabel

SevereCloud · 2023-12-05T15:06:36Z

`Tappable`

Tappable избавился от свойств onEnter, onLeave, onStart, onEnd, onMove и stopPropagation. Используйте вместо них нативные свойства.

Улучшение доступности

Теперь если в кликабельный компонент не был передано свойство onClick или href, то у такого компонента будут отключены состояния наведения, активирования и ripple эффекты. Если вы использовали disable для отключения состояний, рекомендуем удалить это свойство.

 <SimpleCell
-  disable
 >
   Информационный текст
 </SimpleCell>

inomdzhon · 2023-12-06T12:41:23Z

ChipsInput

<ChipsInput
-  value={[]}
+  defaultValue={[]}

-  value={[]}
+  value={[]}
+  onChange={[]}

-  inputValue=""
+  defaultInputValue=""
/>

Компонент теперь может быть контролируемым и неконтролируемым.
getOptionValue, getOptionLabel, getNewOptionData – все аргументы функции теперь обязательны.
renderChip – вторым аргументов приходит option.

Note

Для раздела ## Unstable -> Stable

ChipsSelect

<ChipsSelect
-  value={[]}
+  defaultValue={[]}

-  value={[]}
+  value={[]}
+  onChange={[]}

-  inputValue=""
+  defaultInputValue=""

-  popupDirection="bottom"
+  placement="bottom"

-  showSelected={true}
+  selectedBehavior="highlight"

-  showSelected={false}
+  selectedBehavior="hide"

-  creatableText="Lorem Ipsum"
+  creatable="Lorem Ipsum"
/>

Компонент теперь может быть контролируемым и неконтролируемым.
creatable – может быть всё ещё boolean, при этом теперь можно передать и текст, чтобы
переопределить текст по умолчанию.
getOptionValue, getOptionLabel, getNewOptionData – все аргументы функции теперь обязательны.
renderChip – вторым аргументов приходит option.

inomdzhon · 2023-12-06T12:56:58Z

`Tooltip` -> OnboardingTooltip

<Tooltip>
<OnboardingTooltip
- isShown
+ isShown

- alignX="bottom"
- alignY="left"
+ placement="bottom-start"

- offsetX={0}
+ offsetByCrossAxis={0}

- offsetY={0}
+ offsetByMainAxis={0}

- cornerOffset={0}
+ arrowOffset={0}

- cornerAbsoluteOffset={0}
+ arrowOffset={0}
+ isStaticArrowOffset
>
  <div>Target</div>
- </Tooltip>
+ </OnboardingTooltip>

Стал доступнее за счёт role="tooltip" и aria-describedby.

`TextTooltip` -> Tooltip

- <TextTooltip
+ <Tooltip
- autoUpdateOnTargetResize
- customMiddlewares
- renderContent
- getRef

- offsetSkidding={0}
+ offsetByCrossAxis={0}

- offsetDistance={0}
+ offsetByMainAxis={0}

- shownDelay={2}
+ hoverDelay={2}

- hideDelay={10}
+ hoverDelay={[0, 10]}

- shownDelay={5}
- hideDelay={10}
+ hoverDelay={[5 10]}

- forcePortal
+ usePortal

- portalRoot={someHTMLElement}
+ usePortal={someHTMLElement}
>
  <div>Target</div>
- </TextTooltip>
+ </Tooltip>

Компонент теперь может быть контролируемым и неконтролируемым.
Помимо hover, теперь реагирует и на focus.
Может закрываться по кнопке ESC.
Стал доступнее за счёт role="tooltip" и aria-describedby.

inomdzhon · 2023-12-06T17:55:13Z

Note

Поправить заголовок Select.

`Select` -> `AdaptiveSelectRender`

vkcom-publisher · 2024-01-16T15:48:24Z

✅ v6.0.0 🎉

inomdzhon added the docs label Dec 1, 2023

inomdzhon added this to the v6 milestone Dec 1, 2023

inomdzhon assigned mendrew Dec 1, 2023

inomdzhon requested a review from a team as a code owner December 1, 2023 13:28

inomdzhon assigned inomdzhon, BlackySoul, SevereCloud and eugpoloz Dec 1, 2023

SevereCloud marked this pull request as draft December 1, 2023 13:48

inomdzhon mentioned this pull request Dec 1, 2023

[BREAKING CHANGE] feat(Popper): mv to stable #6185

Merged

2 tasks

inomdzhon and others added 8 commits December 1, 2023 21:52

fix typo; extend ConfigProvider doc

6b535eb

refactor docs: mv to common styling; reorder some header

dae5ff7

docs: move "параметр" to "свойство"

5eb0431

add unstable section; add about Popover

6eeaf0d

fix type

46212c9

rm ; from Title

045ade6

docs: reorder migration guide

fa6ec26

chore: merge splitcol guide

54491f6

BlackySoul force-pushed the blackysoul/update_migration_guide branch from 105ecdd to 54491f6 Compare December 1, 2023 14:56

This was referenced Dec 5, 2023

[BREAKING CHANGE] refactor: Избавляемся от aria-label в пользу визуально скрытого текста #6139

Merged

feat(ChipsSelect): mv to stable #6206

Merged

docs: add Accordion

b1b23f7

inomdzhon added 5 commits December 6, 2023 18:34

add more changes; fix typo

168f665

docs: rm migration_v5.md

ad4f4a4

docs: rm duplicate; reformat some blocks

10fc1f5

mv OnboardingTooltip from Unstable

9ef5e3c

fix Tappable description

c31e0bf

BlackySoul and others added 4 commits December 7, 2023 12:27

chore: clean up

e0e6793

Change ContentCard prop

8dc2278

fix typo; add about HorizontalCellShowMore

e985c71

Add codemod instructions

714b66e

SevereCloud approved these changes Dec 8, 2023

View reviewed changes

BlackySoul marked this pull request as ready for review December 8, 2023 08:47

BlackySoul approved these changes Dec 8, 2023

View reviewed changes

inomdzhon merged commit b52a56d into master Dec 8, 2023
28 checks passed

inomdzhon deleted the blackysoul/update_migration_guide branch December 8, 2023 08:51

inomdzhon mentioned this pull request Dec 8, 2023

refactor: migration_v6.md #6238

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v6: Migration guide #6182

v6: Migration guide #6182

inomdzhon commented Dec 1, 2023 •

edited

Loading

github-actions bot commented Dec 1, 2023 •

edited

Loading

codesandbox-ci bot commented Dec 1, 2023 •

edited

Loading

codecov bot commented Dec 1, 2023 •

edited

Loading

inomdzhon commented Dec 1, 2023

inomdzhon commented Dec 4, 2023 •

edited

Loading

inomdzhon commented Dec 5, 2023 •

edited

Loading

inomdzhon commented Dec 5, 2023

inomdzhon commented Dec 5, 2023

SevereCloud commented Dec 5, 2023

inomdzhon commented Dec 6, 2023

inomdzhon commented Dec 6, 2023

inomdzhon commented Dec 6, 2023

vkcom-publisher commented Jan 16, 2024

v6: Migration guide #6182

v6: Migration guide #6182

Conversation

inomdzhon commented Dec 1, 2023 • edited Loading

Описание

github-actions bot commented Dec 1, 2023 • edited Loading

👀 Docs deployed

codesandbox-ci bot commented Dec 1, 2023 • edited Loading

codecov bot commented Dec 1, 2023 • edited Loading

Codecov Report

inomdzhon commented Dec 1, 2023

Дополнить доку

inomdzhon commented Dec 4, 2023 • edited Loading

inomdzhon commented Dec 5, 2023 • edited Loading

inomdzhon commented Dec 5, 2023

inomdzhon commented Dec 5, 2023

SevereCloud commented Dec 5, 2023

Tappable

Улучшение доступности

inomdzhon commented Dec 6, 2023

inomdzhon commented Dec 6, 2023

Tooltip -> OnboardingTooltip

TextTooltip -> Tooltip

inomdzhon commented Dec 6, 2023

Select -> AdaptiveSelectRender

vkcom-publisher commented Jan 16, 2024

inomdzhon commented Dec 1, 2023 •

edited

Loading

github-actions bot commented Dec 1, 2023 •

edited

Loading

codesandbox-ci bot commented Dec 1, 2023 •

edited

Loading

codecov bot commented Dec 1, 2023 •

edited

Loading

inomdzhon commented Dec 4, 2023 •

edited

Loading

inomdzhon commented Dec 5, 2023 •

edited

Loading

`Tappable`

`Tooltip` -> OnboardingTooltip

`TextTooltip` -> Tooltip

`Select` -> `AdaptiveSelectRender`