From f2320ec52224686d086c8147ab8b928a642b26fc Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Tue, 31 Dec 2024 09:54:36 +0530 Subject: [PATCH 1/2] Data Views: Standardize reduced motion handling using media queries --- .../src/components/dataviews-footer/style.scss | 7 +++++-- .../dataviews/src/components/dataviews/style.scss | 12 ++++++++---- .../dataviews/src/dataviews-layouts/grid/style.scss | 8 +++++--- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss index a5cd4dcac9ca02..d8f205f6c8f75c 100644 --- a/packages/dataviews/src/components/dataviews-footer/style.scss +++ b/packages/dataviews/src/components/dataviews-footer/style.scss @@ -6,8 +6,11 @@ padding: $grid-unit-15 $grid-unit-60; border-top: $border-width solid $gray-100; flex-shrink: 0; - transition: padding ease-out 0.1s; - @include reduce-motion("transition"); + + @media not (prefers-reduced-motion) { + transition: padding ease-out 0.1s; + } + z-index: z-index(".dataviews-footer"); } diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss index 3c85115c06dddf..b44d5b2543f4af 100644 --- a/packages/dataviews/src/components/dataviews/style.scss +++ b/packages/dataviews/src/components/dataviews/style.scss @@ -18,8 +18,10 @@ flex-shrink: 0; position: sticky; left: 0; - transition: padding ease-out 0.1s; - @include reduce-motion( "transition" ); + + @media not (prefers-reduced-motion) { + transition: padding ease-out 0.1s; + } } .dataviews-no-results, @@ -29,8 +31,10 @@ display: flex; align-items: center; justify-content: center; - transition: padding ease-out 0.1s; - @include reduce-motion( "transition" ); + + @media not (prefers-reduced-motion) { + transition: padding ease-out 0.1s; + } } @container (max-width: 430px) { diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss index 333e6e9a4caf9f..49a9ca041da268 100644 --- a/packages/dataviews/src/dataviews-layouts/grid/style.scss +++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss @@ -2,10 +2,12 @@ margin-bottom: auto; grid-template-rows: max-content; padding: 0 $grid-unit-60 $grid-unit-30; - transition: padding ease-out 0.1s; - container-type: inline-size; - @include reduce-motion("transition"); + @media not (prefers-reduced-motion) { + transition: padding ease-out 0.1s; + } + + container-type: inline-size; .dataviews-view-grid__card { height: 100%; From 9dc3cb6f5dab9ea4db8bdb75b934be2cc2f74c4f Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Mon, 13 Jan 2025 10:35:02 +0530 Subject: [PATCH 2/2] Data Views: Move container-type property to logical layout grouping --- packages/dataviews/src/dataviews-layouts/grid/style.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss index 49a9ca041da268..a741b185572934 100644 --- a/packages/dataviews/src/dataviews-layouts/grid/style.scss +++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss @@ -2,13 +2,12 @@ margin-bottom: auto; grid-template-rows: max-content; padding: 0 $grid-unit-60 $grid-unit-30; + container-type: inline-size; @media not (prefers-reduced-motion) { transition: padding ease-out 0.1s; } - container-type: inline-size; - .dataviews-view-grid__card { height: 100%; justify-content: flex-start;