fix(dropdown): fixed dropdown style regression

CHANGELOG.md

@@ -23,6 +23,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Accessibility for menu divider @jurokapsiar ([#822](https://github.com/stardust-ui/react/pull/822))
 
+### Fixes
+- Fix `Dropdown` component styles regression @Bugaa92 ([#824](https://github.com/stardust-ui/react/pull/824))
+
 <!--------------------------------[ v0.19.2 ]------------------------------- -->
 ## [v0.19.2](https://github.com/stardust-ui/react/tree/v0.19.2) (2019-02-01)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.19.1...v0.19.2)
@@ -77,7 +80,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Make `headerMedia` visible for screen readers in `ListItem` @layershifter ([#772](https://github.com/stardust-ui/react/pull/772))
 - Cleanup for `Dropdown` examples' accessibility and added localisation example. @silviuavram ([#771](https://github.com/stardust-ui/react/pull/771))
-- Fix highlighted selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726)) 
+- Fix highlighted selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726))
 
 <!--------------------------------[ v0.18.0 ]------------------------------- -->
 ## [v0.18.0](https://github.com/stardust-ui/react/tree/v0.18.0) (2019-01-24)

packages/react/src/components/Input/Input.tsx

@@ -134,6 +134,7 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
                   as: 'input',
                   type,
                   value,
+                  className: `${Input.className}__input`,
                   styles: styles.input,
                   onChange: this.handleChange,
                 },

packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts

@@ -14,10 +14,7 @@ const dropdownSearchInputStyles: ComponentSlotStylesInput<
   input: ({ variables: v }): ICSSInJSStyle => ({
     width: '100%',
     backgroundColor: v.backgroundColor,
-
-    ':focus': {
-      borderBottomColor: 'transparent',
-    },
+    borderWidth: 0,
   }),
 }
 

packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts

@@ -10,21 +10,24 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownProps & DropdownState, Dr
     display: 'flex',
     flexWrap: 'wrap',
     outline: 0,
-    border: 0,
     backgroundColor: v.backgroundColor,
-    borderBottom: v.borderBottom,
+    boxSizing: 'border-box',
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    borderWidth: v.borderWidth,
     borderRadius: v.borderRadius,
     color: v.color,
     width: p.fluid ? '100%' : v.width,
     position: 'relative',
-    ...(p.focused && { borderColor: v.borderColorFocus }),
+    ...(p.focused && { borderBottomColor: v.borderColorFocus }),
   }),
 
   selectedItems: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'flex',
     flexWrap: 'wrap',
     overflowY: 'auto',
     maxHeight: v.selectedItemsMaxHeight,
+    width: '100%',
     ...(p.toggleIndicator && { paddingRight: v.toggleIndicatorSize }),
   }),
 
@@ -38,12 +41,14 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownProps & DropdownState, Dr
       margin: '0',
       justifyContent: 'left',
       padding: v.comboboxPaddingButton,
-      ...transparentColorStyle,
       height: pxToRem(30),
+      ...transparentColorStyle,
       ':hover': transparentColorStyle,
       ':focus': {
         ...transparentColorStyle,
         ':after': {
+          top: '0',
+          bottom: '0',
           borderColor: 'transparent',
         },
         ':active': transparentColorStyle,

packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts

@@ -3,7 +3,7 @@ export interface DropdownVariables {
   backgroundColor: string
   borderColorFocus: string
   borderRadius: string
-  borderBottom: string
+  borderWidth: string
   color: string
   comboboxPaddingButton: string
   comboboxFlexBasis: string
@@ -24,9 +24,9 @@ const [_2px_asRem, _3px_asRem, _12px_asRem] = [2, 3, 12].map(v => pxToRem(v))
 
 export default (siteVars): DropdownVariables => ({
   backgroundColor: siteVars.gray10,
-  borderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`,
-  borderBottom: `${_2px_asRem} solid transparent`,
   borderColorFocus: siteVars.brand,
+  borderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`,
+  borderWidth: `0 0 ${pxToRem(2)} 0`,
   color: siteVars.bodyColor,
   comboboxPaddingButton: `0 ${_12px_asRem}`,
   comboboxFlexBasis: '50px',

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

@@ -15,8 +15,9 @@ const inputStyles: ComponentSlotStylesInput<InputProps, InputVariables> = {
   input: ({ props: p, variables: v }): ICSSInJSStyle => ({
     outline: 0,
     boxSizing: 'border-box',
-    border: v.border,
-    borderBottom: v.borderBottom,
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    borderWidth: v.borderWidth,
     borderRadius: v.borderRadius,
     color: v.fontColor,
     backgroundColor: v.backgroundColor,

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

@@ -2,9 +2,8 @@ import { pxToRem } from '../../../../lib'
 
 export interface InputVariables {
   backgroundColor: string
-  border: string | number
-  borderBottom: string
   borderRadius: string
+  borderWidth: string
   fontColor: string
   fontSize: string
   iconColor: string
@@ -20,9 +19,8 @@ export interface InputVariables {
 
 export default (siteVars): InputVariables => ({
   backgroundColor: siteVars.gray10,
-  border: 'none',
-  borderBottom: `${pxToRem(2)} solid transparent`,
   borderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`,
+  borderWidth: `0 0 ${pxToRem(2)} 0`,
 
   fontColor: siteVars.gray02,
   fontSize: siteVars.fontSizes.medium,
@@ -31,10 +29,10 @@ export default (siteVars): InputVariables => ({
   iconRight: pxToRem(2),
   iconColor: siteVars.bodyColor,
   iconLeft: pxToRem(6),
-  inputPaddingWithIconAtStart: `${pxToRem(6)} ${pxToRem(12)} ${pxToRem(6)} ${pxToRem(24)}`,
-  inputPaddingWithIconAtEnd: `${pxToRem(6)} ${pxToRem(24)} ${pxToRem(6)} ${pxToRem(12)}`,
+  inputPaddingWithIconAtStart: `${pxToRem(7)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(24)}`,
+  inputPaddingWithIconAtEnd: `${pxToRem(7)} ${pxToRem(24)} ${pxToRem(7)} ${pxToRem(12)}`,
 
-  inputPadding: `${pxToRem(6)} ${pxToRem(12)} ${pxToRem(6)} ${pxToRem(12)}`,
+  inputPadding: `${pxToRem(7)} ${pxToRem(12)}`,
   inputFocusBorderBottomColor: siteVars.brand,
   inputFocusBorderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`,
 })