+
+
-
+
diff --git a/packages/mdc-select/icon/README.md b/packages/mdc-select/icon/README.md
index 3dee6a1ff3a..27db061fc4f 100644
--- a/packages/mdc-select/icon/README.md
+++ b/packages/mdc-select/icon/README.md
@@ -58,7 +58,7 @@ const icon = new MDCSelectIcon(document.querySelector('.mdc-select__icon'));
## Variants
-Leading icons can be applied to default or `mdc-select--outlined` Selects. To add a leading icon, add the class `mdc-select--with-leading-icon` to the root element, add an `i` element with your preferred icon, and give it a class of `mdc-select__icon`.
+Leading icons can be applied to default or `mdc-select--outlined` Selects. To add a leading icon, add the class `mdc-select--with-leading-icon` to the root element, add an `i` element with your preferred icon as a child of the `mdc-select__anchor` element, and give it a class of `mdc-select__icon`.
> **NOTE:** if you would like to display un-clickable icons, simply omit `tabindex="0"` and `role="button"`, and the CSS will ensure the cursor is set to default, and that interacting with an icon doesn't do anything unexpected.
@@ -68,7 +68,10 @@ In select:
```html
-
event
+
+ event
+ ...
+
```
@@ -77,7 +80,10 @@ In outlined select:
```html
-
event
+
+ event
+ ...
+
```
diff --git a/packages/mdc-touch-target/_mixins.scss b/packages/mdc-touch-target/_mixins.scss
index 457404ab418..30f172308fd 100644
--- a/packages/mdc-touch-target/_mixins.scss
+++ b/packages/mdc-touch-target/_mixins.scss
@@ -43,16 +43,32 @@
}
/// Styles applied to the component's inner touch target element.
-@mixin mdc-touch-target($query: mdc-feature-all()) {
+/// By default, only sets the inner element height to the minimum touch target
+/// height ($mdc-touch-target-height).
+/// @param {Boolean} $set-width [false] - Sets the inner element width to the
+/// minimum touch target width ($mdc-touch-target-width).
+@mixin mdc-touch-target($set-width: false, $query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);
@include mdc-feature-targets($feat-structure) {
position: absolute;
top: 50%;
right: 0;
- left: 0;
height: $mdc-touch-target-height;
- transform: translateY(-50%);
+ }
+
+ @if $set-width {
+ @include mdc-feature-targets($feat-structure) {
+ /* @noflip */
+ left: 50%;
+ width: $mdc-touch-target-width;
+ transform: translate(-50%, -50%);
+ }
+ } @else {
+ @include mdc-feature-targets($feat-structure) {
+ left: 0;
+ transform: translateY(-50%);
+ }
}
}
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index 502f8d30f11..45b7b24bbab 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -40,11 +40,11 @@
}
},
"spec/mdc-button/mixins/container-fill-color.html": {
- "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/container-fill-color.html?utm_source=golden_json",
+ "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/container-fill-color.html?utm_source=golden_json",
"screenshots": {
- "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/container-fill-color.html.windows_chrome_74.png",
- "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/container-fill-color.html.windows_firefox_62.png",
- "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/container-fill-color.html.windows_ie_11.png"
+ "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/container-fill-color.html.windows_chrome_77.png",
+ "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/container-fill-color.html.windows_firefox_69.png",
+ "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/container-fill-color.html.windows_ie_11.png"
}
},
"spec/mdc-button/mixins/density.html": {
@@ -72,19 +72,19 @@
}
},
"spec/mdc-button/mixins/icon-color.html": {
- "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/15_45_24_303/spec/mdc-button/mixins/icon-color.html?utm_source=golden_json",
+ "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/icon-color.html?utm_source=golden_json",
"screenshots": {
- "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/icon-color.html.windows_chrome_74.png",
- "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/15_45_24_303/spec/mdc-button/mixins/icon-color.html.windows_firefox_69.png",
- "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/icon-color.html.windows_ie_11.png"
+ "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/icon-color.html.windows_chrome_77.png",
+ "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/icon-color.html.windows_firefox_69.png",
+ "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/icon-color.html.windows_ie_11.png"
}
},
"spec/mdc-button/mixins/ink-color.html": {
- "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/ink-color.html?utm_source=golden_json",
+ "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/ink-color.html?utm_source=golden_json",
"screenshots": {
- "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/ink-color.html.windows_chrome_74.png",
- "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/ink-color.html.windows_firefox_62.png",
- "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/ink-color.html.windows_ie_11.png"
+ "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/ink-color.html.windows_chrome_77.png",
+ "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/ink-color.html.windows_firefox_69.png",
+ "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/ink-color.html.windows_ie_11.png"
}
},
"spec/mdc-button/mixins/shape-radius.html": {
@@ -96,11 +96,11 @@
}
},
"spec/mdc-button/mixins/stroke-color.html": {
- "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/stroke-color.html?utm_source=golden_json",
+ "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/stroke-color.html?utm_source=golden_json",
"screenshots": {
- "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/stroke-color.html.windows_chrome_74.png",
- "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/stroke-color.html.windows_firefox_65.png",
- "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/stroke-color.html.windows_ie_11.png"
+ "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/stroke-color.html.windows_chrome_77.png",
+ "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/stroke-color.html.windows_firefox_69.png",
+ "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/stroke-color.html.windows_ie_11.png"
}
},
"spec/mdc-button/mixins/stroke-width.html": {
diff --git a/test/screenshot/spec/mdc-button/fixture.scss b/test/screenshot/spec/mdc-button/fixture.scss
index a9d2207fbd6..e18a52ca1c5 100644
--- a/test/screenshot/spec/mdc-button/fixture.scss
+++ b/test/screenshot/spec/mdc-button/fixture.scss
@@ -25,6 +25,7 @@
@import "../mixins";
$custom-button-color: $material-color-red-300;
+$custom-disabled-button-color: rgba(purple, .3);
$custom-button-custom-shape-radius: 50%;
$custom-button-custom-outline-width: 4px;
$custom-button-custom-horizontal-padding: 24px;
@@ -46,10 +47,12 @@ $custom-button-custom-horizontal-padding: 24px;
.custom-button--ink-color {
@include mdc-button-ink-color($custom-button-color);
+ @include mdc-button-disabled-ink-color($custom-disabled-button-color);
}
.custom-button--container-fill-color {
@include mdc-button-container-fill-color($custom-button-color);
+ @include mdc-button-disabled-container-fill-color($custom-disabled-button-color);
}
.custom-button--filled-accessible {
@@ -58,6 +61,7 @@ $custom-button-custom-horizontal-padding: 24px;
.custom-button--outline-color {
@include mdc-button-outline-color($custom-button-color);
+ @include mdc-button-disabled-outline-color($custom-disabled-button-color);
}
.custom-button--outline-width {
@@ -70,6 +74,7 @@ $custom-button-custom-horizontal-padding: 24px;
.custom-button--icon-color {
@include mdc-button-icon-color($custom-button-color);
+ @include mdc-button-disabled-icon-color($custom-disabled-button-color);
}
.custom-button--horizontal-padding {