mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
wrapping toggle in base and removing margin on hidden label
This commit is contained in:
parent
6f48ec1d23
commit
a5bb1f9dda
@ -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>
|
||||
|
@ -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>
|
||||
));
|
Loading…
Reference in New Issue
Block a user