From af24fe623dd7a8b3030da3b80321aca8486a031a Mon Sep 17 00:00:00 2001
From: simurai
Date: Fri, 4 Oct 2019 14:44:08 +0900
Subject: [PATCH 1/3] Replace lighten() with variable.
---
src/select-menu/select-menu.scss | 7 +++----
1 file changed, 3 insertions(+), 4 deletions(-)
diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss
index bcee912269..ef5fdcb731 100644
--- a/src/select-menu/select-menu.scss
+++ b/src/select-menu/select-menu.scss
@@ -3,7 +3,6 @@
// selector-max-type is needed for body:not(.intent-mouse) to target keyboard only styles.
// TODO: Introduce an additional .intent-keyboard class
-$SelectMenu-border: $border-width $border-style lighten($gray-200, 3%);
$SelectMenu-max-height: 480px;
// Select Menu
@@ -188,7 +187,7 @@ $SelectMenu-max-height: 480px;
cursor: pointer;
background-color: $bg-white;
border: 0;
- border-bottom: $SelectMenu-border;
+ border-bottom: $border-width $border-style $border-gray-light;
@include breakpoint(sm) {
padding-top: $spacer-2;
@@ -270,7 +269,7 @@ $SelectMenu-max-height: 480px;
// A container used to show different kinds of content. Like a message, a blankslate or the loading animation.
.SelectMenu-message {
- border-bottom: $SelectMenu-border;
+ border-bottom: $border-width $border-style $border-gray-light;
}
.SelectMenu-message,
@@ -292,7 +291,7 @@ $SelectMenu-max-height: 480px;
font-weight: $font-weight-bold;
color: $text-gray-light;
background-color: $gray-100;
- border-bottom: $SelectMenu-border;
+ border-bottom: $border-width $border-style $border-gray-light;
}
// Footer
From 2731c8759d51c1b621d86a2a0842277c56d077c4 Mon Sep 17 00:00:00 2001
From: simurai
Date: Wed, 30 Oct 2019 20:35:49 +0900
Subject: [PATCH 2/3] Introduce SelectMenu-icon--check modifier
---
docs/content/components/select-menu.md | 71 +++++++-------------------
src/select-menu/select-menu.scss | 8 ++-
2 files changed, 24 insertions(+), 55 deletions(-)
diff --git a/docs/content/components/select-menu.md b/docs/content/components/select-menu.md
index c748895a8c..a458b47ada 100644
--- a/docs/content/components/select-menu.md
+++ b/docs/content/components/select-menu.md
@@ -85,7 +85,7 @@ In case the Select Menu should be aligned to the right, use `SelectMenu right-0`
## Selected state
-Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-checked="true"` is set.
+If the `SelectMenu` should show a check icon for selected items, use the `SelectMenu-icon SelectMenu-icon--check` classes. It will make the check icon show when `aria-checked="true"` is set.
```html live
@@ -108,68 +108,28 @@ Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-chec
@@ -183,7 +143,7 @@ Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-chec
## List items
-The list of items is arguably the most important subcomponent within the menu. Build them out of anchors, buttons, or just about any [interactive content](http://w3c.github.io/html/dom.html#interactive-content). List items are also customizable with options for avatars, additional icons, and multiple lines of text. Use utility classes like `mr-2`, `d-flex` or `float-right` in case more custom styling is needed.
+The list of items is arguably the most important subcomponent within the menu. Build them out of anchors, buttons, or just about any [interactive content](http://w3c.github.io/html/dom.html#interactive-content). List items are also customizable with options for avatars, additional icons, and multiple lines of text. Use utility classes in case more custom styling is needed.
```html live
@@ -208,6 +168,11 @@ The list of items is arguably the most important subcomponent within the menu. B
+
-
+
```
## Divider
diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss
index ef5fdcb731..5932cc9136 100644
--- a/src/select-menu/select-menu.scss
+++ b/src/select-menu/select-menu.scss
@@ -197,11 +197,15 @@ $SelectMenu-max-height: 480px;
// Icon
//
-// The icon shown on the left of a list item. Typically a check icon.
+// Icon shown on the left of a list item.
.SelectMenu-icon {
width: $spacer-3; // fixed width to make sure following content aligns
margin-right: $spacer-2;
+}
+
+// Check icon
+.SelectMenu-icon--check {
visibility: hidden;
transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;
transform: scale(0);
@@ -352,7 +356,7 @@ $SelectMenu-max-height: 480px;
font-weight: $font-weight-semibold;
color: $text-gray-dark;
- .SelectMenu-icon {
+ .SelectMenu-icon--check {
visibility: visible;
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear;
transform: scale(1);
From 5e49c473ed29bdcc2720a4c5561205c426e89064 Mon Sep 17 00:00:00 2001
From: simurai
Date: Wed, 30 Oct 2019 20:54:52 +0900
Subject: [PATCH 3/3] Prevent SelectMenu-icon from shrinking
---
src/select-menu/select-menu.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss
index 5932cc9136..5357773e12 100644
--- a/src/select-menu/select-menu.scss
+++ b/src/select-menu/select-menu.scss
@@ -202,6 +202,7 @@ $SelectMenu-max-height: 480px;
.SelectMenu-icon {
width: $spacer-3; // fixed width to make sure following content aligns
margin-right: $spacer-2;
+ flex-shrink: 0;
}
// Check icon