diff --git a/packages/mdc-icon-button/_mixins.scss b/packages/mdc-icon-button/_mixins.scss index a28589cedb1..8a86e67469e 100644 --- a/packages/mdc-icon-button/_mixins.scss +++ b/packages/mdc-icon-button/_mixins.scss @@ -20,51 +20,123 @@ // THE SOFTWARE. // -@import "@material/ripple/common"; +@import "@material/feature-targeting/functions"; +@import "@material/feature-targeting/mixins"; @import "@material/ripple/mixins"; @import "@material/theme/mixins"; @import "./variables"; -@mixin mdc-icon-button-size($width, $height: $width, $padding: max($width, $height)/2) { - width: $width + $padding * 2; - height: $height + $padding * 2; - padding: $padding; - font-size: max($width, $height); +@mixin mdc-icon-button-core-styles($query: mdc-feature-all()) { + @include mdc-icon-button-without-ripple($query); + @include mdc-icon-button-ripple($query); +} + +@mixin mdc-icon-button-without-ripple($query: mdc-feature-all()) { + $feat-structure: mdc-feature-create-target($query, structure); + + // postcss-bem-linter: define icon-button + .mdc-icon-button { + @include mdc-icon-button-base_($query: $query); + } + + .mdc-icon-button__icon { + @include mdc-feature-targets($feat-structure) { + display: inline-block; + } + + // stylelint-disable-next-line plugin/selector-bem-pattern + &.mdc-icon-button__icon--on { + @include mdc-feature-targets($feat-structure) { + display: none; + } + } + } + + .mdc-icon-button--on { + .mdc-icon-button__icon { + @include mdc-feature-targets($feat-structure) { + display: none; + } + + // stylelint-disable-next-line plugin/selector-bem-pattern + &.mdc-icon-button__icon--on { + @include mdc-feature-targets($feat-structure) { + display: inline-block; + } + } + } + } + // postcss-bem-linter: end +} + +@mixin mdc-icon-button-ripple($query: mdc-feature-all()) { + @include mdc-ripple-common($query); + + .mdc-icon-button { + @include mdc-ripple-surface($query: $query); + @include mdc-ripple-radius-unbounded($query: $query); + @include mdc-states($query: $query); + } +} + +@mixin mdc-icon-button-size($width, $height: $width, $padding: max($width, $height)/2, $query: mdc-feature-all()) { + $feat-structure: mdc-feature-create-target($query, structure); + + @include mdc-feature-targets($feat-structure) { + width: $width + $padding * 2; + height: $height + $padding * 2; + padding: $padding; + font-size: max($width, $height); + } // stylelint-disable-next-line selector-max-type svg, img { - width: $width; - height: $height; + @include mdc-feature-targets($feat-structure) { + width: $width; + height: $height; + } } } -@mixin mdc-icon-button-ink-color($color) { - @include mdc-theme-prop(color, $color); - @include mdc-states($color); +@mixin mdc-icon-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); + } + + @include mdc-states($color, $query: $query); } -@mixin mdc-icon-button-base_() { - @include mdc-ripple-surface; - @include mdc-ripple-radius-unbounded; - @include mdc-icon-button-size($mdc-icon-button-size); - - display: inline-block; - position: relative; - box-sizing: border-box; - border: none; - outline: none; - background-color: transparent; - fill: currentColor; - color: inherit; - text-decoration: none; - cursor: pointer; - user-select: none; +@mixin mdc-icon-button-base_($query: mdc-feature-all()) { + $feat-color: mdc-feature-create-target($query, color); + $feat-structure: mdc-feature-create-target($query, structure); + + @include mdc-icon-button-size($mdc-icon-button-size, $query: $query); + + @include mdc-feature-targets($feat-structure) { + display: inline-block; + position: relative; + box-sizing: border-box; + border: none; + outline: none; + background-color: transparent; + fill: currentColor; + color: inherit; + text-decoration: none; + cursor: pointer; + user-select: none; + } &:disabled { - @include mdc-theme-prop(color, text-disabled-on-light); + @include mdc-feature-targets($feat-color) { + @include mdc-theme-prop(color, text-disabled-on-light); + } - cursor: default; - pointer-events: none; + @include mdc-feature-targets($feat-structure) { + cursor: default; + pointer-events: none; + } } } diff --git a/packages/mdc-icon-button/mdc-icon-button.scss b/packages/mdc-icon-button/mdc-icon-button.scss index ecff39ae2e8..02a28afda87 100644 --- a/packages/mdc-icon-button/mdc-icon-button.scss +++ b/packages/mdc-icon-button/mdc-icon-button.scss @@ -20,33 +20,5 @@ // THE SOFTWARE. // -// postcss-bem-linter: define icon-button - @import "./mixins"; - -.mdc-icon-button { - @include mdc-icon-button-base_; - @include mdc-states; -} - -.mdc-icon-button__icon { - display: inline-block; - - // stylelint-disable-next-line plugin/selector-bem-pattern - &.mdc-icon-button__icon--on { - display: none; - } -} - -.mdc-icon-button--on { - .mdc-icon-button__icon { - display: none; - - // stylelint-disable-next-line plugin/selector-bem-pattern - &.mdc-icon-button__icon--on { - display: inline-block; - } - } -} - -// postcss-bem-linter: end +@include mdc-icon-button-core-styles; diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss index 195cb00aff4..0aeb807a2f3 100644 --- a/test/scss/_feature-targeting-test.scss +++ b/test/scss/_feature-targeting-test.scss @@ -5,6 +5,7 @@ @import "@material/elevation/mixins"; @import "@material/fab/mixins"; @import "@material/form-field/mixins"; +@import "@material/icon-button/mixins"; @import "@material/list/mixins"; @import "@material/menu-surface/mixins"; @import "@material/menu/mixins"; @@ -80,6 +81,11 @@ // Form Field @include mdc-form-field-core-styles($query: $query); + // Icon Button + @include mdc-icon-button-core-styles($query: $query); + @include mdc-icon-button-size(0, $query: $query); + @include mdc-icon-button-ink-color(red, $query: $query); + // List @include mdc-list-core-styles($query: $query); @include mdc-list-item-primary-text-ink-color(red, $query: $query);