feat(select): Update lint

material-components · Jun 4, 2018 · 7a92d56 · 7a92d56
1 parent 53be11f
commit 7a92d56
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
@@ -98,6 +98,26 @@ modifier class on the root element.
 </div>
 ```
 
+### Outlined Select
+
+The Select Outlined variant uses the `mdc-notched-outline` in place of the `mdc-line-ripple` element and adds the 
+`mdc-select--outlined` modifier class on the root element.
+
+```html
+<div class="mdc-select mdc-select--outlined">
+  <select class="mdc-select__native-control">
+   ...
+  </select>
+  <label class="mdc-floating-label">Pick a Food Group</label>
+   <div class="mdc-notched-outline">
+     <svg>
+       <path class="mdc-notched-outline__path"></path>
+     </svg>
+   </div>
+   <div class="mdc-notched-outline__idle"></div>
+</div>
+```
+
 ### Additional Information
 
 #### Select with pre-selected option
@@ -195,6 +215,7 @@ Mixin | Description
 `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-hover-bottom-line-color($color)` | Customizes the color of the bottom line when select is hovered.
+`mdc-select-outline-corner-radius($color)` | Customizes the color of the notched outline when select is focused.
 
 > NOTE: To further customize the floating label, please see the [floating label documentation](./../mdc-floating-label/README.md).
 
@@ -237,6 +258,7 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 
 | Method Signature | Description |
 | --- | --- |
+| `notchOutline(openNotch: boolean) => void` | Opens/closes the notched outline. |
 | `setValue(value: string) => void` | Sets the value of the component. |
 | `setDisabled(disabled: boolean) => void` | Adds/removes disabled class, and sets disabled attribute on the component. |
 | `setSelectedIndex(selectedIndex: number) => void` | Sets the selected index of the component. |
diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss
@@ -127,7 +127,7 @@
   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) {
+@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
@@ -153,6 +153,8 @@
 @mixin mdc-select-hover-outline-color_($color) {
   &:not(.mdc-select__native-control:focus) .mdc-select__native-control:hover ~ {
     @include mdc-notched-outline-idle-color($color);
+
+    // stylelint-disable-next-line selector-max-specificity
     .mdc-notched-outline {
       @include mdc-notched-outline-color($color);
     }

diff --git a/packages/mdc-select/_variables.scss b/packages/mdc-select/_variables.scss
@@ -18,7 +18,7 @@
 
 $mdc-select-arrow-padding: 26px;
 $mdc-select-label-padding: 16px;
-$mdc-select-border-radius: 4px !default;
+$mdc-select-border-radius: 4px;
 
 $mdc-select-ink-color: rgba(mdc-theme-prop-value(on-surface), .87);
 $mdc-select-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37);

diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss
@@ -139,7 +139,7 @@
   @include mdc-select-focused-outline-color(primary);
   @include mdc-floating-label-float-position($mdc-select-outlined-label-position-y);
   @include mdc-floating-label-shake-animation(text-field-outlined);
-  @include mdc-select-outline-corner-radius_($mdc-select-border-radius);
+  @include mdc-select-outline-corner-radius($mdc-select-border-radius);
 
   height: 56px;
   border: none;

diff --git a/packages/mdc-select/package.json b/packages/mdc-select/package.json
@@ -19,7 +19,7 @@
     "@material/base": "^0.35.0",
     "@material/floating-label": "^0.36.0",
     "@material/line-ripple": "^0.35.0",
-    "@material/notched-outline": "^0.36.0",
+    "@material/notched-outline": "^0.35.0",
     "@material/ripple": "^0.36.0",
     "@material/rtl": "^0.36.0",
     "@material/theme": "^0.35.0",