Skip to content

More CSS updates to Autocomplete #2000

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 9 commits into from
Mar 29, 2022
Merged

More CSS updates to Autocomplete #2000

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
56dbb05
* change to inline
khiga8 Mar 25, 2022
9a30bad
* updates to input-group
khiga8 Mar 28, 2022
6759a54
* updates to form-group
khiga8 Mar 28, 2022
9719cf2
* updates to docs with dotcom bugs we saw for validation
khiga8 Mar 28, 2022
ca8872b
* fix multiplier
khiga8 Mar 28, 2022
40901d4
* update accessibility attributes of examples
khiga8 Mar 28, 2022
0e7d60b
Merge branch 'main' into additional-autocomplete-updates
khiga8 Mar 28, 2022
4b81386
fix: adds space
lindseywild Mar 29, 2022
865cd5e
Create shaggy-birds-marry.md
langermank Mar 29, 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/shaggy-birds-marry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

More CSS updates to `Autocomplete`
207 changes: 188 additions & 19 deletions docs/content/components/autocomplete.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ A list of items used to show autocompleted results. Use the [`<auto-complete>`](

```html live
<div class="position-relative">
<label class="autocomplete-label-stacked">Search by user</label>
<label for="input-0" class="autocomplete-label-stacked">Search by user</label>
<span class="autocomplete-body">
<input class="form-control" type="text" />
<ul class="autocomplete-results">
<input id="input-0" class="form-control" type="text" />
<ul role="listbox" aria-label="Results" 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>
Expand All @@ -36,10 +36,10 @@ A list of items used to show autocompleted results. Use the [`<auto-complete>`](

```html live
<div class="position-relative">
<label class="autocomplete-label-inline">Search by team</label>
<label for="input-1" class="autocomplete-label-inline">Search by team</label>
<span class="autocomplete-body">
<input class="form-control" type="text" />
<ul class="autocomplete-results">
<input id="input-1" class="form-control" type="text" />
<ul role="listbox" aria-label="Results" 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>
Expand All @@ -56,11 +56,11 @@ A list of items used to show autocompleted results. Use the [`<auto-complete>`](

## Embedded icon with visible label

Stacked label
### Stacked label

```html live
<div class="position-relative">
<label class="autocomplete-label-stacked">Search by org</label>
<label for="input-2" class="autocomplete-label-stacked">Search by org</label>
<span class="autocomplete-body">
<div class="form-control autocomplete-embedded-icon-wrap">
<svg
Expand All @@ -76,9 +76,9 @@ Stacked label
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" />
<input id="input-2" class="form-control" type="text" />
</div>
<ul class="autocomplete-results">
<ul role="listbox" aria-label="Results" 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>
Expand All @@ -93,11 +93,11 @@ Stacked label
</style>
```

Inline label
### Inline label

```html live
<div class="position-relative">
<label class="autocomplete-label-inline">Search by org</label>
<label for="input-3" class="autocomplete-label-inline">Search by org</label>
<span class="autocomplete-body">
<div class="form-control autocomplete-embedded-icon-wrap">
<svg
Expand All @@ -113,9 +113,9 @@ Inline label
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" />
<input id="input-3" class="form-control" type="text" />
</div>
<ul class="autocomplete-results">
<ul role="listbox" aria-label="Results" 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>
Expand All @@ -134,7 +134,7 @@ Inline label

```html live
<div class="position-relative">
<label class="autocomplete-label-stacked sr-only">Search by org</label>
<label for="input-4" class="autocomplete-label-stacked sr-only">Search by org</label>
<span class="autocomplete-body">
<div class="form-control autocomplete-embedded-icon-wrap">
<svg
Expand All @@ -150,9 +150,9 @@ Inline label
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" />
<input id="input-4" class="form-control" type="text" />
</div>
<ul class="autocomplete-results">
<ul role="listbox" aria-label="Results" 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>
Expand All @@ -167,14 +167,183 @@ Inline label
</style>
```

## Within form group

```html live
<div class="form-group">
<div class="form-group-body">
<div class="position-relative">
<label for="input-5" 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 id="input-5" class="form-control" type="text" />
</div>
<ul role="listbox" aria-label="Results" 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>
</div>
</div>

<style>
.frame-example {
height: 180px;
}
</style>
```

## Within input group

When rendering `Autocomplete` with embedded icon within an [input group](https://primer.style/css/components/forms#input-group), add `.input-group-button--autocomplete-embedded-icon` to `.input-group-button`.

### Stacked

```html live
<div class="input-group">
<div class="position-relative">
<label for="input-6" 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 id="input-6" class="form-control" type="text" />
</div>
<ul role="listbox" aria-label="Results" 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>
<span class="input-group-button input-group-button--autocomplete-embedded-icon">
<button class="btn" type="button" aria-label="Copy to clipboard">
<svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg>
</button>
</span>
</div>

<style>
.frame-example {
height: 180px;
}
</style>
```

### Inline
Copy link
Contributor Author

Choose a reason for hiding this comment

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

It appears Inline label doesn't work within Input group. (Example of inline label within input group)

Any suggestions for making this work?

Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder if there are any examples of this usage in dotcom? If not, maybe we should just not advertise that this is a combination. If people end up needing it later on, we could address then. Thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I agree!

```html live
<div class="input-group">
<div class="position-relative">
<label for="input-7" class="autocomplete-label-inline">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 id="input-7" class="form-control" type="text" />
</div>
<ul role="listbox" aria-label="Results" 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>
<span class="input-group-button input-group-button--autocomplete-embedded-icon">
<button class="btn" type="button" aria-label="Copy to clipboard">
<svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg>
</button>
</span>
</div>

<style>
.frame-example {
height: 160px;
}
</style>
```

## Container with `max-width`

```html live
<div class="Box" style="max-width: 440px;">
<div class="Box-body">
<div class="form-group">
<div class="form-group-body">
<div class="position-relative">
<label for="input-8" 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 id="input-8" class="form-control" type="text" />
</div>
<ul role="listbox" aria-label="Results" 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>
</div>
</div>
</div>
</div>

<style>
.frame-example {
height: 220px;
}
</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" type="text" aria-label="Search by user" placeholder="Search by user" />
<ul class="autocomplete-results">
<ul role="listbox" aria-label="Results" 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>
Expand Down Expand Up @@ -210,7 +379,7 @@ The `.suggester` component is meant for showing suggestions while typing in a la
<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;">
<ul aria-label="Results" class="suggester suggester-container" role="listbox" style="top: 4px; left: 125px;">
<li aria-selected="true">
<svg
class="octicon color-fg-subtle"
Expand Down
2 changes: 1 addition & 1 deletion src/autocomplete/autocomplete.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
// Wrapper for the input and result elements to ensure alignment
.autocomplete-body {
position: relative;
display: inline-block;
display: inline;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was originally changed to inline-block to remediate this bug we saw in Firefox:
Screenshot of listbox overlapping with input field in firefox

Preview of bug

However, inline-block results in the listbox overflowing out of its container. See primer/view_components#1050 (comment). We found the overlap issue does not appear when testing the swapped instances in prod in FireFox. Though this bug surfaces in Primer CSS docs, we don't see it when listbox is hidden THEN appears, so I think we should move forward with this to remediate the overflow issue.

}

// Wrapper and conditional styles for when an icon is added
Expand Down
7 changes: 7 additions & 0 deletions src/forms/form-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,13 @@
// stylelint-disable-next-line primer/spacing
margin: 15px 0;

// Autocomplete with embedded icon
.form-control.autocomplete-embedded-icon-wrap {
&:focus-within {
background-color: var(--color-canvas-default);
}
}

Comment on lines +18 to +23
Copy link
Contributor Author

Choose a reason for hiding this comment

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

When an input in a .form-group is focused, it changes colors. We need to make sure that color of the parent embedded icon container also changes.

This fixes how the color is not uniform in this screenshot : https://github.com/github/github/pull/214426#discussion_r835613107

// Text fields
.form-control {
width: 440px;
Expand Down
10 changes: 10 additions & 0 deletions src/forms/input-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@
&.inline {
display: inline-table;
}

// Autocomplete with embedded icon
.form-control.autocomplete-embedded-icon-wrap {
display: inline-flex;
padding: $spacer-1 * 1.25 $spacer-2;
}
}

.input-group .form-control,
Expand All @@ -30,6 +36,10 @@
vertical-align: middle; // Match the inputs
}

.input-group-button--autocomplete-embedded-icon {
vertical-align: bottom;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This addresses: https://github.com/github/github/pull/214426/files#r836499311.

The changes in this file addresses an issue where button positioning is way off when autocomplete with embedded icon is inside an input group.

.input-group .form-control:first-child,
.input-group-button:first-child .btn {
border-top-right-radius: 0;
Expand Down