Better styling for unsearchable Select

src/components/base/Select/Triangles.js

@@ -0,0 +1,29 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+
+const UpTriangle = styled.div`
+  width: 0;
+  height: 0;
+  border-left: ${p => p.size}px solid transparent;
+  border-right: ${p => p.size}px solid transparent;
+  border-bottom: ${p => p.size}px solid ${p => p.theme.colors[p.color]};
+`
+
+const DownTriangle = styled.div`
+  width: 0;
+  height: 0;
+  border-left: ${p => p.size}px solid transparent;
+  border-right: ${p => p.size}px solid transparent;
+  border-top: ${p => p.size}px solid ${p => p.theme.colors[p.color]};
+`
+
+export default ({ size = 5, color = 'mouse' }: { size: number, color: string }) => (
+  <Box flow={1}>
+    <UpTriangle size={size} color={color} />
+    <DownTriangle size={size} color={color} />
+  </Box>
+)

src/components/base/Select/index.js

@@ -11,6 +11,8 @@ import Box from 'components/base/Box'
 import Input from 'components/base/Input'
 import Search from 'components/base/Search'
 
+import Triangles from './Triangles'
+
 type Props = {
   items: Array<Object>,
   itemToString: Function,
@@ -34,8 +36,6 @@ const TriggerBtn = styled(Box).attrs({
   width: 100%;
   color: ${p => p.theme.colors.steel};
   background: ${p => p.theme.colors.white};
-  border-bottom-left-radius: ${p => (p.isOpen ? 0 : '')};
-  border-bottom-right-radius: ${p => (p.isOpen ? 0 : '')};
   &:focus {
     outline: none;
     box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
@@ -99,6 +99,7 @@ class Select extends PureComponent<Props> {
       fuseOptions,
       highlight,
       renderHighlight,
+      renderSelected,
       onChange,
     } = this.props
 
@@ -113,19 +114,16 @@ class Select extends PureComponent<Props> {
           isOpen,
           inputValue,
           openMenu,
+          selectedItem,
           ...downshiftProps
         }) => (
           <Container {...getRootProps({ refKey: 'innerRef' })}>
             {searchable ? (
-              <Input
+              <Input keepEvent {...getInputProps({ placeholder: 'Chess?' })} onClick={openMenu} />
-                keepEvent
-                {...getInputProps({ placeholder: 'Chess?' })}
-                isOpen={isOpen}
-                onClick={openMenu}
-              />
             ) : (
-              <TriggerBtn isOpen={isOpen} {...getButtonProps()} tabIndex={0}>
+              <TriggerBtn {...getButtonProps()} tabIndex={0} horizontal align="center" flow={2}>
-                lablala
+                <Box grow>{renderSelected(selectedItem)}</Box>
+                <Triangles />
               </TriggerBtn>
             )}
             {isOpen &&

src/components/base/Select/stories.js

@@ -58,6 +58,7 @@ stories.add('basic', () => (
       <Select
         items={itemsChessPlayers}
         itemToString={item => (item ? item.name : '')}
+        renderSelected={item => (item ? item.name : 'Choose a chess player')}
         onChange={onChange}
       />
     )}