feat(formfield): add nowrap class/prop to MDC/MWC

PiperOrigin-RevId: 307142349
material-components · Apr 18, 2020 · c4b4bba · c4b4bba
1 parent b70bc60
commit c4b4bba
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/packages/mdc-form-field/README.md b/packages/mdc-form-field/README.md
@@ -76,6 +76,22 @@ By default, the input will be positioned before the label. You can position the
 </div>
 ```
 
+### Nowrap
+
+If the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:
+
+```html
+<div class="mdc-form-field mdc-form-field--nowrap">
+  <div class="mdc-checkbox">
+    <input type="checkbox" id="my-checkbox" class="mdc-checkbox__native-control"/>
+    <div class="mdc-checkbox__background">
+      ...
+    </div>
+  </div>
+  <label for="my-checkbox">This some really really really long text</label>
+</div>
+```
+
 ## `MDCFormField` Properties and Methods
 
 Property | Value Type | Description

diff --git a/packages/mdc-form-field/_mixins.scss b/packages/mdc-form-field/_mixins.scss
@@ -55,6 +55,16 @@
     }
   }
 
+  .mdc-form-field--nowrap {
+    > label {
+      @include feature-targeting-mixins.targets($feat-structure) {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+  }
+
   .mdc-form-field--align-end {
     // stylelint-disable-next-line selector-max-type
     > label {