Merge pull request #1463 from meriadec/polish/select

Correct styling for Select borders, add isRight/isLeft

src/components/base/InputCurrency/index.js

@@ -187,6 +187,7 @@ class InputCurrency extends PureComponent<Props, State> {
           renderOption={this.renderOption}
           renderValue={this.renderValue}
           fakeFocusRight={isFocused}
+          isRight
         />
       </Currencies>
     )

src/components/base/Select/createStyles.js

@@ -7,10 +7,14 @@ export default ({
   width,
   minWidth,
   small,
+  isRight,
+  isLeft,
 }: {
   width: number,
   minWidth: number,
   small: boolean,
+  isRight: boolean,
+  isLeft: boolean,
 }) => ({
   control: (styles: Object, { isFocused }: Object) => ({
     ...styles,
@@ -19,6 +23,8 @@ export default ({
     ...ff('Open Sans|SemiBold'),
     height: small ? 34 : 40,
     minHeight: 'unset',
+    borderRadius: isRight ? '0 4px 4px 0' : isLeft ? '4px 0 0 4px' : 4,
+    borderColor: colors.fog,
     backgroundColor: 'white',
 
     ...(isFocused

src/components/base/Select/index.js

@@ -21,6 +21,8 @@ type Props = {
   placeholder: string,
   isClearable: boolean,
   isDisabled: boolean,
+  isRight: boolean,
+  isLeft: boolean,
   isLoading: boolean,
   isSearchable: boolean,
   small: boolean,
@@ -52,6 +54,8 @@ class Select extends PureComponent<Props> {
       isSearchable,
       isDisabled,
       isLoading,
+      isRight,
+      isLeft,
       placeholder,
       options,
       renderOption,
@@ -69,7 +73,7 @@ class Select extends PureComponent<Props> {
         classNamePrefix="select"
         options={options}
         components={createRenderers({ renderOption, renderValue })}
-        styles={createStyles({ width, minWidth, small })}
+        styles={createStyles({ width, minWidth, small, isRight, isLeft })}
         placeholder={placeholder}
         isDisabled={isDisabled}
         isLoading={isLoading}