Password TextField Positioning Bugfix #192

Updated the Password TextField to use the top positioning instead of a bottom positioning since the top will always be a static size as compared to the bottom which can include multiline messages and counters and other stuff.
mlaursen · Dec 20, 2016 · 5eccb3d · 5eccb3d
1 parent 526066b
commit 5eccb3d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 18 deletions.
diff --git a/src/js/TextFields/PasswordButton.js b/src/js/TextFields/PasswordButton.js
@@ -12,6 +12,8 @@ export default class PasswordButton extends PureComponent {
     iconChildren: PropTypes.node,
     onKeyUp: PropTypes.func,
     onKeyDown: PropTypes.func,
+    block: PropTypes.bool,
+    floating: PropTypes.bool,
   };
 
   constructor(props) {
@@ -62,7 +64,15 @@ export default class PasswordButton extends PureComponent {
 
   render() {
     const { keyboardFocus } = this.state;
-    const { active, passwordVisible, iconClassName, iconChildren, ...props } = this.props;
+    const {
+      active,
+      passwordVisible,
+      iconClassName,
+      iconChildren,
+      block,
+      floating,
+      ...props
+    } = this.props;
 
     return (
       <button
@@ -74,6 +84,8 @@ export default class PasswordButton extends PureComponent {
           'md-password-btn--focus': keyboardFocus,
           'md-password-btn--active': active,
           'md-password-btn--invisible': active && !passwordVisible,
+          'md-text-field-inline-indicator--floating': floating,
+          'md-text-field-inline-indicator--block': block,
         })}
       >
         <FontIcon iconClassName={iconClassName}>{iconChildren}</FontIcon>

diff --git a/src/js/TextFields/TextField.js b/src/js/TextFields/TextField.js
@@ -750,13 +750,16 @@ export default class TextField extends PureComponent {
           passwordVisible={passwordVisible}
           iconChildren={passwordIconChildren}
           iconClassName={passwordIconClassName}
+          block={block}
+          floating={!!label}
         />
       );
     } else if (inlineIndicator) {
       const el = Children.only(inlineIndicator);
       rightIcon = cloneElement(inlineIndicator, {
         key: 'icon-right',
         className: cn('md-text-field-inline-indicator', {
+          'md-text-field-inline-indicator--floating': label,
           'md-text-field-inline-indicator--block': block,
         }, el.props.className),
       });

diff --git a/src/scss/components/_text-fields.scss b/src/scss/components/_text-fields.scss
@@ -207,7 +207,7 @@ $md-text-field-desktop-floating-label-margin: 33px;
   }
 
   @if $include-password or $include-inline-indicator {
-    @include react-md-text-field-inline-indicator-mobile;
+    @include react-md-text-field-inline-indicator-mobile($include-floating-label, $include-block);
   }
 
   @include react-md-text-field-custom-sizes-mobile($custom-sizes, $include-floating-label);
@@ -264,7 +264,7 @@ $md-text-field-desktop-floating-label-margin: 33px;
   }
 
   @if $include-password or $include-inline-indicator {
-    @include react-md-text-field-inline-indicator-desktop;
+    @include react-md-text-field-inline-indicator-desktop($include-floating-label, $include-block);
   }
 
   @include react-md-text-field-custom-sizes-desktop($custom-sizes, $include-floating-label);
@@ -1354,17 +1354,25 @@ $md-text-field-desktop-floating-label-margin: 33px;
 ///     @include react-md-text-field-inline-indicator-mobile;
 ///   }
 ///
+/// @param {Boolean} include-floating-labe [$md-text-field-include-floating-label] - Boolean if the
+///   floating label styles for inline indicators should be included.
 /// @param {Boolean} include-block [$md-text-field-include-block] - Boolean if the block styles should
 ///     be included
 /// @group text-fields, media-queries
-@mixin react-md-text-field-inline-indicator-mobile($include-block: $md-text-field-include-block) {
+@mixin react-md-text-field-inline-indicator-mobile($include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block) {
   .md-text-field-inline-indicator {
-    bottom: 14px;
-  }
+    top: 9px;
 
-  @if $include-block {
-    .md-text-field-inline-indicator--block {
-      bottom: 16px;
+    @if $include-floating-label {
+      &--floating {
+        top: 34px;
+      }
+    }
+
+    @if $include-block {
+      &--block {
+        top: 17px;
+      }
     }
   }
 }
@@ -1377,17 +1385,25 @@ $md-text-field-desktop-floating-label-margin: 33px;
 ///     @include react-md-text-field-inline-indicator-desktop;
 ///   }
 ///
+/// @param {Boolean} include-floating-labe [$md-text-field-include-floating-label] - Boolean if the
+///   floating label styles for inline indicators should be included.
 /// @param {Boolean} include-block [$md-text-field-include-block] - Boolean if the block styles should
 ///     be included
 /// @group text-fields, media-queries
-@mixin react-md-text-field-inline-indicator-desktop($include-block: $md-text-field-include-block) {
+@mixin react-md-text-field-inline-indicator-desktop($include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block) {
   .md-text-field-inline-indicator {
-    bottom: 9px;
-  }
+    top: 7px;
 
-  @if $include-block {
-    .md-text-field-inline-indicator--block {
-      bottom: 11px;
+    @if $include-floating-label {
+      &--floating {
+        top: 28px;
+      }
+    }
+
+    @if $include-block {
+      &--block {
+        top: 10px;
+      }
     }
   }
 }
@@ -1397,16 +1413,18 @@ $md-text-field-desktop-floating-label-margin: 33px;
 /// @example scss - Example Usage SCSS
 ///   @include react-md-text-field-inline-indicator-media;
 ///
+/// @param {Boolean} include-floating-labe [$md-text-field-include-floating-label] - Boolean if the
+///   floating label styles for inline indicators should be included.
 /// @param {Boolean} include-block [$md-text-field-include-block] - Boolean if the block styles should
 ///     be included
 /// @group text-fields, media-queries
-@mixin react-md-text-field-inline-indicator-media($include-block: $md-text-field-include-block) {
+@mixin react-md-text-field-inline-indicator-media($include-floating-label: $md-text-field-include-floating-label, $include-block: $md-text-field-include-block) {
   @media #{$md-mobile-media} {
-    @include react-md-text-field-inline-indicator-mobile($include-block);
+    @include react-md-text-field-inline-indicator-mobile($include-floating-label, $include-block);
   }
 
   @media #{$md-desktop-media} {
-    @include react-md-text-field-inline-indicator-desktop($include-block);
+    @include react-md-text-field-inline-indicator-desktop($include-floating-label, $include-block);
   }
 }