feat(ActionList sub components) Convert to CSS Modules

.changeset/dirty-nails-applaud.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert ActionList + sub components to CSS Modules

packages/postcss-preset-primer/src/mixins/activeIndicatorLine.css

@@ -0,0 +1,10 @@
+@define-mixin activeIndicatorLine {
+  position: absolute;
+  top: calc(50% - var(--base-size-12));
+  left: calc(-1 * var(--base-size-8));
+  width: var(--base-size-4);
+  height: var(--base-size-24);
+  content: '';
+  background: var(--bgColor-accent-emphasis);
+  border-radius: var(--borderRadius-medium);
+}

packages/react/src/ActionList/ActionList.dev.stories.tsx

@@ -7,6 +7,7 @@ import {Group} from './Group'
 import {Divider} from './Divider'
 import {Description} from './Description'
 import Avatar from '../Avatar'
+import {FileDirectoryIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Components/ActionList/Dev',
@@ -144,3 +145,23 @@ export const HeadingCustomClassname = () => (
     </ActionList.Group>
   </ActionList>
 )
+
+export const DescriptionCustomClassname = () => (
+  <ActionList>
+    <ActionList.Item>
+      Label
+      <ActionList.Description className="testCustomClassnameColor">This is a description</ActionList.Description>
+    </ActionList.Item>
+  </ActionList>
+)
+
+export const VisualCustomClassname = () => (
+  <ActionList>
+    <ActionList.Item>
+      Label
+      <ActionList.LeadingVisual className="testCustomClassnameColor">
+        <FileDirectoryIcon />
+      </ActionList.LeadingVisual>
+    </ActionList.Item>
+  </ActionList>
+)