diff --git a/projects/addon-doc/tokens/scroll-behavior.ts b/projects/addon-doc/tokens/scroll-behavior.ts index 52a46c01ca01..65434b9f3e7d 100644 --- 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(() => inject(TUI_REDUCED_MOTION) ? `auto` : `smooth`, diff --git a/projects/core/components/root/root.component.ts b/projects/core/components/root/root.component.ts index 35bf778ab490..856b2e4ac2ec 100644 --- 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>, diff --git a/projects/core/styles/mixins/mixins.less b/projects/core/styles/mixins/mixins.less index 7867cb1fb019..8a7d34b96141 100644 --- 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 index 0eb5ce6de08a..de5453def30f 100644 --- 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 index ed74c2cb72fa..ed9aa0a55512 100644 --- 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 index 92e45ed06054..712285663412 100644 --- 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 index 328d44305fe5..0f45a10a783e 100644 --- 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 index 286aa1982a42..6363a3d58f80 100644 --- 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 index a649d1239f60..58f8fa2ac3ba 100644 --- 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 index 4552b25c8d71..d358c6b550a1 100644 --- 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 & {