From f8da19f75d4c1bf94435576d8cf5c4da7ccd3ac6 Mon Sep 17 00:00:00 2001
From: Kate Higa
Date: Wed, 23 Mar 2022 10:17:48 -0700
Subject: [PATCH 01/24] * Add support for inline, stack label in autocomplete
---
docs/content/components/autocomplete.md | 76 ++++++++++++++++++++++---
src/autocomplete/autocomplete.scss | 14 +++++
2 files changed, 82 insertions(+), 8 deletions(-)
diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md
index cfe856047a..7bb8b10fcb 100644
--- a/docs/content/components/autocomplete.md
+++ b/docs/content/components/autocomplete.md
@@ -10,24 +10,84 @@ bundle: autocomplete
A list of items used to show autocompleted results. Use the [``](https://github.com/github/auto-complete-element) element to add functionality.
+### Default (stacked label)
+
```html live
-
-
-
Option 1
-
Option 2
-
Option 3
-
+
+
+
+
+
Option 1
+
Option 2
+
Option 3
+
+
-
+
+```
+
+### Inline label
+
+```html live
+
+
+
+
+
+
Option 1
+
Option 2
+
Option 3
+
+
+
+
+
+```
+
+On smaller viewport, we switch to stacking.
+
+```html live
+
+
+
+
+
+
Option 1
+
Option 2
+
Option 3
+
+
+
+
+
+```
+
+### Embedded icon with hidden label
+
+```html live
+
+
+
+
+
+
Option 1
+
Option 2
+
Option 3
+
+
+
+
+
```
+### Additional content
Autocomplete items can contain additional content, like an `.avatar`. Or use utility classes to customize the text style.
```html live
-
+
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 62051f5ce7..23a75efd2e 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -1,6 +1,20 @@
+// label
+.autocomplete-label-inline {
+ display: inline;
+
+ @media (max-width: $width-sm) {
+ display: block;
+ }
+}
+
+.autocomplete-body {
+ position: relative;
+}
+
// A pop up list of items used to show autocompleted results
.autocomplete-results {
position: absolute;
+ left: 0;
z-index: 99;
width: 100%;
max-height: 20em;
From 23e68dc871a0cf98c525571268cad802e91cbef8 Mon Sep 17 00:00:00 2001
From: Kate Higa
Date: Wed, 23 Mar 2022 10:50:32 -0700
Subject: [PATCH 02/24] * update heading levels and make example longer
---
docs/content/components/autocomplete.md | 22 ++++++++++------------
1 file changed, 10 insertions(+), 12 deletions(-)
diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md
index 7bb8b10fcb..9e2f2e52a0 100644
--- a/docs/content/components/autocomplete.md
+++ b/docs/content/components/autocomplete.md
@@ -6,11 +6,9 @@ source: 'https://github.com/primer/css/tree/main/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.
-### Default (stacked label)
+## Default (stacked label)
```html live
@@ -28,7 +26,7 @@ A list of items used to show autocompleted results. Use the [``](
```
-### Inline label
+## Inline label
```html live
@@ -36,9 +34,9 @@ A list of items used to show autocompleted results. Use the [``](
-
Option 1
-
Option 2
-
Option 3
+
Team 1 (works on Ruby architecture)
+
Team 2 (works on frontend JS architecture)
+
Team 3 (this team works on design systems)
@@ -54,9 +52,9 @@ On smaller viewport, we switch to stacking.
-
Option 1
-
Option 2
-
Option 3
+
Team 1 (works on Ruby architecture)
+
Team 2 (works on frontend JS architecture)
+
Team 3 (this team works on design systems)
@@ -64,7 +62,7 @@ On smaller viewport, we switch to stacking.
```
-### Embedded icon with hidden label
+## Embedded icon with hidden label
```html live
@@ -82,7 +80,7 @@ On smaller viewport, we switch to stacking.
```
-### Additional content
+## Additional content
Autocomplete items can contain additional content, like an `.avatar`. Or use utility classes to customize the text style.
```html live
From 87775212bc06ef675d6bef3429ff1d6caf51550c Mon Sep 17 00:00:00 2001
From: Kate Higa
Date: Wed, 23 Mar 2022 10:51:30 -0700
Subject: [PATCH 03/24] * update width CSS to fit content
---
src/autocomplete/autocomplete.scss | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 23a75efd2e..90a58e2cfb 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -1,4 +1,4 @@
-// label
+// Inline label (non-default)
.autocomplete-label-inline {
display: inline;
@@ -7,6 +7,7 @@
}
}
+// Wrapper for the input and result elements to ensure alignment
.autocomplete-body {
position: relative;
}
@@ -16,7 +17,7 @@
position: absolute;
left: 0;
z-index: 99;
- width: 100%;
+ width: max-content;
max-height: 20em;
overflow-y: auto;
// stylelint-disable-next-line primer/typography
From 3dbcbb3e077f5687781c0f0d1d36981f76d968e0 Mon Sep 17 00:00:00 2001
From: Kate Higa
Date: Wed, 23 Mar 2022 10:58:40 -0700
Subject: [PATCH 04/24] * update results width
---
src/autocomplete/autocomplete.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 90a58e2cfb..937f46663e 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -17,6 +17,7 @@
position: absolute;
left: 0;
z-index: 99;
+ min-width: 100%;
width: max-content;
max-height: 20em;
overflow-y: auto;
From 0e3cbeb805d6fb1f11ef44e4728f54c1550804f8 Mon Sep 17 00:00:00 2001
From: Kate Higa
Date: Wed, 23 Mar 2022 11:18:35 -0700
Subject: [PATCH 05/24] * add example to validate the icon work and css classes
---
docs/content/components/autocomplete.md | 22 +++++++++++++++++++++-
src/autocomplete/autocomplete.scss | 10 ++++++++++
2 files changed, 31 insertions(+), 1 deletion(-)
diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md
index 9e2f2e52a0..49f4cbcab0 100644
--- a/docs/content/components/autocomplete.md
+++ b/docs/content/components/autocomplete.md
@@ -62,14 +62,34 @@ On smaller viewport, we switch to stacking.
```
+## Embedded icon with visible label
+
+```html live
+
+
+
+
+
+
+
Option 1
+
Option 2
+
Option 3
+
+
+
+
+
+```
+
## Embedded icon with hidden label
```html live
+
-
+
Option 1
Option 2
Option 3
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 937f46663e..e34b22314a 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -12,6 +12,12 @@
position: relative;
}
+// Embedded icon
+.autocomplete-embedded-icon {
+ position: absolute;
+ left: 0;
+}
+
// A pop up list of items used to show autocompleted results
.autocomplete-results {
position: absolute;
@@ -30,6 +36,10 @@
box-shadow: var(--color-shadow-medium);
}
+.autocomplete-results--embedded-icon {
+ // to do: define
+}
+
// One of the items that appears within an autocomplete group
// Bold black text on white background
From f61c13c923b98c2d44bba95405b61ee73da274d4 Mon Sep 17 00:00:00 2001
From: Kate Higa
Date: Wed, 23 Mar 2022 12:19:14 -0700
Subject: [PATCH 06/24] * add stacked class
---
docs/content/components/autocomplete.md | 23 ++++++++++++++++++++---
src/autocomplete/autocomplete.scss | 5 +++++
2 files changed, 25 insertions(+), 3 deletions(-)
diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md
index 49f4cbcab0..91ee874d13 100644
--- a/docs/content/components/autocomplete.md
+++ b/docs/content/components/autocomplete.md
@@ -12,7 +12,7 @@ A list of items used to show autocompleted results. Use the [``](
```html live
-
+
@@ -64,9 +64,26 @@ On smaller viewport, we switch to stacking.
## Embedded icon with visible label
+Stacked label
+
+```html live
+
+
+
+
+
+
+
Option 1
+
Option 2
+
Option 3
+
+
+
+
+Inline label
```html live
-
+
@@ -85,7 +102,7 @@ On smaller viewport, we switch to stacking.
```html live
-
+
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index e34b22314a..798b8e3ae4 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -1,3 +1,8 @@
+// Stacked label (default)
+.autocomplete-label-stacked {
+ display: block;
+}
+
// Inline label (non-default)
.autocomplete-label-inline {
display: inline;
From 01c7e0e0ed5d78f96b2151cc6535b610e4b03eba Mon Sep 17 00:00:00 2001
From: Actions Auto Build
Date: Wed, 23 Mar 2022 19:20:52 +0000
Subject: [PATCH 07/24] Stylelint auto-fixes
---
src/autocomplete/autocomplete.scss | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 798b8e3ae4..826630cf89 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -18,7 +18,7 @@
}
// Embedded icon
-.autocomplete-embedded-icon {
+.autocomplete-embedded-icon {
position: absolute;
left: 0;
}
@@ -28,8 +28,8 @@
position: absolute;
left: 0;
z-index: 99;
- min-width: 100%;
width: max-content;
+ min-width: 100%;
max-height: 20em;
overflow-y: auto;
// stylelint-disable-next-line primer/typography
@@ -42,7 +42,7 @@
}
.autocomplete-results--embedded-icon {
- // to do: define
+ // to do: define
}
// One of the items that appears within an autocomplete group
From e8889744a21350f23f442ebef99d199d021e813b Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 23 Mar 2022 19:22:11 +0000
Subject: [PATCH 08/24] fix: embedded icon spacing
---
src/autocomplete/autocomplete.scss | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 826630cf89..392de37edd 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -20,7 +20,12 @@
// Embedded icon
.autocomplete-embedded-icon {
position: absolute;
- left: 0;
+ left: 5%;
+ top: 15%;
+
+ + input {
+ padding-left: 30px;
+ }
}
// A pop up list of items used to show autocompleted results
From 221c8f79b6e435533ff83ef633e48493cc9d3042 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 23 Mar 2022 19:32:26 +0000
Subject: [PATCH 09/24] fix: exmample, extra class removed
---
docs/content/components/autocomplete.md | 178 +++++++++++++++++++-----
src/autocomplete/autocomplete.scss | 4 -
2 files changed, 147 insertions(+), 35 deletions(-)
diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md
index 91ee874d13..0846b9a623 100644
--- a/docs/content/components/autocomplete.md
+++ b/docs/content/components/autocomplete.md
@@ -14,7 +14,7 @@ A list of items used to show autocompleted results. Use the [``](
-
+
Option 1
Option 2
@@ -23,7 +23,11 @@ A list of items used to show autocompleted results. Use the [``](
-
+
```
## Inline label
@@ -32,16 +36,20 @@ A list of items used to show autocompleted results. Use the [``](
-
+
Team 1 (works on Ruby architecture)
-
Team 2 (works on frontend JS architecture)
+
Team 2 (works on frontend JS architecture)
Team 3 (this team works on design systems)
-
+
```
On smaller viewport, we switch to stacking.
@@ -50,16 +58,21 @@ On smaller viewport, we switch to stacking.
-
+
```
## Additional content
+
Autocomplete items can contain additional content, like an `.avatar`. Or use utility classes to customize the text style.
```html live
-
+
-
+ GitHub Inc.@github
-
+ Hubot@hubot
-
+ Monalisa Octocat@octocat
-
+
```
## Suggester
@@ -151,30 +222,75 @@ The `.suggester` component is meant for showing suggestions while typing in a la
```html live
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 4f2a35901b..16174369bd 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -23,14 +23,27 @@
position: relative;
}
-// Embedded icon
-.autocomplete-embedded-icon {
- position: absolute;
- top: 15%;
- left: 5%;
+// Wrapper and conditional styles for when an icon is added
+.autocomplete-embedded-icon-wrap {
+ padding: 4px 12px;
+ display: inline-flex;
+ align-items: center;
+
+ &:focus-within {
+ border-color: var(--color-accent-emphasis);
+ outline: none;
+ box-shadow: var(--color-primer-shadow-focus);
+ }
- + .form-control {
- padding-left: $spacer-5;
+ .form-control {
+ border: none;
+ box-shadow: none;
+ padding: 0;
+ margin-left: $spacer-2;
+
+ &:focus {
+ box-shadow: none;
+ }
}
}
From 13c848877ad9d3f6d3806f2cef2b47773e11a7ff Mon Sep 17 00:00:00 2001
From: Kate Higa
Date: Thu, 24 Mar 2022 07:41:02 -0700
Subject: [PATCH 19/24] bug: ensure positioning is correct in firefox
---
src/autocomplete/autocomplete.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 16174369bd..e6c4dfee09 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -20,6 +20,7 @@
// Wrapper for the input and result elements to ensure alignment
.autocomplete-body {
+ display: inline-block;
position: relative;
}
From e635a37faa9fd249f13886d1ed54c6a153f1eb63 Mon Sep 17 00:00:00 2001
From: Kate Higa
Date: Thu, 24 Mar 2022 07:57:34 -0700
Subject: [PATCH 20/24] * fix lint
---
src/autocomplete/autocomplete.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index e6c4dfee09..0e12e48809 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -20,8 +20,8 @@
// Wrapper for the input and result elements to ensure alignment
.autocomplete-body {
- display: inline-block;
position: relative;
+ display: inline-block;
}
// Wrapper and conditional styles for when an icon is added
From ac647c0e1cdfaebf672a91184669f0e35a3eb855 Mon Sep 17 00:00:00 2001
From: Kate Higa
Date: Thu, 24 Mar 2022 08:52:40 -0700
Subject: [PATCH 21/24] * fix more lint issues
---
src/autocomplete/autocomplete.scss | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 0e12e48809..a61da651a0 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -26,8 +26,8 @@
// Wrapper and conditional styles for when an icon is added
.autocomplete-embedded-icon-wrap {
- padding: 4px 12px;
display: inline-flex;
+ padding: $spacer-1 $spacer-2;
align-items: center;
&:focus-within {
@@ -37,10 +37,11 @@
}
.form-control {
- border: none;
- box-shadow: none;
padding: 0;
margin-left: $spacer-2;
+ // stylelint-disable-next-line
+ border: none;
+ box-shadow: none;
&:focus {
box-shadow: none;
From 08bd89cf0d2729de107cf722bfef3bfb40a4929c Mon Sep 17 00:00:00 2001
From: Kate Higa
Date: Thu, 24 Mar 2022 09:01:23 -0700
Subject: [PATCH 22/24] * remove smaller screen size example because you can't
emulate screen size
---
docs/content/components/autocomplete.md | 23 +----------------------
1 file changed, 1 insertion(+), 22 deletions(-)
diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md
index 76552023e7..25dc7b25e4 100644
--- a/docs/content/components/autocomplete.md
+++ b/docs/content/components/autocomplete.md
@@ -52,28 +52,7 @@ A list of items used to show autocompleted results. Use the [``](
```
-On smaller viewport, we switch to stacking.
-
-```html live
-
-
-
-
-
-
Team 1 (works on Ruby architecture)
-
Team 2 (works on frontend JS architecture)
-
Team 3 (this team works on design systems)
-
-
-
-
-
-```
+On smaller screen sizes, the labels will be stacked.
## Embedded icon with visible label
From 2aeb8766b74f9a611464bcca5ecac3e61d38dfc0 Mon Sep 17 00:00:00 2001
From: Kate Higa
Date: Thu, 24 Mar 2022 09:03:33 -0700
Subject: [PATCH 23/24] * move note up
---
docs/content/components/autocomplete.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md
index 25dc7b25e4..5c4f2b058d 100644
--- a/docs/content/components/autocomplete.md
+++ b/docs/content/components/autocomplete.md
@@ -32,6 +32,8 @@ A list of items used to show autocompleted results. Use the [``](
## Inline label
+**Note**: On smaller screen sizes, the labels will be stacked.
+
```html live
@@ -52,8 +54,6 @@ A list of items used to show autocompleted results. Use the [``](
```
-On smaller screen sizes, the labels will be stacked.
-
## Embedded icon with visible label
Stacked label
From 94cd78738022906e39c574b8909b421c4d084ff8 Mon Sep 17 00:00:00 2001
From: Katie Langerman
Date: Thu, 24 Mar 2022 10:50:14 -0700
Subject: [PATCH 24/24] Create breezy-jeans-boil.md
---
.changeset/breezy-jeans-boil.md | 5 +++++
1 file changed, 5 insertions(+)
create mode 100644 .changeset/breezy-jeans-boil.md
diff --git a/.changeset/breezy-jeans-boil.md b/.changeset/breezy-jeans-boil.md
new file mode 100644
index 0000000000..c89dd2ba24
--- /dev/null
+++ b/.changeset/breezy-jeans-boil.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add support for inline, stack label in autocomplete
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 62051f5ce7..23a75efd2e 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -1,6 +1,20 @@
+// label
+.autocomplete-label-inline {
+ display: inline;
+
+ @media (max-width: $width-sm) {
+ display: block;
+ }
+}
+
+.autocomplete-body {
+ position: relative;
+}
+
// A pop up list of items used to show autocompleted results
.autocomplete-results {
position: absolute;
+ left: 0;
z-index: 99;
width: 100%;
max-height: 20em;
From 23e68dc871a0cf98c525571268cad802e91cbef8 Mon Sep 17 00:00:00 2001
From: Kate Higa 
+ 
+