diff --git a/.github/workflows/release-canary.yml b/.github/workflows/release-canary.yml index e8c14204bf0..a0a6c3fa07c 100644 --- a/.github/workflows/release-canary.yml +++ b/.github/workflows/release-canary.yml @@ -17,11 +17,14 @@ jobs: release-canary: runs-on: ubuntu-latest steps: + - name: Clone repository + uses: actions/checkout@v1.0.0 - name: Checkout master branch - uses: actions/checkout@v1 - with: - ref: master - fetch-depth: 1 + # GITHUB_REF:11 gets `refs/heads/master` => `master`. + # See https://github.com/actions/checkout/issues/6 + run: | + git checkout "${GITHUB_REF:11}" + git pull - name: Setup node uses: actions/setup-node@v1 with: diff --git a/.github/workflows/release-pull-request.yml b/.github/workflows/release-pull-request.yml index a27946f6d9c..c896dbc3c6e 100644 --- a/.github/workflows/release-pull-request.yml +++ b/.github/workflows/release-pull-request.yml @@ -18,11 +18,14 @@ jobs: release-pull-request: runs-on: ubuntu-latest steps: + - name: Clone repository + uses: actions/checkout@v1.0.0 - name: Checkout master branch - uses: actions/checkout@v1 - with: - ref: master - fetch-depth: 1 + # GITHUB_REF:11 gets `refs/heads/master` => `master`. + # See https://github.com/actions/checkout/issues/6 + run: | + git checkout "${GITHUB_REF:11}" + git pull - name: Setup node uses: actions/setup-node@v1 with: diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index f3aea770e56..7908cea56db 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -17,10 +17,14 @@ jobs: release: runs-on: ubuntu-latest steps: + - name: Clone repository + uses: actions/checkout@v1.0.0 - name: Checkout master branch - uses: actions/checkout@v1 - with: - ref: master + # GITHUB_REF:11 gets `refs/heads/master` => `master`. + # See https://github.com/actions/checkout/issues/6 + run: | + git checkout "${GITHUB_REF:11}" + git pull - name: Setup node uses: actions/setup-node@v1 with: diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f758ac59e2..d9979ea92fb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -97,40 +97,43 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline * **text-field:** Removed sass variable in notched outline - `$mdc-notched-outline-transition-duration`. * **mdc-fab:** This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element. -OLD + OLD -```html - -``` + ```html + + ``` -NEW + NEW + + ```html + + ``` -```html - -``` * **radio:** Ripple has been moved to a child element. See readme for updates. * **slider:** remove adapter methods `appendTrackMarkers`, `removeTrackMarkers `, `setLastTrackMarkersStyleProperty `, and add adapter method `setTrackMarkers`. * **button:** This changes the structure of the button element by moving the ripple from the outer -``` + OLD -NEW -``` - -``` + ```html + + ``` + + NEW + + ```html + + ``` * **chips:** MDCChipSetAdapter#removeChip has been replaced with MDCChipSetAdapter#removeChipAtIndex. MDCChipSetAdapter#setSelected has been replaced with MDCChipSetAdapter#selectChipAtIndex * **density:** Renamed sass mixins & variables in MDC Data Table - `mdc-data-table-header-row-height` => `mdc-data-table-header-cell-height` & `mdc-data-table-row-height` => `mdc-data-table-cell-height`. Also removed `mdc-button--dense` variant, use button's density mixin instead. diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md index 548c814ea7a..708d1f70033 100644 --- a/packages/mdc-button/README.md +++ b/packages/mdc-button/README.md @@ -194,14 +194,18 @@ These mixins will override the color of the container, ink, outline or ripple. I Mixin | Description --- | --- -`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color. -`mdc-button-icon-color($color)` | Sets the icon color to the given color. -`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used. +`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button. +`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button. +`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button. +`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button. +`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used. +`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used. `mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`). `mdc-button-height($height)` | Sets custom height of button. `mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false. `mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number. -`mdc-button-outline-color($color)` | Sets the outline color to the given color. +`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button. +`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button. `mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value. ##### Caveat: Edge and CSS Custom Properties diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss index d7a15db5e5d..94134420f23 100644 --- a/packages/mdc-button/_mixins.scss +++ b/packages/mdc-button/_mixins.scss @@ -60,7 +60,7 @@ $mdc-button-ripple-target: ".mdc-button__ripple"; @include mdc-button-base_($query); @include mdc-button-shape-radius(small, $query: $query); @include mdc-button-container-fill-color(transparent, $query); - + @include mdc-button-disabled-container-fill-color(transparent, $query); // The icon CSS class overrides styles defined in the .material-icons CSS // class, which is loaded separately so the order of CSS definitions is not // guaranteed. Therefore, increase specifity by nesting this class to ensure @@ -72,10 +72,11 @@ $mdc-button-ripple-target: ".mdc-button__ripple"; } .mdc-button__touch { - @include mdc-touch-target($query); + @include mdc-touch-target($query: $query); } @include mdc-button-ink-color(primary, $query); + @include mdc-button-disabled-ink-color($mdc-button-disabled-ink-color, $query); } .mdc-button__label + .mdc-button__icon { @@ -111,8 +112,6 @@ $mdc-button-ripple-target: ".mdc-button__ripple"; .mdc-button--raised, .mdc-button--unelevated { @include mdc-button--filled_($query); - @include mdc-button-container-fill-color(primary, $query); - @include mdc-button-ink-color(on-primary, $query); } .mdc-button--raised { @@ -121,8 +120,6 @@ $mdc-button-ripple-target: ".mdc-button__ripple"; .mdc-button--outlined { @include mdc-button--outlined_($query); - @include mdc-button-outline-width($mdc-button-outlined-border-width, $query: $query); - @include mdc-button-outline-color(primary, $query); } .mdc-button--touch { @@ -191,45 +188,89 @@ $mdc-button-ripple-target: ".mdc-button__ripple"; } } +/// +/// Sets the container fill color to the given color for an enabled button. +/// @param {Color} $color - The desired container fill color. +/// @mixin mdc-button-container-fill-color($color, $query: mdc-feature-all()) { - $feat-color: mdc-feature-create-target($query, color); - // :not(:disabled) is used to support link styled as button // as link does not support :enabled style &:not(:disabled) { - @include mdc-feature-targets($feat-color) { - @include mdc-theme-prop(background-color, $color, $edgeOptOut: true); - } + @include mdc-button-container-fill-color_($color, $query: $query); } } -@mixin mdc-button-outline-color($color, $query: mdc-feature-all()) { - $feat-color: mdc-feature-create-target($query, color); +/// +/// Sets the container fill color to the given color for a disabled button. +/// @param {Color} $color - The desired container fill color. +/// +@mixin mdc-button-disabled-container-fill-color($color, $query: mdc-feature-all()) { + &:disabled { + @include mdc-button-container-fill-color_($color, $query: $query); + } +} +/// +/// Sets the outline color to the given color for an enabled button. +/// @param {Color} $color - The desired outline color. +/// +@mixin mdc-button-outline-color($color, $query: mdc-feature-all()) { &:not(:disabled) { - @include mdc-feature-targets($feat-color) { - @include mdc-theme-prop(border-color, $color); - } + @include mdc-button-outline-color_($color, $query: $query); } } +/// +/// Sets the outline color to the given color for a disabled button. +/// @param {Color} $color - The desired outline color. +/// +@mixin mdc-button-disabled-outline-color($color, $query: mdc-feature-all()) { + &:disabled { + @include mdc-button-outline-color_($color, $query: $query); + } +} + +/// +/// Sets the icon color to the given color for an enabled button. +/// @param {Color} $color - The desired icon color. +/// @mixin mdc-button-icon-color($color, $query: mdc-feature-all()) { - $feat-color: mdc-feature-create-target($query, color); + &:not(:disabled) { + @include mdc-button-icon-color_($color, $query: $query); + } +} - &:not(:disabled) .mdc-button__icon { - @include mdc-feature-targets($feat-color) { - @include mdc-theme-prop(color, $color); - } +/// +/// Sets the icon color to the given color for a disabled button. +/// @param {Color} $color - The desired icon color. +/// +@mixin mdc-button-disabled-icon-color($color, $query: mdc-feature-all()) { + &:disabled { + @include mdc-button-icon-color_($color, $query: $query); } } +/// +/// Sets the ink color to the given color for an enabled button, +/// and sets the icon color to the given color unless `mdc-button-icon-color` +/// is also used. +/// @param {Color} $color - The desired ink color. +/// @mixin mdc-button-ink-color($color, $query: mdc-feature-all()) { - $feat-color: mdc-feature-create-target($query, color); - &:not(:disabled) { - @include mdc-feature-targets($feat-color) { - @include mdc-theme-prop(color, $color); - } + @include mdc-button-ink-color_($color, $query: $query); + } +} + +/// +/// Sets the ink color to the given color for a disabled button, +/// and sets the icon color to the given color unless `mdc-button-icon-color` +/// is also used. +/// @param {Color} $color - The desired ink color. +/// +@mixin mdc-button-disabled-ink-color($color, $query: mdc-feature-all()) { + &:disabled { + @include mdc-button-ink-color_($color, $query: $query); } } @@ -382,12 +423,6 @@ $query: mdc-feature-all()) { } &:disabled { - @include mdc-feature-targets($feat-color) { - @include mdc-theme-prop(background-color, transparent); - - color: $mdc-button-disabled-ink-color; - } - @include mdc-feature-targets($feat-structure) { cursor: default; pointer-events: none; @@ -422,32 +457,23 @@ $query: mdc-feature-all()) { } @mixin mdc-button--outlined_($query) { - $feat-color: mdc-feature-create-target($query, color); $feat-structure: mdc-feature-create-target($query, structure); + @include mdc-button-outline-width($mdc-button-outlined-border-width, $query: $query); + @include mdc-button-outline-color(primary, $query); + @include mdc-button-disabled-outline-color($mdc-button-disabled-ink-color, $query); + @include mdc-feature-targets($feat-structure) { border-style: solid; } - - &:disabled { - @include mdc-feature-targets($feat-color) { - border-color: $mdc-button-disabled-ink-color; - } - } } @mixin mdc-button--filled_($query) { - $feat-color: mdc-feature-create-target($query, color); - $feat-structure: mdc-feature-create-target($query, structure); - @include mdc-button-horizontal-padding($mdc-button-contained-horizontal-padding, $query); - - &:disabled { - @include mdc-feature-targets($feat-color) { - background-color: rgba(mdc-theme-prop-value(on-surface), .12); - color: $mdc-button-disabled-ink-color; - } - } + @include mdc-button-container-fill-color(primary, $query); + @include mdc-button-ink-color(on-primary, $query); + @include mdc-button-disabled-container-fill-color($mdc-button-disabled-container-fill-color, $query); + @include mdc-button-disabled-ink-color($mdc-button-disabled-ink-color, $query); } @mixin mdc-button--raised_($query) { @@ -473,3 +499,57 @@ $query: mdc-feature-all()) { transition: mdc-elevation-transition-value(); } } + +/// +/// Sets the container fill color to the given color. This mixin should be +/// wrapped in a selector that qualifies button state. +/// @access private +/// +@mixin mdc-button-container-fill-color_($color, $query: mdc-feature-all()) { + $feat-color: mdc-feature-create-target($query, color); + + @include mdc-feature-targets($feat-color) { + @include mdc-theme-prop(background-color, $color, $edgeOptOut: true); + } +} + +/// +/// Sets the outline color to the given color. This mixin should be +/// wrapped in a selector that qualifies button state. +/// @access private +/// +@mixin mdc-button-outline-color_($color, $query: mdc-feature-all()) { + $feat-color: mdc-feature-create-target($query, color); + + @include mdc-feature-targets($feat-color) { + @include mdc-theme-prop(border-color, $color); + } +} + +/// +/// Sets the icon color to the given color. This mixin should be +/// wrapped in a selector that qualifies button state. +/// @access private +/// +@mixin mdc-button-icon-color_($color, $query: mdc-feature-all()) { + $feat-color: mdc-feature-create-target($query, color); + + .mdc-button__icon { + @include mdc-feature-targets($feat-color) { + @include mdc-theme-prop(color, $color); + } + } +} + +/// +/// Sets the ink color to the given color. This mixin should be +/// wrapped in a selector that qualifies button state. +/// @access private +/// +@mixin mdc-button-ink-color_($color, $query: mdc-feature-all()) { + $feat-color: mdc-feature-create-target($query, color); + + @include mdc-feature-targets($feat-color) { + @include mdc-theme-prop(color, $color); + } +} diff --git a/packages/mdc-button/_variables.scss b/packages/mdc-button/_variables.scss index ac85fc9e1b1..8f42355f5fd 100644 --- a/packages/mdc-button/_variables.scss +++ b/packages/mdc-button/_variables.scss @@ -41,4 +41,5 @@ $mdc-button-density-config: ( $mdc-button-outlined-border-width: 1px !default; $mdc-button-shape-radius: small !default; +$mdc-button-disabled-container-fill-color: rgba(mdc-theme-prop-value(on-surface), .12); $mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default; diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss index f88b226b40e..bf351dbd9ea 100644 --- a/packages/mdc-chips/_mixins.scss +++ b/packages/mdc-chips/_mixins.scss @@ -89,7 +89,7 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple"; } .mdc-chip__touch { - @include mdc-touch-target($query); + @include mdc-touch-target($query: $query); } } diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md index 8d71493b4da..3d47c951e35 100644 --- a/packages/mdc-fab/README.md +++ b/packages/mdc-fab/README.md @@ -143,6 +143,24 @@ In browsers that fully support CSS custom properties, the above mixins will work ### Additional Information +#### Accessibility + +Material Design spec advises that touch targets should be at least 48x48px. +While the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's: + +```html +
+ +
+``` + +Note that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins). + #### Positioning Developers must position MDC FAB as needed within their application's design. diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss index c6933ead69d..b61ad7edfe3 100644 --- a/packages/mdc-fab/_mixins.scss +++ b/packages/mdc-fab/_mixins.scss @@ -25,11 +25,12 @@ @import "@material/feature-targeting/mixins"; @import "@material/ripple/mixins"; @import "@material/ripple/variables"; -@import "@material/theme/functions"; -@import "@material/theme/mixins"; +@import "@material/rtl/mixins"; @import "@material/shape/mixins"; @import "@material/shape/functions"; -@import "@material/rtl/mixins"; +@import "@material/theme/functions"; +@import "@material/theme/mixins"; +@import "@material/touch-target/mixins"; @import "@material/typography/mixins"; @import "./variables"; @@ -43,6 +44,8 @@ $mdc-fab-ripple-target: ".mdc-fab__ripple"; @mixin mdc-fab-without-ripple($query: mdc-feature-all()) { // postcss-bem-linter: define fab + @include mdc-touch-target-wrapper($query); + .mdc-fab { @include mdc-fab-base_($query: $query); @include mdc-fab-container-color(secondary, $query: $query); @@ -58,6 +61,17 @@ $mdc-fab-ripple-target: ".mdc-fab__ripple"; @include mdc-fab--extended_($query: $query); } + .mdc-fab--touch { + @include mdc-touch-target-component( + $component-height: $mdc-fab-mini-height, + $component-width: $mdc-fab-mini-height, + $query: $query); + + .mdc-fab__touch { + @include mdc-touch-target($set-width: true, $query: $query); + } + } + .mdc-fab__label { @include mdc-fab--label_($query: $query); } @@ -241,6 +255,9 @@ $mdc-fab-icon-enter-duration_: 180ms; user-select: none; -moz-appearance: none; -webkit-appearance: none; + // Even though `visible` is the default, IE 11 computes the property as + // `hidden` in some cases, unless it's explicitly defined here. + overflow: visible; } @include mdc-feature-targets($feat-animation) { diff --git a/packages/mdc-fab/package.json b/packages/mdc-fab/package.json index 3dfbfe185c5..cbadd6d035f 100644 --- a/packages/mdc-fab/package.json +++ b/packages/mdc-fab/package.json @@ -22,6 +22,7 @@ "@material/rtl": "^4.0.0", "@material/shape": "^4.0.0", "@material/theme": "^4.0.0", + "@material/touch-target": "^4.0.0", "@material/typography": "^4.0.0" } } diff --git a/packages/mdc-list/README.md b/packages/mdc-list/README.md index 54703175636..c8796ace32f 100644 --- a/packages/mdc-list/README.md +++ b/packages/mdc-list/README.md @@ -536,7 +536,6 @@ Method Signature | Description --- | --- `getListItemCount() => Number` | Returns the total number of list items (elements with `mdc-list-item` class) that are direct children of the `root_` element. `getFocusedElementIndex() => Number` | Returns the `index` value of the currently focused element. -`getListItemIndex(ele: Element) => Number` | Returns the `index` value of the provided `ele` element. `getAttributeForElementIndex(index: number, attribute: string) => string | null` | Returns the attribute value of list item at given `index`. `setAttributeForElementIndex(index: Number, attr: String, value: String) => void` | Sets the `attr` attribute to `value` for the list item at `index`. `addClassForElementIndex(index: Number, className: String) => void` | Adds the `className` class to the list item at `index`. diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md index 5f53abdbd22..3d6463c1eb5 100644 --- a/packages/mdc-select/README.md +++ b/packages/mdc-select/README.md @@ -144,10 +144,12 @@ same. ```html
+ +
- +
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 {