updating option select component

This commit is contained in:
Alex Windett 2016-12-14 17:22:09 +00:00
parent 2ee92dfb52
commit 294a9e26a9
2 changed files with 60 additions and 23 deletions

View File

@ -1,11 +1,17 @@
const fns = require('../../shared/functions');
const composers = require('../../shared/composers');
const React = require('react');
const Styled = require('styled-components');
const {
rndId
rndId,
remcalc
} = fns;
const {
pseudoEl
} = composers;
const {
default: styled
} = Styled;
@ -15,8 +21,37 @@ const StyledLabel = styled.div`
color: #464646;
`;
const SelectWrapper = styled.div`
position: relative;
display: inline-block;
&:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
${pseudoEl({
top: '25px',
right: '20px'
})}
}
`;
const StyledSelect = styled.select`
color: #464646;
font-size:16px;
min-width: ${remcalc(288)};
min-height: ${remcalc(54)};
border-radius: 4px;
padding-left: ${remcalc(20)};
background-color: #FFFFFF;
box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
border: solid 1px #D8D8D8;
-webkit-appearance: none;
&:before {
${pseudoEl()}
}
/* select[multiple] is valid CSS syntax - not added to lint library yet */
/* stylelint-disable */
@ -25,9 +60,9 @@ const StyledSelect = styled.select`
padding-left: 0;
padding-right: 0;
& :global option {
padding-left: 15px;
padding-right: 15px;
& option {
padding-left: ${remcalc(15)};
padding-right: ${remcalc(15)};
width: 100%;
}
}
@ -51,19 +86,22 @@ const Select = ({
<StyledLabel htmlFor={id}>
{label}
</StyledLabel>
<StyledSelect
autoFocus={autoFocus}
disabled={disabled}
form={form}
id={id}
label={label}
multiple={multiple}
name={name}
required={required}
selected={selected}
>
{children}
</StyledSelect>
<SelectWrapper>
<StyledSelect
autoFocus={autoFocus}
disabled={disabled}
form={form}
id={id}
label={label}
multiple={multiple}
name={name}
required={required}
selected={selected}
>
{children}
</StyledSelect>
</SelectWrapper>
</div>
);
};

View File

@ -223,11 +223,10 @@ storiesOf('RangeSlider', module)
storiesOf('Select', module)
.add('Default', () => (
<Select label='example select'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>Apple</option>
<option>Banana</option>
<option>Pear</option>
<option>Orange</option>
</Select>
))
.add('multiple', () => (