fix(Input): Padding, Icon color, & Floating changes (#78)

heydoctor · Sep 16, 2019 · 96bebb9 · 96bebb9
1 parent f587776
commit 96bebb9
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 36 deletions.
diff --git a/src/Form/FormError.js b/src/Form/FormError.js
@@ -10,9 +10,10 @@ const FormErrorContainer = createComponent({
   tag: 'span',
   style: css`
     display: block;
-    margin: 4px 0 0 4px;
+    margin: 8px 0 0 1px;
     color: ${p => p.theme.colors.red};
-    font-size: 10px;
+    font-size: 12px;
+    font-weight: 500;
   `,
 });
 

diff --git a/src/Form/Input.js b/src/Form/Input.js
@@ -12,13 +12,15 @@ const InputContainer = createComponent({
   name: 'InputContainer',
   style: css`
     position: relative;
+    color: ${p => p.theme.colors.greyDarker};
   `,
 });
 
 const StyledInput = createComponent({
   name: 'Input',
   tag: 'input',
   style: ({
+    isFloatable,
     isFloating,
     theme,
     borderRadius = theme.radius,
@@ -33,6 +35,7 @@ const StyledInput = createComponent({
     outline: none;
     width: 100%;
     padding: 8px;
+    padding-right: 24px;
     border-radius: ${borderRadius}px;
     transition: 250ms all;
     -webkit-appearance: none;
@@ -42,7 +45,8 @@ const StyledInput = createComponent({
     box-sizing: border-box;
 
     &:hover,
-    &:active {
+    &:active,
+    & + label &:hover {
       border-color: ${theme.colors.greyDark};
     }
 
@@ -52,6 +56,7 @@ const StyledInput = createComponent({
 
     ::placeholder {
       color: ${theme.colors.greyDarker};
+      opacity: ${isFloatable ? 0 : 1};
     }
 
     &[disabled] {
@@ -64,14 +69,8 @@ const StyledInput = createComponent({
       }
     }
 
-    ${isFloating &&
-      css`
-        line-height: 14px;
-        padding-top: 14px;
-        padding-bottom: 0px;
-      `};
-
     ${leftIcon &&
+      !isFloatable &&
       css`
         padding-left: ${(leftIconProps.size || 16) + 12}px;
       `};
@@ -80,20 +79,52 @@ const StyledInput = createComponent({
       css`
         padding-right: ${(rightIconProps.size || 16) + 32}px;
       `};
+
+    ${isFloating &&
+      css`
+        line-height: 14px;
+        padding-top: 14px;
+        padding-bottom: 0px;
+      `};
   `,
 });
 
 const StyledIcon = styled(Icon)`
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+  ${({ theme, isDisabled }) => css`
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: 250ms all;
+
+    ${isDisabled &&
+      css`
+        color: ${theme.colors.grey};
+      `}
+  `}
 `;
 
 const LeftIcon = createComponent({
   name: 'InputLeftIcon',
   as: StyledIcon,
-  style: css`
+  style: ({ isFocused, isFloating, isFloatable, theme }) => css`
     left: 8px;
+
+    ${isFloatable &&
+      css`
+        position: static;
+        padding-right: 4px;
+      `}
+
+    ${isFloating &&
+      css`
+        font-size: 12px;
+        line-height: 14px;
+
+        ${isFocused &&
+          css`
+            color: ${theme.colors.primary};
+          `}
+      `}
   `,
 });
 
@@ -105,7 +136,16 @@ const RightIcon = createComponent({
   `,
 });
 
-const StyledTextArea = StyledInput.withComponent('textarea');
+const StyledTextArea = createComponent({
+  name: 'TextArea',
+  as: StyledInput.withComponent('textarea'),
+  style: ({ isFloatable, isFloating }) => css`
+    ${isFloatable && isFloating &&
+      css`
+        padding-top: 24px;
+      `}
+  `,
+});
 
 const AutogrowShadow = createComponent({
   name: 'AutogrowShadow',
@@ -281,6 +321,12 @@ export class Input extends Component {
     this.ref.current.blur();
   }
 
+  handleLabelClick = () => {
+    if (this.props.floating) {
+      this.focus();
+    }
+  };
+
   render() {
     const {
       style,
@@ -307,7 +353,7 @@ export class Input extends Component {
 
     const { focused, height, value } = this.state;
 
-    const isFloating = floating && value !== undefined && `${value}`.trim();
+    const isFloating = (floating && value !== undefined && !!`${value}`.trim()) || (floating && focused);
 
     const inputProps = {
       ...rest,
@@ -330,15 +376,16 @@ export class Input extends Component {
       disabled,
     };
 
+    const statusProps = {
+      isFloatable: floating,
+      isFloating,
+      isFocused: focused,
+      isDisabled: disabled,
+    };
+
     const Label = label ? (
-      <StyledLabel
-        htmlFor={id}
-        styles={rest.styles}
-        isFloatable={floating}
-        isFloating={isFloating}
-        isFocused={focused}
-        isDisabled={disabled}
-        error={error}>
+      <StyledLabel htmlFor={id} styles={rest.styles} error={error} onClick={this.handleLabelClick} {...statusProps}>
+        {leftIcon && <LeftIcon styles={rest.styles} name={leftIcon} {...statusProps} {...leftIconProps} />}
         {label}
       </StyledLabel>
     ) : null;
@@ -350,9 +397,13 @@ export class Input extends Component {
         <InputContainer styles={rest.styles}>
           {floating && Label}
 
-          {leftIcon && <LeftIcon styles={rest.styles} name={leftIcon} {...leftIconProps} />}
+          {leftIcon && !floating && (
+            <LeftIcon styles={rest.styles} name={leftIcon} {...statusProps} {...leftIconProps} />
+          )}
 
-          {rightIcon && <RightIcon styles={rest.styles} name={rightIcon} {...rightIconProps} />}
+          {rightIcon && (
+            <RightIcon styles={rest.styles} name={rightIcon} size={24} {...statusProps} {...rightIconProps} />
+          )}
 
           {multiline ? <StyledTextArea {...inputProps} /> : <StyledInput {...inputProps} />}
         </InputContainer>

diff --git a/src/Form/Input.stories.js b/src/Form/Input.stories.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { object, select, boolean } from '@storybook/addon-knobs/react';
 import Formbot from './Formbot';
 import Button from '../Button';
 import { Input } from './Input';
@@ -61,7 +62,9 @@ export const Autogrow = () => <Input {...defaultInputProps} multiline autogrow /
 
 export const FloatingLabel = () => <Input {...defaultInputProps} floating />;
 
-export const Disabled = () => <Input {...defaultInputProps} disable />;
+export const Disabled = () => <Input {...defaultInputProps} disabled />;
+
+export const Error = () => <Input {...defaultInputProps} error="This is an error message" />;
 
 export const Styles = () => (
   <Input
@@ -73,3 +76,24 @@ export const Styles = () => (
     }}
   />
 );
+
+export const Icon = () => {
+  const iconOptions = {
+    Information: 'information-outline',
+    Visibility: 'eye-outline',
+    Alert: 'alert',
+    'Area 51': 'alien',
+  };
+
+  return (
+    <Input
+      floating={boolean('Floating', false)}
+      disabled={boolean('Disabled', false)}
+      leftIcon={select('Left Icon', iconOptions, 'information-outline')}
+      leftIconProps={object('Left Icon Props', { color: 'greyDarker', size: 16 })}
+      rightIcon={select('Right Icon', iconOptions, 'eye-outline')}
+      rightIconProps={object('Right Icon Props', { color: 'greyDarker', size: 24 })}
+      {...defaultInputProps}
+    />
+  );
+};
diff --git a/src/Form/Label.js b/src/Form/Label.js
@@ -13,12 +13,24 @@ const Label = createComponent({
     ${isFloatable &&
       css`
         position: absolute;
-        top: 6px;
-        left: 8px;
-        opacity: ${isFloating ? 1 : 0};
         margin: 0;
-        font-size: 12px;
+        font-size: 16px;
         line-height: 14px;
+        left: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        user-select: none;
+
+        &:hover {
+          cursor: text;
+        }
+
+        ${isFloating &&
+          css`
+            font-size: 12px;
+            top: 6px;
+            transform: none;
+          `}
       `};
 
     ${isFocused &&

diff --git a/src/Form/__snapshots__/DateInput.spec.js.snap b/src/Form/__snapshots__/DateInput.spec.js.snap
@@ -14,6 +14,7 @@ exports[`<DateInput /> snapshot 1`] = `
 
 .c2 {
   position: relative;
+  color: #767980;
 }
 
 .c3 {
@@ -23,18 +24,20 @@ exports[`<DateInput /> snapshot 1`] = `
   outline: none;
   width: 100%;
   padding: 8px;
+  padding-right: 24px;
   border-radius: 8px;
   -webkit-transition: 250ms all;
   transition: 250ms all;
   -webkit-appearance: none;
   font-family: inherit;
-  font-size: 14px;
+  font-size: 16px;
   color: #494D55;
   box-sizing: border-box;
 }
 
 .c3:hover,
-.c3:active {
+.c3:active,
+.c3 + label .c3:hover {
   border-color: #A4A6AA;
 }
 
@@ -44,18 +47,22 @@ exports[`<DateInput /> snapshot 1`] = `
 
 .c3::-webkit-input-placeholder {
   color: #767980;
+  opacity: 1;
 }
 
 .c3::-moz-placeholder {
   color: #767980;
+  opacity: 1;
 }
 
 .c3:-ms-input-placeholder {
   color: #767980;
+  opacity: 1;
 }
 
 .c3::placeholder {
   color: #767980;
+  opacity: 1;
 }
 
 .c3[disabled] {

diff --git a/src/Form/__snapshots__/PhoneInput.spec.js.snap b/src/Form/__snapshots__/PhoneInput.spec.js.snap
@@ -14,6 +14,7 @@ exports[`<PhoneInput /> snapshot 1`] = `
 
 .c2 {
   position: relative;
+  color: #767980;
 }
 
 .c3 {
@@ -23,18 +24,20 @@ exports[`<PhoneInput /> snapshot 1`] = `
   outline: none;
   width: 100%;
   padding: 8px;
+  padding-right: 24px;
   border-radius: 8px;
   -webkit-transition: 250ms all;
   transition: 250ms all;
   -webkit-appearance: none;
   font-family: inherit;
-  font-size: 14px;
+  font-size: 16px;
   color: #494D55;
   box-sizing: border-box;
 }
 
 .c3:hover,
-.c3:active {
+.c3:active,
+.c3 + label .c3:hover {
   border-color: #A4A6AA;
 }
 
@@ -44,18 +47,22 @@ exports[`<PhoneInput /> snapshot 1`] = `
 
 .c3::-webkit-input-placeholder {
   color: #767980;
+  opacity: 1;
 }
 
 .c3::-moz-placeholder {
   color: #767980;
+  opacity: 1;
 }
 
 .c3:-ms-input-placeholder {
   color: #767980;
+  opacity: 1;
 }
 
 .c3::placeholder {
   color: #767980;
+  opacity: 1;
 }
 
 .c3[disabled] {

diff --git a/src/theme.js b/src/theme.js
@@ -62,7 +62,7 @@ export default (overrides = {}) => {
   const radii = [0, 2, 4];
 
   const typography = {
-    fontSize: 14,
+    fontSize: 16,
     bodyFontFamily: 'Avenir',
     headerFontFamily: 'Tiempos',
   };