refactor: reduce motion #6979

inomdzhon · 2024-05-31T16:34:35Z

close [Feature] Упрощение анимаций при preferes-reduced-motion #2703, [Feature] Анимации у выпадающих меню #2250
fix [Bug]: Alert: перестает работать action с опцией autoClose=true #6089

Unit-тесты
Дизайн-ревью (см. refactor: reduce motion #6979 (review))

Описание

В CSS файлах применил медиа-выражение @media screen and (prefers-reduced-motion: reduce) там, где необходимо. Попутно рефакторил некоторые из них. Например, примененил токен --vkui--animation_duration_m где это возможно.

Note

Упрощал основываясь на поведении iOS и приложений под него. При включении параметра Уменьшение движения + Предпочтение перекрёстным наплывам (Настройки -> Универсальный доступ -> Движение) переходы, зачастую, заменяются на анимацию через смену прозрачности.

Затронутые анимации:

Note

Длительность и изинги НЕ трогал, только подменял изменение размеров и/или передвижения.

ActionSheet
- параметры анимации вынесены в переменные --vkui_internal--*;
- анимация появления/скрытия упрощается до появление через прозрачность.
- для анимаций теперь используется useCSSKeyframesAnimationController().
Alert
- параметры анимации вынесены в переменные --vkui_internal--*;
- анимация появления/скрытия упрощается до появление через прозрачность;
- добавил анимацию для десктоп ([Feature] Анимации у выпадающих меню #2250);
- для анимаций теперь используется useCSSKeyframesAnimationController().
Button
- удалён @media screen and (prefers-reduced-motion: no-preference), т.к. допустимая анимация.
PanelHeaderContext
- параметры анимации вынесены в переменные --vkui_internal--*;
- для анимаций теперь используется useCSSKeyframesAnimationController().
- useGlobalEventListener() заменён на useGlobalOnClickOutside(). И теперь, если visible === false, то компонент не остаётся в DOM;
- теперь при visible === false возвращаем null.
Removable
- удалён @media screen and (prefers-reduced-motion: no-preference), т.к. допустимая анимация.
Root
- анимация появления/скрытия упрощается до появление через прозрачность.
Skeleton
- анимации отключаются.
Snackbar
- анимация появления/скрытия упрощается до появление через прозрачность;
- остаётся возможность закрыть через свайп – вызывает закрытие через прозрачность.
Switch
- удалён @media screen and (prefers-reduced-motion: no-preference), т.к. допустимая анимация.
View
- анимация появления/скрытия упрощается до появление через прозрачность;
- остаётся возможность свайпать;
- в примеры документации добавил кнопки "Назад" в PanelHeader.
animationFades.module.css
- удалён @media screen and (prefers-reduced-motion: no-preference), т.к. допустимая анимация.
focusVisible.module.css
- заменил @media screen and (prefers-reduced-motion: no-preference) на @media screen and (prefers-reduced-motion: reduce)

Что не затронул?

Не трогал мобильный ModalRoot дабы не сломать его. Лучше сделать в рамках #2449.

Остальные изменения

в docs/CONTRIBUTING.md добавил информацию про a11y (заодно немного освежил документ);
удалён хук useTimeout() и везде заменён на ручной запуск и очистку – этот хук больше усложняет код, чем упрощает;
удалён lib/supportEvents.ts, т.к. все браузеры из текущего .browserslistrc поддерживают событие transitionend;
- удалён хук useReducedMotion() – на текущий момент больше не используется, т.к. оказывается (prefers-reduced-motion: reduce) не предполагает полное отключение всех анимаций, а лишь говорит, что надо их упростить. (UPD вернул в рамках ⚡ c89d7d1).

Эти изменения привели к следующему:

useWaitTransitionFinish() – теперь и возвращает сразу функцию не оборачивая его в объект;
PopoutWrapper – теперь компонент неконтролируемый – показывается/скрывается в зависимости от параметра closing.

Типы

добавлен TimeoutId, чтобы не приходилось каждый раз писать ReturnType<typeof setTimeout> | null;.

Тесты

применён waitCSSKeyframeAnimationEnd() там, где раньше была завязка на setTimeout;
добавлена утилита waitCSSTransitionEnd();
добавлен мок для TransitionEvent.

github-actions · 2024-05-31T16:37:07Z

size-limit report 📦

Path	Size
JS	363.36 KB (-0.38% 🔽)
JS (gzip)	111.2 KB (-0.4% 🔽)
JS (brotli)	91.58 KB (-0.28% 🔽)
JS import Div (tree shaking)	1.42 KB (0%)
CSS	284.36 KB (+0.53% 🔺)
CSS (gzip)	37.1 KB (+0.79% 🔺)
CSS (brotli)	30.04 KB (+0.78% 🔺)

codesandbox-ci · 2024-05-31T16:38:33Z

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.

github-actions · 2024-05-31T16:40:29Z

e2e tests

Playwright Report

github-actions · 2024-05-31T16:40:41Z

👀 Docs deployed

✅ Styleguide
✅ Storybook

Commit 2fa4fbb

codecov · 2024-05-31T16:41:40Z

Codecov Report

Attention: Patch coverage is 84.57143% with 27 lines in your changes missing coverage. Please review.

Project coverage is 83.49%. Comparing base (2566673) to head (2fa4fbb).

Files	Patch %	Lines
packages/vkui/src/components/Gallery/hooks.ts	19.04%	17 Missing ⚠️
...mponents/PanelHeaderContext/PanelHeaderContext.tsx	84.21%	3 Missing ⚠️
packages/vkui/src/components/View/View.tsx	90.62%	3 Missing ⚠️
packages/vkui/src/components/View/ViewInfinite.tsx	81.25%	3 Missing ⚠️
packages/vkui/src/components/Root/Root.tsx	83.33%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6979      +/-   ##
==========================================
+ Coverage   83.46%   83.49%   +0.03%     
==========================================
  Files         353      351       -2     
  Lines       10570    10499      -71     
  Branches     3510     3473      -37     
==========================================
- Hits         8822     8766      -56     
+ Misses       1748     1733      -15

Flag	Coverage Δ
unittests	`83.49% <84.57%> (+0.03%)`	⬆️

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.

qurle

Доброе дело!

packages/vkui/jest.setup.js

BlackySoul · 2024-06-11T16:12:39Z

Офигенная работа проделана 💪

packages/vkui/src/components/Alert/Alert.tsx

packages/vkui/src/components/Search/Search.module.css

BlackySoul · 2024-06-14T08:56:28Z

Заодно поправим здесь? Спиннер нужно медленнее крутить?)

inomdzhon · 2024-06-14T12:45:52Z

Заодно поправим здесь? Спиннер нужно медленнее крутить?)

