ActionList Component: Primer CSS Implementation

docs/src/stories/components/ActionList/ActionListItemFeatures.stories.jsx

@@ -32,13 +32,29 @@ SizeMedium.args = {
   size: 'ActionList-content--sizeMedium'
 }
 
+export const SizeMediumWithDescription = ListItemTemplate.bind({})
+SizeMediumWithDescription.args = {
+  ...ListItemTemplate.args,
+  text: 'Medium item',
+  description: 'Some descriptive text',
+  size: 'ActionList-content--sizeMedium'
+}
+
 export const SizeLarge = ListItemTemplate.bind({})
 SizeLarge.args = {
   ...ListItemTemplate.args,
   text: 'Large item',
   size: 'ActionList-content--sizeLarge'
 }
 
+export const SizeLargeWithDescription = ListItemTemplate.bind({})
+SizeLargeWithDescription.args = {
+  ...ListItemTemplate.args,
+  text: 'Large item',
+  description: 'Some descriptive text',
+  size: 'ActionList-content--sizeLarge'
+}
+
 export const VisualLeading = ListItemTemplate.bind({})
 VisualLeading.storyName = '[Visuals] Leading'
 VisualLeading.args = {

src/actionlist/action-list-item.scss

@@ -111,7 +111,6 @@
       display: block;
     }
 
-    // stylelint-disable-next-line selector-max-specificity
     &.ActionList-item--hasSubItem {
       // stylelint-disable-next-line selector-max-specificity
       > .ActionList-content > .ActionList-item-label {
@@ -169,12 +168,10 @@
   &[aria-checked='false'],
   &[aria-selected='false'] {
     // multiselect checkmark
-    // stylelint-disable-next-line selector-max-specificity
     .ActionList-item-multiSelectCheckmark {
       visibility: hidden;
       opacity: 0;
-      transition:
- visibility 0 linear $actionList-item-checkmark-transition-timing,
+      transition: visibility 0 linear $actionList-item-checkmark-transition-timing,
         opacity $actionList-item-checkmark-transition-timing;
     }
 
@@ -289,10 +286,12 @@
   user-select: none;
   border-radius: $border-radius;
   transition: $actionList-item-bg-transition;
-  grid-template-rows: minmax($actionList-item-height-sm, max-content); // 20px with 12px padding = [32px total]
+  //   grid-template-rows: minmax($actionList-item-height-sm, max-content); // 20px with 12px padding = [32px total]
+  grid-template-rows: min-content;
   grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
   grid-template-columns: min-content min-content minmax(min-content, auto) min-content min-content;
   align-items: center;
+  //   line-height: normal;
 
   // column-gap persists with empty grid-areas, margin applies only when children exist
   > :not(:last-child) {
@@ -306,16 +305,21 @@
   // sizes
 
   &.ActionList-content--sizeMedium {
-    grid-template-rows: minmax($actionList-item-height-md, max-content); // 28px with 12px padding = [40px total]
+    // 44px total height
+    // stylelint-disable-next-line primer/spacing
+    padding: $actionList-item-padding-vertical-md $actionList-item-padding-horizontal;
   }
 
   &.ActionList-content--sizeLarge {
-    grid-template-rows: minmax($actionList-item-height-lg, max-content); // 36px with 12px padding = [48px total]
+    // 48px total height
+    // stylelint-disable-next-line primer/spacing
+    padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
   }
 
   // On pointer:coarse (mobile), all list items are large
   @media (pointer: coarse) {
-    grid-template-rows: minmax($actionList-item-height-lg, max-content);
+    // stylelint-disable-next-line primer/spacing
+    padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
   }
 
   &.ActionList-content--blockDescription {
@@ -399,6 +403,9 @@
 .ActionList-item-label {
   position: relative; // for pseudo dividers
   font-weight: $font-weight-normal;
+  // we need a strict value here for grid alignment
+  // stylelint-disable-next-line primer/typography
+  line-height: $actionList-item-label-line-height;
   color: var(--color-fg-default);
 }
 
@@ -426,7 +433,6 @@
 // has 20px leading visual
 .ActionList-content--visual20 + .ActionList--subGroup {
   .ActionList-item--subItem {
-    // stylelint-disable-next-line primer/spacing
     padding-left: $spacer-3 * 1.75;
   }
 }

src/actionlist/action-list-variables.scss

@@ -1,6 +1,7 @@
-$actionList-item-height-sm: 20px !default;
-$actionList-item-height-md: 28px !default;
-$actionList-item-height-lg: 36px !default;
+$actionList-item-height-sm: $spacer-2 * 2.5 !default;
+$actionList-item-label-line-height: $spacer-2 * 2.5 !default;
+$actionList-item-padding-vertical-md: $spacer-2 * 1.25 !default;
+$actionList-item-padding-vertical-lg: $spacer-2 * 1.75 !default;
 $actionList-item-padding-vertical: $spacer-1 * 1.5 !default;
 $actionList-item-padding-horizontal: $spacer-2 !default;
 $actionList-item-bg-transition: background 33.333ms linear !default; // 2 frames on a 60hz monitor

src/actionlist/action-list.scss

@@ -20,7 +20,6 @@
   .ActionList-item--navActive {
     // stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
     .ActionList-item-label::before,
-    // stylelint-disable-next-line selector-max-specificity
     + .ActionList-item .ActionList-item-label::before {
       visibility: hidden;
     }