Merge pull request #1740 from Shopify/textfield-icon-position-2

[Textfield] Adjusting padding when there's a Prefix or Suffix

Author: dleroux

CHANGELOG.md

@@ -10,6 +10,10 @@ The format is based on [these versioning and changelog guidelines][changelog-gui
 
 - Changed Form to submit a form by default when the Enter key is pressed, and added the prop `implicitSubmit` to disable this default ([#1630](https://github.com/Shopify/polaris-react/pull/1630))
 
+### Bug fixes
+
+- Fixed text field padding when a prefix or suffix is included ([#1740](https://github.com/Shopify/polaris-react/pull/1740))
+
 ## 2.3.1 - 2018-07-05
 
 ### Enhancements

src/components/TextField/TextField.scss

@@ -97,6 +97,10 @@ $stacking-order: (
   font-weight: inherit;
   appearance: none;
 
+  .Prefix + & {
+    padding-left: 0;
+  }
+
   &:disabled {
     background: none;
     border: border(transparent);
@@ -127,6 +131,10 @@ $stacking-order: (
   }
 }
 
+.Input-suffixed {
+  padding-right: 0;
+}
+
 .Backdrop {
   position: absolute;
   z-index: z-index(backdrop, $stacking-order);

src/components/TextField/TextField.tsx

@@ -224,6 +224,11 @@ export default class TextField extends React.PureComponent<Props, State> {
       labelledBy.push(`${id}Suffix`);
     }
 
+    const inputClassName = classNames(
+      styles.Input,
+      suffix && styles['Input-suffixed'],
+    );
+
     const input = React.createElement(multiline ? 'textarea' : 'input', {
       name,
       id,
@@ -236,7 +241,7 @@ export default class TextField extends React.PureComponent<Props, State> {
       onBlur,
       style,
       autoComplete: normalizeAutoComplete(autoComplete),
-      className: styles.Input,
+      className: inputClassName,
       onChange: this.handleChange,
       ref: this.setInput,
       min,