feat(floating-label): add feature targeting for styles (#5287)

material-components · Dec 18, 2019 · b240bcc · b240bcc
1 parent 391674a
commit b240bcc
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 82 deletions.
diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
@@ -21,60 +21,149 @@
 //
 
 @import "@material/rtl/mixins";
+@import "@material/theme/variables";
 @import "@material/theme/mixins";
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
+@import "@material/animation/variables";
+@import "@material/typography/mixins";
 @import "./variables";
 
-@mixin mdc-floating-label-ink-color($color) {
-  @include mdc-theme-prop(color, $color);
-}
+@mixin mdc-floating-label-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
 
-// Used for textarea in case of scrolling
-@mixin mdc-floating-label-fill-color($color) {
-  @include mdc-theme-prop(background-color, $color);
-}
+  // postcss-bem-linter: define floating-label
+  .mdc-floating-label {
+    @include mdc-typography(subtitle1, $query: $query, $exclude-props: (line-height));
+
+    @include mdc-feature-targets($feat-structure) {
+      position: absolute;
+      /* @noflip */
+      left: 0;
+      /* @noflip */
+      transform-origin: left top;
+      line-height: 1.15rem;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: text;
+      overflow: hidden;
+
+      /* @alternate */
+      // Force the label into its own layer to prevent visible layer promotion adjustments
+      // when the ripple is activated behind it.
+      will-change: transform;
 
-@mixin mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX: 0%, $scale: .75) {
-  @keyframes mdc-floating-label-shake-float-above-#{$modifier} {
-    0% {
-      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+      @include mdc-rtl {
+        /* @noflip */
+        right: 0;
+        /* @noflip */
+        left: auto;
+        /* @noflip */
+        transform-origin: right top;
+        /* @noflip */
+        text-align: right;
+      }
     }
 
-    33% {
-      animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
-      transform: translateX(calc(4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+    @include mdc-feature-targets($feat-animation) {
+      transition:
+        transform $mdc-floating-label-transition-duration $mdc-animation-standard-curve-timing-function,
+        color $mdc-floating-label-transition-duration $mdc-animation-standard-curve-timing-function;
     }
+  }
 
-    66% {
-      animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
-      transform: translateX(calc(-4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+  .mdc-floating-label--float-above {
+    @include mdc-feature-targets($feat-structure) {
+      cursor: auto;
     }
+  }
 
-    100% {
-      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+  @at-root {
+    @include mdc-floating-label-float-position($mdc-floating-label-position-y, $query: $query);
+    @include mdc-floating-label-shake-animation(standard, $query: $query);
+  }
+
+  @include mdc-floating-label-shake-keyframes(standard, $mdc-floating-label-position-y, $query: $query);
+}
+
+@mixin mdc-floating-label-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);
+  }
+}
+
+// Used for textarea in case of scrolling
+@mixin mdc-floating-label-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);
+  }
+}
+
+@mixin mdc-floating-label-shake-keyframes(
+  $modifier, $positionY, $positionX: 0%, $scale: .75, $query: mdc-feature-all()) {
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  @include mdc-feature-targets($feat-animation) {
+    @keyframes mdc-floating-label-shake-float-above-#{$modifier} {
+      0% {
+        transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+      }
+
+      33% {
+        animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
+        transform: translateX(calc(4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+      }
+
+      66% {
+        animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
+        transform: translateX(calc(-4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+      }
+
+      100% {
+        transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+      }
     }
   }
 }
 
-@mixin mdc-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
+@mixin mdc-floating-label-float-position($positionY, $positionX: 0%, $scale: .75, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   .mdc-floating-label--float-above {
-    @if $positionX > 0 or $positionX < 0 {
-      transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);
+    @include mdc-feature-targets($feat-structure) {
+      @if $positionX > 0 or $positionX < 0 {
+        transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);
 
-      @include mdc-rtl {
-        transform: translateY(-1 * $positionY) translateX($positionX) scale($scale);
+        @include mdc-rtl {
+          transform: translateY(-1 * $positionY) translateX($positionX) scale($scale);
+        }
+      } @else {
+        transform: translateY(-1 * $positionY) scale($scale);
       }
-    } @else {
-      transform: translateY(-1 * $positionY) scale($scale);
     }
   }
 }
 
-@mixin mdc-floating-label-shake-animation($modifier) {
+@mixin mdc-floating-label-shake-animation($modifier, $query: mdc-feature-all()) {
+  $feat-animation: mdc-feature-create-target($query, animation);
+
   .mdc-floating-label--shake {
-    animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;
+    @include mdc-feature-targets($feat-animation) {
+      animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;
+    }
   }
 }
 
-@mixin mdc-floating-label-max-width($max-width) {
-  max-width: $max-width;
+@mixin mdc-floating-label-max-width($max-width, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    max-width: $max-width;
+  }
 }
diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -20,60 +20,9 @@
 // THE SOFTWARE.
 //
 
-@import "@material/animation/variables";
 @import "@material/base/mixins";
-@import "@material/rtl/mixins";
-@import "@material/theme/variables";
-@import "@material/theme/mixins";
-@import "@material/typography/mixins";
 @import "./mixins";
-@import "./variables";
 
-// Floating Label is intended for use by multiple components, but its styles should only be emitted once when bundled
 @include mdc-base-emit-once("mdc-floating-label") {
-  // postcss-bem-linter: define floating-label
-  .mdc-floating-label {
-    @include mdc-typography(subtitle1);
-
-    position: absolute;
-    /* @noflip */
-    left: 0;
-    /* @noflip */
-    transform-origin: left top;
-    transition:
-      transform $mdc-floating-label-transition-duration $mdc-animation-standard-curve-timing-function,
-      color $mdc-floating-label-transition-duration $mdc-animation-standard-curve-timing-function;
-    /* @alternate */
-    line-height: 1.15rem;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: text;
-    overflow: hidden;
-    // Force the label into its own layer to prevent visible layer promotion adjustments
-    // when the ripple is activated behind it.
-    will-change: transform;
-
-    @include mdc-rtl {
-      /* @noflip */
-      right: 0;
-      /* @noflip */
-      left: auto;
-      /* @noflip */
-      transform-origin: right top;
-      /* @noflip */
-      text-align: right;
-    }
-  }
-
-  .mdc-floating-label--float-above {
-    cursor: auto;
-  }
-
-  @at-root {
-    @include mdc-floating-label-float-position($mdc-floating-label-position-y);
-    @include mdc-floating-label-shake-animation(standard);
-  }
-
-  @include mdc-floating-label-shake-keyframes(standard, $mdc-floating-label-position-y);
+  @include mdc-floating-label-core-styles;
 }
diff --git a/packages/mdc-floating-label/package.json b/packages/mdc-floating-label/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "@material/animation": "^4.0.0",
     "@material/base": "^4.0.0",
+    "@material/feature-targeting": "^4.0.0",
     "@material/rtl": "^4.0.0",
     "@material/theme": "^4.0.0",
     "@material/typography": "^4.0.0",

diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
@@ -6,6 +6,7 @@
 @import "@material/drawer/mixins";
 @import "@material/elevation/mixins";
 @import "@material/fab/mixins";
+@import "@material/floating-label/mixins";
 @import "@material/form-field/mixins";
 @import "@material/grid-list/mixins";
 @import "@material/icon-button/mixins";
@@ -161,6 +162,15 @@
     @include mdc-elevation-overlay-fill-color(red, $query: $query);
     @include mdc-elevation-overlay-opacity(99%, $query: $query);
 
+    // Floating label
+    @include mdc-floating-label-core-styles($query: $query);
+    @include mdc-floating-label-ink-color(red, $query: $query);
+    @include mdc-floating-label-fill-color(red, $query: $query);
+    @include mdc-floating-label-shake-keyframes(standard, 100%, $query: $query);
+    @include mdc-floating-label-float-position(100%, $query: $query);
+    @include mdc-floating-label-shake-animation(standard, $query: $query);
+    @include mdc-floating-label-max-width(100%, $query: $query);
+
     // FAB
     @include mdc-fab-core-styles($query: $query);
     @include mdc-fab-without-ripple($query: $query);