Skip to content

Add support for inline, stack label in autocomplete #1994

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 24 commits into from
Mar 24, 2022
Merged

Add support for inline, stack label in autocomplete #1994

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
f8da19f
* Add support for inline, stack label in autocomplete
khiga8 Mar 23, 2022
23e68dc
* update heading levels and make example longer
khiga8 Mar 23, 2022
8777521
* update width CSS to fit content
khiga8 Mar 23, 2022
3dbcbb3
* update results width
khiga8 Mar 23, 2022
0e3cbeb
* add example to validate the icon work and css classes
khiga8 Mar 23, 2022
f61c13c
* add stacked class
khiga8 Mar 23, 2022
01c7e0e
Stylelint auto-fixes
actions-user Mar 23, 2022
e888974
fix: embedded icon spacing
lindseywild Mar 23, 2022
221c8f7
fix: exmample, extra class removed
lindseywild Mar 23, 2022
e71e6d7
fix: linting issues
lindseywild Mar 23, 2022
bcb73f8
Update src/autocomplete/autocomplete.scss
khiga8 Mar 23, 2022
6c6c209
Update src/autocomplete/autocomplete.scss
khiga8 Mar 23, 2022
b33feda
Update src/autocomplete/autocomplete.scss
khiga8 Mar 23, 2022
fb64cb8
Stylelint auto-fixes
actions-user Mar 23, 2022
1080797
Stylelint auto-fixes
actions-user Mar 23, 2022
5e8985b
Stylelint auto-fixes
actions-user Mar 23, 2022
98c7aab
* Fix CSS media query for label
khiga8 Mar 23, 2022
6a7a2d5
feat: updates icon markup/styling
lindseywild Mar 24, 2022
13c8488
bug: ensure positioning is correct in firefox
khiga8 Mar 24, 2022
e635a37
* fix lint
khiga8 Mar 24, 2022
ac647c0
* fix more lint issues
khiga8 Mar 24, 2022
08bd89c
* remove smaller screen size example because you can't emulate screen…
khiga8 Mar 24, 2022
2aeb876
* move note up
khiga8 Mar 24, 2022
94cd787
Create breezy-jeans-boil.md
langermank Mar 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/breezy-jeans-boil.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": minor
---

Add support for inline, stack label in autocomplete
238 changes: 217 additions & 21 deletions docs/content/components/autocomplete.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Copy link
Contributor

@lindseywild lindseywild Mar 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A lot of this was just my local Prettier restyling the code - no actual code changes!

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>
```
55 changes: 54 additions & 1 deletion src/autocomplete/autocomplete.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down