mirror of
https://github.com/primer/css.git
synced 2024-11-09 12:22:47 +03:00
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>
This commit is contained in:
Kate Higa
GitHub
parent
5e87effa67
commit
69fe8c6512
5
.changeset/breezy-jeans-boil.md
Normal file
5
.changeset/breezy-jeans-boil.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"@primer/css": minor
|
||||
---
|
||||
|
||||
Add support for inline, stack label in autocomplete
|
||||
@ -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 {width:300px;height:160px;}</style>
|
||||
<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 {
|
||||
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>
|
||||
```
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user