Move autocomplete styles to PVC (#1609)

.changeset/sweet-windows-call.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Move `autocomplete` styles to PVC

app/components/primer/alpha/auto_complete.pcss

@@ -0,0 +1,118 @@
+/* autocomplete */
+
+/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796
+** AutoComplete relies on FormControl, Overlay and ActionList CSS */
+
+/* Stacked label (default) */
+.autocomplete-label-stacked {
+  display: block;
+  margin-bottom: 6px;
+}
+
+/* Inline label (non-default) */
+.autocomplete-label-inline {
+  display: inline;
+  margin-right: 6px;
+}
+
+/* Switch to stacked at smaller viewport */
+@media (max-width: 543.98px) {
+  .autocomplete-label-inline {
+    display: block;
+    margin-bottom: 6px;
+  }
+}
+
+/* Wrapper for the input and result elements to ensure alignment */
+.autocomplete-body {
+  position: relative;
+  display: inline;
+}
+
+/* Wrapper and conditional styles for when an icon is added */
+.autocomplete-embedded-icon-wrap {
+  display: inline-flex;
+  padding: 4px 8px;
+  align-items: center;
+
+  &:focus-within {
+    border-color: var(--color-accent-fg);
+
+    @mixin focusBoxShadowInset;
+  }
+
+  & .form-control {
+    padding: 0;
+    margin-left: 8px;
+    border: none;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    &:focus-visible {
+      box-shadow: none;
+    }
+  }
+}
+
+/* A pop up list of items used to show autocompleted results */
+.autocomplete-results {
+  position: absolute;
+  left: 0;
+  z-index: 99;
+  width: max-content;
+  min-width: 100%;
+  max-height: 20em;
+  overflow-y: auto;
+  font-size: 13px;
+  list-style: none;
+  background: var(--color-canvas-overlay);
+  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  box-shadow: var(--color-shadow-medium);
+}
+
+/* One of the items that appears within an autocomplete group
+** Bold black text on white background */
+
+.autocomplete-item {
+  display: block;
+  width: 100%;
+  padding: 4px 8px;
+  overflow: hidden;
+  font-weight: var(--base-text-weight-semibold, 600);
+  color: var(--color-fg-default);
+  text-align: left;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: var(--color-canvas-overlay);
+  border: 0;
+
+  &:hover {
+    color: var(--color-fg-on-emphasis);
+    text-decoration: none;
+    background-color: var(--color-accent-emphasis);
+
+    /* Inherit color on all child elements to ensure enough contrast */
+    & * {
+      color: inherit !important;
+    }
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &.navigation-focus {
+    color: var(--color-fg-on-emphasis);
+    text-decoration: none;
+    background-color: var(--color-accent-emphasis);
+
+    /* Inherit color on all child elements to ensure enough contrast */
+    & * {
+      color: inherit !important;
+    }
+  }
+}

app/components/primer/primer.pcss

@@ -1,5 +1,6 @@
 /* CSS component styles here */
 @import "./alpha/action_list.pcss";
+@import "./alpha/auto_complete.pcss";
 @import "./alpha/banner.pcss";
 @import "./alpha/toggle_switch.pcss";
 @import "./alpha/segmented_control.pcss";

demo/app/assets/stylesheets/application.css

@@ -15,7 +15,6 @@
  *= require @primer/css/dist/tooltips.css
  *= require @primer/css/dist/overlay.css
  *= require @primer/css/dist/utilities.css
- *= require @primer/css/dist/autocomplete.css
  *= require @primer/css/dist/branch-name.css
  *= require @primer/css/dist/header.css
  *= require @primer/css/dist/loaders.css

test/css/component_specific_selectors_test.rb

@@ -28,6 +28,9 @@ class ComponentSpecificSelectorsTest < Minitest::Test
       ".ActionListItem--subItem>.ActionListContent>.ActionListItem-label",
       ".ActionList-sectionDivider--filled"
     ],
+    Primer::Alpha::AutoComplete => [
+      ".autocomplete-item"
+    ],
     Primer::Alpha::Banner => [
       ".Banner .Banner-close"
     ],