From 39f95a3a4ab7db82eaf47ffb0a606ae84309e1bd Mon Sep 17 00:00:00 2001
From: Will Ernest <34519388+williamernest@users.noreply.github.com>
Date: Tue, 28 Aug 2018 14:06:55 -0700
Subject: [PATCH] fix(select): Add missing mixin (#3435)

Add missing `mdc-select-corner-radius` mixin for styling the corners of the `--box` variant.

(cherry picked from commit e654526794156e57a9751257fb511f0a5cec91e1)
---
 packages/mdc-select/README.md    |  1 +
 packages/mdc-select/_mixins.scss | 32 ++++++++++++++++++--------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
index e9f3d7eee2c..fa5e6916a4e 100644
--- a/packages/mdc-select/README.md
+++ b/packages/mdc-select/README.md
@@ -215,6 +215,7 @@ Mixin | Description
 `mdc-select-focused-label-color($color)` | Customizes the label color of the select when focused.
 `mdc-select-bottom-line-color($color)` | Customizes the color of the default bottom line of the select.
 `mdc-select-focused-bottom-line-color($color)` | Customizes the color of the bottom line of the select when focused.
+`mdc-select-corner-radius($radius)` | Customizes the corner radius of the box variant of the select.
 `mdc-select-hover-bottom-line-color($color)` | Customizes the color of the bottom line when the select is hovered.
 `mdc-select-outline-color($color)` | Customizes the color of the notched outline.
 `mdc-select-outline-corner-radius($radius)` | Sets the border radius of of the outlined select variant.
diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss
index 4e31a19b7a0..3ab6713b206 100644
--- a/packages/mdc-select/_mixins.scss
+++ b/packages/mdc-select/_mixins.scss
@@ -89,6 +89,24 @@
   }
 }
 
+@mixin mdc-select-corner-radius($radius) {
+  border-radius: $radius $radius 0 0;
+}
+
+@mixin mdc-select-outline-corner-radius($radius) {
+  // NOTE: idle and notched state border radius mixins
+  // are broken into 2 different mixins, otherwise
+  // we would be overly specific (big no, no). The cause of
+  // this is because .mdc-notched-outline and .mdc-notched-outline__idle
+  // are siblings. .mdc-notched-outline__idle needs to be a child of
+  // .mdc-notched-outline in order to remedy this issue.
+  .mdc-notched-outline {
+    @include mdc-notched-outline-corner-radius($radius);
+  }
+
+  @include mdc-notched-outline-idle-corner-radius($radius);
+}
+
 // Private
 @mixin mdc-select-focused-line-ripple_ {
   .mdc-select__native-control:focus ~ .mdc-line-ripple {
@@ -133,20 +151,6 @@
   background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23#{$fill-hex-number}%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22#{$opacity}%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
 }
 
-@mixin mdc-select-outline-corner-radius($radius) {
-  // NOTE: idle and notched state border radius mixins
-  // are broken into 2 different mixins, otherwise
-  // we would be overly specific (big no, no). The cause of
-  // this is because .mdc-notched-outline and .mdc-notched-outline__idle
-  // are siblings. .mdc-notched-outline__idle needs to be a child of
-  // .mdc-notched-outline in order to remedy this issue.
-  .mdc-notched-outline {
-    @include mdc-notched-outline-corner-radius($radius);
-  }
-
-  @include mdc-notched-outline-idle-corner-radius($radius);
-}
-
 @mixin mdc-select-outline-color_($color) {
   // NOTE: outlined version of select wants the "idle" and
   // "notched" outline to have the same color. This covers two cases: