fix(textfield): remove deprecated dense variant in favor of density

Fixes #4142 BREAKING CHANGE: mdc-text-field--dense and associated mixins/variables have been removed. Use the density() mixin instead. PiperOrigin-RevId: 301213937
material-components · Mar 17, 2020 · b1102f2 · b1102f2
1 parent 1a380e9
commit b1102f2
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 227 deletions.
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
@@ -306,19 +306,13 @@ CSS Class | Description
 `mdc-text-field--fullwidth` | Styles the text field as a full width text field.
 `mdc-text-field--textarea` | Indicates the text field is a `<textarea>`.
 `mdc-text-field--disabled` | Styles the text field as a disabled text field.
-`mdc-text-field--dense` | Styles the text field as a dense text field.\*
 `mdc-text-field--with-leading-icon` | Styles the text field as a text field with a leading icon.
 `mdc-text-field--with-trailing-icon` | Styles the text field as a text field with a trailing icon.
 `mdc-text-field--focused` | Styles the text field as a text field in focus.
 `mdc-text-field--no-label` | Styles the text field that has no label.
 `mdc-text-field--end-aligned` | Styles the text field with an end-aligned input.
 `mdc-text-field-helper-line` | Styles the container of helper text and character counter elements.
 
-#### Deprecation Notice
-
-\*The `--dense` variant of the text field will be removed in an upcoming release.
-See [github issue](https://github.com/material-components/material-components-web/issues/4142) for details.
-
 ### Sass Mixins
 
 To customize the colors of any part of the text-field, use the following mixins. We recommend you apply

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -180,10 +180,6 @@
     @include outlined-disabled_($query);
   }
 
-  .mdc-text-field--outlined.mdc-text-field--dense {
-    @include outlined-dense_($query);
-  }
-
   .mdc-text-field--with-leading-icon {
     @include with-leading-icon_($query);
   }
@@ -192,10 +188,6 @@
     @include outlined-with-leading-icon_($query);
   }
 
-  .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense {
-    @include outlined-dense-with-leading-icon_($query);
-  }
-
   .mdc-text-field--with-trailing-icon {
     @include with-trailing-icon_($query);
   }
@@ -204,31 +196,6 @@
     @include with-both-icons_($query);
   }
 
-  // stylelint-disable plugin/selector-bem-pattern
-  .mdc-text-field--dense .mdc-text-field__icon {
-    @include feature-targeting-mixins.targets($feat-structure) {
-      bottom: 16px;
-      transform: scale(.8);
-    }
-  }
-  // stylelint-enable plugin/selector-bem-pattern
-
-  .mdc-text-field--with-leading-icon.mdc-text-field--dense {
-    @include dense-with-leading-icon_($query);
-  }
-
-  .mdc-text-field--with-trailing-icon.mdc-text-field--dense {
-    @include dense-with-trailing-icon_($query);
-  }
-
-  .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense {
-    @include dense-with-both-icons_($query);
-  }
-
-  .mdc-text-field--dense {
-    @include dense_($query);
-  }
-
   @include required-label-asterisk_ {
     @include feature-targeting-mixins.targets($feat-structure) {
       margin-left: 1px;
@@ -257,12 +224,6 @@
       box-sizing: border-box;
     }
 
-    .mdc-text-field--dense + & {
-      @include feature-targeting-mixins.targets($feat-structure) {
-        margin-bottom: 4px;
-      }
-    }
-
     .mdc-text-field + & {
       @include feature-targeting-mixins.targets($feat-structure) {
         padding-right: variables.$helper-line-padding;
@@ -310,51 +271,23 @@
     @include end-aligned_($query);
   }
 
-  @include floating-label-mixins.shake-keyframes(
-    text-field-dense,
-    variables.$dense-label-position-y,
-    0%,
-    variables.$dense-label-scale,
-    $query: $query
-  );
   @include floating-label-mixins.shake-keyframes(
     text-field-outlined,
     variables.$outlined-label-position-y,
     $query: $query
   );
-  @include floating-label-mixins.shake-keyframes(
-    text-field-outlined-dense,
-    variables.$outlined-dense-label-position-y,
-    0%,
-    variables.$dense-label-scale,
-    $query: $query
-  );
   @include floating-label-mixins.shake-keyframes(
     text-field-outlined-leading-icon,
     variables.$outlined-label-position-y,
     variables.$outlined-with-leading-icon-label-position-x,
     $query: $query
   );
-  @include floating-label-mixins.shake-keyframes(
-    text-field-outlined-leading-icon-dense,
-    variables.$outlined-dense-label-position-y,
-    variables.$outlined-dense-with-leading-icon-label-position-x,
-    variables.$dense-label-scale,
-    $query: $query
-  );
   @include floating-label-mixins.shake-keyframes(
     text-field-outlined-leading-icon-rtl,
     variables.$outlined-label-position-y,
     -(variables.$outlined-with-leading-icon-label-position-x),
     $query: $query
   );
-  @include floating-label-mixins.shake-keyframes(
-    text-field-outlined-leading-icon-dense-rtl,
-    variables.$outlined-dense-label-position-y,
-    -(variables.$outlined-dense-with-leading-icon-label-position-x),
-    variables.$dense-label-scale,
-    $query: $query
-  );
   @include floating-label-mixins.shake-keyframes(
     textarea,
     variables.$textarea-label-position-y,
@@ -394,6 +327,10 @@
   );
 
   @include height($height, $minimum-height-for-filled-label: $minimum-height-for-filled-label, $query: $query);
+  // TODO(b/148806980): fix icon density in this bug to break screenshots once
+  // @if $density-scale < 0 {
+  //   @include icon-mixins.size(icon-variables.$dense-icon-size);
+  // }
 }
 
 ///
@@ -410,6 +347,10 @@
   );
 
   @include outlined-height($height, $query: $query);
