From 55bd498b7357e86659ac574f0f745f7b420fb6d3 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Thu, 20 Jan 2022 08:49:27 -0800
Subject: [PATCH] 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>
---
 .changeset/clever-jars-suffer.md              |  5 ++++
 .../ActionList/ActionListItem.stories.jsx     |  5 ++--
 src/actionlist/action-list-item.scss          |  6 +++++
 src/actionlist/action-list.scss               | 24 +++++++++++++++++++
 4 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/clever-jars-suffer.md

diff --git a/.changeset/clever-jars-suffer.md b/.changeset/clever-jars-suffer.md
new file mode 100644
index 00000000..a6fc2741
--- /dev/null
+++ b/.changeset/clever-jars-suffer.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Patch: Fix ActionList--divided for label with inline description scenarios
diff --git a/docs/src/stories/components/ActionList/ActionListItem.stories.jsx b/docs/src/stories/components/ActionList/ActionListItem.stories.jsx
index 2090a6b9..2142c0ad 100644
--- a/docs/src/stories/components/ActionList/ActionListItem.stories.jsx
+++ b/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 && (
diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index 27646cce..bc9dbb72 100644
--- a/src/actionlist/action-list-item.scss
+++ b/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;
 
diff --git a/src/actionlist/action-list.scss b/src/actionlist/action-list.scss
index 22f6d26c..02895308 100644
--- a/src/actionlist/action-list.scss
+++ b/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;
+}