From a12a88e20f21e3cfdf56902114b5ebb3c3f86018 Mon Sep 17 00:00:00 2001
From: ItsJonQ <itsjonq@gmail.com>
Date: Thu, 26 Oct 2017 10:35:24 -0400
Subject: [PATCH 1/2] Input: Fix webkit autocomplete styles

This update adjusts the CSS for Input (and indirectly, Select), to allow for
the webkit autocomplete state to render correctly.

Previously, the autocomplete styles were overlapping the Input component's
"Backdrop" layer (a technique used to render the appearance/border of the
component). To resolve this, I've added a 1px padding around the container,
which simulates the offset a typical non-backdrop border would provide.

With this change, the autocomplete styles no-longer overflow on top of
the backdrop layer.

This update is purely a CSS change. The only JS changes made were to update
the Input component Stories to add an autocomplete example (and to refactor).

:clapping:
---
 src/styles/components/Input/InputField.scss |  15 +--
 src/styles/mixins/input-styles.scss         |   7 +-
 stories/Input.js                            | 114 +++++++++++++++-----
 3 files changed, 99 insertions(+), 37 deletions(-)

diff --git a/src/styles/components/Input/InputField.scss b/src/styles/components/Input/InputField.scss
index 63be32218..7fb4718fb 100644
--- a/src/styles/components/Input/InputField.scss
+++ b/src/styles/components/Input/InputField.scss
@@ -11,6 +11,12 @@
   $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;
@@ -18,15 +24,12 @@
   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 +41,7 @@
   // Adjust field height
   @each $size, $values in $seed-control-sizes {
     &.is-#{$size} {
-      height: _get($values, height);
+      height: get-height(_get($values, height));
     }
   }
 
diff --git a/src/styles/mixins/input-styles.scss b/src/styles/mixins/input-styles.scss
index a36c83a70..31f998274 100644
--- a/src/styles/mixins/input-styles.scss
+++ b/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;
diff --git a/stories/Input.js b/stories/Input.js
index 169f92fda..492d5d056 100644
--- a/stories/Input.js
+++ b/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>
+))

From 4d1254df375c3cd3ae9ce282d5fe0e0305601cd4 Mon Sep 17 00:00:00 2001
From: ItsJonQ <itsjonq@gmail.com>
Date: Thu, 26 Oct 2017 10:42:21 -0400
Subject: [PATCH 2/2] Remove extra space in the InputField CSS

---
 src/styles/components/Input/InputField.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/components/Input/InputField.scss b/src/styles/components/Input/InputField.scss
index 7fb4718fb..89cf7c3ab 100644
--- a/src/styles/components/Input/InputField.scss
+++ b/src/styles/components/Input/InputField.scss
@@ -16,7 +16,6 @@
     @return ceil($height - $border * 2);
   }
 
-
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;