From add769c97193b387de2fbfb4b0a66c7157826563 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Wed, 27 Jul 2022 18:06:31 -0700
Subject: [PATCH] Autocomplete item selected state (#2177)

* for real though

* Create mighty-toes-nail.md

* Stylelint auto-fixes

* Update mighty-toes-nail.md

Co-authored-by: Actions Auto Build <actions@github.com>
---
 .changeset/mighty-toes-nail.md       |  5 +++++
 src/actionlist/action-list-item.scss | 30 ++++++++++++++++++++++++----
 2 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/mighty-toes-nail.md

diff --git a/.changeset/mighty-toes-nail.md b/.changeset/mighty-toes-nail.md
new file mode 100644
index 0000000000..6b1f11c83d
--- /dev/null
+++ b/.changeset/mighty-toes-nail.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Autocomplete item selected state 
diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index b00ec659b0..9028f535cd 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -1,9 +1,9 @@
 // stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
 
-@mixin activeIndicatorLine {
+@mixin activeIndicatorLine($padding-left: -$actionList-item-padding-horizontal) {
   position: absolute;
   top: calc(50% - 12px);
-  left: -$actionList-item-padding-horizontal;
+  left: $padding-left;
   width: $spacer-1;
   height: $spacer-4;
   content: '';
@@ -113,10 +113,32 @@
     }
   }
 
-  // active state [aria-current]
+  // Autocomplete [aria-selected] items
 
-  &.ActionList-item--navActive,
   &[aria-selected='true'] {
+    font-weight: $font-weight-normal;
+    background: var(--color-action-list-item-default-selected-bg);
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-action-list-item-default-hover-bg);
+      }
+    }
+
+    &::before,
+    + .ActionList-item::before {
+      visibility: hidden;
+    }
+
+    // blue accent line
+    &::after {
+      @include activeIndicatorLine(-$spacer-1);
+    }
+  }
+
+  // active state [aria-current]
+
+  &.ActionList-item--navActive {
     &:not(.ActionList-item--subItem) {
       .ActionList-item-label {
         font-weight: $font-weight-bold;