fix(textfield): move ripple to separate element

BREAKING CHANGE: filled text fields must include a `<div class="mdc-text-field__ripple"></div>` PiperOrigin-RevId: 292641405 Co-authored-by: Material Web Copybara Robot <59487319+material-web-copybara@users.noreply.github.com>
material-components · Feb 6, 2020 · c541ebe · c541ebe
1 parent ab5f49a
commit c541ebe
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 8 deletions.
diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md
@@ -99,6 +99,7 @@ MDC Web:
 
 ```html
 <label class="mdc-text-field">
+  <div class="mdc-text-field__ripple"></div>
   <input class="mdc-text-field__input" type="text" aria-labelledby="label">
   <span id="label" class="mdc-floating-label">Input Label</span>
   <div class="mdc-line-ripple"></div>
@@ -125,6 +126,7 @@ element, with the component’s class name as the value. For example:
 
 ```html
 <label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
+  <div class="mdc-text-field__ripple"></div>
   <input class="mdc-text-field__input" type="text" aria-labelledby="label">
   <span id="label" class="mdc-floating-label">Input Label</span>
   <div class="mdc-line-ripple"></div>

diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md
@@ -33,6 +33,7 @@ properly.
 
 ```html
 <label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
+  <div class="mdc-text-field__ripple"></div>
   <input class="mdc-text-field__input" type="text" aria-labelledby="label">
   <span id="label" class="mdc-floating-label">Input Label</span>
   <div class="mdc-line-ripple"></div>
@@ -53,6 +54,7 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
 
 ```html
 <label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
+  <div class="mdc-text-field__ripple"></div>
   <input class="mdc-text-field__input" type="text" aria-labelledby="label">
   <span id="label" class="mdc-floating-label">Input Label</span>
   <div class="mdc-line-ripple"></div>

diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
@@ -33,6 +33,7 @@ npm install @material/textfield
 
 ```html
 <label class="mdc-text-field">
+  <div class="mdc-text-field__ripple"></div>
   <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
   <span class="mdc-floating-label" id="my-label-id">Hint text</span>
   <div class="mdc-line-ripple"></div>
@@ -66,10 +67,12 @@ Full width text fields are useful for in-depth tasks or entering complex informa
 
 ```html
 <label class="mdc-text-field mdc-text-field--fullwidth">
+  <div class="mdc-text-field__ripple"></div>
   <input class="mdc-text-field__input"
          type="text"
          placeholder="Full-Width Text Field"
          aria-label="Full-Width Text Field">
+  <div class="mdc-line-ripple"></div>
 </label>
 ```
 
@@ -118,6 +121,7 @@ To disable the text field, add the `disabled` attribute to the `<input>` element
 
 ```html
 <label class="mdc-text-field mdc-text-field--disabled">
+  <div class="mdc-text-field__ripple"></div>
   <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" disabled>
   <span class="mdc-floating-label" id="my-label-id">Disabled text field</span>
   <div class="mdc-line-ripple"></div>
@@ -133,6 +137,7 @@ Add class name `mdc-text-field--no-label` and remove the label element from the
 
 ```html
 <label class="mdc-text-field mdc-text-field--no-label">
+  <div class="mdc-text-field__ripple"></div>
   <input class="mdc-text-field__input" type="text" placeholder="Placeholder text" aria-label="Label">
   <div class="mdc-line-ripple"></div>
 </label>
@@ -170,6 +175,7 @@ which is immediate sibling of `.mdc-text-field`. See [here](helper-text/) for mo
 
 ```html
 <label class="mdc-text-field">
+  <div class="mdc-text-field__ripple"></div>
   <input class="mdc-text-field__input" type="text"
          aria-labelledby="my-label-id"
          aria-controls="my-helper-id"
@@ -190,6 +196,7 @@ See [here](character-counter/) for more information on using character counter.
 
 ```html
 <label class="mdc-text-field">
+  <div class="mdc-text-field__ripple"></div>
   <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" maxlength="10">
   <span class="mdc-floating-label" id="my-label-id">My Label</span>
   <div class="mdc-line-ripple"></div>
@@ -233,6 +240,7 @@ by HTML5's form validation API.
 
 ```html
 <label class="mdc-text-field">
