ci: reduce motion on e2e by default

taiga-family · Nov 30, 2023 · 710fe20 · 710fe20
1 parent 1dcbee6
commit 710fe20
Show file tree

Hide file tree

Showing 10 changed files with 15 additions and 47 deletions.
diff --git a/projects/addon-doc/tokens/scroll-behavior.ts b/projects/addon-doc/tokens/scroll-behavior.ts
@@ -4,6 +4,7 @@ import {TUI_REDUCED_MOTION} from '@taiga-ui/core';
 
 /**
  * Defines the transition animation for scroll
+ * @deprecated will be remove in v4.0
  */
 export const TUI_DOC_SCROLL_BEHAVIOR = tuiCreateTokenFromFactory<ScrollBehavior>(() =>
     inject(TUI_REDUCED_MOTION) ? `auto` : `smooth`,

diff --git a/projects/core/components/root/root.component.ts b/projects/core/components/root/root.component.ts
@@ -13,7 +13,11 @@ import {
     TUI_VERSION,
 } from '@taiga-ui/cdk';
 import {TuiBreakpointService} from '@taiga-ui/core/services';
-import {TUI_ANIMATIONS_DURATION, TUI_THEME} from '@taiga-ui/core/tokens';
+import {
+    TUI_ANIMATIONS_DURATION,
+    TUI_REDUCED_MOTION,
+    TUI_THEME,
+} from '@taiga-ui/core/tokens';
 import {combineLatest, Observable, of} from 'rxjs';
 import {debounceTime, map} from 'rxjs/operators';
 
@@ -30,6 +34,7 @@ import {debounceTime, map} from 'rxjs/operators';
         '[style.--tui-duration.ms]': 'duration',
         '[class._ios]': 'isIOS',
         '[class._android]': 'isAndroid',
+        '[class._reduced-motion]': 'reducedMotion',
         '[$.class._mobile]': 'isMobileRes$',
         '($.class._mobile)': 'isMobileRes$',
     },
