From bec0659206aee793e6970d59c73f7969ab540b69 Mon Sep 17 00:00:00 2001 From: Patty RoDee Date: Thu, 12 Mar 2020 13:13:07 -0700 Subject: [PATCH] feat(chips): Add trailing action feature targeting test PiperOrigin-RevId: 300610005 --- .../mdc-chips/trailingaction/_mixins.scss | 59 ++++++++++--------- .../mdc-chips/trailingaction/_variables.scss | 2 - .../test/feature-targeting-any.test.scss | 17 ++++++ .../mdc-chip-trailing-action.scss.test.ts | 32 ++++++++++ 4 files changed, 79 insertions(+), 31 deletions(-) create mode 100644 packages/mdc-chips/trailingaction/test/feature-targeting-any.test.scss create mode 100644 packages/mdc-chips/trailingaction/test/mdc-chip-trailing-action.scss.test.ts diff --git a/packages/mdc-chips/trailingaction/_mixins.scss b/packages/mdc-chips/trailingaction/_mixins.scss index 3b0ec05be5d..dfae5518ea2 100644 --- a/packages/mdc-chips/trailingaction/_mixins.scss +++ b/packages/mdc-chips/trailingaction/_mixins.scss @@ -20,22 +20,24 @@ // THE SOFTWARE. // -@use "@material/feature-targeting" as feature; -@use "@material/ripple"; -@use "@material/theme"; -@use "@material/touch-target" as touch; +@use "@material/feature-targeting/mixins" as feature-mixins; +@use "@material/feature-targeting/functions" as feature-functions; +@use "@material/ripple/mixins" as ripple; +@use "@material/rtl/mixins" as rtl; +@use "@material/theme/mixins" as theme; +@use "@material/touch-target/mixins" as touch; @use "./variables"; $ripple-target: '.mdc-chip-trailing-action__ripple'; -@mixin core-styles($query: feature.all()) { +@mixin core-styles($query: feature-functions.all()) { @include without-ripple($query: $query); @include ripple($query: $query); } -@mixin without-ripple($query: feature.all()) { - $feat-structure: feature.create-target($query, structure); - $feat-color: feature.create-target($query, color); +@mixin without-ripple($query: feature-functions.all()) { + $feat-structure: feature-functions.create-target($query, structure); + $feat-color: feature-functions.create-target($query, color); @include touch.wrapper($query); // COPYBARA_COMMENT_THIS_LINE @include _touch-target-base($query); @@ -44,7 +46,7 @@ $ripple-target: '.mdc-chip-trailing-action__ripple'; @include size(variables.$size, $query); @include color(variables.$color, $query); - @include feature.targets($feat-structure) { + @include feature-mixins.targets($feat-structure) { border: none; display: inline-flex; position: relative; @@ -57,7 +59,7 @@ $ripple-target: '.mdc-chip-trailing-action__ripple'; -webkit-appearance: none; } - @include feature.targets($feat-color) { + @include feature-mixins.targets($feat-color) { background: none; } @@ -65,7 +67,7 @@ $ripple-target: '.mdc-chip-trailing-action__ripple'; // color is affected regardless of load order without needing // !important or HTML tag targetting. .mdc-chip-trailing-action__icon { - @include feature.targets($feat-color) { + @include feature-mixins.targets($feat-color) { fill: currentColor; color: inherit; } @@ -73,9 +75,9 @@ $ripple-target: '.mdc-chip-trailing-action__ripple'; } } -@mixin ripple($query: feature.all()) { +@mixin ripple($query: feature-functions.all()) { @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE - $feat-structure: feature.create-target($query, structure); + $feat-structure: feature-functions.create-target($query, structure); .mdc-chip-trailing-action { @include ripple.surface($query: $query, $ripple-target: $ripple-target); @@ -83,7 +85,7 @@ $ripple-target: '.mdc-chip-trailing-action__ripple'; @include ripple.states(variables.$ripple-color, $query: $query, $ripple-target: $ripple-target); #{$ripple-target} { - @include feature.targets($feat-structure) { + @include feature-mixins.targets($feat-structure) { position: absolute; // Ripple needs content-box as the box sizing and box-sizing: border-box // is often set as a default, so we override that here. @@ -98,21 +100,21 @@ $ripple-target: '.mdc-chip-trailing-action__ripple'; /// Set the color of the trailing action /// @param {Color} $color The trailing action color -@mixin color($color, $query: feature.all()) { - $feat-color: feature.create-target($query, color); +@mixin color($color, $query: feature-functions.all()) { + $feat-color: feature-functions.create-target($query, color); - @include feature.targets($feat-color) { + @include feature-mixins.targets($feat-color) { @include theme.prop(color, $color); } } /// Set the size of the trailing action /// @param {Number} $number The size of the trailing action -@mixin size($size, $query: feature.all()) { - $feat-structure: feature.create-target($query, structure); +@mixin size($size, $query: feature-functions.all()) { + $feat-structure: feature-functions.create-target($query, structure); .mdc-chip-trailing-action__icon { - @include feature.targets($feat-structure) { + @include feature-mixins.targets($feat-structure) { height: $size; width: $size; font-size: $size; @@ -123,22 +125,21 @@ $ripple-target: '.mdc-chip-trailing-action__ripple'; /// Set the horizontal spacing of the trailing action /// @param {Number} $left The left spacing /// @param {Number} $right The right spacing -@mixin horizontal-spacing($left, $right, $query: feature.all()) { - $feat-structure: feature.create-target($query, structure); +@mixin horizontal-spacing($left, $right, $query: feature-functions.all()) { + $feat-structure: feature-functions.create-target($query, structure); - @include feature.targets($feat-structure) { - margin-left: $left; - margin-right: $right; + @include feature-mixins.targets($feat-structure) { + @include rtl.reflexive-property(margin, $left, $right); } } /// Set the width of the touch target /// @param {Number} $width The width of the touch target -@mixin touch-target-width($width, $query: feature.all()) { - $feat-structure: feature.create-target($query, structure); +@mixin touch-target-width($width, $query: feature-functions.all()) { + $feat-structure: feature-functions.create-target($query, structure); .mdc-chip-trailing-action__touch { - @include feature.targets($feat-structure) { + @include feature-mixins.targets($feat-structure) { width: $width; } } @@ -146,7 +147,7 @@ $ripple-target: '.mdc-chip-trailing-action__ripple'; /// Private mixins -@mixin _touch-target-base($query: feature.all()) { +@mixin _touch-target-base($query: feature-functions.all()) { @include touch-target-width(variables.$touch-target-width, $query); .mdc-chip-trailing-action__touch { diff --git a/packages/mdc-chips/trailingaction/_variables.scss b/packages/mdc-chips/trailingaction/_variables.scss index 402518e5b07..2db24b68aa6 100644 --- a/packages/mdc-chips/trailingaction/_variables.scss +++ b/packages/mdc-chips/trailingaction/_variables.scss @@ -20,8 +20,6 @@ // THE SOFTWARE. // -@use "@material/theme"; - $size: 18px !default; $margin-right: -4px !default; $margin-left: 4px !default; diff --git a/packages/mdc-chips/trailingaction/test/feature-targeting-any.test.scss b/packages/mdc-chips/trailingaction/test/feature-targeting-any.test.scss new file mode 100644 index 00000000000..592b0e9be02 --- /dev/null +++ b/packages/mdc-chips/trailingaction/test/feature-targeting-any.test.scss @@ -0,0 +1,17 @@ +@use "../mixins" as trailingaction; +@use "@material/feature-targeting/functions" as feature-functions; + +@mixin test($query) { + .test { + @include trailingaction.core-styles($query: $query); + @include trailingaction.color(red, $query: $query); + @include trailingaction.size(0, $query: $query); + @include trailingaction.horizontal-spacing(10px, 10px, $query: $query); + @include trailingaction.touch-target-width(10px, $query: $query); + @include trailingaction.ripple($query: $query); + @include trailingaction.without-ripple($query: $query); + } +} + +// This shouldn't output any CSS. +@include test(feature-functions.any()); diff --git a/packages/mdc-chips/trailingaction/test/mdc-chip-trailing-action.scss.test.ts b/packages/mdc-chips/trailingaction/test/mdc-chip-trailing-action.scss.test.ts new file mode 100644 index 00000000000..aa7151827c4 --- /dev/null +++ b/packages/mdc-chips/trailingaction/test/mdc-chip-trailing-action.scss.test.ts @@ -0,0 +1,32 @@ +/** + * @license + * Copyright 2020 Google Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +import 'jasmine'; + +import * as path from 'path'; +import {expectStylesWithNoFeaturesToBeEmpty} from '../../../../testing/featuretargeting'; + +describe('mdc-chip-trailing-action.scss', () => { + expectStylesWithNoFeaturesToBeEmpty( + path.join(__dirname, 'feature-targeting-any.test.css')); +});