fix(textfield): add separate classes for leading/trailing icons (#5367)

* fix(textfield): add separate classes for leading/trailing icons BREAKING CHANGE: icons must use `.mdc-text-field__icon--leading` or `.mdc-text-field__icon--trailing` classes. `mdc-text-field-icon-color()` mixin has been split into `mdc-text-field-leading-icon-color()` and `mdc-text-field-trailing-icon-color()`. * chore(textfield): use --leading/trailing modifiers for icons * chore(textfield): docs typo * chore(textfield): revert hover fix * chore(textfield): fix unclosed css block * chore(textfield): separate position mixins for leading/trailing icons * chore(textfield): restore two-icons position mixin * chore(textfield): update component test with icon classes * chore(textfield): update foundation test for preventDefault error
material-components · Jan 8, 2020 · 70c708d · 70c708d
1 parent 823c050
commit 70c708d
Show file tree

Hide file tree

Showing 29 changed files with 220 additions and 243 deletions.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -382,7 +382,8 @@
   @include mdc-text-field-label-ink-color_($mdc-text-field-disabled-label-color);
   @include mdc-text-field-helper-text-color_($mdc-text-field-disabled-helper-text-color);
   @include mdc-text-field-character-counter-color_($mdc-text-field-disabled-helper-text-color);
-  @include mdc-text-field-icon-color_($mdc-text-field-disabled-icon);
+  @include mdc-text-field-leading-icon-color_($mdc-text-field-disabled-icon);
+  @include mdc-text-field-trailing-icon-color_($mdc-text-field-disabled-icon);
   @include mdc-text-field-fill-color_($mdc-text-field-disabled-background);
 
   border-bottom: none;
@@ -400,16 +401,7 @@
   @include mdc-text-field-label-color($mdc-text-field-error);
   @include mdc-text-field-helper-text-validation-color($mdc-text-field-error);
   @include mdc-text-field-caret-color($mdc-text-field-error);
-
-  &.mdc-text-field--with-trailing-icon {
-    &:not(.mdc-text-field--with-leading-icon) {
-      @include mdc-text-field-icon-color($mdc-text-field-error);
-    }
-
-    &.mdc-text-field--with-leading-icon {
-      @include mdc-text-field-icon-color($mdc-text-field-error, /* styleSecondIcon */ true);
-    }
-  }
+  @include mdc-text-field-trailing-icon-color($mdc-text-field-error);
 
   + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
     opacity: 1;
@@ -630,38 +622,31 @@
 // Icons
 
 @mixin mdc-text-field-with-leading-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(
-    left,
-    $mdc-text-field-icon-position,
-    $mdc-text-field-icon-padding,
-    $mdc-text-field-input-padding
-  );
+  @include mdc-text-field-leading-icon-horizontal-position_($mdc-text-field-icon-position);
+
+  .mdc-text-field__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
+  }
 
   .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding);
   }
 }
 
 @mixin mdc-text-field-dense-with-leading-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(
-    left,
-    $mdc-text-field-dense-icon-position,
-    $mdc-text-field-dense-icon-padding,
-    $mdc-text-field-input-padding
-  );
+  @include mdc-text-field-leading-icon-horizontal-position_($mdc-text-field-dense-icon-position);
+
+  .mdc-text-field__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-dense-icon-padding, $mdc-text-field-input-padding);
+  }
 
   .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-padding);
   }
 }
 
 @mixin mdc-text-field-outlined-with-leading-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(
-    left,
-    $mdc-text-field-icon-position,
-    $mdc-text-field-icon-padding,
-    $mdc-text-field-input-padding
-  );
+  @include mdc-text-field-leading-icon-horizontal-position_($mdc-text-field-icon-position);
   @include mdc-notched-outline-floating-label-float-position-absolute($mdc-text-field-outlined-label-position-y, 32px);
   @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
 
