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 10 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
253 changes: 232 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,214 @@ 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

```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>
```

On smaller viewport, we switch to stacking.

```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;
width: 300px;
}
</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">
<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">
<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">
<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">
<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">
<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" />
<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 +222,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

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>
```
34 changes: 33 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,40 @@
// Stacked label (default)
.autocomplete-label-stacked {
display: block;
}

// Inline label (non-default)
.autocomplete-label-inline {
display: inline;

@media (max-width: $width-sm) {
display: block;
}
}

// Wrapper for the input and result elements to ensure alignment
.autocomplete-body {
position: relative;
}

// Embedded icon
.autocomplete-embedded-icon {
Copy link
Contributor

Choose a reason for hiding this comment

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

I'd like to avoid absolute positioning things. This kind of design requires a bit more finagling and modification to input. I'll roughly spec out a suggestion here!

In the markup, wrap the icon and input in a <div>

<div class="form-control autocomplete-embedded-wrap">
<svg> 
<input class="form-control autocomplete-embedded-input" type="text" />
</div>

We'll need to strip the input of its styles for the most part, and modify the wrap to look like form-control

.autocomplete-embedded-wrap {
  // stylelint-disable-next-line primer/spacing
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
}

.autocomplete-embedded-input {
  border: none;
  box-shadow: none;
  padding: 0;
}

From here, you'll need to remove the focus state from input and apply to the wrap (kind of guessing here, might need some work)

.autocomplete-embedded-input:focus-within {
    border-color: var(--color-accent-emphasis);
    outline: none;
    box-shadow: var(--color-primer-shadow-focus);
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

cc: @lindseywild <3

Copy link
Contributor

Choose a reason for hiding this comment

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

This has been updated! The only thing we still need to address is the Firefox styling (you can see this in the screenshot in the below comment). I will ping again once it's ready!

position: absolute;
top: 15%;
left: 5%;

+ .form-control {
padding-left: $spacer-5;
}
}

// 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