FormControl + Autocomplete component updates (#2075)

* setup new tokens * layout * label positioning * cleanup * states * cleanup * convert label to use grid for caption text (start) * begin checkbox/radio custom styles * fix input grid (mostly) * refactor + cleanup * consolidate styles, start custom checkbox * cleanup * lint * add disabled state to actionlist-item * adjust trailing action grid * Stylelint auto-fixes * remove docs * add indeterminate checkbox styles * Create empty-drinks-report.md Co-authored-by: Actions Auto Build <actions@github.com>
primer · May 26, 2022 · 9f576a3 · 9f576a3
1 parent 46fb49c
commit 9f576a3
Show file tree

Hide file tree

Showing 6 changed files with 413 additions and 2 deletions.
diff --git a/.changeset/empty-drinks-report.md b/.changeset/empty-drinks-report.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+FormControl + Autocomplete component updates
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -46,8 +46,6 @@
   children:
     - title: Alerts
       url: /components/alerts
-    - title: Autocomplete
-      url: /components/autocomplete
     - title: Avatars
       url: /components/avatars
     - title: Blankslate

diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
@@ -235,6 +235,27 @@
     }
   }
 
+  // disabled
+  &[aria-disabled='true'] {
+    .ActionList-item-content {
+      .ActionList-item-label,
+      .ActionList-item-description {
+        color: var(--color-primer-fg-disabled);
+      }
+
+      .ActionList-item-visual {
+        fill: var(--color-primer-fg-disabled);
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          cursor: not-allowed;
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
   // variants
 
   // danger

diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
@@ -1,3 +1,6 @@
+// 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;