Patch: ActionList divider conflict with inline description (#1892)

* stash change

* fix divider for inline description

* fix hover state

* Create clever-jars-suffer.md

* Stylelint auto-fixes

* Update clever-jars-suffer.md

* Update src/actionlist/action-list.scss

Co-authored-by: Vinicius Depizzol <vdepizzol@github.com>

Co-authored-by: Actions Auto Build <actions@github.com>
Co-authored-by: Vinicius Depizzol <vdepizzol@github.com>

Author: 3 people

.changeset/clever-jars-suffer.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Patch: Fix ActionList--divided for label with inline description scenarios

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

@@ -412,8 +412,8 @@ export const ListItemTemplate = ({
               <span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
                 <span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
                   {text}
-                  <span className="ActionList-item-description">{description}</span>
                 </span>
+                <span className="ActionList-item-description">{description}</span>
               </span>
             )}
             {!description && text && (
@@ -528,9 +528,8 @@ export const ListItemTemplate = ({
                 <span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
                   <span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
                     {text}
-
-                    <span className="ActionList-item-description">{description}</span>
                   </span>
+                  <span className="ActionList-item-description">{description}</span>
                 </span>
               )}
               {!description && text && (

src/actionlist/action-list-item.scss

@@ -92,6 +92,11 @@
         + .ActionList-item .ActionList-item-label::before {
           visibility: hidden;
         }
+
+        .ActionList-item-descriptionWrap--inline::before,
+        + .ActionList-item .ActionList-item-descriptionWrap--inline::before {
+          visibility: hidden;
+        }
       }
     }
     // stylelint-disable-next-line no-duplicate-selectors
@@ -488,6 +493,7 @@
 
 // inline
 .ActionList-item-descriptionWrap--inline {
+  position: relative;
   flex-direction: row;
   align-items: baseline;
 

src/actionlist/action-list.scss

@@ -21,6 +21,24 @@
     background: var(--color-action-list-item-inline-divider);
   }
 
+  // if descriptionWrap--inline exists, move pseudo divider to wrapper
+  .ActionList-item-descriptionWrap--inline {
+    &::before {
+      position: absolute;
+      top: -$actionList-item-padding-vertical;
+      display: block;
+      width: 100%;
+      height: $border-width;
+      content: '';
+      background: var(--color-action-list-item-inline-divider);
+    }
+
+    // unset the default label pseudo
+    .ActionList-item-label::before {
+      content: unset;
+    }
+  }
+
   // hide divider if item is active
   .ActionList-item--navActive {
     // stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
@@ -36,3 +54,9 @@
 .ActionList-sectionDivider + .ActionList-item .ActionList-item-label::before {
   visibility: hidden;
 }
+
+// hide if item is first of type with label::before, or is the first item after a sectionDivider
+.ActionList-item:first-of-type .ActionList-item-descriptionWrap--inline::before,
+.ActionList-sectionDivider + .ActionList-item .ActionList-item-descriptionWrap--inline::before {
+  visibility: hidden;
+}