From 6a69629b57fb29135f78c39c320c7a856466a167 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 11 Feb 2025 15:25:27 -0800 Subject: [PATCH 1/3] chore: adding appear animations to modal dialog and overlay --- .../modal-content/modal-content.scss | 15 +++++++++++++++ .../modal-overlay/modal-overlay.scss | 12 ++++++++++++ 2 files changed, 27 insertions(+) diff --git a/ui/components/component-library/modal-content/modal-content.scss b/ui/components/component-library/modal-content/modal-content.scss index f08dc1c730f9..49a27ae50094 100644 --- a/ui/components/component-library/modal-content/modal-content.scss +++ b/ui/components/component-library/modal-content/modal-content.scss @@ -34,6 +34,8 @@ max-height: 100%; box-shadow: var(--shadow-size-lg) var(--color-shadow-default); + animation: mm-modal-slide-up 400ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards; + &--size-sm { --size: 360px; @@ -54,3 +56,16 @@ } } } + +// Modal Slide-Up (appear) +@keyframes mm-modal-slide-up { + from { + transform: translateY(24px); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} diff --git a/ui/components/component-library/modal-overlay/modal-overlay.scss b/ui/components/component-library/modal-overlay/modal-overlay.scss index 33d2ea7f9fdc..c0c91f32206e 100644 --- a/ui/components/component-library/modal-overlay/modal-overlay.scss +++ b/ui/components/component-library/modal-overlay/modal-overlay.scss @@ -7,4 +7,16 @@ right: 0; bottom: 0; z-index: design-system.$modal-z-index; + animation: mm-modal-fade-in 250ms linear forwards; +} + +// Overlay Fade-In +@keyframes mm-modal-fade-in { + from { + opacity: 0; + } + + to { + opacity: 1; + } } From 3c57b152995154e8aad3ee0d22d23a6b463d4274 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Wed, 12 Feb 2025 09:39:32 -0800 Subject: [PATCH 2/3] chore: adding prefers reduced motion media query to ensure accessibility --- .../modal-content/modal-content.scss | 30 ++++++++++++------- .../modal-overlay/modal-overlay.scss | 22 +++++++++----- 2 files changed, 34 insertions(+), 18 deletions(-) diff --git a/ui/components/component-library/modal-content/modal-content.scss b/ui/components/component-library/modal-content/modal-content.scss index 49a27ae50094..216d99a03aba 100644 --- a/ui/components/component-library/modal-content/modal-content.scss +++ b/ui/components/component-library/modal-content/modal-content.scss @@ -34,8 +34,17 @@ max-height: 100%; box-shadow: var(--shadow-size-lg) var(--color-shadow-default); - animation: mm-modal-slide-up 400ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards; + // Animate for users who have no reduced motion preferences + @media (prefers-reduced-motion: no-preference) { + animation: mm-modal-slide-up 400ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards; + } + + // Don't animate for users who have reduced motion preferences + @media (prefers-reduced-motion: reduce) { + opacity: 1; + transform: translateY(0); + } &--size-sm { --size: 360px; @@ -57,15 +66,16 @@ } } -// Modal Slide-Up (appear) -@keyframes mm-modal-slide-up { - from { - transform: translateY(24px); - opacity: 0; - } +@media (prefers-reduced-motion: no-preference) { + @keyframes mm-modal-slide-up { + from { + transform: translateY(24px); + opacity: 0; + } - to { - transform: translateY(0); - opacity: 1; + to { + transform: translateY(0); + opacity: 1; + } } } diff --git a/ui/components/component-library/modal-overlay/modal-overlay.scss b/ui/components/component-library/modal-overlay/modal-overlay.scss index c0c91f32206e..4e116241ce31 100644 --- a/ui/components/component-library/modal-overlay/modal-overlay.scss +++ b/ui/components/component-library/modal-overlay/modal-overlay.scss @@ -7,16 +7,22 @@ right: 0; bottom: 0; z-index: design-system.$modal-z-index; - animation: mm-modal-fade-in 250ms linear forwards; -} + opacity: 1; -// Overlay Fade-In -@keyframes mm-modal-fade-in { - from { - opacity: 0; + // Don't animate for users who have reduced motion preferences + @media (prefers-reduced-motion: no-preference) { + animation: mm-modal-fade-in 250ms linear forwards; } +} + +@media (prefers-reduced-motion: no-preference) { + @keyframes mm-modal-fade-in { + from { + opacity: 0; + } - to { - opacity: 1; + to { + opacity: 1; + } } } From fff51b1e805782758ec209b5b7848ce9ded56684 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Wed, 12 Feb 2025 09:53:06 -0800 Subject: [PATCH 3/3] chore: updating names to align with specific modal component --- .../component-library/modal-content/modal-content.scss | 4 ++-- .../component-library/modal-overlay/modal-overlay.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/components/component-library/modal-content/modal-content.scss b/ui/components/component-library/modal-content/modal-content.scss index 216d99a03aba..6ecc79083da5 100644 --- a/ui/components/component-library/modal-content/modal-content.scss +++ b/ui/components/component-library/modal-content/modal-content.scss @@ -37,7 +37,7 @@ // Animate for users who have no reduced motion preferences @media (prefers-reduced-motion: no-preference) { - animation: mm-modal-slide-up 400ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards; + animation: modal-dialog-slide-up 400ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards; } // Don't animate for users who have reduced motion preferences @@ -67,7 +67,7 @@ } @media (prefers-reduced-motion: no-preference) { - @keyframes mm-modal-slide-up { + @keyframes modal-dialog-slide-up { from { transform: translateY(24px); opacity: 0; diff --git a/ui/components/component-library/modal-overlay/modal-overlay.scss b/ui/components/component-library/modal-overlay/modal-overlay.scss index 4e116241ce31..f8545983a4c8 100644 --- a/ui/components/component-library/modal-overlay/modal-overlay.scss +++ b/ui/components/component-library/modal-overlay/modal-overlay.scss @@ -11,12 +11,12 @@ // Don't animate for users who have reduced motion preferences @media (prefers-reduced-motion: no-preference) { - animation: mm-modal-fade-in 250ms linear forwards; + animation: modal-overlay-fade-in 250ms linear forwards; } } @media (prefers-reduced-motion: no-preference) { - @keyframes mm-modal-fade-in { + @keyframes modal-overlay-fade-in { from { opacity: 0; }