Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

wrapping toggle in base and removing margin on hidden label

Browse Source
This commit is contained in:
Alex Windett 2017-01-11 17:12:30 +00:00
parent 6f48ec1d23
commit a5bb1f9dda
2 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/src/components/toggle/index.js
View File

@ -83,6 +83,13 @@ const StyledInput1 = styled.input`
} }
`; `;
/*
TODO: Remove !important - it is used to overirde a global style
*/
const StyledLabel = styled.label`
margin-bottom: 0 !important;
`;
const Toggle = ({ const Toggle = ({
checked, checked,
className, className,
@ -120,13 +127,13 @@ const Toggle = ({
}; };
return ( return (
<label <StyledLabel
htmlFor={customProps.id} htmlFor={customProps.id}
key={index} key={index}
> >
{InputVarients[`input_${index}`]} {InputVarients[`input_${index}`]}
<StyledText>{option.label}</StyledText> <StyledText>{option.label}</StyledText>
</label> </StyledLabel>
); );
})} })}
</StyledDiv> </StyledDiv>

37
ui/src/components/toggle/story.js
View File

@ -4,27 +4,34 @@ const {
storiesOf storiesOf
} = require('@kadira/storybook'); } = require('@kadira/storybook');
const Base = require('../base');
const Toggle = require('./'); const Toggle = require('./');
storiesOf('Toggle', module) storiesOf('Toggle', module)
.add('default', () => ( .add('default', () => (
<Toggle checked /> <Base>
<Toggle checked />
</Base>
)) ))
.add('checked', () => ( .add('checked', () => (
<Toggle <Base>
defaultChecked <Toggle
options={[ defaultChecked
{ options={[
label: 'Topology', {
checked: true label: 'Topology',
}, checked: true
{ },
label: 'List', {
checked: false label: 'List',
} checked: false
]} }
/> ]}
/>
</Base>
)) ))
.add('no props', () => ( .add('no props', () => (
<Toggle /> <Base>
<Toggle />
</Base>
)); ));