Update FlexEnd class to more semantic AlignFieldBottom.

Shopify · Jan 28, 2019 · 1420918 · 1420918
1 parent b2f6b85
commit 1420918
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss
@@ -174,16 +174,16 @@ $stacking-order: (
   @include text-emphasis-subdued;
   z-index: z-index(contents, $stacking-order);
   margin-right: $backdrop-horizontal-spacing;
+  line-height: control-height();
   pointer-events: none;
 }
 
 .MaxCharacters {
   color: color('red');
 }
 
-.FlexEnd {
+.AlignFieldBottom {
   align-self: flex-end;
-  margin-bottom: rem(4px);
 }
 
 .Spinner {

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -222,8 +222,7 @@ class TextField extends React.PureComponent<CombinedProps, State> {
 
     const characterCountClassName = classNames(
       styles.CharacterCount,
-      multiline && styles.FlexEnd,
-      // maxLength && characterCount === 0 && styles.MaxCharacters,
+      multiline && styles.AlignFieldBottom,
     );
 
     const characterCountText = !maxLength