refactor(components): update menu hover state animation curve and tra…

…nsition state guidance (#2353) update menu and transition state guidance
GetJobber · Feb 3, 2025 · a355b84 · a355b84
1 parent 2e11e22
commit a355b84
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/docs/patterns/interaction.stories.mdx b/docs/patterns/interaction.stories.mdx
@@ -50,7 +50,7 @@ An interactive element is... being interacted with.
         - a custom focus ring is applied
 
         #### Timing
-        Most state transitions use `var(--timing-base) ease-in` for a pleasant
+        Most state transitions use `var(--timing-base) ease-out` for a pleasant
         transition.
 
         #### CSS implementation
@@ -62,7 +62,7 @@ An interactive element is... being interacted with.
             .myElement {
                 background-color: var(--color-surface);
                 /* apply consistent transitions to background and box-shadow */
-                transition: all var(--timing-base) ease-in;
+                transition: all var(--timing-base) ease-out;
                 cursor: pointer;
                 /* hide the default focus ring, but still support "high contrast" modes */
                 outline: transparent;

diff --git a/packages/components/src/Menu/Menu.module.css b/packages/components/src/Menu/Menu.module.css
@@ -76,8 +76,8 @@
   gap: var(--menu-space);
   align-items: center;
   transition:
-    background-color var(--timing-base) ease-in,
-    box-shadow var(--timing-base) ease-in;
+    background-color var(--timing-base) ease-out,
+    box-shadow var(--timing-base) ease-out;
 }
 
 .action:hover,