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

Adjust Radio and Checkbox styles

Browse Source
This commit is contained in:
domyen 2020-06-20 17:53:31 -04:00
parent bfd714ab9c
commit 26f556908e
2 changed files with 81 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
lib/components/src/controls/options/Checkbox.tsx
View File

@ -1,31 +1,42 @@
import React, { FC, ChangeEvent, useState } from 'react';
import React, { FC, ChangeEvent, useState, Fragment } from 'react';
import { styled } from '@storybook/theming';
import { ControlProps, OptionsMultiSelection, NormalizedOptionsConfig } from '../types';
import { selectedKeys, selectedValues } from './helpers';
const CheckboxesWrapper = styled.div<{ isInline: boolean }>(({ isInline }) =>
const Wrapper = styled.div<{ isInline: boolean }>(({ isInline }) =>
isInline
? {
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
'> * + *': {
marginLeft: 10,
alignItems: 'flex-start',
label: {
display: 'inline-flex',
marginRight: 15,
},
}
: {
label: {
display: 'flex',
},
}
: {}
);
const CheckboxFieldset = styled.fieldset({
border: 0,
padding: 0,
margin: 0,
});
const Text = styled.span({});
const CheckboxLabel = styled.label({
padding: '3px 0 3px 5px',
lineHeight: '18px',
display: 'inline-block',
const Label = styled.label({
lineHeight: '20px',
alignItems: 'center',
marginBottom: 8,
'&:last-child': {
marginBottom: 0,
},
input: {
margin: 0,
marginRight: 6,
},
});
type CheckboxConfig = NormalizedOptionsConfig & { isInline: boolean };
@ -53,25 +64,23 @@ export const CheckboxControl: FC<CheckboxProps> = ({
};
return (
<CheckboxFieldset>
<CheckboxesWrapper isInline={isInline}>
{Object.keys(options).map((key: string) => {
const id = `${name}-${key}`;
return (
<div key={id}>
<input
type="checkbox"
id={id}
name={name}
value={key}
onChange={handleChange}
checked={selected?.includes(key)}
/>
<CheckboxLabel htmlFor={id}>{key}</CheckboxLabel>
</div>
);
})}
</CheckboxesWrapper>
</CheckboxFieldset>
<Wrapper isInline={isInline}>
{Object.keys(options).map((key: string) => {
const id = `${name}-${key}`;
return (
<Label key={id} htmlFor={id}>
<input
type="checkbox"
id={id}
name={name}
value={key}
onChange={handleChange}
checked={selected?.includes(key)}
/>
<Text>{key}</Text>
</Label>
);
})}
</Wrapper>
);
};

51
lib/components/src/controls/options/Radio.tsx
View File

@ -3,23 +3,46 @@ import { styled } from '@storybook/theming';
import { ControlProps, OptionsSingleSelection, NormalizedOptionsConfig } from '../types';
import { selectedKey } from './helpers';
const RadiosWrapper = styled.div<{ isInline: boolean }>(({ isInline }) =>
const Wrapper = styled.div<{ isInline: boolean }>(({ isInline }) =>
isInline
? {
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
'> * + *': {
marginLeft: 10,
alignItems: 'flex-start',
label: {
display: 'inline-flex',
marginRight: 15,
},
}
: {
label: {
display: 'flex',
},
}
: {}
);
const RadioLabel = styled.label({
padding: '3px 0 3px 5px',
lineHeight: '18px',
display: 'inline-block',
const Fieldset = styled.fieldset({
border: 0,
padding: 0,
margin: 0,
});
const Text = styled.span({});
const Label = styled.label({
lineHeight: '20px',
alignItems: 'center',
marginBottom: 8,
'&:last-child': {
marginBottom: 0,
},
input: {
margin: 0,
marginRight: 6,
},
});
type RadioConfig = NormalizedOptionsConfig & { isInline: boolean };
@ -27,11 +50,11 @@ type RadioProps = ControlProps<OptionsSingleSelection> & RadioConfig;
export const RadioControl: FC<RadioProps> = ({ name, options, value, onChange, isInline }) => {
const selection = selectedKey(value, options);
return (
<RadiosWrapper isInline={isInline}>
<Wrapper isInline={isInline}>
{Object.keys(options).map((key) => {
const id = `${name}-${key}`;
return (
<div key={id}>
<Label key={id} htmlFor={id}>
<input
type="radio"
id={id}
@ -40,10 +63,10 @@ export const RadioControl: FC<RadioProps> = ({ name, options, value, onChange, i
onChange={(e) => onChange(name, options[e.currentTarget.value])}
checked={key === selection}
/>
<RadioLabel htmlFor={id}>{key}</RadioLabel>
</div>
<Text>{key}</Text>
</Label>
);
})}
</RadiosWrapper>
</Wrapper>
);
};