diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md new file mode 100644 index 0000000000..d11897e4cf --- /dev/null +++ b/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 [``](https://github.com/github/auto-complete-element) element to add functionality. + +```html live +
+ + +
+ + +``` + +Autocomplete items can contain attional content, like an `.avatar`. Or use utility classes to cusotmize the text style. + +```html live +
+ + +
+ + +``` + +## Suggester + +The `.suggester` component is meant for showing suggestions while typing in a larger text area. Use the [``](https://github.com/github/text-expander-element) element to add functionality. + +```html live +
+ +
    +
  • #924 Markdown tables are inaccessible
    • +
  • #980 Use actual book emoji in Flexbox docs
    • +
  • #979 Add `.radio-group` component
    • +
  • #925 Release 14.0.0
    • +
  • #978 Add `.css-truncate-overflow`
    • +
+
+ + +``` diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index f322d28296..ceeda3f2d6 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/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 diff --git a/src/autocomplete/README.md b/src/autocomplete/README.md new file mode 100644 index 0000000000..398bc22dd8 --- /dev/null +++ b/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 diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss new file mode 100644 index 0000000000..12ee1104c3 --- /dev/null +++ b/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; + } + } +} diff --git a/src/autocomplete/index.scss b/src/autocomplete/index.scss new file mode 100644 index 0000000000..f311c0ce46 --- /dev/null +++ b/src/autocomplete/index.scss @@ -0,0 +1,4 @@ +// support files +@import "../support/index.scss"; +@import "./autocomplete.scss"; +@import "./suggester.scss"; diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss new file mode 100644 index 0000000000..5ac54219dc --- /dev/null +++ b/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; + } + } +} diff --git a/src/product/index.scss b/src/product/index.scss index 4126ff938f..89263f9d4e 100644 --- a/src/product/index.scss +++ b/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";