From d3758ced4209ac14996bafd6441ecc1f84a52ecd Mon Sep 17 00:00:00 2001
From: Ankit Kumar Shah <ankit.shah@rtcamp.com>
Date: Mon, 13 Jan 2025 11:47:58 +0530
Subject: [PATCH] Data Views: Standardize reduced motion handling using media
 queries (#68422)

* Data Views: Standardize reduced motion handling using media queries

* Data Views: Move container-type property to logical layout grouping

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../src/components/dataviews-footer/style.scss       |  7 +++++--
 .../dataviews/src/components/dataviews/style.scss    | 12 ++++++++----
 .../dataviews/src/dataviews-layouts/grid/style.scss  |  5 +++--
 3 files changed, 16 insertions(+), 8 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..a741b185572934 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -2,10 +2,11 @@
 	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;
+	}
 
 	.dataviews-view-grid__card {
 		height: 100%;