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

…rimer#3224) Co-authored-by: camertron <camertron@users.noreply.github.com> Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>
opf · Dec 6, 2024 · 3140ad9 · 3140ad9
1 parent 1647656
commit 3140ad9
Show file tree

Hide file tree

Showing 85 changed files with 26 additions and 50 deletions.
diff --git a/.changeset/friendly-owls-destroy.md b/.changeset/friendly-owls-destroy.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Update check box styles for ActionList to match the rest of Primer
diff --git a/...ots/snapshots.test.ts-snapshots/primer/alpha/check_box/with_caption/focused.png b/...ots/snapshots.test.ts-snapshots/primer/alpha/check_box/with_caption/focused.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/check_box_group/with_caption/focused.png b/...apshots.test.ts-snapshots/primer/alpha/check_box_group/with_caption/focused.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/radio_button/checked/focused.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/radio_button/checked/focused.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/alpha/radio_button/default/focused.png b/...shots/snapshots.test.ts-snapshots/primer/alpha/radio_button/default/focused.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/radio_button/visually_hide_label/focused.png b/...ots.test.ts-snapshots/primer/alpha/radio_button/visually_hide_label/focused.png
diff --git a/.../snapshots.test.ts-snapshots/primer/alpha/radio_button/with_caption/focused.png b/.../snapshots.test.ts-snapshots/primer/alpha/radio_button/with_caption/focused.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/radio_button_group/default/focused.png b/...snapshots.test.ts-snapshots/primer/alpha/radio_button_group/default/focused.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/radio_button_group/invalid/focused.png b/...snapshots.test.ts-snapshots/primer/alpha/radio_button_group/invalid/focused.png
diff --git a/...hots.test.ts-snapshots/primer/alpha/radio_button_group/with_caption/focused.png b/...hots.test.ts-snapshots/primer/alpha/radio_button_group/with_caption/focused.png
diff --git a/...eenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/default/dark.png b/...eenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/default/dark.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/select_panel/default/dark_colorblind.png b/...apshots.test.ts-snapshots/primer/alpha/select_panel/default/dark_colorblind.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/default/dark_dimmed.png b/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/default/dark_dimmed.png
diff --git a/...hots.test.ts-snapshots/primer/alpha/select_panel/default/dark_high_contrast.png b/...hots.test.ts-snapshots/primer/alpha/select_panel/default/dark_high_contrast.png
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/default/light.png b/...enshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/default/light.png
diff --git a/...pshots.test.ts-snapshots/primer/alpha/select_panel/default/light_colorblind.png b/...pshots.test.ts-snapshots/primer/alpha/select_panel/default/light_colorblind.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/select_panel/default/light_high_contrast.png b/...ots.test.ts-snapshots/primer/alpha/select_panel/default/light_high_contrast.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch/dark.png b/...ots.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch/dark.png
diff --git a/...-snapshots/primer/alpha/select_panel/eventually_local_fetch/dark_colorblind.png b/...-snapshots/primer/alpha/select_panel/eventually_local_fetch/dark_colorblind.png
diff --git a/...t.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch/dark_dimmed.png b/...t.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch/dark_dimmed.png
diff --git a/...apshots/primer/alpha/select_panel/eventually_local_fetch/dark_high_contrast.png b/...apshots/primer/alpha/select_panel/eventually_local_fetch/dark_high_contrast.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch/light.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/eventually_local_fetch/light.png
diff --git a/...snapshots/primer/alpha/select_panel/eventually_local_fetch/light_colorblind.png b/...snapshots/primer/alpha/select_panel/eventually_local_fetch/light_colorblind.png
diff --git a/...pshots/primer/alpha/select_panel/eventually_local_fetch/light_high_contrast.png b/...pshots/primer/alpha/select_panel/eventually_local_fetch/light_high_contrast.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark.png b/...s/snapshots.test.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark.png
diff --git a/....test.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark_colorblind.png b/....test.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark_colorblind.png
diff --git a/...hots.test.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark_dimmed.png b/...hots.test.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark_dimmed.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark_high_contrast.png b/...st.ts-snapshots/primer/alpha/select_panel/footer_buttons/dark_high_contrast.png
diff --git a/.../snapshots.test.ts-snapshots/primer/alpha/select_panel/footer_buttons/light.png b/.../snapshots.test.ts-snapshots/primer/alpha/select_panel/footer_buttons/light.png
diff --git a/...test.ts-snapshots/primer/alpha/select_panel/footer_buttons/light_colorblind.png b/...test.ts-snapshots/primer/alpha/select_panel/footer_buttons/light_colorblind.png
diff --git a/...t.ts-snapshots/primer/alpha/select_panel/footer_buttons/light_high_contrast.png b/...t.ts-snapshots/primer/alpha/select_panel/footer_buttons/light_high_contrast.png
diff --git a/...hots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark.png b/...hots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark_colorblind.png b/...ots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark_colorblind.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark_dimmed.png b/...apshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark_dimmed.png
diff --git a/....test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark_high_contrast.png b/....test.ts-snapshots/primer/alpha/select_panel/local_fetch/dark_high_contrast.png
diff --git a/...ots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/light.png b/...ots/snapshots.test.ts-snapshots/primer/alpha/select_panel/local_fetch/light.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/select_panel/local_fetch/light_colorblind.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/local_fetch/light_colorblind.png
diff --git a/...test.ts-snapshots/primer/alpha/select_panel/local_fetch/light_high_contrast.png b/...test.ts-snapshots/primer/alpha/select_panel/local_fetch/light_high_contrast.png
diff --git a/...hots/snapshots.test.ts-snapshots/primer/alpha/select_panel/multiselect/dark.png b/...hots/snapshots.test.ts-snapshots/primer/alpha/select_panel/multiselect/dark.png
diff --git a/...ots.test.ts-snapshots/primer/alpha/select_panel/multiselect/dark_colorblind.png b/...ots.test.ts-snapshots/primer/alpha/select_panel/multiselect/dark_colorblind.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/select_panel/multiselect/dark_dimmed.png b/...apshots.test.ts-snapshots/primer/alpha/select_panel/multiselect/dark_dimmed.png
diff --git a/....test.ts-snapshots/primer/alpha/select_panel/multiselect/dark_high_contrast.png b/....test.ts-snapshots/primer/alpha/select_panel/multiselect/dark_high_contrast.png
diff --git a/...ots/snapshots.test.ts-snapshots/primer/alpha/select_panel/multiselect/light.png b/...ots/snapshots.test.ts-snapshots/primer/alpha/select_panel/multiselect/light.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/select_panel/multiselect/light_colorblind.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/multiselect/light_colorblind.png
diff --git a/...test.ts-snapshots/primer/alpha/select_panel/multiselect/light_high_contrast.png b/...test.ts-snapshots/primer/alpha/select_panel/multiselect/light_high_contrast.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/select_panel/multiselect_form/dark.png b/...snapshots.test.ts-snapshots/primer/alpha/select_panel/multiselect_form/dark.png
diff --git a/...est.ts-snapshots/primer/alpha/select_panel/multiselect_form/dark_colorblind.png b/...est.ts-snapshots/primer/alpha/select_panel/multiselect_form/dark_colorblind.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/select_panel/multiselect_form/dark_dimmed.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/multiselect_form/dark_dimmed.png
diff --git a/....ts-snapshots/primer/alpha/select_panel/multiselect_form/dark_high_contrast.png b/....ts-snapshots/primer/alpha/select_panel/multiselect_form/dark_high_contrast.png
diff --git a/...napshots.test.ts-snapshots/primer/alpha/select_panel/multiselect_form/light.png b/...napshots.test.ts-snapshots/primer/alpha/select_panel/multiselect_form/light.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/multiselect_form/light_colorblind.png b/...st.ts-snapshots/primer/alpha/select_panel/multiselect_form/light_colorblind.png
diff --git a/...ts-snapshots/primer/alpha/select_panel/multiselect_form/light_high_contrast.png b/...ts-snapshots/primer/alpha/select_panel/multiselect_form/light_high_contrast.png
diff --git a/...ots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark.png b/...ots/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark_colorblind.png b/...ts.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark_colorblind.png
diff --git a/...pshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark_dimmed.png b/...pshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark_dimmed.png
diff --git a/...test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark_high_contrast.png b/...test.ts-snapshots/primer/alpha/select_panel/remote_fetch/dark_high_contrast.png
diff --git a/...ts/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/light.png b/...ts/snapshots.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/light.png
diff --git a/...s.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/light_colorblind.png b/...s.test.ts-snapshots/primer/alpha/select_panel/remote_fetch/light_colorblind.png
diff --git a/...est.ts-snapshots/primer/alpha/select_panel/remote_fetch/light_high_contrast.png b/...est.ts-snapshots/primer/alpha/select_panel/remote_fetch/light_high_contrast.png
diff --git a/...est.ts-snapshots/primer/alpha/select_panel/remote_fetch_filter_failure/dark.png b/...est.ts-snapshots/primer/alpha/select_panel/remote_fetch_filter_failure/dark.png
diff --git a/...shots/primer/alpha/select_panel/remote_fetch_filter_failure/dark_colorblind.png b/...shots/primer/alpha/select_panel/remote_fetch_filter_failure/dark_colorblind.png
diff --git a/...snapshots/primer/alpha/select_panel/remote_fetch_filter_failure/dark_dimmed.png b/...snapshots/primer/alpha/select_panel/remote_fetch_filter_failure/dark_dimmed.png
diff --git a/...ts/primer/alpha/select_panel/remote_fetch_filter_failure/dark_high_contrast.png b/...ts/primer/alpha/select_panel/remote_fetch_filter_failure/dark_high_contrast.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/remote_fetch_filter_failure/light.png b/...st.ts-snapshots/primer/alpha/select_panel/remote_fetch_filter_failure/light.png
diff --git a/...hots/primer/alpha/select_panel/remote_fetch_filter_failure/light_colorblind.png b/...hots/primer/alpha/select_panel/remote_fetch_filter_failure/light_colorblind.png
diff --git a/...s/primer/alpha/select_panel/remote_fetch_filter_failure/light_high_contrast.png b/...s/primer/alpha/select_panel/remote_fetch_filter_failure/light_high_contrast.png
diff --git a/...napshots.test.ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark.png b/...napshots.test.ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark.png
diff --git a/...st.ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark_colorblind.png b/...st.ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark_colorblind.png
diff --git a/...s.test.ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark_dimmed.png b/...s.test.ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark_dimmed.png
diff --git a/...ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark_high_contrast.png b/...ts-snapshots/primer/alpha/select_panel/with_avatar_items/dark_high_contrast.png
diff --git a/...apshots.test.ts-snapshots/primer/alpha/select_panel/with_avatar_items/light.png b/...apshots.test.ts-snapshots/primer/alpha/select_panel/with_avatar_items/light.png
diff --git a/...t.ts-snapshots/primer/alpha/select_panel/with_avatar_items/light_colorblind.png b/...t.ts-snapshots/primer/alpha/select_panel/with_avatar_items/light_colorblind.png
diff --git a/...s-snapshots/primer/alpha/select_panel/with_avatar_items/light_high_contrast.png b/...s-snapshots/primer/alpha/select_panel/with_avatar_items/light_high_contrast.png
diff --git a/...snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/focused.png b/...snapshots.test.ts-snapshots/primer/forms/array_check_box_group_form/focused.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/focused.png b/...shots/snapshots.test.ts-snapshots/primer/forms/check_box_group_form/focused.png
diff --git a/...snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/focused.png b/...snapshots.test.ts-snapshots/primer/forms/check_box_with_nested_form/focused.png
diff --git a/...reenshots/snapshots.test.ts-snapshots/primer/forms/multi_input_form/focused.png b/...reenshots/snapshots.test.ts-snapshots/primer/forms/multi_input_form/focused.png
diff --git a/...apshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/focused.png b/...apshots.test.ts-snapshots/primer/forms/name_with_question_mark_form/focused.png
diff --git a/...ts/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/focused.png b/...ts/snapshots.test.ts-snapshots/primer/forms/radio_button_group_form/focused.png
diff --git a/...pshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/focused.png b/...pshots.test.ts-snapshots/primer/forms/radio_button_with_nested_form/focused.png
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);
+      border-color: var(--control-checked-borderColor-rest);
+      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
@@ -1,4 +1,3 @@
-/* stylelint-disable selector-no-qualifying-type */
 /* stylelint-disable selector-max-type */
 /* stylelint-disable max-nesting-depth */
 /* stylelint-disable selector-max-specificity */
@@ -578,7 +577,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 +669,7 @@ input[type='checkbox'].FormControl-checkbox {
   }
 }
 
-input[type='radio'].FormControl-radio {
+.FormControl-radio {
   @mixin Field;
 
   position: relative;

diff --git a/static/classes.json b/static/classes.json
@@ -248,6 +248,9 @@
   "FormControl-check-group-wrap": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-checkbox": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-checkbox-wrap": [
     "Primer::Alpha::TextField"
   ],
@@ -290,6 +293,9 @@
   "FormControl-monospace": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-radio": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-radio-group-wrap": [
     "Primer::Alpha::TextField"
   ],

diff --git a/test/css/component_specific_selectors_test.rb b/test/css/component_specific_selectors_test.rb
@@ -67,6 +67,8 @@ class ComponentSpecificSelectorsTest < Minitest::Test
       ".FormControl-spacingWrapper",
       ".FormControl-horizontalGroup",
       ".FormControl-inlineValidation--success",
+      ".FormControl-checkbox",
+      ".FormControl-radio",
     ],
     Primer::Alpha::ButtonMarketing => [
       ".btn-mktg.disabled",