Update check box styles for ActionList to match the rest of Primer

primer · Dec 5, 2024 · 5902b90 · 5902b90
1 parent 1647656
commit 5902b90
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 49 deletions.
diff --git a/app/components/primer/alpha/action_list.pcss b/app/components/primer/alpha/action_list.pcss
@@ -448,64 +448,31 @@ nav-list {
   */
   &[aria-checked='true'],
   &[aria-selected='true'] {
-    /* multiselect checkmark */
-    & .ActionListItem-multiSelectCheckmark {
-      visibility: visible;
-      opacity: 1;
-      transition:
-        visibility 0 linear 0,
-        opacity 50ms;
+    .FormControl-checkbox {
+      background: var(--control-checked-bgColor-rest, var(--color-accent-fg));
+      border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));
+      transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
+
+      &::before {
+        visibility: visible;
+        transition: visibility 0s linear 0s;
+        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
+      }
     }
 
     /* singleselect checkmark */
     & .ActionListItem-singleSelectCheckmark {
       visibility: visible;
     }
-
-    /* checkbox */
-    & .ActionListItem-multiSelectIcon {
-      & .ActionListItem-multiSelectIconRect {
-        fill: var(--control-checked-bgColor-rest);
-        stroke: var(--control-checked-bgColor-rest);
-        stroke-width: var(--borderWidth-thin, 1px);
-      }
-
-      & .ActionListItem-multiSelectCheckmark {
-        fill: var(--fgColor-onEmphasis);
-      }
-    }
   }
 
   &[aria-checked='false'],
   &[aria-selected='false'] {
-    /* multiselect checkmark */
-    & .ActionListItem-multiSelectCheckmark {
-      visibility: hidden;
-      opacity: 0;
-      transition:
-        visibility 0 linear 50ms,
-        opacity 50ms;
-    }
-
     /* singleselect checkmark */
     & .ActionListItem-singleSelectCheckmark {
       visibility: hidden;
       transition: visibility 0s linear 200ms;
     }
-
-    /* checkbox */
-    & .ActionListItem-multiSelectIcon {
-      & .ActionListItem-multiSelectIconRect {
-        fill: var(--bgColor-default);
-        stroke: var(--control-borderColor-rest);
-        stroke-width: var(--borderWidth-thin, 1px);
-      }
-    }
-
-    & .ActionListItem-multiSelectIconRect {
-      fill: var(--bgColor-default);
-      border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
-    }
   }
 
   /* sizes */

diff --git a/app/components/primer/alpha/action_list/item.html.erb b/app/components/primer/alpha/action_list/item.html.erb
@@ -13,10 +13,7 @@
         </span>
       <% elsif list.select_variant == :multiple_checkbox %>
         <span class="ActionListItem-visual ActionListItem-action--leading">
-          <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="ActionListItem-multiSelectIcon">
-            <rect x="2" y="2" width="12" height="12" rx="4" class="ActionListItem-multiSelectIconRect"></rect>
-            <path fill-rule="evenodd" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z" class="ActionListItem-multiSelectCheckmark"></path>
-          </svg>
+          <div class="FormControl-checkbox"></div>
         </span>
       <% end %>
       <% if leading_visual %>

diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
@@ -578,7 +578,7 @@
 
 /* these selectors are temporary to override base.scss
 ** once Field styles are widely adopted, we can adjust this and the global base styles */
-input[type='checkbox'].FormControl-checkbox {
+.FormControl-checkbox {
   @mixin Field;
 
   position: relative;
@@ -670,7 +670,7 @@ input[type='checkbox'].FormControl-checkbox {
   }
 }
 
-input[type='radio'].FormControl-radio {
+.FormControl-radio {
   @mixin Field;
 
   position: relative;