Заменил анимацию на периодическую смену прозрачности c89d7d1 (вернул хук useReducedMotion()).

Смена длительность анимации на rotate показалась сомнительной, т.к. всё-равно можем вызывать головокружение 🤔

mendrew

Грандиозная работа! 👏

Нашел пару моментов, на которые стоит обратить внимание.

И в целом мысли по анимациям.
Давай где-нибудь пропишем результаты твоего ресерча по анимациям, чтобы всегда можно было на это сослаться в будущем! в Contribution, например, со ссылкой на этот PR. (в комментарию к самому файлу Contribution я подробнее расписал). Чтобы контрибьютеру было понятно как дальше с ними быть. Что вот такое мы завернём ещё и в медиа выражение, а вот такое просто оставим как есть.

Будем плюсом ещё добавить ссылку на файл по хэшу комита, где ты по фэн шую разруливаешь сложные анимации с помощью css переменных (например, Root), опять же, чтобы было место на которое всегда можно сослаться в качестве рекомендуемой практики. И ссылку на Removable, например, где есть простая анимация не требующая ничего более и которую в медиа выражение заворачивать не надо.

docs/CONTRIBUTING.md

packages/vkui/src/components/ActionSheet/ActionSheet.module.css

packages/vkui/src/components/ActionSheet/ActionSheet.test.tsx

packages/vkui/src/components/Alert/Alert.module.css

packages/vkui/src/components/CustomScrollView/useTrackerVisibility.ts

packages/vkui/src/components/Gallery/hooks.ts

packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.module.css

docs/CONTRIBUTING.md

packages/vkui/src/components/Tappable/Ripple.tsx

packages/vkui/src/hooks/useDocumentVisibilityState.test.ts