+  // TODO(b/148806980): fix icon density in this bug to break screenshots once
+  // @if $density-scale < 0 {
+  //   @include icon-mixins.size(icon-variables.$dense-icon-size);
+  // }
 }
 
 ///
@@ -426,6 +367,10 @@
   );
 
   @include outlined-with-leading-icon-height($height, $query: $query);
+  // TODO(b/148806980): fix icon density in this bug to break screenshots once
+  // @if $density-scale < 0 {
+  //   @include icon-mixins.size(icon-variables.$dense-icon-size);
+  // }
 }
 
 ///
@@ -830,37 +775,6 @@
   }
 }
 
-@mixin dense_($query: feature-targeting-functions.all()) {
-  $feat-structure: feature-targeting-functions.create-target($query, structure);
-  $feat-typography: feature-targeting-functions.create-target($query, typography);
-
-  @include floating-label-mixins.float-position(
-    variables.$dense-label-position-y,
-    0%,
-    variables.$dense-label-scale,
-    $query: $query
-  );
-  @include floating-label-mixins.shake-animation(text-field-dense, $query: $query);
-
-  .mdc-text-field__input {
-    @include feature-targeting-mixins.targets($feat-structure) {
-      padding: 12px 12px 0;
-    }
-  }
-
-  .mdc-floating-label {
-    @include feature-targeting-mixins.targets($feat-typography) {
-      font-size: .813rem;
-    }
-
-    &--float-above {
-      @include feature-targeting-mixins.targets($feat-typography) {
-        font-size: .813rem;
-      }
-    }
-  }
-}
-
 @mixin required-label-asterisk_() {
   .mdc-text-field__input:required ~ {
     .mdc-floating-label::after,
@@ -987,40 +901,6 @@
   @include notched-outline-mixins.stroke-width(variables.$outlined-stroke-width, $query: $query);
 }
 
-@mixin outlined-dense_($query: feature-targeting-functions.all()) {
-  $feat-structure: feature-targeting-functions.create-target($query, structure);
-
-  @include notched-outline-mixins.floating-label-float-position(
-    variables.$outlined-dense-label-position-y,
-    0%,
-    variables.$dense-label-scale,
-    $query: $query
-  );
-  @include floating-label-mixins.shake-animation(text-field-outlined-dense, $query: $query);
-
-  @include feature-targeting-mixins.targets($feat-structure) {
-    height: 48px;
-  }
-
-  .mdc-text-field__input {
-    @include feature-targeting-mixins.targets($feat-structure) {
-      padding: 12px 12px 7px;
-    }
-  }
-
-  .mdc-floating-label {
-    @include feature-targeting-mixins.targets($feat-structure) {
-      top: 14px;
-    }
-  }
-
-  .mdc-text-field__icon {
-    @include feature-targeting-mixins.targets($feat-structure) {
-      top: 12px;
-    }
-  }
-}
-
 @mixin outlined_($query: feature-targeting-functions.all()) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);
 
@@ -1090,22 +970,6 @@
   }
 }
 
-@mixin dense-with-leading-icon_($query: feature-targeting-functions.all()) {
-  $feat-structure: feature-targeting-functions.create-target($query, structure);
-
-  @include icon-mixins.leading-icon-horizontal-position_(icon-variables.$dense-icon-position, $query: $query);
-
-  @include feature-targeting-mixins.targets($feat-structure) {
-    @include rtl-mixins.reflexive-property(padding, icon-variables.$dense-icon-padding, variables.$padding-horizontal);
-  }
-
-  .mdc-floating-label {
-    @include feature-targeting-mixins.targets($feat-structure) {
-      @include rtl-mixins.reflexive-position(left, icon-variables.$dense-icon-padding);
-    }
-  }
-}
-
 @mixin outlined-with-leading-icon_($query: feature-targeting-functions.all()) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);
 
