Remove animations on actionlist checkmark (#2527)

Co-authored-by: Katie Langerman <[email protected]> Co-authored-by: Jon Rohan <[email protected]>
primer · Jan 31, 2024 · 1d20198 · 1d20198
1 parent 1259249
commit 1d20198
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 33 deletions.
diff --git a/.changeset/happy-ducks-lay.md b/.changeset/happy-ducks-lay.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Remove animations on actionlist checkmark
diff --git a/app/components/primer/alpha/action_list.pcss b/app/components/primer/alpha/action_list.pcss
@@ -14,7 +14,8 @@
   list-style: none;
 }
 
-.ActionListWrap--inset, .ActionListWrap--inset[popover] {
+.ActionListWrap--inset,
+.ActionListWrap--inset[popover] {
   padding: var(--base-size-8);
 }
 
@@ -334,7 +335,9 @@
   &[aria-expanded] {
     & + .ActionList--subGroup {
       @media screen and (prefers-reduced-motion: no-preference) {
-        transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
+        transition:
+          opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),
+          transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
       }
 
       & .ActionListContent {
@@ -429,26 +432,14 @@
     & .ActionListItem-multiSelectCheckmark {
       visibility: visible;
       opacity: 1;
-      transition: visibility 0 linear 0, opacity 50ms;
+      transition:
+        visibility 0 linear 0,
+        opacity 50ms;
     }
 
     /* singleselect checkmark */
     & .ActionListItem-singleSelectCheckmark {
       visibility: visible;
-
-      @media screen and (prefers-reduced-motion: no-preference) {
-        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
-
-        @keyframes checkmarkIn {
-          from {
-            clip-path: inset(16px 0 0 0);
-          }
-
-          to {
-            clip-path: inset(0 0 0 0);
-          }
-        }
-      }
     }
 
     /* checkbox */
@@ -471,28 +462,15 @@
     & .ActionListItem-multiSelectCheckmark {
       visibility: hidden;
       opacity: 0;
-      transition: visibility 0 linear 50ms, opacity 50ms;
+      transition:
+        visibility 0 linear 50ms,
+        opacity 50ms;
     }
 
     /* singleselect checkmark */
     & .ActionListItem-singleSelectCheckmark {
       visibility: hidden;
       transition: visibility 0s linear 200ms;
-      clip-path: inset(16px 0 0 0);
-
-      @media screen and (prefers-reduced-motion: no-preference) {
-        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
-
-        @keyframes checkmarkOut {
-          from {
-            clip-path: inset(0 0 0 0);
-          }
-
-          to {
-            clip-path: inset(16px 0 0 0);
-          }
-        }
-      }
     }
 
     /* checkbox */