GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 16:51:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update styling for Knobs.Color + Form.Field + stories

Browse Source
This commit is contained in:
domyen 2019-02-07 15:37:05 -05:00
parent c1de1d4179
commit f2b8e42bb1
3 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
addons/knobs/src/components/types/Color.js
View File

@ -9,13 +9,17 @@ import { Form } from '@storybook/components';
const { Button } = Form;
const Swatch = styled.div({
const Swatch = styled.div(({ theme }) => ({
position: 'absolute',
top: 0,
bottom: 0,
right: 3,
width: 28,
});
top: '50%',
transform: 'translateY(-50%)',
left: 6,
width: 20,
height: 20,
boxShadow: `${theme.mainBorderColor} 0 0 0 1px inset`,
borderRadius: '1rem',
}));
const Popover = styled.div({
position: 'absolute',
zIndex: '2',

9
lib/components/src/form/field/field.js
View File

@ -3,16 +3,13 @@ import PropTypes from 'prop-types';
import { styled } from '@storybook/theming';
const Wrapper = styled.label(({ theme }) => ({
width: '100%',
boxSizing: 'border-box',
display: 'flex',
margin: '8px 0',
borderBottom: `1px solid ${theme.mainBorderColor}`,
padding: '0 8px 8px 8px',
margin: '0 15px',
padding: '8px 0',
'&:last-child': {
borderBottom: '0 none',
paddingBottom: 0,
marginBottom: '3rem',
},
}));

31
lib/components/src/form/form.stories.js
View File

@ -34,15 +34,22 @@ storiesOf('Basics|Form/Select', module)
</Spaced>
))
.add('validations', () => (
<Spaced>
{['error', 'warn', 'valid', null].map(valid => (
<Select key={valid} value="val2" onChange={action('onChange')} size="100%" valid={valid}>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</Select>
))}
</Spaced>
<div>
<Spaced>
{['error', 'warn', 'valid', null].map(valid => (
<Select key={valid} value="val2" onChange={action('onChange')} size="100%" valid={valid}>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</Select>
))}
</Spaced>
<Select value="val2" onChange={action('onChange')} size="100%" disabled>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</Select>
</div>
))
.add('alignment', () => (
<Spaced>
@ -94,7 +101,7 @@ storiesOf('Basics|Form/Textarea', module)
<Spaced>
{['auto', 'flex', '100%'].map(size => (
<Flexed key={size}>
<Textarea defaultValue="text" size={size} />
<Textarea defaultValue="textarea" size={size} />
</Flexed>
))}
</Spaced>
@ -103,7 +110,7 @@ storiesOf('Basics|Form/Textarea', module)
<Spaced>
{['error', 'warn', 'valid', null].map(valid => (
<Flexed key={valid}>
<Textarea defaultValue="text" size="100%" valid={valid} />
<Textarea defaultValue="textarea" size="100%" valid={valid} />
</Flexed>
))}
</Spaced>
@ -112,7 +119,7 @@ storiesOf('Basics|Form/Textarea', module)
<Spaced>
{['end', 'center', 'start'].map(align => (
<Flexed key={align}>
<Textarea defaultValue="text" size="100%" align={align} />
<Textarea defaultValue="textarea" size="100%" align={align} />
</Flexed>
))}
</Spaced>