fix(Input): changing the default styles for Input component

CHANGELOG.md

@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Fixes
+
+- Changing the default styles for Input component @alinais ([#25](https://github.com/stardust-ui/react/pull/25))
+
 ### Features
 - Update styles for Menu underlined primary @miroslavstastny ([#20](https://github.com/stardust-ui/react/pull/20))
 
@@ -32,6 +36,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.2.3...v0.2.4)
 
 ### Fixes
+
 - Replaced Header `subheader` with `description` and fixed it to render well-formed HTML @mnajdova ([#17](https://github.com/stardust-ui/react/pull/17))
 - Removed allowSyntheticDefaultImports from shared tsconfig but allow it on docs @aniknafs ([#46](https://github.com/stardust-ui/react/pull/46))
 

src/components/Input/Input.tsx

@@ -14,6 +14,7 @@ import {
 import inputRules from './inputRules'
 import inputVariables from './inputVariables'
 import Icon from '../Icon'
+import callable from '../../lib/callable'
 
 /**
  * An Input
@@ -54,11 +55,20 @@ class Input extends UIComponent<any, any> {
     type: 'text',
   }
 
+  inputRef: any
+
+  computeTabIndex = props => {
+    if (!_.isNil(props.tabIndex)) return props.tabIndex
+    if (props.onClick) return 0
+  }
+
   handleChildOverrides = (child, defaultProps) => ({
     ...defaultProps,
     ...child.props,
   })
 
+  handleInputRef = c => (this.inputRef = c)
+
   partitionProps = () => {
     const { type } = this.props
 
@@ -69,6 +79,7 @@ class Input extends UIComponent<any, any> {
       {
         ...htmlInputProps,
         type,
+        onClick: () => this.inputRef.focus(),
       },
       rest,
     ]
@@ -81,11 +92,18 @@ class Input extends UIComponent<any, any> {
     return null
   }
 
+  handleIconOverrides = predefinedProps => {
+    return {
+      tabIndex: this.computeTabIndex,
+    }
+  }
+
   renderComponent({ ElementType, classes, rest }) {
     const { children, className, icon, input, type } = this.props
     const [htmlInputProps, restProps] = this.partitionProps()
 
     const inputClasses = cx(classes.input)
+    const iconClasses = cx(classes.icon)
 
     // Render with children
     // ----------------------------------------
@@ -108,9 +126,15 @@ class Input extends UIComponent<any, any> {
         <ElementType {...rest} className={classes.root} {...htmlInputProps}>
           {createHTMLInput(input || type, {
             defaultProps: htmlInputProps,
-            overrideProps: { className: inputClasses },
+            overrideProps: {
+              className: inputClasses,
+              ref: this.handleInputRef,
+            },
+          })}
+          {Icon.create(this.computeIcon(), {
+            defaultProps: { className: iconClasses },
+            overrideProps: predefinedProps => this.handleIconOverrides,
           })}
-          <Icon name={this.computeIcon()} />
         </ElementType>
       )
     }
@@ -119,7 +143,10 @@ class Input extends UIComponent<any, any> {
       <ElementType {...rest} className={classes.root} {...htmlInputProps}>
         {createHTMLInput(input || type, {
           defaultProps: htmlInputProps,
-          overrideProps: { className: inputClasses },
+          overrideProps: {
+            className: inputClasses,
+            ref: this.handleInputRef,
+          },
         })}
       </ElementType>
     )

src/components/Input/inputRules.ts

@@ -5,17 +5,33 @@ const inputRules = {
       position: 'relative',
       alignItems: 'center',
       justifyContent: 'flex-end',
-      border: variables.defaultBorder,
-      borderRadius: variables.borderRadius,
       outline: 0,
-      padding: variables.defaultPadding,
     }
   },
 
   input: ({ props, variables }) => {
     return {
       outline: 0,
       border: 0,
+      borderRadius: variables.borderRadius,
+      borderBottom: variables.borderBottom,
+      color: variables.fontColor,
+      backgroundColor: variables.backgroundColor,
+      height: variables.height,
+      padding: variables.inputPadding,
+
+      ':focus': {
+        borderColor: variables.inputFocusBorderColor,
+        borderRadius: variables.inputFocusBorderRadius,
+      },
+    }
+  },
+
+  icon: ({ props, variables }) => {
+    return {
+      position: variables.iconPosition,
+      right: variables.iconRight,
+      outline: 0,
     }
   },
 }

src/components/Input/inputVariables.ts

@@ -3,12 +3,20 @@ import { pxToRem } from '../../lib'
 export default (siteVars: any) => {
   const vars: any = {}
 
-  vars.borderRadius = `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`
+  vars.borderRadius = `${pxToRem(3)}`
+  vars.borderBottom = `${pxToRem(2)} solid transparent`
+  vars.height = '100%'
+  vars.backgroundColor = siteVars.gray10
 
-  vars.defaultBorder = `${pxToRem(1)} solid #222426`
-  vars.defaultBorderFocus = `${pxToRem(1)} solid #85b7d9`
-  vars.defaultBorderError = `${pxToRem(1)} solid #e0b4b4`
-  vars.defaultPadding = `${pxToRem(6)} 0 ${pxToRem(6)} ${pxToRem(10)}`
+  vars.fontColor = siteVars.fontBlack
+  vars.fontSize = siteVars.fontSizeBase
+
+  vars.inputPadding = `${pxToRem(6)} ${pxToRem(24)} ${pxToRem(6)} ${pxToRem(12)}`
+  vars.inputFocusBorderColor = siteVars.brand
+  vars.inputFocusBorderRadius = `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`
+
+  vars.iconPosition = 'absolute'
+  vars.iconRight = `${pxToRem(2)}`
 
   return vars
 }

src/themes/teams/siteVariables.ts

@@ -18,6 +18,7 @@ export const gray09 = '#EDEBE9'
 export const gray10 = '#F3F2F1'
 export const gray12 = blackRgbaFormat(0.05)
 export const gray14 = '#FAF9F8'
+export const fontBlack = '#252424'
 
 export const white = '#FFF'