+  <div class="mdc-text-field__ripple"></div>
   <input class="mdc-text-field__input" type="password" aria-labelledby="my-label-id" required minlength="8">
   <span class="mdc-floating-label" id="my-label-id">Password</span>
   <div class="mdc-line-ripple"></div>
@@ -250,6 +258,7 @@ Un-styled Content (**FOUC**).
 
 ```html
 <label class="mdc-text-field">
+  <div class="mdc-text-field__ripple"></div>
   <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" value="Pre-filled value">
   <span class="mdc-floating-label mdc-floating-label--float-above" id="my-label-id">
     Label in correct place

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -55,9 +55,9 @@
   // postcss-bem-linter: define text-field
   .mdc-text-field {
     // Text Field intentionally omits press ripple, so each state needs to be specified individually.
-    @include ripple-mixins.states-base-color(variables.$ink-color, $query: $query);
-    @include ripple-mixins.states-hover-opacity(ripple-functions.states-opacity(variables.$ink-color, hover), $query: $query);
-    @include ripple-mixins.states-focus-opacity(ripple-functions.states-opacity(variables.$ink-color, focus), $query: $query);
+    @include ripple-mixins.states-base-color(variables.$ink-color, $query: $query, $ripple-target: variables.$ripple-target);
+    @include ripple-mixins.states-hover-opacity(ripple-functions.states-opacity(variables.$ink-color, hover), $query: $query, $ripple-target: variables.$ripple-target);
+    @include ripple-mixins.states-focus-opacity(ripple-functions.states-opacity(variables.$ink-color, focus), $query: $query, $ripple-target: variables.$ripple-target);
 
     // Height
     @include height(variables.$height, $query: $query);
@@ -373,8 +373,12 @@
   @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE
 
   .mdc-text-field {
-    @include ripple-mixins.surface($query: $query);
-    @include ripple-mixins.radius-bounded($query: $query);
+    @include ripple-mixins.surface($query: $query, $ripple-target: variables.$ripple-target);
+    @include ripple-mixins.radius-bounded($query: $query, $ripple-target: variables.$ripple-target);
+  }
+
+  #{variables.$ripple-target} {
+    @include ripple-mixins.target-common($query: $query);
   }
 }
 
@@ -1024,7 +1028,7 @@
   @include outline-shape-radius(small, $query: $query);
   @include notched-outline-mixins.floating-label-float-position-absolute(variables.$outlined-label-position-y, $query: $query);
   @include notched-outline-mixins.notch-offset(notched-outline-variables.$border-width, $query: $query);
-  @include ripple-mixins.states-base-color(transparent, $query: $query);
+  @include ripple-mixins.states-base-color(transparent, $query: $query, $ripple-target: variables.$ripple-target);
   @include fill-color(transparent, $query: $query);
 
   @include feature-targeting-mixins.targets($feat-structure) {
@@ -1227,7 +1231,7 @@
   }
 
   &:not(.mdc-text-field--textarea) {
-    @include ripple-mixins.states-base-color(transparent, $query: $query);
+    @include ripple-mixins.states-base-color(transparent, $query: $query, $ripple-target: variables.$ripple-target);
     @include fill-color(transparent, $query: $query);
 
     @include feature-targeting-mixins.targets($feat-structure) {
@@ -1272,7 +1276,7 @@
   @include focused-outline-color(primary, $query: $query);
   @include floating-label-mixins.shake-animation(textarea, $query: $query);
   @include outline-shape-radius(small, $query: $query);
-  @include ripple-mixins.states-base-color(transparent, $query: $query);
+  @include ripple-mixins.states-base-color(transparent, $query: $query, $ripple-target: variables.$ripple-target);
   @include fill-color(transparent, $query: $query);
   @include notched-outline-mixins.floating-label-float-position(variables.$textarea-label-position-y, $query: $query);
   @include character-counter-mixins.character-counter-position(16px, 13px, $query: $query);

diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
@@ -70,6 +70,7 @@ $textarea-disabled-border-color: rgba(theme-variables.prop-value(on-surface), .2
 // will make text unreadable
 $textarea-disabled-background: rgba(249, 249, 249, 1) !default;
 
+$ripple-target: '.mdc-text-field__ripple';
 $outlined-stroke-width: 2px !default;
 $height: 56px !default;
 $minimum-height: 40px !default;