* add stacked class

primer · Mar 23, 2022 · f61c13c · f61c13c
1 parent 0e3cbeb
commit f61c13c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md
@@ -12,7 +12,7 @@ A list of items used to show autocompleted results. Use the [`<auto-complete>`](
 
 ```html live
 <div class="position-relative">
-  <label>Search by user</label>
+  <label class="autocomplete-label-stacked">Search by user</label>
   <span class="autocomplete-body">
     <input class="form-control" type="text">
     <ul class="autocomplete-results">
@@ -64,9 +64,26 @@ On smaller viewport, we switch to stacking.
 
 ## 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">
+    <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">
+    <ul class="autocomplete-results autocomplete-results--embedded-icon">
+      <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>
+
+Inline label
 ```html live
 <div class="position-relative">
-  <label>Search by org</label>
+  <label class="autocomplete-label-inline">Search by org</label>
   <span class="autocomplete-body">
     <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">
@@ -85,7 +102,7 @@ On smaller viewport, we switch to stacking.
 
 ```html live
 <div class="position-relative">
-  <label class="sr-only">Search by org</label>
+  <label class="autocomplete-label-stacked sr-only">Search by org</label>
   <span class="autocomplete-body">
     <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">

diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
@@ -1,3 +1,8 @@
+// Stacked label (default)
+.autocomplete-label-stacked {
+  display: block;
+}
+
 // Inline label (non-default)
 .autocomplete-label-inline {
   display: inline;