@@ -48,6 +53,7 @@ export class TuiRootComponent {
             : of(!this.isMobile);
 
     constructor(
+        @Inject(TUI_REDUCED_MOTION) readonly reducedMotion: boolean,
         @Inject(TUI_ANIMATIONS_DURATION) readonly duration: number,
         @Inject(TUI_DIALOGS)
         readonly dialogs: ReadonlyArray<Observable<readonly unknown[]>>,

diff --git a/projects/core/styles/mixins/mixins.less b/projects/core/styles/mixins/mixins.less
@@ -425,14 +425,10 @@
     padding: 0;
 }
 
-/**
- * @description:
- * disable smooth scrolling when users have prefers-reduced-motion enabled
- */
 .scroll-behavior(@mode: smooth) {
     scroll-behavior: @mode;
 
-    @media screen and (prefers-reduced-motion: reduce) {
+    :host-context(tui-root._reduced-motion) & {
         scroll-behavior: auto;
     }
 }
diff --git a/projects/demo-cypress/cypress/plugins/index.ts b/projects/demo-cypress/cypress/plugins/index.ts
@@ -22,6 +22,7 @@ export default async (
                 `--window-size=${TUI_CYPRESS_DESKTOP_VIEWPORT_WIDTH},${TUI_CYPRESS_DESKTOP_VIEWPORT_HEIGHT}`,
                 `--force-device-scale-factor=2`,
                 `--high-dpi-support=1`,
+                `--force-prefers-reduced-motion`,
                 `--force-color-profile=srgb`,
                 `--disable-dev-shm-usage`,
                 `--disable-gpu`,

diff --git a/projects/demo-cypress/cypress/support/helpers/visit.ts b/projects/demo-cypress/cypress/support/helpers/visit.ts
@@ -32,7 +32,6 @@ interface TuiVisitOptions {
     rootSelector?: string;
     skipDecodingUrl?: boolean;
     skipExpectUrl?: boolean;
-    stopAnimation?: boolean;
     waitAllIcons?: boolean;
     waitRenderedFont?: RegExp;
 }
@@ -57,9 +56,7 @@ export function tuiVisit(path: string, options: TuiVisitOptions = {}): void {
         enableNightMode = false,
         hideCursor = true,
         hideScrollbar = true,
-        noSmoothScroll = true,
         hideHeader = true,
-        stopAnimation = true,
         skipExpectUrl = false,
         skipDecodingUrl = false,
         hideNavigation = true,
@@ -150,10 +147,6 @@ export function tuiVisit(path: string, options: TuiVisitOptions = {}): void {
 
     cy.get(`${rootSelector}._is-cypress-mode`).as(`app`);
 
-    if (stopAnimation) {
-        cy.get(`@app`).invoke(`addClass`, `_stop-animation`);
-    }
-
     if (hideCursor) {
         cy.get(`@app`).invoke(`addClass`, `_hide-cursor`);
     }
@@ -162,10 +155,6 @@ export function tuiVisit(path: string, options: TuiVisitOptions = {}): void {
         cy.get(`@app`).invoke(`addClass`, `_hide-scrollbar`);
     }
 
-    if (noSmoothScroll) {
-        cy.get(`@app`).invoke(`addClass`, `_no-smooth-scroll`);
-    }
-
     cy.get(rootSelector).should(`have.class`, `_loaded`);
 
     if (hideHeader) {

diff --git a/projects/demo-playwright/playwright.config.ts b/projects/demo-playwright/playwright.config.ts
@@ -26,6 +26,9 @@ export default defineConfig({
         baseURL: `http://localhost:${process.env.NG_SERVER_PORT || 3333}`,
         trace: `on-first-retry`,
         viewport: DEFAULT_VIEWPORT,
+        contextOptions: {
+            reducedMotion: `reduce`,
+        },
     },
     projects: [
         {

diff --git a/projects/demo/src/modules/app/app.providers.ts b/projects/demo/src/modules/app/app.providers.ts
@@ -7,7 +7,6 @@ import {
 } from '@angular/common';
 import {inject, PLATFORM_ID, Provider} from '@angular/core';
 import {Title} from '@angular/platform-browser';
-import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {UrlTree} from '@angular/router';
 import {SESSION_STORAGE} from '@ng-web-apis/common';
 import {
@@ -16,7 +15,6 @@ import {
     TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,
     TUI_DOC_LOGO,
     TUI_DOC_PAGES,
-    TUI_DOC_SCROLL_BEHAVIOR,
     TUI_DOC_SEE_ALSO,
     TUI_DOC_SOURCE_CODE,
     TUI_DOC_TITLE,
@@ -35,12 +33,10 @@ import {
     tuiAssert,
 } from '@taiga-ui/cdk';
 import {
-    TUI_ANIMATIONS_DURATION,
     TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS,
     TUI_DROPDOWN_HOVER_OPTIONS,
     TUI_HINT_DEFAULT_OPTIONS,
     TUI_HINT_OPTIONS,
-    TUI_REDUCED_MOTION,
     TUI_SANITIZER,
 } from '@taiga-ui/core';
 import {TuiLanguageName, tuiLanguageSwitcher} from '@taiga-ui/i18n';
@@ -151,17 +147,6 @@ export const APP_PROVIDERS: Provider[] = [
         provide: TUI_SWIPE_OPTIONS,
         useValue: {timeout: 300, threshold: 60},
     },
-    {
-        provide: ANIMATION_MODULE_TYPE,
-        useFactory: () =>
-            inject(TUI_IS_E2E) || inject(TUI_REDUCED_MOTION)
-                ? `NoopAnimations`
-                : `BrowserAnimations`,
-    },
-    {
-        provide: TUI_ANIMATIONS_DURATION,
-        useFactory: () => (inject(TUI_IS_E2E) || inject(TUI_REDUCED_MOTION) ? 0 : 300),
-    },
     {
         provide: TUI_HINT_OPTIONS,
         useFactory: () =>
@@ -176,11 +161,6 @@ export const APP_PROVIDERS: Provider[] = [
                 ? {...TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, showDelay: 0, hideDelay: 0}
                 : TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS,
     },
-    {
-        provide: TUI_DOC_SCROLL_BEHAVIOR,
-        useFactory: () =>
-            inject(TUI_IS_E2E) || inject(TUI_REDUCED_MOTION) ? `auto` : `smooth`, // https://github.com/cypress-io/cypress/issues/4640
-    },
     {
         provide: TUI_TAKE_ONLY_TRUSTED_EVENTS,
         useFactory: () => !inject(TUI_IS_E2E),

diff --git a/projects/demo/src/modules/app/cypress.less b/projects/demo/src/modules/app/cypress.less
@@ -6,12 +6,4 @@
     &._hide-cursor * {
         caret-color: transparent !important;
     }
-
-    &._no-smooth-scroll * {
-        scroll-behavior: auto !important;
-    }
-
-    &._stop-animation * {
-        animation-iteration-count: 0 !important;
-    }
 }
diff --git a/projects/demo/src/modules/components/tabs/examples/9/index.less b/projects/demo/src/modules/components/tabs/examples/9/index.less
@@ -11,13 +11,13 @@
 
 .vertical,
 .horizontal {
+    .scroll-behavior();
     .transition(~'box-shadow, background');
     position: relative;
     background: var(--tui-base-01);
     color: var(--tui-text-01);
     box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
     border: 1px solid var(--tui-base-03);
-    scroll-behavior: smooth;
 }
 
 .title {

diff --git a/projects/kit/components/input-tag/input-tag.style.less b/projects/kit/components/input-tag/input-tag.style.less
@@ -31,9 +31,9 @@
 }
 
 .t-scrollbar {
+    .scroll-behavior();
     margin-inline-start: -0.25rem;
     min-width: 100%;
-    scroll-behavior: smooth;
 
     :host:not(._label-outside) &,
     :host._label-outside._icon-left & {