feat(Input): move styles to Base theme (#1247)

* feat(Input): move styles to Base theme

* fix regressions, update Base

* remove broken themes

* add clearable snapshot

* move changelog entry

* remove duplicate changes

Author: layershifter

CHANGELOG.md

@@ -17,6 +17,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Rename `inputFocusBorderBottomColor` to `inputFocusBorderColor` in `InputVariables` @layershifter ([#1247](https://github.com/stardust-ui/react/pull/1247))
+
+### Features
+- Move `Input` styles to Base theme @layershifter ([#1247](https://github.com/stardust-ui/react/pull/1247))
+
 <!--------------------------------[ v0.28.1 ]------------------------------- -->
 ## [v0.28.1](https://github.com/stardust-ui/react/tree/v0.28.1) (2019-04-23)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.28.0...v0.28.1)

docs/src/examples/components/Input/Types/InputExample.shorthand.steps.ts

@@ -2,6 +2,7 @@ import { Input } from '@stardust-ui/react'
 
 const config: ScreenerTestsConfig = {
   steps: [builder => builder.focus(`.${Input.className} input`).snapshot('Can be focused')],
+  themes: ['teams', 'base'],
 }
 
 export default config

docs/src/examples/components/Input/Variations/InputExampleClearable.shorthand.steps.ts

@@ -0,0 +1,11 @@
+import { Input } from '@stardust-ui/react'
+
+const config: ScreenerTestsConfig = {
+  steps: [
+    builder =>
+      builder.setValue(`.${Input.className} input`, 'Some text...').snapshot('Can be clearable'),
+  ],
+  themes: ['teams', 'base'],
+}
+
+export default config

packages/react/src/themes/base/componentStyles.ts

@@ -5,6 +5,8 @@ export { default as FlexItem } from './components/Flex/flexItemStyles'
 
 export { default as Icon } from './components/Icon/iconStyles'
 
+export { default as Input } from './components/Input/inputStyles'
+
 export { default as Loader } from './components/Loader/loaderStyles'
 
 export { default as ProviderBox } from './components/Provider/providerBoxStyles'

packages/react/src/themes/base/componentVariables.ts

@@ -5,6 +5,8 @@ export { default as FlexItem } from './components/Flex/flexItemVariables'
 
 export { default as Icon } from './components/Icon/iconVariables'
 
+export { default as Input } from './components/Input/inputVariables'
+
 export { default as Loader } from './components/Loader/loaderVariables'
 
 export { default as ProviderBox } from './components/Provider/providerBoxVariables'

packages/react/src/themes/teams/components/Input/inputStyles.ts renamed to packages/react/src/themes/base/components/Input/inputStyles.ts

@@ -5,30 +5,36 @@ import { PositionProperty } from 'csstype'
 
 const inputStyles: ComponentSlotStylesInput<InputProps, InputVariables> = {
   root: ({ props: p }): ICSSInJSStyle => ({
+    alignItems: 'center',
     display: 'inline-flex',
     position: 'relative',
-    alignItems: 'center',
     outline: 0,
+
     ...(p.fluid && { width: '100%' }),
   }),
 
   input: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    outline: 0,
+    backgroundColor: v.backgroundColor,
+    color: v.fontColor,
+
+    borderColor: v.borderColor,
+    borderRadius: v.borderRadius,
     borderStyle: 'solid',
-    borderColor: 'transparent',
     borderWidth: v.borderWidth,
-    borderRadius: v.borderRadius,
-    color: v.fontColor,
-    backgroundColor: v.backgroundColor,
-    position: 'relative',
+
+    outline: 0,
     padding: v.inputPadding,
+    position: 'relative',
+
     ...(p.fluid && { width: '100%' }),
     ...(p.inline && { float: 'left' }),
+
     '::placeholder': {
       color: v.placeholderColor,
     },
+
     ':focus': {
-      borderBottomColor: v.inputFocusBorderBottomColor,
+      borderColor: v.inputFocusBorderColor,
     },
     ...(p.clearable && { padding: v.inputPaddingWithIconAtEnd }),
     ...(p.icon && {
@@ -37,16 +43,17 @@ const inputStyles: ComponentSlotStylesInput<InputProps, InputVariables> = {
     }),
   }),
 
-  icon: ({ props: { iconPosition }, variables: v }): ICSSInJSStyle => ({
-    position: v.iconPosition as PositionProperty,
+  icon: ({ props: p, variables: v }): ICSSInJSStyle => ({
     color: v.iconColor,
-    ...(iconPosition === 'start' && {
+    outline: 0,
+    position: v.iconPosition as PositionProperty,
+
+    ...(p.iconPosition === 'start' && {
       left: v.iconLeft,
     }),
-    ...(iconPosition === 'end' && {
+    ...(p.iconPosition === 'end' && {
       right: v.iconRight,
     }),
-    outline: 0,
   }),
 }
 

packages/react/src/themes/base/components/Input/inputVariables.ts

@@ -0,0 +1,43 @@
+import { pxToRem } from '../../../../lib'
+
+export interface InputVariables {
+  backgroundColor: string
+  borderColor: string
+  borderRadius: string
+  borderWidth: string
+  fontColor: string
+  fontSize: string
+  iconColor: string
+  iconPosition: string
+  iconRight: string
+  iconLeft: string
+  inputPaddingWithIconAtStart: string
+  inputPaddingWithIconAtEnd: string
+  inputPadding: string
+  inputFocusBorderColor: string
+  inputFocusBorderRadius: string
+  placeholderColor: string
+}
+
+export default (siteVars): InputVariables => ({
+  backgroundColor: siteVars.colors.grey[50],
+  borderColor: siteVars.colors.grey[300],
+  borderRadius: pxToRem(3),
+  borderWidth: `1px`,
+
+  fontColor: siteVars.colors.grey[600],
+  fontSize: pxToRem(14),
+
+  iconPosition: 'absolute',
+  iconRight: pxToRem(10),
+  iconColor: siteVars.colors.grey[800],
+  iconLeft: pxToRem(6),
+  inputPaddingWithIconAtStart: `${pxToRem(7)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(24)}`,
+  inputPaddingWithIconAtEnd: `${pxToRem(7)} ${pxToRem(24)} ${pxToRem(7)} ${pxToRem(12)}`,
+
+  inputPadding: `${pxToRem(7)} ${pxToRem(12)}`,
+  inputFocusBorderColor: siteVars.colors.primary[300],
+  inputFocusBorderRadius: pxToRem(3),
+
+  placeholderColor: siteVars.colors.grey[600],
+})

packages/react/src/themes/teams/componentStyles.ts

@@ -34,8 +34,6 @@ export { default as HeaderDescription } from './components/Header/headerDescript
 
 export { default as Icon } from './components/Icon/iconStyles'
 
-export { default as Input } from './components/Input/inputStyles'
-
 export { default as Label } from './components/Label/labelStyles'
 
 export { default as Layout } from './components/Layout/layoutStyles'

packages/react/src/themes/teams/components/Input/inputVariables.ts

@@ -1,41 +1,17 @@
+import { InputVariables } from '../../../base/components/Input/inputVariables'
 import { pxToRem } from '../../../../lib'
 
-export interface InputVariables {
-  backgroundColor: string
-  borderRadius: string
-  borderWidth: string
-  fontColor: string
-  fontSize: string
-  iconColor: string
-  iconPosition: string
-  iconRight: string
-  iconLeft: string
-  inputPaddingWithIconAtStart: string
-  inputPaddingWithIconAtEnd: string
-  inputPadding: string
-  inputFocusBorderBottomColor: string
-  inputFocusBorderRadius: string
-  placeholderColor: string
-}
-
-export default (siteVars): InputVariables => ({
-  backgroundColor: siteVars.gray10,
+export default (siteVars): Partial<InputVariables> => ({
+  borderColor: 'transparent',
   borderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`,
   borderWidth: `0 0 ${pxToRem(2)} 0`,
+  backgroundColor: siteVars.gray10,
 
   fontColor: siteVars.gray02,
   fontSize: siteVars.fontSizes.medium,
 
-  iconPosition: 'absolute',
-  iconRight: pxToRem(10),
   iconColor: siteVars.bodyColor,
-  iconLeft: pxToRem(6),
-  inputPaddingWithIconAtStart: `${pxToRem(7)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(24)}`,
-  inputPaddingWithIconAtEnd: `${pxToRem(7)} ${pxToRem(24)} ${pxToRem(7)} ${pxToRem(12)}`,
-
-  inputPadding: `${pxToRem(7)} ${pxToRem(12)}`,
-  inputFocusBorderBottomColor: siteVars.colors.primary[500],
+  inputFocusBorderColor: `transparent transparent ${siteVars.colors.primary[500]} transparent`,
   inputFocusBorderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`,
-
   placeholderColor: siteVars.gray02,
 })