Autocomplete + Suggester components

docs/content/components/autocomplete.md

@@ -0,0 +1,70 @@
+---
+title: Autocomplete
+path: components/autocomplete
+status: Stable
+source: 'https://github.com/primer/css/tree/master/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.
+
+```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>
+</div>
+
+<style>.frame-example {width:300px;height:160px;}</style>
+```
+
+Autocomplete items can contain attional content, like an `.avatar`. Or use utility classes to cusotmize 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">
+  <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="">
+      <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="">
+      <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="">
+      <span>Monalisa Octocat</span>
+      <span class="text-normal">@octocat</span>
+    </li>
+  </ul>
+</div>
+
+<style>.frame-example {width:300px;height:160px;}</style>
+```
+
+## Suggester
+
+The `.suggester` component is meant for showing suggestions while typing in a larger text area. Use the [`<text-expander>`](https://github.com/github/text-expander-element) element to add functionality.
+
+```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>
+  <ul class="suggester suggester-container" role="listbox" style="top: 4px; left: 125px;">
+    <li aria-selected="true"> <small>#924</small> <span>Markdown tables are inaccessible</span> </li>
+    <li> <small>#980</small> <span>Use actual book emoji in Flexbox docs</span> </li>
+    <li> <small>#979</small> <span>Add `.radio-group` component</span> </li>
+    <li> <small>#925</small> <span>Release 14.0.0</span> </li>
+    <li> <small>#978</small> <span>Add `.css-truncate-overflow`</span> </li>
+  </ul>
+</div>
+
+<style>.frame-example {height:260px;}</style>
+```

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -63,6 +63,8 @@
   children:
     - title: Alerts
       url: /components/alerts
+    - title: Autocomplete
+      url: /components/autocomplete
     - title: Avatars
       url: /components/avatars
     - title: Blankslate

src/autocomplete/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "autocomplete"
+generated: true
+---
+
+# Primer CSS: `autocomplete` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/autocomplete/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/autocomplete.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

src/autocomplete/autocomplete.scss

@@ -0,0 +1,43 @@
+// A pop up list of items used to show autocompleted results
+.autocomplete-results {
+  position: absolute;
+  z-index: 99;
+  width: 100%;
+  max-height: 20em;
+  overflow-y: auto;
+  // stylelint-disable-next-line primer/typography
+  font-size: 13px;
+  list-style: none;
+  background: $bg-white;
+  border-radius: $border-radius;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: 0 0 5px $black-fade-30;
+}
+
+// One of the items that appears within an autocomplete group
+// Bold black text on white background
+
+.autocomplete-item {
+  display: block;
+  padding: $spacer-1 $spacer-2;
+  overflow: hidden;
+  font-weight: $font-weight-bold;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover,
+  &[aria-selected="true"],
+  &.selected,
+  &.navigation-focus {
+    color: $text-white;
+    text-decoration: none;
+    background-color: $bg-blue;
+
+    // Inherit color on all child elements to ensure enough contrast
+    * {
+      color: inherit !important;
+    }
+  }
+}

src/autocomplete/index.scss

@@ -0,0 +1,4 @@
+// support files
+@import "../support/index.scss";
+@import "./autocomplete.scss";
+@import "./suggester.scss";

src/autocomplete/suggester.scss

@@ -0,0 +1,75 @@
+// Needs refactoring
+// stylelint-disable selector-max-type, selector-no-qualifying-type
+
+.suggester {
+  position: relative;
+  top: 0;
+  left: 0;
+  min-width: 180px;
+  padding: 0;
+  margin: 0;
+  margin-top: $spacer-4;
+  list-style: none;
+  cursor: pointer;
+  background: $bg-white;
+  border: $border;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow-medium;
+
+  li {
+    display: block;
+    padding: $spacer-1 $spacer-2;
+    font-weight: $font-weight-bold;
+    border-bottom: $border;
+
+    small {
+      font-weight: $font-weight-normal;
+      color: $text-gray;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+      border-bottom-right-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+
+    &:first-child {
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+
+    &:hover,
+    &[aria-selected="true"],
+    &.navigation-focus {
+      color: $text-white;
+      text-decoration: none;
+      background: $bg-blue;
+
+      small {
+        color: $text-white;
+      }
+    }
+  }
+}
+
+.suggester-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 30;
+}
+
+// Responsive
+
+.page-responsive {
+  @media (max-width: $width-sm) {
+    .suggester-container {
+      right: $spacer-2 !important;
+      left: $spacer-2 !important;
+    }
+
+    .suggester li {
+      padding: $spacer-2 $spacer-3;
+    }
+  }
+}

src/product/index.scss

@@ -10,6 +10,7 @@
 
 // Product specific css modules
 @import "../alerts/index.scss";
+@import "../autocomplete/index.scss";
 @import "../avatars/index.scss";
 @import "../blankslate/index.scss";
 @import "../branch-name/index.scss";