@@ -692,49 +677,48 @@
 }
 
 @mixin mdc-text-field-with-trailing-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(
-    right,
-    $mdc-text-field-trailing-icon-position,
-    $mdc-text-field-icon-padding,
-    $mdc-text-field-input-padding
-  );
+  @include mdc-text-field-trailing-icon-horizontal-position_($mdc-text-field-trailing-icon-position);
+
+  .mdc-text-field__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-input-padding, $mdc-text-field-icon-padding);
+  }
 
   // Outlined uses 16px for text alignment when using a trailing icon.
   &.mdc-text-field--outlined {
-    @include mdc-text-field-icon-horizontal-position_(
-      right,
-      $mdc-text-field-icon-position,
-      $mdc-text-field-icon-padding,
-      $mdc-text-field-input-padding
-    );
+    @include mdc-text-field-trailing-icon-horizontal-position_($mdc-text-field-icon-position);
   }
 }
 
 @mixin mdc-text-field-dense-with-trailing-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(
-    right,
-    $mdc-text-field-dense-icon-position,
-    $mdc-text-field-dense-icon-padding,
-    $mdc-text-field-input-padding
-  );
+  @include mdc-text-field-trailing-icon-horizontal-position_($mdc-text-field-dense-icon-position);
+
+  .mdc-text-field__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-input-padding, $mdc-text-field-dense-icon-padding);
+  }
 }
 
 @mixin mdc-text-field-with-both-icons_ {
   @include mdc-text-field-icon-horizontal-position-two-icons_(
     $mdc-text-field-icon-position,
-    $mdc-text-field-icon-padding,
-    $mdc-text-field-trailing-icon-position,
-    $mdc-text-field-icon-padding
+    $mdc-text-field-trailing-icon-position
   );
+
+  .mdc-text-field__input {
+    padding-right: $mdc-text-field-icon-padding;
+    padding-left: $mdc-text-field-icon-padding;
+  }
 }
 
 @mixin mdc-text-field-dense-with-both-icons_ {
   @include mdc-text-field-icon-horizontal-position-two-icons_(
     $mdc-text-field-dense-icon-position,
-    $mdc-text-field-dense-icon-padding,
-    $mdc-text-field-dense-icon-position,
-    $mdc-text-field-dense-icon-padding
+    $mdc-text-field-dense-icon-position
   );
+
+  .mdc-text-field__input {
+    padding-right: $mdc-text-field-dense-icon-padding;
+    padding-left: $mdc-text-field-dense-icon-padding;
+  }
 }
 
 // Full Width

diff --git a/packages/mdc-textfield/component.ts b/packages/mdc-textfield/component.ts
@@ -113,21 +113,13 @@ export class MDCTextField extends MDCComponent<MDCTextFieldFoundation> implement
     }
     this.characterCounter_ = characterCounterEl ? characterCounterFactory(characterCounterEl) : null;
 
-    this.leadingIcon_ = null;
-    this.trailingIcon_ = null;
-    const iconElements = this.root_.querySelectorAll(strings.ICON_SELECTOR);
-    if (iconElements.length > 0) {
-      if (iconElements.length > 1) { // Has both icons.
-        this.leadingIcon_ = iconFactory(iconElements[0]);
-        this.trailingIcon_ = iconFactory(iconElements[1]);
-      } else {
-        if (this.root_.classList.contains(cssClasses.WITH_LEADING_ICON)) {
-          this.leadingIcon_ = iconFactory(iconElements[0]);
-        } else {
-          this.trailingIcon_ = iconFactory(iconElements[0]);
-        }
-      }
-    }
+    // Leading icon
+    const leadingIconEl = this.root_.querySelector(strings.LEADING_ICON_SELECTOR);
+    this.leadingIcon_ = leadingIconEl ? iconFactory(leadingIconEl) : null;
+
+    // Trailing icon
+    const trailingIconEl = this.root_.querySelector(strings.TRAILING_ICON_SELECTOR);
+    this.trailingIcon_ = trailingIconEl ? iconFactory(trailingIconEl) : null;
 
     this.ripple = this.createRipple_(rippleFactory);
   }

