From ff870005acef3cb26a6b4f378c012ffdb1061194 Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Thu, 13 Aug 2020 18:10:37 -0700 Subject: [PATCH] feat(checkbox): Separate static styles from checkbox styles BREAKING CHANGE: Renamed mixin `ripple()` => `ripple-styles()` in MDC checkbox PiperOrigin-RevId: 326565296 --- packages/mdc-checkbox/_checkbox-theme.scss | 78 +++++++++--------- packages/mdc-checkbox/_checkbox.scss | 79 ++++++++++--------- packages/mdc-checkbox/_mixins.scss | 2 +- .../test/feature-targeting-any.test.scss | 3 +- 4 files changed, 84 insertions(+), 78 deletions(-) diff --git a/packages/mdc-checkbox/_checkbox-theme.scss b/packages/mdc-checkbox/_checkbox-theme.scss index 351697cb57a..4e9cde67b28 100644 --- a/packages/mdc-checkbox/_checkbox-theme.scss +++ b/packages/mdc-checkbox/_checkbox-theme.scss @@ -81,14 +81,26 @@ $ripple-target: '.mdc-checkbox__ripple'; $property-name: size, ); - @include ripple-size($size, $query: $query); - - @if $density-scale != 0 { - @include touch-target-reset_($query: $query); + @if $density-scale == 0 { + @include ripple-size( + $size, + $touch-target-size: touch-target-variables.$height, + $query: $query + ); + } @else { + @include ripple-size($size, $touch-target-size: $size, $query: $query); } } -@mixin ripple-size($ripple-size, $query: feature-targeting.all()) { +/// Sets ripple size of checkbox and optionally set touch target size which can +/// be more than the size of ripple. +/// @param {Number} $ripple-size - Visual ripple size of checkbox. +/// @param {Number} $touch-target-size [touch-target.$height] - Touch target size that is visually hidden. +@mixin ripple-size( + $ripple-size, + $touch-target-size: touch-target-variables.$height, + $query: feature-targeting.all() +) { $feat-structure: feature-targeting.create-target($query, structure); $checkbox-padding: ($ripple-size - $icon-size) / 2; @@ -112,11 +124,31 @@ $ripple-target: '.mdc-checkbox__ripple'; } } - @include touch-target( - $ripple-size, - $ripple-size: $ripple-size, - $query: $query - ); + &.mdc-checkbox--touch { + // Set margin around ripple to accommodate visually hidden touch target. + @if $ripple-size == $touch-target-size { + @include touch-target-reset_($query: $query); + } @else { + @include touch-target-mixins.margin( + $component-height: $ripple-size, + $component-width: $ripple-size, + $query: $query + ); + } + + // Set touch target height & width. + $offset: ($ripple-size - $touch-target-size) / 2; + + @include feature-targeting.targets($feat-structure) { + .mdc-checkbox__native-control { + top: $offset; + right: $offset; + left: $offset; + width: $touch-target-size; + height: $touch-target-size; + } + } + } } /// @@ -336,32 +368,6 @@ $ripple-target: '.mdc-checkbox__ripple'; } } -/// -/// Sets checkbox touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom -/// ripple size. -/// -/// @param {Number} $size Size of touch target (Native input) in `px`. -/// @param {Number} $ripple-size Size of ripple in `px`. Required only for custom ripple size. -/// -@mixin touch-target( - $size: $ripple-size, - $ripple-size: $ripple-size, - $query: feature-targeting.all() -) { - $feat-structure: feature-targeting.create-target($query, structure); - $offset: ($ripple-size - $size) / 2; - - @include feature-targeting.targets($feat-structure) { - .mdc-checkbox__native-control { - top: $offset; - right: $offset; - left: $offset; - width: $size; - height: $size; - } - } -} - // // Private // diff --git a/packages/mdc-checkbox/_checkbox.scss b/packages/mdc-checkbox/_checkbox.scss index d9c35b26f5b..cbe24f7d2a6 100644 --- a/packages/mdc-checkbox/_checkbox.scss +++ b/packages/mdc-checkbox/_checkbox.scss @@ -41,20 +41,27 @@ @use './checkbox-theme'; /// -/// Checkbox core styles. +/// Checkbox and ripple styles. /// @mixin core-styles($query: feature-targeting.all()) { @include without-ripple($query); - @include ripple($query); + @include ripple-styles($query); } -// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other -// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead. +/// Checkbox styles. +/// +/// NOTE: This API is intended for use by frameworks that may want to separate the ripple-related styles from the other +/// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead. +// TODO(b/162887560): Rename to `checkbox-without-ripple-styles()` @mixin without-ripple($query: feature-targeting.all()) { - // postcss-bem-linter: define checkbox + @include static-styles($query: $query); + @include theme-styles($query: $query); +} +/// Checkbox static styles. +/// Checkbox styles that are not customizable should go here. +@mixin static-styles($query: feature-targeting.all()) { $feat-animation: feature-targeting.create-target($query, animation); - $feat-color: feature-targeting.create-target($query, color); $feat-structure: feature-targeting.create-target($query, structure); @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE @@ -67,25 +74,8 @@ @include feature-targeting.targets($feat-structure) { @include base_; } - - @include checkbox-theme.focus-indicator-color( - checkbox-theme.$baseline-theme-color, - $query: $query - ); - @include checkbox-theme.density( - checkbox-theme.$density-scale, - $query: $query - ); } - @include checkbox-theme.container-colors($query: $query); - @include checkbox-theme.disabled-container-colors($query: $query); - @include checkbox-theme.ink-color(checkbox-theme.$mark-color, $query: $query); - @include checkbox-theme.disabled-ink-color( - checkbox-theme.$mark-color, - $query: $query - ); - @media screen and (-ms-high-contrast: active) { @include checkbox-theme.disabled-container-colors( $unmarked-stroke-color: GrayText, @@ -180,18 +170,6 @@ } } - .mdc-checkbox--touch { - @include touch-target-mixins.margin( - $component-height: checkbox-theme.$ripple-size, - $component-width: checkbox-theme.$ripple-size, - $query: $query - ); - @include checkbox-theme.touch-target( - touch-target-variables.$height, - $query: $query - ); - } - .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background { .mdc-checkbox__checkmark { @include checkmark--checked_($query); @@ -216,13 +194,36 @@ } } } +} - // postcss-bem-linter: end +/// Checkbox theme styles. +/// Checkbox styles that are customizable should go here. +@mixin theme-styles($query: feature-targeting.all()) { + .mdc-checkbox { + @include checkbox-theme.focus-indicator-color( + checkbox-theme.$baseline-theme-color, + $query: $query + ); + @include checkbox-theme.density( + checkbox-theme.$density-scale, + $query: $query + ); + } + + @include checkbox-theme.container-colors($query: $query); + @include checkbox-theme.disabled-container-colors($query: $query); + @include checkbox-theme.ink-color(checkbox-theme.$mark-color, $query: $query); + @include checkbox-theme.disabled-ink-color( + checkbox-theme.$mark-color, + $query: $query + ); } -// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other -// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead. -@mixin ripple($query: feature-targeting.all()) { +/// Checkbox's ripple styles. +/// +/// NOTE: This API is intended for use by frameworks that may want to separate the ripple-related styles from the other +/// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead. +@mixin ripple-styles($query: feature-targeting.all()) { $feat-structure: feature-targeting.create-target($query, structure); @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE diff --git a/packages/mdc-checkbox/_mixins.scss b/packages/mdc-checkbox/_mixins.scss index 62716364992..b94df2c4268 100644 --- a/packages/mdc-checkbox/_mixins.scss +++ b/packages/mdc-checkbox/_mixins.scss @@ -21,5 +21,5 @@ // /// @deprecated Import '_checkbox.scss' or '_checkbox-theme.scss' instead. -@forward './checkbox' show core-styles, without-ripple, ripple, base_, disabled_, child--upgraded_, anim_, background_, background--marked_, focus-indicator_, focus-indicator--focused_, native-control_, checkmark_, checkmark--checked_, checkmark--indeterminate_, checkmark-path_, checkmark-path--marked_, mixedmark_, mixedmark--checked_, mixedmark--indeterminate_; +@forward './checkbox' show core-styles, without-ripple, ripple-styles, base_, disabled_, child--upgraded_, anim_, background_, background--marked_, focus-indicator_, focus-indicator--focused_, native-control_, checkmark_, checkmark--checked_, checkmark--indeterminate_, checkmark-path_, checkmark-path--marked_, mixedmark_, mixedmark--checked_, mixedmark--indeterminate_; @forward './checkbox-theme' show $ripple-target, density, ripple-size, container-colors, disabled-container-colors, ink-color, disabled-ink-color, focus-indicator-color, touch-target, if-enabled_, if-disabled_, if-unmarked-enabled_, if-unmarked-disabled_, if-marked-enabled_, if-marked-disabled_, container-colors_, ink-color_, touch-target-reset_; diff --git a/packages/mdc-checkbox/test/feature-targeting-any.test.scss b/packages/mdc-checkbox/test/feature-targeting-any.test.scss index ea42da166c1..6d3f2a24339 100644 --- a/packages/mdc-checkbox/test/feature-targeting-any.test.scss +++ b/packages/mdc-checkbox/test/feature-targeting-any.test.scss @@ -7,10 +7,9 @@ @include checkbox.container-colors($query: $query); @include checkbox.ink-color(red, $query: $query); @include checkbox.focus-indicator-color(red, $query: $query); - @include checkbox.ripple($query: $query); + @include checkbox.ripple-styles($query: $query); @include checkbox.without-ripple($query: $query); @include checkbox.ripple-size(0, $query: $query); - @include checkbox.touch-target(0, 0, $query: $query); @include checkbox.density(0, $query: $query); } }