From 6b0d3d5705791d78d2b14f26b5a44f42110e1910 Mon Sep 17 00:00:00 2001 From: Avinash Dwarapu Date: Fri, 21 Feb 2025 17:54:55 +0100 Subject: [PATCH] Fix snapshot tests. --- .../__snapshots__/themes.test.ts.snap | 48 +++++++++++++++++++ .../drag-handle-wrapper/motion.scss | 48 +++++++++---------- 2 files changed, 72 insertions(+), 24 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index a6871c2c03..a277a668b9 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -71,6 +71,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-control-checked": "#0073bb", "color-background-control-default": "#ffffff", "color-background-control-disabled": "#d5dbdb", + "color-background-drag-button-active": "#2a2e33", + "color-background-drag-button-default": "#545b64", + "color-background-drag-button-disabled": "#eaeded", + "color-background-drag-button-hover": "#414750", "color-background-dropdown-item-default": "#ffffff", "color-background-dropdown-item-dimmed": "transparent", "color-background-dropdown-item-filter-match": "#f1faff", @@ -384,6 +388,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-text-counter": "#687078", "color-text-disabled": "#aab7b8", "color-text-disabled-inline-edit": "#545b64", + "color-text-drag-button-default": "#ffffff", + "color-text-drag-button-disabled": "#aab7b8", "color-text-dropdown-footer": "#687078", "color-text-dropdown-group-label": "#545b64", "color-text-dropdown-item-default": "#16191f", @@ -730,6 +736,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-control-checked": "#00a1c9", "color-background-control-default": "#1a2029", "color-background-control-disabled": "#414750", + "color-background-drag-button-active": "#2a2e33", + "color-background-drag-button-default": "#545b64", + "color-background-drag-button-disabled": "#2a2e33", + "color-background-drag-button-hover": "#414750", "color-background-dropdown-item-default": "#2a2e33", "color-background-dropdown-item-dimmed": "transparent", "color-background-dropdown-item-filter-match": "#12293b", @@ -1043,6 +1053,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-text-counter": "#95a5a6", "color-text-disabled": "#687078", "color-text-disabled-inline-edit": "#95a5a6", + "color-text-drag-button-default": "#ffffff", + "color-text-drag-button-disabled": "#687078", "color-text-dropdown-footer": "#95a5a6", "color-text-dropdown-group-label": "#95a5a6", "color-text-dropdown-item-default": "#d5dbdb", @@ -1389,6 +1401,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-control-checked": "#0073bb", "color-background-control-default": "#ffffff", "color-background-control-disabled": "#d5dbdb", + "color-background-drag-button-active": "#2a2e33", + "color-background-drag-button-default": "#545b64", + "color-background-drag-button-disabled": "#eaeded", + "color-background-drag-button-hover": "#414750", "color-background-dropdown-item-default": "#ffffff", "color-background-dropdown-item-dimmed": "transparent", "color-background-dropdown-item-filter-match": "#f1faff", @@ -1702,6 +1718,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-text-counter": "#687078", "color-text-disabled": "#aab7b8", "color-text-disabled-inline-edit": "#545b64", + "color-text-drag-button-default": "#ffffff", + "color-text-drag-button-disabled": "#aab7b8", "color-text-dropdown-footer": "#687078", "color-text-dropdown-group-label": "#545b64", "color-text-dropdown-item-default": "#16191f", @@ -2048,6 +2066,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-control-checked": "#0073bb", "color-background-control-default": "#ffffff", "color-background-control-disabled": "#d5dbdb", + "color-background-drag-button-active": "#2a2e33", + "color-background-drag-button-default": "#545b64", + "color-background-drag-button-disabled": "#eaeded", + "color-background-drag-button-hover": "#414750", "color-background-dropdown-item-default": "#ffffff", "color-background-dropdown-item-dimmed": "transparent", "color-background-dropdown-item-filter-match": "#f1faff", @@ -2361,6 +2383,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-text-counter": "#687078", "color-text-disabled": "#aab7b8", "color-text-disabled-inline-edit": "#545b64", + "color-text-drag-button-default": "#ffffff", + "color-text-drag-button-disabled": "#aab7b8", "color-text-dropdown-footer": "#687078", "color-text-dropdown-group-label": "#545b64", "color-text-dropdown-item-default": "#16191f", @@ -2707,6 +2731,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-control-checked": "#006ce0", "color-background-control-default": "#ffffff", "color-background-control-disabled": "#dedee3", + "color-background-drag-button-active": "#232b37", + "color-background-drag-button-default": "#424650", + "color-background-drag-button-disabled": "#ebebf0", + "color-background-drag-button-hover": "#333843", "color-background-dropdown-item-default": "#ffffff", "color-background-dropdown-item-dimmed": "transparent", "color-background-dropdown-item-filter-match": "#f0fbff", @@ -3020,6 +3048,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-text-counter": "#656871", "color-text-disabled": "#b4b4bb", "color-text-disabled-inline-edit": "#424650", + "color-text-drag-button-default": "#ffffff", + "color-text-drag-button-disabled": "#b4b4bb", "color-text-dropdown-footer": "#656871", "color-text-dropdown-group-label": "#424650", "color-text-dropdown-item-default": "#0f141a", @@ -3366,6 +3396,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-control-checked": "#006ce0", "color-background-control-default": "#ffffff", "color-background-control-disabled": "#dedee3", + "color-background-drag-button-active": "#232b37", + "color-background-drag-button-default": "#424650", + "color-background-drag-button-disabled": "#ebebf0", + "color-background-drag-button-hover": "#333843", "color-background-dropdown-item-default": "#ffffff", "color-background-dropdown-item-dimmed": "transparent", "color-background-dropdown-item-filter-match": "#f0fbff", @@ -3679,6 +3713,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-counter": "#656871", "color-text-disabled": "#b4b4bb", "color-text-disabled-inline-edit": "#424650", + "color-text-drag-button-default": "#ffffff", + "color-text-drag-button-disabled": "#b4b4bb", "color-text-dropdown-footer": "#656871", "color-text-dropdown-group-label": "#424650", "color-text-dropdown-item-default": "#0f141a", @@ -4025,6 +4061,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-control-checked": "#42b4ff", "color-background-control-default": "#0f141a", "color-background-control-disabled": "#333843", + "color-background-drag-button-active": "#232b37", + "color-background-drag-button-default": "#424650", + "color-background-drag-button-disabled": "#232b37", + "color-background-drag-button-hover": "#333843", "color-background-dropdown-item-default": "#1b232d", "color-background-dropdown-item-dimmed": "transparent", "color-background-dropdown-item-filter-match": "#333843", @@ -4338,6 +4378,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-counter": "#a4a4ad", "color-text-disabled": "#656871", "color-text-disabled-inline-edit": "#b4b4bb", + "color-text-drag-button-default": "#ffffff", + "color-text-drag-button-disabled": "#656871", "color-text-dropdown-footer": "#a4a4ad", "color-text-dropdown-group-label": "#c6c6cd", "color-text-dropdown-item-default": "#dedee3", @@ -4684,6 +4726,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-control-checked": "#42b4ff", "color-background-control-default": "#161d26", "color-background-control-disabled": "#333843", + "color-background-drag-button-active": "#232b37", + "color-background-drag-button-default": "#424650", + "color-background-drag-button-disabled": "#232b37", + "color-background-drag-button-hover": "#333843", "color-background-dropdown-item-default": "#1b232d", "color-background-dropdown-item-dimmed": "transparent", "color-background-dropdown-item-filter-match": "#333843", @@ -4997,6 +5043,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-counter": "#a4a4ad", "color-text-disabled": "#656871", "color-text-disabled-inline-edit": "#b4b4bb", + "color-text-drag-button-default": "#ffffff", + "color-text-drag-button-disabled": "#656871", "color-text-dropdown-footer": "#a4a4ad", "color-text-dropdown-group-label": "#c6c6cd", "color-text-dropdown-item-default": "#dedee3", diff --git a/src/internal/components/drag-handle-wrapper/motion.scss b/src/internal/components/drag-handle-wrapper/motion.scss index e000389af9..6f0ea7a152 100644 --- a/src/internal/components/drag-handle-wrapper/motion.scss +++ b/src/internal/components/drag-handle-wrapper/motion.scss @@ -25,15 +25,15 @@ &.drag-button-motion-entering { @include styles.with-motion { animation: - slide-up awsui.$motion-duration-fast awsui.$motion-easing-expressive, - awsui-motion-fade-in awsui.$motion-duration-fast awsui.$motion-easing-expressive; + slide-up awsui.$motion-duration-expressive awsui.$motion-easing-expressive, + awsui-motion-fade-in awsui.$motion-duration-expressive awsui.$motion-easing-expressive; } } &.drag-button-motion-exiting { @include styles.with-motion { animation: - slide-up-exit awsui.$motion-duration-fast awsui.$motion-easing-expressive, - awsui-motion-fade-out-0 awsui.$motion-duration-fast awsui.$motion-easing-expressive; + slide-up-exit awsui.$motion-duration-expressive awsui.$motion-easing-expressive, + awsui-motion-fade-out-0 awsui.$motion-duration-expressive awsui.$motion-easing-expressive; } } } @@ -42,15 +42,15 @@ &.drag-button-motion-entering { @include styles.with-motion { animation: - slide-down awsui.$motion-duration-fast awsui.$motion-easing-expressive, - awsui-motion-fade-in awsui.$motion-duration-fast awsui.$motion-easing-expressive; + slide-down awsui.$motion-duration-expressive awsui.$motion-easing-expressive, + awsui-motion-fade-in awsui.$motion-duration-expressive awsui.$motion-easing-expressive; } } &.drag-button-motion-exiting { @include styles.with-motion { animation: - slide-down-exit awsui.$motion-duration-fast awsui.$motion-easing-expressive, - awsui-motion-fade-out-0 awsui.$motion-duration-fast awsui.$motion-easing-expressive; + slide-down-exit awsui.$motion-duration-expressive awsui.$motion-easing-expressive, + awsui-motion-fade-out-0 awsui.$motion-duration-expressive awsui.$motion-easing-expressive; } } } @@ -59,29 +59,29 @@ &.drag-button-motion-entering { @include styles.with-motion { animation: - slide-left awsui.$motion-duration-fast awsui.$motion-easing-expressive, - awsui-motion-fade-in awsui.$motion-duration-fast awsui.$motion-easing-expressive; + slide-left awsui.$motion-duration-expressive awsui.$motion-easing-expressive, + awsui-motion-fade-in awsui.$motion-duration-expressive awsui.$motion-easing-expressive; } } &.drag-button-rtl.drag-button-motion-entering { @include styles.with-motion { animation: - slide-right awsui.$motion-duration-fast awsui.$motion-easing-expressive, - awsui-motion-fade-in awsui.$motion-duration-fast awsui.$motion-easing-expressive; + slide-right awsui.$motion-duration-expressive awsui.$motion-easing-expressive, + awsui-motion-fade-in awsui.$motion-duration-expressive awsui.$motion-easing-expressive; } } &.drag-button-motion-exiting { @include styles.with-motion { animation: - slide-left-exit awsui.$motion-duration-fast awsui.$motion-easing-expressive, - awsui-motion-fade-out-0 awsui.$motion-duration-fast awsui.$motion-easing-expressive; + slide-left-exit awsui.$motion-duration-expressive awsui.$motion-easing-expressive, + awsui-motion-fade-out-0 awsui.$motion-duration-expressive awsui.$motion-easing-expressive; } } &.drag-button-rtl.drag-button-motion-exiting { @include styles.with-motion { animation: - slide-right-exit awsui.$motion-duration-fast awsui.$motion-easing-expressive, - awsui-motion-fade-out-0 awsui.$motion-duration-fast awsui.$motion-easing-expressive; + slide-right-exit awsui.$motion-duration-expressive awsui.$motion-easing-expressive, + awsui-motion-fade-out-0 awsui.$motion-duration-expressive awsui.$motion-easing-expressive; } } } @@ -90,29 +90,29 @@ &.drag-button-motion-entering { @include styles.with-motion { animation: - slide-right awsui.$motion-duration-fast awsui.$motion-easing-expressive, - awsui-motion-fade-in awsui.$motion-duration-fast awsui.$motion-easing-expressive; + slide-right awsui.$motion-duration-expressive awsui.$motion-easing-expressive, + awsui-motion-fade-in awsui.$motion-duration-expressive awsui.$motion-easing-expressive; } } &.drag-button-rtl.drag-button-motion-entering { @include styles.with-motion { animation: - slide-left awsui.$motion-duration-fast awsui.$motion-easing-expressive, - awsui-motion-fade-in awsui.$motion-duration-fast awsui.$motion-easing-expressive; + slide-left awsui.$motion-duration-expressive awsui.$motion-easing-expressive, + awsui-motion-fade-in awsui.$motion-duration-expressive awsui.$motion-easing-expressive; } } &.drag-button-motion-exiting { @include styles.with-motion { animation: - slide-right-exit awsui.$motion-duration-fast awsui.$motion-easing-expressive, - awsui-motion-fade-out-0 awsui.$motion-duration-fast awsui.$motion-easing-expressive; + slide-right-exit awsui.$motion-duration-expressive awsui.$motion-easing-expressive, + awsui-motion-fade-out-0 awsui.$motion-duration-expressive awsui.$motion-easing-expressive; } } &.drag-button-rtl.drag-button-motion-exiting { @include styles.with-motion { animation: - slide-left-exit awsui.$motion-duration-fast awsui.$motion-easing-expressive, - awsui-motion-fade-out-0 awsui.$motion-duration-fast awsui.$motion-easing-expressive; + slide-left-exit awsui.$motion-duration-expressive awsui.$motion-easing-expressive, + awsui-motion-fade-out-0 awsui.$motion-duration-expressive awsui.$motion-easing-expressive; } } }