Add support for inline, stack label in autocomplete (#1994)

* * Add support for inline, stack label in autocomplete * * update heading levels and make example longer * * update width CSS to fit content * * update results width * * add example to validate the icon work and css classes * * add stacked class * Stylelint auto-fixes * fix: embedded icon spacing * fix: exmample, extra class removed * fix: linting issues * Update src/autocomplete/autocomplete.scss Co-authored-by: Katie Langerman <langermank@github.com> * Update src/autocomplete/autocomplete.scss Co-authored-by: Katie Langerman <langermank@github.com> * Update src/autocomplete/autocomplete.scss Co-authored-by: Katie Langerman <langermank@github.com> * Stylelint auto-fixes * Stylelint auto-fixes * Stylelint auto-fixes * * Fix CSS media query for label * feat: updates icon markup/styling * bug: ensure positioning is correct in firefox * * fix lint * * fix more lint issues * * remove smaller screen size example because you can't emulate screen size * * move note up * Create breezy-jeans-boil.md Co-authored-by: Actions Auto Build <actions@github.com> Co-authored-by: Lindsey Wild <35239154+lindseywild@users.noreply.github.com> Co-authored-by: Katie Langerman <langermank@github.com>
primer · Mar 24, 2022 · 69fe8c6 · 69fe8c6
1 parent 5e87eff
commit 69fe8c6
Show file tree

Hide file tree

Showing 3 changed files with 276 additions and 22 deletions.
diff --git a/.changeset/breezy-jeans-boil.md b/.changeset/breezy-jeans-boil.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add support for inline, stack label in autocomplete
diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md
@@ -6,48 +6,199 @@ source: 'https://github.com/primer/css/tree/main/src/autocomplete'
 bundle: autocomplete
 ---
 
-## Autocomplete
-
 A list of items used to show autocompleted results. Use the [`<auto-complete>`](https://github.com/github/auto-complete-element) element to add functionality.
 
+## Default (stacked label)
+
 ```html live
 <div class="position-relative">
-  <input class="form-control input-block" type="text" aria-label="Search" placeholder="Search">
-  <ul 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>
+  <label class="autocomplete-label-stacked">Search by user</label>
+  <span class="autocomplete-body">
+    <input class="form-control" type="text" />
+    <ul 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>
+
+<style>
+  .frame-example {
+    height: 160px;
+  }
+</style>
+```
+
+## Inline label
+
+**Note**: On smaller screen sizes, the labels will be stacked.
+
+```html live
+<div class="position-relative">
+  <label class="autocomplete-label-inline">Search by team</label>
+  <span class="autocomplete-body">
+    <input class="form-control" type="text" />
+    <ul 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>
+    </ul>
+  </span>
 </div>
 
-<style>.frame-example {width:300px;height:160px;}</style>
+<style>
+  .frame-example {
+    height: 160px;
+  }
+</style>
 ```
 
+## Embedded icon with visible label
+
+Stacked label
+
+```html live
+<div class="position-relative">
+  <label 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 class="form-control" type="text" />
+    </div>
+    <ul 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>
+
+<style>
+  .frame-example {
+    height: 180px;
+  }
+</style>
+```
+
+Inline label
+
+```html live
+<div class="position-relative">
+  <label class="autocomplete-label-inline">Search by org</label>
+  <span class="autocomplete-body">
+    <div class="form-control autocomplete-embedded-icon-wrap">
+      <svg
+        class="octicon autocomplete-embedded-icon"
+        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 class="form-control" type="text" />
+    </div>
+    <ul 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>
+
+<style>
+  .frame-example {
+    height: 160px;
+  }
+</style>
+```
+
+## Embedded icon with hidden label
+
+```html live
+<div class="position-relative">
+  <label class="autocomplete-label-stacked sr-only">Search by org</label>
+  <span class="autocomplete-body">
+    <div class="form-control autocomplete-embedded-icon-wrap">
+      <svg
+        aria-hidden="true"
+        class="octicon autocomplete-embedded-icon"
+        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 class="form-control" type="text" />
+    </div>
+    <ul 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>
+
+<style>
+  .frame-example {
+    height: 160px;
+  }
+</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 input-block" type="text" aria-label="Search by user" placeholder="Search by user">
+  <input class="form-control" type="text" aria-label="Search by user" placeholder="Search by user" />
   <ul class="autocomplete-results">
     <li class="autocomplete-item" aria-selected="true">
-      <img src="https://github.com/github.png" width="20" class="avatar mr-1" alt="">
+      <img src="https://github.com/github.png" width="20" class="avatar mr-1" alt="" />
       <span>GitHub Inc.</span>
       <span class="text-normal">@github</span>
     </li>
     <li class="autocomplete-item">
-      <img src="https://github.com/hubot.png" width="20" class="avatar mr-1" alt="">
+      <img src="https://github.com/hubot.png" width="20" class="avatar mr-1" alt="" />
       <span>Hubot</span>
       <span class="text-normal">@hubot</span>
     </li>
     <li class="autocomplete-item">
-      <img src="https://github.com/octocat.png" width="20" class="avatar mr-1" alt="">
+      <img src="https://github.com/octocat.png" width="20" class="avatar mr-1" alt="" />
       <span>Monalisa Octocat</span>
       <span class="text-normal">@octocat</span>
     </li>
   </ul>
 </div>
 
-<style>.frame-example {width:300px;height:160px;}</style>
+<style>
+  .frame-example {
+    width: 300px;
+    height: 160px;
+  }
+</style>
 ```
 
 ## Suggester
@@ -56,30 +207,75 @@ The `.suggester` component is meant for showing suggestions while typing in a la
 
 ```html live
 <div class="form-group position-relative">
-  <textarea class="form-control width-full" placeholder="Leave a comment" aria-label="Comment body">This is on top of #</textarea>
+  <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;">
     <li aria-selected="true">
-      <svg class="octicon color-fg-subtle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path></svg>
+      <svg
+        class="octicon color-fg-subtle"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+      >
+        <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
+        <path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
+      </svg>
       <small>#924</small> <span>Markdown tables are inaccessible</span>
     </li>
     <li>
-      <svg class="octicon color-fg-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path></svg>
+      <svg
+        class="octicon color-fg-success"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+      >
+        <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
+        <path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
+      </svg>
       <small>#980</small> <span>Use actual book emoji in Flexbox docs</span>
     </li>
     <li>
-      <svg class="octicon color-fg-attention" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path></svg>
+      <svg
+        class="octicon color-fg-attention"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+      >
+        <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
+        <path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
+      </svg>
       <small>#979</small> <span>Add `.radio-group` component</span>
     </li>
     <li>
-      <svg class="octicon color-fg-danger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path></svg>
+      <svg
+        class="octicon color-fg-danger"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+      >
+        <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
+        <path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
+      </svg>
       <small>#925</small> <span>Release 14.0.0</span>
     </li>
     <li>
-      <svg class="octicon color-fg-done" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path></svg>
+      <svg class="octicon color-fg-done" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+        <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
+        <path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
+      </svg>
       <small>#978</small> <span>Add `.css-truncate-overflow`</span>
     </li>
   </ul>
 </div>
 
-<style>.frame-example {height:260px;}</style>
+<style>
+  .frame-example {
+    height: 260px;
+  }
+</style>
 ```
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
@@ -1,8 +1,61 @@
+// Stacked label (default)
+.autocomplete-label-stacked {
+  display: block;
+  margin-bottom: $spacer-2 * 0.75;
+}
+
+// Inline label (non-default)
+.autocomplete-label-inline {
+  display: inline;
+  margin-right: $spacer-2 * 0.75;
+}
+
+// Switch to stacked at smaller viewport
+@media (max-width: $width-sm) {
+  .autocomplete-label-inline {
+    display: block;
+    margin-bottom: $spacer-2 * 0.75;
+  }
+}
+
+// Wrapper for the input and result elements to ensure alignment
+.autocomplete-body {
+  position: relative;
+  display: inline-block;
+}
+
+// Wrapper and conditional styles for when an icon is added
+.autocomplete-embedded-icon-wrap {
+  display: inline-flex;
+  padding: $spacer-1 $spacer-2;
+  align-items: center;
+
+  &:focus-within {
+    border-color: var(--color-accent-emphasis);
+    outline: none;
+    box-shadow: var(--color-primer-shadow-focus);
+  }
+
+  .form-control {
+    padding: 0;
+    margin-left: $spacer-2;
+    // stylelint-disable-next-line
+    border: none;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+
 // A pop up list of items used to show autocompleted results
 .autocomplete-results {
   position: absolute;
+  left: 0;
   z-index: 99;
-  width: 100%;
+  width: max-content;
+  min-width: 100%;
   max-height: 20em;
   overflow-y: auto;
   // stylelint-disable-next-line primer/typography