fix(Input): Fix autofill and focus behaviour for label

stevenfitzpatrick · Mar 22, 2018 · 183cd20 · 183cd20
1 parent f4c9127
commit 183cd20
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -11,6 +11,7 @@
   "rules": {
     "declaration-colon-newline-after": null,
     "value-list-comma-newline-after": null,
-    "declaration-empty-line-before": null
+    "declaration-empty-line-before": null,
+    "property-no-unknown": [true, {"ignoreProperties": ["text-fill-color"], "checkPrefixed": false}]
   }
 }
diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import FitzyIcon from './Icon.styled';
-import icons from './icons';
+import icons from './icons/index';
 
 function Icon({ icon, use, size, className }) {
   return (

diff --git a/src/components/Input/Input.styled.js b/src/components/Input/Input.styled.js
@@ -22,7 +22,7 @@ const InputBar = styled.span`
   &::before,
   &::after {
     content: '';
-    height: 2px;
+    height: 3px;
     width: 0;
     bottom: 0;
     position: absolute;
@@ -89,7 +89,7 @@ const FitzyInput = styled.input`
 
   &:-webkit-autofill {
     box-shadow: 0 0 0 30px ${colors.bgColor} inset;
-    color: ${colors.light} !important;
+    text-fill-color: ${colors.light} !important;
     caret-color: ${p => p.theme.Input.placeholder};
 
     &::placeholder {
@@ -108,6 +108,8 @@ const FitzyInput = styled.input`
 
     & ~ label {
       color: ${p => p.theme.Input.labelActive};
+      transform: translateY(-${spacing.l});
+      opacity: 1;
     }
 
     & ~ span {

diff --git a/src/components/Input/__tests__/__snapshots__/InputTest.js.snap b/src/components/Input/__tests__/__snapshots__/InputTest.js.snap
@@ -17,7 +17,7 @@ exports[`Input should match snapshot 1`] = `
 .c2::before,
 .c2::after {
   content: '';
-  height: 2px;
+  height: 3px;
   width: 0;
   bottom: 0;
   position: absolute;
@@ -76,7 +76,7 @@ exports[`Input should match snapshot 1`] = `
 
 .c1:-webkit-autofill {
   box-shadow: 0 0 0 30px #172025 inset;
-  color: #ffffff !important;
+  text-fill-color: #ffffff !important;
   caret-color: #b0c1d4;
 }
 
@@ -110,6 +110,10 @@ exports[`Input should match snapshot 1`] = `
 
 .c1:focus ~ label {
   color: hsl(152,62%,63%);
+  -webkit-transform: translateY(-1rem);
+  -ms-transform: translateY(-1rem);
+  transform: translateY(-1rem);
+  opacity: 1;
 }
 
 .c1:focus ~ span::before,