feat(floating-label): Add max-width mixin (#2956)

material-components · Jul 18, 2018 · 66f8bf7 · 66f8bf7
1 parent a5bea1b
commit 66f8bf7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
@@ -79,6 +79,7 @@ Mixin | Description
 `mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.
 `mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.
 `mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.
+`mdc-floating-label-max-width($max-width)` | Sets the max width of the label.
 
 ## `MDCFloatingLabel` Properties and Methods
 

diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
@@ -67,3 +67,7 @@
     animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;
   }
 }
+
+@mixin mdc-floating-label-max-width($max-width) {
+  max-width: $max-width;
+}
diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -37,7 +37,13 @@
       transform $mdc-floating-label-transition-duration $mdc-animation-standard-curve-timing-function,
       color $mdc-floating-label-transition-duration $mdc-animation-standard-curve-timing-function;
     line-height: 1.15rem;
+    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 */