wrapping toggle in base and removing margin on hidden label

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

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 = ({
checked,
className,
@ -120,13 +127,13 @@ const Toggle = ({
};
return (
<label
<StyledLabel
htmlFor={customProps.id}
key={index}
>
{InputVarients[`input_${index}`]}
<StyledText>{option.label}</StyledText>
</label>
</StyledLabel>
);
})}
</StyledDiv>

View File

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