- удалён хук `useTimeout()` и везде заменён на ручной запуск и очистку – этот хук больше усложняет код, чем упрощает; - удалён `lib/supportEvents.ts`, т.к. все браузеры из текущего `.browserslistrc` поддерживают событие [transitionend](https://developer.mozilla.org/ru/docs/Web/API/Element/transitionend_event#%D1%81%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C_%D1%81_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0%D0%BC%D0%B8); - удалён хук `useReducedMotion()` – на текущий момент больше не используется, т.к. оказывается `(prefers-reduced-motion: reduce)` не предполагает полное отключение всех анимаций, а лишь говорит, что надо их упростить. Эти изменения привели к следующему: - `useWaitTransitionFinish()` – теперь и возвращает сразу функцию не оборачивая его в объект; - в следующих компонентах для анимаций теперь используется `useCSSKeyframesAnimationController()`: - `ActionSheet` - `Alert` - `PanelHeaderContext` – заодно `useGlobalEventListener()` заменён на `useGlobalOnClickOutside()`. И теперь, если `visible === false`, то компонент не остаётся в DOM. - `PopoutWrapper` теперь неконтролируемый – показывается/скрывается в зависимости от параметра `closing`; - создан хук `useDocumentVisibilityState()` – в этом коммите используется в `Gallery`. h2. Типы - добавлен `TimeoutId`, чтобы не приходилось каждый раз писать `ReturnType<typeof setTimeout> | null;`. h2. Тесты - применён `waitCSSKeyframeAnimationEnd()` там, где раньше была завязка на `setTimeout`; - добавлена утилита `waitCSSTransitionEnd()`; - добавлен мок для `TransitionEvent`.

Заодно поправил устаревшую информацию.

Co-authored-by: Victoria Zhizhonkova <indarklight@gmail.com>

…useReducedMotion()`

…le.tsx Co-authored-by: Andrey Medvedev <andr.medv.spb@gmail.com>

mendrew

🔥
💯
💅

В #6979 для теста менял на `2s` и случайно закоммитил.

В #6979 для теста менял на `2s` и случайно закоммитил. Вернул `0.1s`. #6979 ждёт релиза `v6.2.0`, поэтому фикс без майлстоун.

Была проблема, что до #6979: 1. переменная `prevSwipeBackResult` использовалась в `React.useEffect()`, из-за чего она была всегда актуальная, т.к. обращались мы к ней после окончания рендера. В #6979 она переместилась в **render prop**, где мы обращаемся к переменной до окончания рендера, поэтому и получалось так, что свайп бёк срабатывал в первый раз, пока `prevSwipeBackResult` являлся `null`, а во второй раз уже не срабатывал, т.к. `prevSwipeBackResult` имел предыдущее состояние. Изучил, что проверку на `prevSwipeBackResult` в целом можно удалить. 2. Событие `transitionend` навешивалось в обход **React**, а также был фолбек на `setTimeout()`. В #6979 события навешиваются через **React** – `onTransitionEnd`. Иногда обработчик не вызывался. Чтобы исправить это, перенёс навешивания события на текущий элемент (`isSwipeBackPrev`) вместо последующего (`isSwipeBackNext`). Поправил тесты под это изменение. **Изменения** - удалил `React.useCallback()` на обработчике события `onAnimationEnd`, т.к. это обычный `<div />` и мемоизация ни к чему - заодно отрефакторил `calcPanelSwipeStyles()` и `calcPanelSwipeBackOverlayStyles()`;

h2. Описание Была проблема, что до #6979: 1. переменная `prevSwipeBackResult` использовалась в `React.useEffect()`, из-за чего она была всегда актуальная, т.к. обращались мы к ней после окончания рендера. В #6979 она переместилась в **render prop**, где мы обращаемся к переменной до окончания рендера, поэтому и получалось так, что свайп бёк срабатывал в первый раз, пока `prevSwipeBackResult` являлся `null`, а во второй раз уже не срабатывал, т.к. `prevSwipeBackResult` имел предыдущее состояние. Изучил, что проверку на `prevSwipeBackResult` в целом можно удалить. 2. Событие `transitionend` навешивалось в обход **React**, а также был фолбек с `setTimeout()`. В #6979 события навешиваются через **React** – `onTransitionEnd`. Иногда обработчик не вызывался. Чтобы исправить это, перенёс навешивания события на текущий элемент (`isSwipeBackPrev`) вместо последующего (`isSwipeBackNext`). Поправил тесты под это изменение. h2. Изменения - удалил `React.useCallback()` на обработчике события `onAnimationEnd`, т.к. это обычный `<div />` и мемоизация ни к чему; - заодно отрефакторил `calcPanelSwipeStyles()` и `calcPanelSwipeBackOverlayStyles()`.

inomdzhon mentioned this pull request Jun 4, 2024

refactor(stylelint): mv to tools/stylelint-plugin-vkui #6991

Merged

inomdzhon force-pushed the imirdzhamolov/issue2703/feat/reduce-motion branch 3 times, most recently from 3bc5b30 to 809fb94 Compare June 6, 2024 13:56

inomdzhon marked this pull request as ready for review June 6, 2024 14:09

inomdzhon requested a review from a team as a code owner June 6, 2024 14:09

inomdzhon linked an issue Jun 6, 2024 that may be closed by this pull request

[Feature] Анимации у выпадающих меню #2250

Closed

qurle requested a review from a team June 11, 2024 13:52

qurle previously approved these changes Jun 11, 2024

View reviewed changes

BlackySoul reviewed Jun 11, 2024

View reviewed changes

packages/vkui/jest.setup.js Outdated Show resolved Hide resolved

BlackySoul reviewed Jun 11, 2024

View reviewed changes

packages/vkui/src/components/Alert/Alert.tsx Show resolved Hide resolved

BlackySoul reviewed Jun 11, 2024

View reviewed changes

packages/vkui/src/components/Search/Search.module.css Show resolved Hide resolved

inomdzhon dismissed qurle’s stale review via 5cdb6fd June 14, 2024 10:47

inomdzhon force-pushed the imirdzhamolov/issue2703/feat/reduce-motion branch from 5cdb6fd to c89d7d1 Compare June 14, 2024 12:43

mendrew reviewed Jun 17, 2024

View reviewed changes

inomdzhon and others added 6 commits June 19, 2024 16:05

refactor(styles): use prefers-reduced-motion if needed

afeb68e

docs(CONTRIBUTING.md): add info about a11y to checklist

dc396c6

Заодно поправил устаревшую информацию.

review(suggestion): update packages/vkui/jest.setup.js

73b52a9

Co-authored-by: Victoria Zhizhonkova <indarklight@gmail.com>

fix(Spinner): replace animation of motion should be reduced; return `…

cc54bae

…useReducedMotion()`

review(suggestion): Update packages/vkui/src/components/Tappable/Ripp…

0ad1433

…le.tsx Co-authored-by: Andrey Medvedev <andr.medv.spb@gmail.com>

inomdzhon force-pushed the imirdzhamolov/issue2703/feat/reduce-motion branch from acedc77 to 0ad1433 Compare June 19, 2024 13:05

fix(review): create @custom-media --reduce-motion

a18db43

inomdzhon force-pushed the imirdzhamolov/issue2703/feat/reduce-motion branch from 8a9fc8f to a18db43 Compare June 19, 2024 13:11

inomdzhon added 5 commits June 19, 2024 16:33

fix(Gallery): revert visibilitychange logic

671fc03

fix(PanelHeaderContext): rm reachable selectors

c8dc7af

fix(CONTRIBUTING): use correct issue number in link

92f0d0a

fix(CONTRIBUTING): add more details about animation

832fd8b

chore: remove useDocumentVisibilityState

2fa4fbb

mendrew approved these changes Jun 19, 2024

View reviewed changes

SevereCloud approved these changes Jun 20, 2024

View reviewed changes

inomdzhon merged commit 37f3689 into master Jun 20, 2024
26 checks passed

inomdzhon deleted the imirdzhamolov/issue2703/feat/reduce-motion branch June 20, 2024 09:33

inomdzhon added a commit that referenced this pull request Jun 24, 2024

fix(focusVisible): revert animation duration

eb70691

В #6979 для теста менял на `2s` и случайно закоммитил.

inomdzhon mentioned this pull request Jun 24, 2024

fix(focusVisible): revert animation duration #7068

Merged

BlackySoul mentioned this pull request Jul 15, 2024

fix(PanelHeaderContext): remove init animation #7193

Merged

1 task

inomdzhon mentioned this pull request Aug 14, 2024

fix(View): edit isSwipeBackTarget predicate #7392

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: reduce motion #6979

refactor: reduce motion #6979

inomdzhon commented May 31, 2024 •

edited

Loading

github-actions bot commented May 31, 2024 •

edited

Loading

codesandbox-ci bot commented May 31, 2024 •

edited

Loading

github-actions bot commented May 31, 2024 •

edited

Loading

github-actions bot commented May 31, 2024 •

edited

Loading

codecov bot commented May 31, 2024 •

edited

Loading

qurle left a comment

BlackySoul commented Jun 11, 2024

BlackySoul commented Jun 14, 2024

inomdzhon commented Jun 14, 2024

mendrew left a comment

mendrew left a comment

refactor: reduce motion #6979

refactor: reduce motion #6979

Conversation

inomdzhon commented May 31, 2024 • edited Loading

Описание

Что не затронул?

Остальные изменения

Типы

Тесты

github-actions bot commented May 31, 2024 • edited Loading

size-limit report 📦

codesandbox-ci bot commented May 31, 2024 • edited Loading

github-actions bot commented May 31, 2024 • edited Loading

e2e tests

github-actions bot commented May 31, 2024 • edited Loading

👀 Docs deployed

codecov bot commented May 31, 2024 • edited Loading

Codecov Report

qurle left a comment

Choose a reason for hiding this comment

BlackySoul commented Jun 11, 2024

BlackySoul commented Jun 14, 2024

inomdzhon commented Jun 14, 2024

mendrew left a comment

Choose a reason for hiding this comment

mendrew left a comment

Choose a reason for hiding this comment

inomdzhon commented May 31, 2024 •

edited

Loading

github-actions bot commented May 31, 2024 •

edited

Loading

codesandbox-ci bot commented May 31, 2024 •

edited

Loading

github-actions bot commented May 31, 2024 •

edited

Loading

github-actions bot commented May 31, 2024 •

edited

Loading

codecov bot commented May 31, 2024 •

edited

Loading