feat(Input): base theme light teams (#53)

changing the default styles for Input component (making them compatible with Edge browser)

CHANGELOG.md

@@ -18,8 +18,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ## [Unreleased]
 
 ### Fixes
+
 - Remove unused dependencies and move development dependencies to devDependencies @levithomason ([#51](https://github.com/stardust-ui/react/pull/51))
 - Fixed issues ([#31](https://github.com/stardust-ui/react/issues/31)) and ([#32](https://github.com/stardust-ui/react/issues/32)) @mnajdova ([#38](https://github.com/stardust-ui/react/pull/38))
+- 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))
@@ -37,6 +39,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))
 

docs/src/examples/components/Input/Variations/index.tsx

@@ -6,7 +6,7 @@ const Variations = () => (
   <ExampleSection title="Variations">
     <ComponentExample
       title="Icon"
-      description="An input can have a search icon."
+      description="An input can have an icon."
       examplePath="components/Input/Variations/InputExampleIcon"
     />
   </ExampleSection>

src/components/Input/Input.tsx

@@ -1,6 +1,5 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import * as cx from 'classnames'
 import * as _ from 'lodash'
 
 import {
@@ -14,6 +13,7 @@ import {
 import inputRules from './inputRules'
 import inputVariables from './inputVariables'
 import Icon from '../Icon'
+import callable from '../../lib/callable'
 
 /**
  * An Input
@@ -54,11 +54,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
 
@@ -81,11 +90,22 @@ class Input extends UIComponent<any, any> {
     return null
   }
 
+  handleIconOverrides = predefinedProps => {
+    return {
+      onClick: e => {
+        this.inputRef.focus()
+        _.invoke(predefinedProps, 'onClick', e, this.props)
+      },
+      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 inputClasses = classes.input
+    const iconClasses = classes.icon
 
     // Render with children
     // ----------------------------------------
@@ -103,24 +123,20 @@ class Input extends UIComponent<any, any> {
       )
     }
 
-    if (this.computeIcon()) {
-      return (
-        <ElementType {...rest} className={classes.root} {...htmlInputProps}>
-          {createHTMLInput(input || type, {
-            defaultProps: htmlInputProps,
-            overrideProps: { className: inputClasses },
-          })}
-          <Icon name={this.computeIcon()} />
-        </ElementType>
-      )
-    }
-
     return (
       <ElementType {...rest} className={classes.root} {...htmlInputProps}>
         {createHTMLInput(input || type, {
           defaultProps: htmlInputProps,
-          overrideProps: { className: inputClasses },
+          overrideProps: {
+            className: inputClasses,
+            ref: this.handleInputRef,
+          },
         })}
+        {this.computeIcon() &&
+          Icon.create(this.computeIcon(), {
+            defaultProps: { className: iconClasses },
+            overrideProps: this.handleIconOverrides,
+          })}
       </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'