diff --git a/packages/mdc-textfield/constants.ts b/packages/mdc-textfield/constants.ts
@@ -23,11 +23,12 @@
 
 const strings = {
   ARIA_CONTROLS: 'aria-controls',
-  ICON_SELECTOR: '.mdc-text-field__icon',
   INPUT_SELECTOR: '.mdc-text-field__input',
   LABEL_SELECTOR: '.mdc-floating-label',
+  LEADING_ICON_SELECTOR: '.mdc-text-field__icon--leading',
   LINE_RIPPLE_SELECTOR: '.mdc-line-ripple',
   OUTLINE_SELECTOR: '.mdc-notched-outline',
+  TRAILING_ICON_SELECTOR: '.mdc-text-field__icon--trailing'
 };
 
 const cssClasses = {

diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md
@@ -24,7 +24,7 @@ Icons describe the type of input a text field requires. They can also be interac
 ### HTML Structure
 
 ```html
-<i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
 ```
 
 #### Icon Set
@@ -55,7 +55,7 @@ const icon = new MDCTextFieldIcon(document.querySelector('.mdc-text-field-icon')
 
 ## Variants
 
-Leading and trailing icons can be applied to default or `mdc-text-field--outlined` Text Fields. To add an icon, add the relevant class (`mdc-text-field--with-leading-icon` and/or `mdc-text-field--with-trailing-icon`) to the root element, add an `i` element with your preferred icon, and give it a class of `mdc-text-field__icon`. If using 2 icons at the same time, the first icon inside the `mdc-text-field` element will be interpreted as the leading icon and the second icon will be interpreted as the trailing icon.
+Leading and trailing icons can be applied to default or `mdc-text-field--outlined` Text Fields. To add an icon, add the relevant class (`mdc-text-field--with-leading-icon` and/or `mdc-text-field--with-trailing-icon`) to the root element, add an `i` element with your preferred icon, and give it a class of `mdc-text-field__icon` with the modifier `mdc-text-field__icon--leading` or `mdc-text-field__icon--trailing`.
 
 > **NOTE:** if you would like to display un-clickable icons, simply omit `tabindex="0"` and `role="button"`, and the CSS will ensure the cursor is set to default, and that interacting with an icon doesn't do anything unexpected.
 
@@ -65,7 +65,7 @@ In text field:
 
 ```html
 <div class="mdc-text-field mdc-text-field--with-leading-icon">
-  <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
   <label for="my-input" class="mdc-floating-label">Your Name</label>
   <div class="mdc-line-ripple"></div>
@@ -76,7 +76,7 @@ In outlined text field:
 
 ```html
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
-  <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
@@ -95,8 +95,8 @@ In text field:
 ```html
 <div class="mdc-text-field mdc-text-field--with-trailing-icon">
   <input type="text" id="my-input" class="mdc-text-field__input">
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
   <label for="my-input" class="mdc-floating-label">Your Name</label>
-  <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -106,7 +106,7 @@ In outlined text field:
 ```html
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
   <div class="mdc-notched-outline">
     <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__notch">
@@ -123,10 +123,10 @@ In text field:
 
 ```html
 <div class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-  <i class="material-icons mdc-text-field__icon">phone</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">phone</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
   <label for="my-input" class="mdc-floating-label">Phone Number</label>
-  <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -135,9 +135,9 @@ In outlined text field:
 
 ```html
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
-  <i class="material-icons mdc-text-field__icon">phone</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">phone</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">clear</i>
+  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">clear</i>
   <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
     <div class="mdc-notched-outline__notch">
@@ -154,13 +154,16 @@ In outlined text field:
 
 CSS Class | Description
 --- | ---
-`mdc-text-field-icon` | Mandatory.
+`mdc-text-field__icon` | Mandatory.
+`mdc-text-field__icon--leading` | Mandatory for leading icons.
+`mdc-text-field__icon--trailing` | Mandatory for trailing icons.
 
 ### Sass Mixins
 
 Mixin | Description
 --- | ---
-`mdc-text-field-icon-color($color, $styleSecondIcon: false)` | Customizes the color for the leading/trailing icons in an enabled text-field. If the `$styleSecondIcon` is `true` it will apply the color to only the trailing icon when used with a leading icon.
+`mdc-text-field-leading-icon-color($color)` | Customizes the color for the leading icon in an enabled text-field.
+`mdc-text-field-trailing-icon-color($color)` | Customizes the color for the trailing icon in an enabled text-field.
 `mdc-text-field-disabled-icon-color($color)` | Customizes the color for the leading/trailing icons in a disabled text-field.
 
 ## `MDCTextFieldIcon` Properties and Methods