Skip to content

Commit

Permalink
feat(checkbox): Separate static styles from checkbox styles
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Renamed mixin `ripple()` => `ripple-styles()` in MDC checkbox

PiperOrigin-RevId: 326565296
  • Loading branch information
@abhiomkar
abhiomkar authored and Copybara-Service committed Aug 14, 2020
1 parent 7dd4567 commit ff87000
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 78 deletions.
78 changes: 42 additions & 36 deletions packages/mdc-checkbox/_checkbox-theme.scss
View file
Expand Up @@ -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;

Expand All @@ -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;
}
}
}
}

///
Expand Down Expand Up @@ -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
//
Expand Down
79 changes: 40 additions & 39 deletions packages/mdc-checkbox/_checkbox.scss
View file
Expand Up @@ -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
Expand All @@ -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,
Expand Down Expand Up @@ -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);
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/mdc-checkbox/_mixins.scss
View file
Expand Up @@ -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_;
3 changes: 1 addition & 2 deletions packages/mdc-checkbox/test/feature-targeting-any.test.scss
View file
Expand Up @@ -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);
}
}
Expand Down

0 comments on commit ff87000

Please sign in to comment.