More CSS updates to Autocomplete (#2000)

* * change to inline * * updates to input-group * * updates to form-group * * updates to docs with dotcom bugs we saw for validation * * fix multiplier * * update accessibility attributes of examples * fix: adds space * Create shaggy-birds-marry.md Co-authored-by: Lindsey Wild <[email protected]> Co-authored-by: Katie Langerman <[email protected]>
primer · Mar 29, 2022 · 264a89a · 264a89a
1 parent 47cec40
commit 264a89a
Show file tree

Hide file tree

Showing 5 changed files with 211 additions and 20 deletions.
diff --git a/.changeset/shaggy-birds-marry.md b/.changeset/shaggy-birds-marry.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+More CSS updates to `Autocomplete`
diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md
@@ -12,10 +12,10 @@ A list of items used to show autocompleted results. Use the [`<auto-complete>`](
 
 ```html live
 <div class="position-relative">
-  <label class="autocomplete-label-stacked">Search by user</label>
+  <label for="input-0" class="autocomplete-label-stacked">Search by user</label>
   <span class="autocomplete-body">
-    <input class="form-control" type="text" />
-    <ul class="autocomplete-results">
+    <input id="input-0" class="form-control" type="text" />
+    <ul role="listbox" aria-label="Results" class="autocomplete-results">
       <li class="autocomplete-item" aria-selected="true">Option 1</li>
       <li class="autocomplete-item">Option 2</li>
       <li class="autocomplete-item">Option 3</li>
@@ -36,10 +36,10 @@ A list of items used to show autocompleted results. Use the [`<auto-complete>`](
 
 ```html live
 <div class="position-relative">
-  <label class="autocomplete-label-inline">Search by team</label>
+  <label for="input-1" class="autocomplete-label-inline">Search by team</label>
   <span class="autocomplete-body">
-    <input class="form-control" type="text" />
-    <ul class="autocomplete-results">
+    <input id="input-1" class="form-control" type="text" />
+    <ul role="listbox" aria-label="Results" class="autocomplete-results">
       <li class="autocomplete-item" aria-selected="true">Team 1 (works on Ruby architecture)</li>
       <li class="autocomplete-item">Team 2 (works on frontend JS architecture)</li>
       <li class="autocomplete-item">Team 3 (this team works on design systems)</li>
@@ -56,11 +56,11 @@ A list of items used to show autocompleted results. Use the [`<auto-complete>`](
 
 ## Embedded icon with visible label
 
-Stacked label
+### Stacked label
 
 ```html live
 <div class="position-relative">
-  <label class="autocomplete-label-stacked">Search by org</label>
+  <label for="input-2" class="autocomplete-label-stacked">Search by org</label>
   <span class="autocomplete-body">
     <div class="form-control autocomplete-embedded-icon-wrap">
       <svg
@@ -76,9 +76,9 @@ Stacked label
           d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
         ></path>
       </svg>
-      <input class="form-control" type="text" />
+      <input id="input-2" class="form-control" type="text" />
     </div>
-    <ul class="autocomplete-results">
+    <ul role="listbox" aria-label="Results" class="autocomplete-results">
       <li class="autocomplete-item" aria-selected="true">Option 1</li>
       <li class="autocomplete-item">Option 2</li>
       <li class="autocomplete-item">Option 3</li>
@@ -93,11 +93,11 @@ Stacked label
 </style>
 ```
 
-Inline label
+### Inline label
 
 ```html live
 <div class="position-relative">
-  <label class="autocomplete-label-inline">Search by org</label>
+  <label for="input-3" class="autocomplete-label-inline">Search by org</label>
   <span class="autocomplete-body">
     <div class="form-control autocomplete-embedded-icon-wrap">
       <svg
@@ -113,9 +113,9 @@ Inline label
           d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
         ></path>
       </svg>
-      <input class="form-control" type="text" />
+      <input id="input-3" class="form-control" type="text" />
     </div>
-    <ul class="autocomplete-results">
+    <ul role="listbox" aria-label="Results" class="autocomplete-results">
       <li class="autocomplete-item" aria-selected="true">Option 1</li>
       <li class="autocomplete-item">Option 2</li>
       <li class="autocomplete-item">Option 3</li>
@@ -134,7 +134,7 @@ Inline label
 
 ```html live
 <div class="position-relative">
-  <label class="autocomplete-label-stacked sr-only">Search by org</label>
+  <label for="input-4" class="autocomplete-label-stacked sr-only">Search by org</label>
   <span class="autocomplete-body">
     <div class="form-control autocomplete-embedded-icon-wrap">
       <svg
@@ -150,9 +150,9 @@ Inline label
           d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
         ></path>
       </svg>
-      <input class="form-control" type="text" />
+      <input id="input-4" class="form-control" type="text" />
     </div>
-    <ul class="autocomplete-results">
+    <ul role="listbox" aria-label="Results" class="autocomplete-results">
       <li class="autocomplete-item" aria-selected="true">Option 1</li>
       <li class="autocomplete-item">Option 2</li>
       <li class="autocomplete-item">Option 3</li>
@@ -167,14 +167,183 @@ Inline label
 </style>
 ```
 
+## Within form group
+
+```html live
+<div class="form-group">
+  <div class="form-group-body">
+    <div class="position-relative">
+      <label for="input-5" class="autocomplete-label-stacked">Search by org</label>
+      <span class="autocomplete-body">
+        <div class="form-control autocomplete-embedded-icon-wrap">
+          <svg
+            class="octicon"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            width="16"
+            height="16"
+          ><path
+              fill-rule="evenodd"
+              d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
+            ></path></svg>
+          <input id="input-5" class="form-control" type="text" />
+        </div>
+        <ul role="listbox" aria-label="Results" class="autocomplete-results">
+          <li class="autocomplete-item" aria-selected="true">Option 1</li>
+          <li class="autocomplete-item">Option 2</li>
+          <li class="autocomplete-item">Option 3</li>
+        </ul>
+      </span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .frame-example {
+    height: 180px;
+  }
+</style>
+```
+
+## Within input group
+
+When rendering `Autocomplete` with embedded icon within an [input group](https://primer.style/css/components/forms#input-group), add `.input-group-button--autocomplete-embedded-icon` to `.input-group-button`.
+
+### Stacked
+
+```html live
+<div class="input-group">
+  <div class="position-relative">
+    <label for="input-6" class="autocomplete-label-stacked">Search by org</label>
+    <span class="autocomplete-body">
+      <div class="form-control autocomplete-embedded-icon-wrap">
+        <svg
+          class="octicon"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          width="16"
+          height="16"
+        ><path
+            fill-rule="evenodd"
+            d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
+          ></path></svg>
+        <input id="input-6" class="form-control" type="text" />
+      </div>
+      <ul role="listbox" aria-label="Results" class="autocomplete-results">
+        <li class="autocomplete-item" aria-selected="true">Option 1</li>
+        <li class="autocomplete-item">Option 2</li>
+        <li class="autocomplete-item">Option 3</li>
+      </ul>
+    </span>
+  </div>
+  <span class="input-group-button input-group-button--autocomplete-embedded-icon">
+    <button class="btn" type="button" aria-label="Copy to clipboard">
+        <svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg>
+    </button>
+  </span>
+</div>
+
+<style>
+  .frame-example {
+    height: 180px;
+  }
+</style>
+```
+
+### Inline
+```html live
+<div class="input-group">
+  <div class="position-relative">
+    <label for="input-7" class="autocomplete-label-inline">Search by org</label>
+    <span class="autocomplete-body">
+      <div class="form-control autocomplete-embedded-icon-wrap">
+        <svg
+          class="octicon"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          width="16"
+          height="16"
+        ><path
+            fill-rule="evenodd"
+            d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
+          ></path></svg>
+        <input id="input-7" class="form-control" type="text" />
+      </div>
+      <ul role="listbox" aria-label="Results" class="autocomplete-results">
+        <li class="autocomplete-item" aria-selected="true">Option 1</li>
+        <li class="autocomplete-item">Option 2</li>
+        <li class="autocomplete-item">Option 3</li>
+      </ul>
+    </span>
+  </div>
+  <span class="input-group-button input-group-button--autocomplete-embedded-icon">
+    <button class="btn" type="button" aria-label="Copy to clipboard">
+        <svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg>
+    </button>
+  </span>
+</div>
+
+<style>
+  .frame-example {
+    height: 160px;
+  }
+</style>
+```
+
+## Container with `max-width`
+
+```html live
+<div class="Box" style="max-width: 440px;">
+  <div class="Box-body">
+    <div class="form-group">
+      <div class="form-group-body">
+        <div class="position-relative">
+          <label for="input-8" class="autocomplete-label-stacked">Search by org</label>
+          <span class="autocomplete-body">
+            <div class="form-control autocomplete-embedded-icon-wrap">
+              <svg
+                class="octicon"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 16"
+                width="16"
+                height="16"
+              ><path
+                  fill-rule="evenodd"
+                  d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
+                ></path></svg>
+              <input id="input-8" class="form-control" type="text" />
+            </div>
+            <ul role="listbox" aria-label="Results" class="autocomplete-results">
+              <li class="autocomplete-item" aria-selected="true">Option 1</li>
+              <li class="autocomplete-item">Option 2</li>
+              <li class="autocomplete-item">Option 3</li>
+            </ul>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .frame-example {
+    height: 220px;
+  }
+</style>
+```
+
 ## Additional content
 
 Autocomplete items can contain additional content, like an `.avatar`. Or use utility classes to customize the text style.
 
 ```html live
 <div class="position-relative">
   <input class="form-control" type="text" aria-label="Search by user" placeholder="Search by user" />
-  <ul class="autocomplete-results">
+  <ul role="listbox" aria-label="Results" class="autocomplete-results">
     <li class="autocomplete-item" aria-selected="true">
       <img src="https://github.com/github.png" width="20" class="avatar mr-1" alt="" />
       <span>GitHub Inc.</span>
@@ -210,7 +379,7 @@ The `.suggester` component is meant for showing suggestions while typing in a la
   <textarea class="form-control width-full" placeholder="Leave a comment" aria-label="Comment body">
 This is on top of #</textarea
   >
-  <ul class="suggester suggester-container" role="listbox" style="top: 4px; left: 125px;">
+  <ul aria-label="Results" class="suggester suggester-container" role="listbox" style="top: 4px; left: 125px;">
     <li aria-selected="true">
       <svg
         class="octicon color-fg-subtle"

diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
@@ -21,7 +21,7 @@
 // Wrapper for the input and result elements to ensure alignment
 .autocomplete-body {
   position: relative;
-  display: inline-block;
+  display: inline;
 }
 
 // Wrapper and conditional styles for when an icon is added

diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
@@ -14,6 +14,13 @@
   // stylelint-disable-next-line primer/spacing
   margin: 15px 0;
 
+  // Autocomplete with embedded icon
+  .form-control.autocomplete-embedded-icon-wrap {
+    &:focus-within {
+      background-color: var(--color-canvas-default);
+    }
+  }
+
   // Text fields
   .form-control {
     width: 440px;

diff --git a/src/forms/input-group.scss b/src/forms/input-group.scss
@@ -18,6 +18,12 @@
   &.inline {
     display: inline-table;
   }
+
+  // Autocomplete with embedded icon
+  .form-control.autocomplete-embedded-icon-wrap {
+    display: inline-flex;
+    padding: $spacer-1 * 1.25 $spacer-2;
+  }
 }
 
 .input-group .form-control,
@@ -30,6 +36,10 @@
   vertical-align: middle; // Match the inputs
 }
 
+.input-group-button--autocomplete-embedded-icon {
+  vertical-align: bottom;
+}
+
 .input-group .form-control:first-child,
 .input-group-button:first-child .btn {
   border-top-right-radius: 0;