From c4b4bba9659bf15207e79b1f63fcc9946404d9c7 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Fri, 17 Apr 2020 17:11:25 -0700
Subject: [PATCH] feat(formfield): add nowrap class/prop to MDC/MWC

PiperOrigin-RevId: 307142349
---
 packages/mdc-form-field/README.md    | 16 ++++++++++++++++
 packages/mdc-form-field/_mixins.scss | 10 ++++++++++
 2 files changed, 26 insertions(+)

diff --git a/packages/mdc-form-field/README.md b/packages/mdc-form-field/README.md
index fe466094ebe..9fee6020603 100644
--- 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
index d901d43a8e8..d2f286e2b75 100644
--- 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 {