chore(floating-label): separate label module from text-field (#2237)

BREAKING CHANGE: must use `.mdc-floating-label` selector instead of `.mdc-text-field__label`
material-components · Feb 28, 2018 · 4b24b51 · 4b24b51
1 parent fd8d8d9
commit 4b24b51
Show file tree

Hide file tree

Showing 47 changed files with 869 additions and 613 deletions.
diff --git a/demos/snackbar.html b/demos/snackbar.html
@@ -124,14 +124,14 @@ <h2 class="mdc-typography--title">Basic Example</h2>
 
         <div class="mdc-text-field">
           <input type="text" id="message" class="mdc-text-field__input" value="Message deleted">
-          <label class="mdc-text-field__label" for="message">Message Text</label>
+          <label class="mdc-floating-label" for="message">Message Text</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <br/>
 
         <div class="mdc-text-field">
           <input type="text" id="action" class="mdc-text-field__input" value="Undo">
-          <label class="mdc-text-field__label" for="action">Action Text</label>
+          <label class="mdc-floating-label" for="action">Action Text</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <br/>

diff --git a/demos/text-field.html b/demos/text-field.html
@@ -64,7 +64,7 @@
       <section class="hero">
         <div class="mdc-text-field">
           <input type="text" class="mdc-text-field__input" id="my-text-field" aria-controls="my-text-field-helper-text">
-          <label for="my-text-field" class="mdc-text-field__label">Text Field</label>
+          <label for="my-text-field" class="mdc-floating-label">Text Field</label>
           <div class="mdc-line-ripple"></div>
         </div>
       </section>
@@ -74,7 +74,7 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
         <section id="demo-text-field-wrapper">
           <div class="mdc-text-field">
             <input type="text" class="mdc-text-field__input" id="full-func-text-field" aria-controls="my-text-field-helper-text">
-            <label for="full-func-text-field" class="mdc-text-field__label">Email Address</label>
+            <label for="full-func-text-field" class="mdc-floating-label">Email Address</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p id="my-text-field-helper-text" class="mdc-text-field-helper-text"
@@ -124,7 +124,7 @@ <h2>Password field with validation</h2>
           <input required pattern=".{8,}" type="password" class="mdc-text-field__input" id="pw"
                  aria-controls="pw-validation-msg"
                  autocomplete="current-password">
-          <label for="pw" class="mdc-text-field__label">Choose password</label>
+          <label for="pw" class="mdc-floating-label">Choose password</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
@@ -139,7 +139,7 @@ <h2>Outlined Text Field</h2>
           <div id="tf-outlined-example" class="mdc-text-field mdc-text-field--outlined" data-demo-no-auto-js>
             <input required pattern=".{8,}" type="text" id="tf-outlined-input" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
-            <label for="tf-outlined-input" class="mdc-text-field__label">Your Name</label>
+            <label for="tf-outlined-input" class="mdc-floating-label">Your Name</label>
             <div class="mdc-text-field__outline">
               <svg>
                 <path class="mdc-text-field__outline-path"/>
@@ -175,7 +175,7 @@ <h2>Text Field box</h2>
           <div id="tf-box-example" class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
             <input type="text" id="tf-box" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
-            <label for="tf-box" class="mdc-text-field__label">Your Name</label>
+            <label for="tf-box" class="mdc-floating-label">Your Name</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
@@ -220,15 +220,15 @@ <h2>Text Field - Leading/Trailing icons</h2>
             class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon" data-demo-no-auto-js>
             <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
             <input type="text" id="tf-box-leading" class="mdc-text-field__input">
-            <label for="tf-box-leading" class="mdc-text-field__label">Your name</label>
+            <label for="tf-box-leading" class="mdc-floating-label">Your name</label>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
         <div id="demo-tf-box-trailing-wrapper">
           <div id="tf-box-trailing-example"
             class="mdc-text-field mdc-text-field--box mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
             <input type="text" id="tf-box-trailing" class="mdc-text-field__input">
-            <label for="tf-box-trailing" class="mdc-text-field__label">Your other name</label>
+            <label for="tf-box-trailing" class="mdc-floating-label">Your other name</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -238,7 +238,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon" data-demo-no-auto-js>
             <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
             <input type="text" id="tf-outlined-leading" class="mdc-text-field__input">
-            <label for="tf-outlined-leading" class="mdc-text-field__label">Your other name</label>
+            <label for="tf-outlined-leading" class="mdc-floating-label">Your other name</label>
             <div class="mdc-text-field__outline">
               <svg>
                 <path class="mdc-text-field__outline-path"/>
@@ -251,7 +251,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
           <div id="tf-outlined-trailing-example"
             class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
             <input type="text" id="tf-outlined-trailing" class="mdc-text-field__input">
-            <label for="tf-outlined-trailing" class="mdc-text-field__label">Your other name</label>
+            <label for="tf-outlined-trailing" class="mdc-floating-label">Your other name</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
             <div class="mdc-text-field__outline">
               <svg>
@@ -291,7 +291,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
         <h2>Preventing FOUC</h2>
         <div class="mdc-text-field mdc-text-field--upgraded">
           <input id="fouc" type="text" class="mdc-text-field__input" value="Pre-filled value">
-          <label for="fouc" class="mdc-text-field__label mdc-text-field__label--float-above">
+          <label for="fouc" class="mdc-floating-label mdc-floating-label--float-above">
             Label floating above
           </label>
           <div class="mdc-line-ripple"></div>
@@ -303,7 +303,7 @@ <h2>Textarea</h2>
         <section id="demo-text-field-textarea-wrapper">
           <div class="mdc-text-field mdc-text-field--textarea">
             <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
-            <label for="textarea" class="mdc-text-field__label">Textarea Label</label>
+            <label for="textarea" class="mdc-floating-label">Textarea Label</label>
           </div>
         </section>
         <div>
@@ -333,7 +333,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           </div>
           <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth full-width-textarea-example">
             <textarea id="full-width-textarea" class="mdc-text-field__input" rows="8"></textarea>
-            <label for="full-width-textarea" class="mdc-text-field__label">Textarea Label</label>
+            <label for="full-width-textarea" class="mdc-floating-label">Textarea Label</label>
           </div>
         </div>
         <div>

diff --git a/demos/theme/index.html b/demos/theme/index.html
@@ -836,7 +836,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
                    id="demo-text-field-default"
                    aria-controls="demo-text-field-default-helper-text"
                    autocomplete="email">
-            <label for="demo-text-field-default" class="mdc-text-field__label">Name (optional)</label>
+            <label for="demo-text-field-default" class="mdc-floating-label">Name (optional)</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text" id="demo-text-field-default-helper-text"
@@ -851,7 +851,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
                    aria-controls="demo-text-field-required-helper-text"
                    autocomplete="email"
                    required>
-            <label for="demo-text-field-required" class="mdc-text-field__label">Email (required)</label>
+            <label for="demo-text-field-required" class="mdc-floating-label">Email (required)</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="demo-text-field-required-helper-text">
@@ -863,7 +863,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
             <input type="text" class="mdc-text-field__input"
                    id="demo-text-field-box"
                    aria-controls="name-validation-message">
-            <label for="demo-text-field-box" class="mdc-text-field__label">With <code>--box</code> modifier</label>
+            <label for="demo-text-field-box" class="mdc-floating-label">With <code>--box</code> modifier</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text" id="demo-text-field-box-helper-text"

diff --git a/docs/docsite-index.md b/docs/docsite-index.md
@@ -35,9 +35,9 @@ Get up and running with Material Components for web
     ```
 
 2.  {: .step-list-item } ### Include the stylesheet
-    
+
     Include the MDC Web stylesheet in the head of your file
-    
+
     ```html
     <html>
       <head>
@@ -56,22 +56,22 @@ Get up and running with Material Components for web
         <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
         <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
           <input type="text" class="mdc-text-field__input" id="demo-input">
-          <label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
+          <label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
         </div>
       </body>
     ```
 
 4.  {: .step-list-item } ### Add scripts and instantiate
 
-    Add the MDC Web scripts and call MDC Auto Init. 
+    Add the MDC Web scripts and call MDC Auto Init.
 
     ```html
     <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
     <script>mdc.autoInit()</script>
     ```
 
     A full example of the HTML could look like this:
-    
+
     ```html
     <!DOCTYPE html>
     <html>
@@ -84,7 +84,7 @@ Get up and running with Material Components for web
         <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
         <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
           <input type="text" class="mdc-text-field__input" id="demo-input">
-          <label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
+          <label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
         </div>
         <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
         <script>mdc.autoInit()</script>

diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -67,7 +67,7 @@ module.exports = [{
   output: {
     // This is necessary for webpack to compile
     // But we never use style-bundle.js
-    filename: 'style-bundle.js', 
+    filename: 'style-bundle.js',
   },
   module: {
     rules: [{

diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md
@@ -92,7 +92,7 @@ MDC Web:
 ```html
 <div class="mdc-text-field">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -118,7 +118,7 @@ element, with the component’s class name as the value. For example:
 ```html
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -199,7 +199,7 @@ Like in MDL, styling components with CSS classes is simply a matter of applied t
 ```html
 <div class="mdc-text-field">
   <input type="text" id="my-text-field" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field">Hint text</label>
+  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```

diff --git a/package.json b/package.json
@@ -130,6 +130,7 @@
           "drawer",
           "elevation",
           "fab",
+          "floating-label",
           "form-field",
           "grid-list",
           "icon-toggle",
@@ -168,6 +169,7 @@
     "mdc-base",
     "mdc-checkbox",
     "mdc-chips",
+    "mdc-floating-label",
     "mdc-form-field",
     "mdc-icon-toggle",
     "mdc-line-ripple",

diff --git a/packages/material-components-web/index.js b/packages/material-components-web/index.js
@@ -20,6 +20,7 @@ import * as checkbox from '@material/checkbox/index';
 import * as chips from '@material/chips/index';
 import * as dialog from '@material/dialog/index';
 import * as drawer from '@material/drawer/index';
+import * as floatingLabel from '@material/floating-label/index';
 import * as formField from '@material/form-field/index';
 import * as gridList from '@material/grid-list/index';
 import * as iconToggle from '@material/icon-toggle/index';
@@ -44,6 +45,7 @@ autoInit.register('MDCChipSet', chips.MDCChipSet);
 autoInit.register('MDCDialog', dialog.MDCDialog);
 autoInit.register('MDCPersistentDrawer', drawer.MDCPersistentDrawer);
 autoInit.register('MDCTemporaryDrawer', drawer.MDCTemporaryDrawer);
+autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
 autoInit.register('MDCFormField', formField.MDCFormField);
 autoInit.register('MDCRipple', ripple.MDCRipple);
 autoInit.register('MDCGridList', gridList.MDCGridList);
@@ -69,6 +71,7 @@ export {
   chips,
   dialog,
   drawer,
+  floatingLabel,
   formField,
   gridList,
   iconToggle,

diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss
@@ -22,6 +22,7 @@
 @import "@material/drawer/mdc-drawer";
 @import "@material/elevation/mdc-elevation";
 @import "@material/fab/mdc-fab";
+@import "@material/floating-label/mdc-floating-label";
 @import "@material/form-field/mdc-form-field";
 @import "@material/grid-list/mdc-grid-list";
 @import "@material/icon-toggle/mdc-icon-toggle";

diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
@@ -24,6 +24,7 @@
     "@material/drawer": "^0.30.0",
     "@material/elevation": "^0.28.0",
     "@material/fab": "^0.31.0",
+    "@material/floating-label": "0.0.0",
     "@material/form-field": "^0.31.0",
     "@material/grid-list": "^0.30.0",
     "@material/icon-toggle": "^0.31.0",

diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md
@@ -32,7 +32,7 @@ writing the markup, simply insert a script tag that calls `mdc.autoInit()`. Make
 ```html
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 
@@ -52,7 +52,7 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
 ```html
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```