@@ -1128,28 +992,6 @@
   }
 }
 
-@mixin outlined-dense-with-leading-icon_($query: feature-targeting-functions.all()) {
-  $feat-structure: feature-targeting-functions.create-target($query, structure);
-
-  @include notched-outline-mixins.floating-label-float-position(
-    variables.$outlined-dense-label-position-y,
-    variables.$outlined-dense-with-leading-icon-label-position-x,
-    variables.$dense-label-scale,
-    $query: $query
-  );
-  @include floating-label-mixins.shake-animation(text-field-outlined-leading-icon-dense, $query: $query);
-
-  @include rtl-mixins.rtl {
-    @include floating-label-mixins.shake-animation(text-field-outlined-leading-icon-dense-rtl, $query: $query);
-  }
-
-  .mdc-floating-label {
-    @include feature-targeting-mixins.targets($feat-structure) {
-      @include rtl-mixins.reflexive-position(left, icon-variables.$dense-icon-padding - notched-outline-variables.$leading-width);
-    }
-  }
-}
-
 @mixin with-trailing-icon_($query: feature-targeting-functions.all()) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);
 
@@ -1160,16 +1002,6 @@
   }
 }
 
-@mixin dense-with-trailing-icon_($query: feature-targeting-functions.all()) {
-  $feat-structure: feature-targeting-functions.create-target($query, structure);
-
-  @include icon-mixins.trailing-icon-horizontal-position_(icon-variables.$dense-icon-position, $query: $query);
-
-  @include feature-targeting-mixins.targets($feat-structure) {
-    @include rtl-mixins.reflexive-property(padding, variables.$padding-horizontal, icon-variables.$dense-icon-padding);
-  }
-}
-
 @mixin with-both-icons_($query: feature-targeting-functions.all()) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);
 
@@ -1185,21 +1017,6 @@
   }
 }
 
-@mixin dense-with-both-icons_($query: feature-targeting-functions.all()) {
-  $feat-structure: feature-targeting-functions.create-target($query, structure);
-
-  @include icon-mixins.icon-horizontal-position-two-icons_(
-    icon-variables.$dense-icon-position,
-    icon-variables.$dense-icon-position,
-    $query: $query
-  );
-
-  @include feature-targeting-mixins.targets($feat-structure) {
-    padding-right: icon-variables.$dense-icon-padding;
-    padding-left: icon-variables.$dense-icon-padding;
-  }
-}
-
 // Full Width
 @mixin fullwidth_($query: feature-targeting-functions.all()) {
   $feat-structure: feature-targeting-functions.create-target($query, structure);

diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
@@ -87,13 +87,9 @@ $density-config: (
 ) !default;
 $label-position-y: floating-label-variables.$position-y !default;
 $label-offset: 16px !default;
-$dense-label-position-y: 70% !default;
-$dense-label-scale: .8 !default;
 $outlined-label-position-y:
     get-outlined-label-position-y($height) !default;
-$outlined-dense-label-position-y: 120% !default;
 $outlined-with-leading-icon-label-position-x: 0 !default;
-$outlined-dense-with-leading-icon-label-position-x: 21px !default;
 $textarea-label-position-y: 130% !default;
 $helper-line-padding: 16px !default;
 $filled-baseline-top: 40px !default;

diff --git a/packages/mdc-textfield/constants.ts b/packages/mdc-textfield/constants.ts
@@ -32,7 +32,6 @@ const strings = {
 };
 
 const cssClasses = {
-  DENSE: 'mdc-text-field--dense',
   DISABLED: 'mdc-text-field--disabled',
   FOCUSED: 'mdc-text-field--focused',
   FULLWIDTH: 'mdc-text-field--fullwidth',
@@ -47,7 +46,6 @@ const cssClasses = {
 };
 
 const numbers = {
-  DENSE_LABEL_SCALE: 0.923,
   LABEL_SCALE: 0.75,
 };
 

diff --git a/packages/mdc-textfield/foundation.ts b/packages/mdc-textfield/foundation.ts
@@ -203,9 +203,7 @@ export class MDCTextFieldFoundation extends MDCFoundation<MDCTextFieldAdapter> {
     }
 
     if (openNotch) {
-      const isDense = this.adapter_.hasClass(cssClasses.DENSE);
-      const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
-      const labelWidth = this.adapter_.getLabelWidth() * labelScale;
+      const labelWidth = this.adapter_.getLabelWidth() * numbers.LABEL_SCALE;
       this.adapter_.notchOutline(labelWidth);
     } else {
       this.adapter_.closeOutline();