Write test to make sure asset naming matches component (#1540)

.changeset/pink-windows-clean.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+`app/components/primer/alpha/action_list/action-list.pcss` was re-written to `app/components/primer/alpha/action_list.pcss`

app/components/primer/alpha/action_list/action-list.pcss → app/components/primer/alpha/action_list.pcss

@@ -168,6 +168,97 @@
     }
   }
 
+  /*
+  * checkbox item [aria-checked]
+  * listbox [aria-selected]
+  */
+  &[aria-checked='true'],
+  &[aria-selected='true'] {
+    /* multiselect checkmark */
+    & .ActionListItem-multiSelectCheckmark {
+      visibility: visible;
+      opacity: 1;
+      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;
+      }
+    }
+
+    /* checkbox */
+    & .ActionListItem-multiSelectIcon {
+      & .ActionListItem-multiSelectIconRect {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+        stroke-width: var(--primer-borderWidth-thin, 1px);
+      }
+
+      & .ActionListItem-multiSelectCheckmark {
+        fill: var(--color-fg-on-emphasis);
+      }
+    }
+  }
+
+  &[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;
+      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;
+      }
+    }
+
+    /* checkbox */
+    & .ActionListItem-multiSelectIcon {
+      & .ActionListItem-multiSelectIconRect {
+        fill: var(--color-canvas-default);
+        stroke: var(--color-border-default);
+        stroke-width: var(--primer-borderWidth-thin, 1px);
+      }
+    }
+
+    & .ActionListItem-multiSelectIconRect {
+      fill: var(--color-canvas-default);
+      border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+    }
+  }
+
+  @keyframes checkmarkIn {
+    from {
+      clip-path: inset(16px 0 0 0);
+    }
+
+    to {
+      clip-path: inset(0 0 0 0);
+    }
+  }
+
+  @keyframes checkmarkOut {
+    from {
+      clip-path: inset(0 0 0 0);
+    }
+
+    to {
+      clip-path: inset(16px 0 0 0);
+    }
+  }
+
   /* Autocomplete [aria-selected] items */
 
   &[aria-selected='true'] {

app/components/primer/primer.pcss

@@ -1,5 +1,5 @@
 /* CSS component styles here */
+@import './alpha/segmented_control.pcss';
+@import "./alpha/action_list.pcss";
 @import "./beta/banner.pcss";
 @import "./beta/button.pcss";
-@import "./alpha/action_list/action-list.pcss";
-@import './alpha/segmented_control.pcss';

test/components/asset_naming_test.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require "components/test_helper"
+
+class AssetNamingTest < Minitest::Test
+  include Primer::ComponentTestHelpers
+
+  def test_css_naming_matches_component
+    Dir["app/components/**/*.pcss"].each do |file|
+      next if file.include?("primer.pcss")
+
+      component_file = file.sub(".pcss", ".rb")
+
+      assert File.exist?(component_file), "CSS file #{file} does not have a corresponding component file. The file should be named to match the component."
+    end
+  end
+end