Merge pull request #101 from helpscout/input/fix-autocomplete-styles

Input: Fix webkit autocomplete styles

src/styles/components/Input/InputField.scss

@@ -11,22 +11,24 @@
   $default-height: _get($seed-control-sizes, md, height);
   $states: $STATES;
 
+  // Scoped functions
+  @function get-height($height: $default-height, $border: $border-width) {
+    @return ceil($height - $border * 2);
+  }
+
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-color: transparent;
   border: none;
   color: currentColor;
   display: block;
-  height: $default-height;
+  height: get-height();
   padding: 0;
   position: relative;
-  top: -($border-width); // to normalize and center the <input>
+  top: 0;
   width: 100%;
   z-index: 1;
-  @-moz-document url-prefix() {
-    top: 0;
-  }
   &:focus {
     outline: none;
   }
@@ -38,7 +40,7 @@
   // Adjust field height
   @each $size, $values in $seed-control-sizes {
     &.is-#{$size} {
-      height: _get($values, height);
+      height: get-height(_get($values, height));
     }
   }
 

src/styles/mixins/input-styles.scss

@@ -5,6 +5,8 @@
   background-color: transparent;
   border: none;
   display: flex;
+  padding-bottom: 1px;
+  padding-top: 1px;
   padding-left: $padding;
   padding-right: $padding;
   position: relative;
@@ -21,11 +23,8 @@
     padding-left: 4px;
     padding-right: 4px;
     position: relative;
-    top: -1px;
+    top: 0;
     white-space: nowrap;
-    @-moz-document url-prefix() {
-      top: 0;
-    }
 
     @include parent(".has-value >") {
       opacity: 1;

stories/Input.js

@@ -1,29 +1,89 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { Input } from '../src/index.js'
-
-storiesOf('Input', module)
-  .add('default', () => <Input />)
-  .add('helptext', () => <Input helpText='This text appears below the input' />)
-  .add('hinttext', () => <Input hintText='This text appears above the input' />)
-  .add('multiline', () => <Input multiline placeholder='This is a textarea!' autoFocus />)
-  .add('multiline + resizable', () => <Input multiline={3} resizable autoFocus placeholder='This is a resizable textarea!' />)
-  .add('label', () => <Input label='Labelled' autoFocus />)
-  .add('placeholder', () => <Input placeholder='Hello' autoFocus />)
-  .add('prefix + suffix', () => <Input prefix='$' suffix='.00' autoFocus />)
-  .add('seamless', () => <Input seamless autoFocus />)
-  .add('disabled', () => <Input disabled autoFocus />)
-  .add('readonly', () => <Input readOnly autoFocus value={`I can't turn left`} />)
-  .add('states', () => (
-    <div>
-      <Input state='error' autoFocus /><br />
-      <Input state='success' helpText="You're Awesome!" hintText="You're awesome!" autoFocus /><br />
-      <Input state='warning' autoFocus />
-    </div>
-  ))
-  .add('sizes', () => (
-    <div>
-      <Input autoFocus placeholder='Regular' /><br />
-      <Input size='sm' autoFocus placeholder='Small' />
-    </div>
-  ))
+import { Button, Input } from '../src/index.js'
+
+const stories = storiesOf('Input', module)
+
+stories.add('default', () => (
+  <Input />
+))
+
+stories.add('autocomplete', () => (
+  <div style={{width: 300}}>
+    <form autocomplete='on' action='/'>
+      <Input
+        autoFocus
+        label='First name'
+        name='fname'
+        placeholder='Ron'
+        type='text'
+      />
+      <br />
+      <Button submit size='sm'>Submit</Button>
+    </form>
+  </div>
+))
+
+stories.add('helpText', () => (
+  <Input helpText='This text appears below the input' />
+))
+
+stories.add('hintText', () => (
+  <Input hintText='This text appears above the input' />
+))
+
+stories.add('multiline', () => (
+  <Input
+    multiline
+    autoFocus
+    placeholder='This is a textarea!'
+  />
+))
+
+stories.add('multiline + resizable', () => (
+  <Input
+    multiline={3}
+    resizable
+    autoFocus
+    placeholder='This is a resizable textarea!'
+  />
+))
+
+stories.add('label', () => (
+  <Input label='Labelled' autoFocus />
+))
+
+stories.add('placeholder', () => (
+  <Input placeholder='Hello' autoFocus />
+))
+
+stories.add('prefix + suffix', () => (
+  <Input prefix='$' suffix='.00' autoFocus />
+))
+
+stories.add('seamless', () => (
+  <Input seamless autoFocus />
+))
+
+stories.add('disabled', () => (
+  <Input disabled autoFocus />
+))
+
+stories.add('readonly', () => (
+  <Input readOnly autoFocus value={`I can't turn left`} />
+))
+
+stories.add('states', () => (
+  <div>
+    <Input state='error' autoFocus /><br />
+    <Input state='success' helpText="You're Awesome!" hintText="You're awesome!" autoFocus /><br />
+    <Input state='warning' autoFocus />
+  </div>
+))
+
+stories.add('sizes', () => (
+  <div>
+    <Input autoFocus placeholder='Regular' /><br />
+    <Input size='sm' autoFocus placeholder='Small' />
+  </div>
+))