Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update design system #255

Merged
merged 11 commits into from
Apr 1, 2021
Merged

Update design system #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
715a2bb
update storybook to 6.2
domyen Mar 31, 2021
249b132
remove unused Input states
domyen Mar 31, 2021
164c06c
fix error state and update code styling from Chromatic
domyen Mar 31, 2021
de4ebe9
cleanup code comment
domyen Mar 31, 2021
514c9a4
remove unused Select styles
domyen Mar 31, 2021
d9e1cd1
remove unused Textarea styles
domyen Mar 31, 2021
d2d8953
clean up stories
domyen Mar 31, 2021
20cc00e
add comment icons
domyen Mar 31, 2021
6bd0a46
use Template as the naming convenction
domyen Mar 31, 2021
bf2c841
update Clipboard Input
domyen Apr 1, 2021
64d07ee
be explicit about Input font-size
domyen Apr 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,14 @@
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"@babel/preset-typescript": "^7.10.1",
"@storybook/addon-a11y": "^6.1.0",
"@storybook/addon-actions": "^6.1.0",
"@storybook/addon-docs": "^6.1.0",
"@storybook/addon-essentials": "^6.1.0",
"@storybook/addon-storysource": "^6.1.0",
"@storybook/addon-a11y": "^6.2.0",
"@storybook/addon-actions": "^6.2.0",
"@storybook/addon-docs": "^6.2.0",
"@storybook/addon-essentials": "^6.2.0",
"@storybook/addon-storysource": "^6.2.0",
"@storybook/eslint-config-storybook": "^2.4.0",
"@storybook/linter-config": "^2.5.0",
"@storybook/react": "^6.1.0",
"@storybook/react": "^6.2.0",
"@types/fs-extra": "^9.0.1",
"@types/styled-components": "^5.1.0",
"auto": "^9.50.1",
Expand Down
9 changes: 5 additions & 4 deletions src/components/Checkbox.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ export default {
component: Checkbox,
};

export const Basic = (args) => <Checkbox {...args} />;
Basic.args = { label: 'Basic', hideLabel: false };
export const Template = (args) => <Checkbox {...args} />;
Template.args = { label: 'Basic', hideLabel: false };
Template.story = { name: 'Playground' };

export const All = () => (
<form>
Expand All @@ -35,8 +36,8 @@ export const All = () => (
</form>
);

export const Unchecked = Basic.bind();
export const Unchecked = Template.bind();
Unchecked.args = { id: 'Unchecked', label: 'Cats', hideLabel: true };

export const Checked = Basic.bind();
export const Checked = Template.bind();
Checked.args = { id: 'Checked', label: 'Cats', hideLabel: true, checked: true };
61 changes: 21 additions & 40 deletions src/components/Input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { TooltipMessage } from './tooltip/TooltipMessage';
const Label = styled.label`
font-weight: ${props => props.appearance !== 'code' && typography.weight.bold};
font-family: ${props => props.appearance === 'code' && typography.type.code };
font-size: ${props => props.appearance === 'code' ? typography.size.s1 : typography.size.s2 }px;
font-size: ${props => props.appearance === 'code' ? typography.size.s1 - 1 : typography.size.s2 }px;
line-height: ${props => props.appearance === 'code' ? 16 : 20 }px;
`;

Expand Down Expand Up @@ -102,51 +102,31 @@ const InputWrapper = styled.div`
${InputEl} {
position: relative;
${props => getStackLevelStyling(props)}

background: ${color.lightest};
color: ${color.darkest};
font-family: ${props => props.appearance === 'code' && typography.type.code };
font-size: ${props => props.appearance === 'code' ? typography.size.s1 : typography.size.s2 }px;
font-size: ${typography.size.s2}px;
line-height: 20px;
padding: 10px 15px; //40px tall
box-shadow: ${color.border} 0 0 0 1px inset;
&:focus { box-shadow: ${color.secondary} 0 0 0 1px inset; }

&:focus { box-shadow: ${color.primary} 0 0 0 1px inset; }

${props => props.appearance === 'secondary' && css`
box-shadow: ${color.border} 0 0 0 1px inset;

&:focus { box-shadow: ${color.secondary} 0 0 0 1px inset; }
`}

${props => props.appearance === 'tertiary' && css`
padding: 0;
border: none;
box-shadow: none;
background: none;

&:focus { box-shadow: none !important; }
`}

${props => props.appearance === 'pill' && css`
font-size: ${typography.size.s1}px;
line-height: 16px;
padding: 6px 12px; //28px tall
border-radius: 3em;
background: transparent;

box-shadow: ${color.medium} 0 0 0 1px inset;

&:focus { box-shadow: ${color.secondary} 0 0 0 1px inset; }
`}

${props => props.appearance === 'code' && css`
font-size: ${typography.size.s2 -1 }px;
font-size: ${typography.size.s1 - 1}px;
line-height: 16px;
font-family: ${typography.type.code};
border-radius: 2px;
background: rgba(0,0,0,.05);
padding: 3px 6px;

&:focus { box-shadow: ${color.secondary} 0 0 0 1px inset; }
border-radius: ${spacing.borderRadius.small}px;
background: ${color.lightest};
padding: 8px 10px;
`}
}

Expand All @@ -161,12 +141,16 @@ const InputWrapper = styled.div`
transition: all 150ms ease-out;
position: absolute;
top: 50%;
font-size: ${props.appearance === 'pill' ? '12px' : '14px'};
${props.appearance === 'pill' || props.appearance === 'code' ? css`
font-size: ${typography.size.s1}px;
` : css `
font-size: ${typography.size.s2}px;
`}
height: 1em;
width: 1em;
margin-top: -.525em;
z-index: 3;
${props.appearance === 'pill' ? css`
${props.appearance === 'pill' || props.appearance === 'code' ? css`
left: 10px;
` : css `
left: ${props.appearance === 'tertiary' ? 0 : `15px` };
Expand All @@ -187,18 +171,15 @@ const InputWrapper = styled.div`
${InputEl} {
padding-left: 40px;

${props.appearance === 'pill' && css` padding-left: 30px; `};
${props.appearance === 'tertiary' && css` padding-left: 25px; `};
${(props.appearance === 'pill' || props.appearance === 'code') && css` padding-left: 30px; `};
}
`}

${props => props.error && css`
${props.appearance !== 'tertiary' && css`
${InputEl} {
box-shadow: ${color.negative} 0 0 0 1px inset;
&:focus { box-shadow: ${color.negative} 0 0 0 1px inset !important; }
}
`};
${InputEl} {
box-shadow: ${color.negative} 0 0 0 1px inset;
&:focus { box-shadow: ${color.negative} 0 0 0 1px inset !important; }
}

svg {
animation: ${jiggle} 700ms ease-out;
Expand Down Expand Up @@ -357,7 +338,7 @@ export const PureInput = forwardRef(
PureInput.propTypes = {
id: PropTypes.string.isRequired,
value: PropTypes.string,
appearance: PropTypes.oneOf(['default', 'secondary', 'tertiary', 'pill', 'code']),
appearance: PropTypes.oneOf(['default', 'pill', 'code']),
errorTooltipPlacement: PropTypes.oneOf(validTooltipPlacements),
stackLevel: PropTypes.oneOf(['top', 'middle', 'bottom']),
label: PropTypes.string.isRequired,
Expand Down
30 changes: 12 additions & 18 deletions src/components/Input.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,16 @@ export default {
component: UnstyledInput,
};

export const Basic = (args) => <Input {...args} />;
Basic.args = {
export const Template = (args) => <Input {...args} />;
Template.args = {
id: 'Basic',
label: 'label',
value: 'value',
appearance: 'pill',
orientation: 'horizontal',
hideLabel: false,
};
Template.story = { name: 'Playground' };

const Form = styled.form`
padding: 3em 12em;
Expand Down Expand Up @@ -161,18 +162,6 @@ export const Default = () => (
</DarkForm>
);

export const Secondary = () => (
<Form>
<All appearance="secondary" />
</Form>
);

export const Tertiary = () => (
<DarkForm>
<All appearance="tertiary" />
</DarkForm>
);

export const Stacked = () => (
<Form>
<UnstyledInput
Expand All @@ -182,7 +171,6 @@ export const Stacked = () => (
stackLevel="top"
onChange={onChange}
error="There's a snake in my boots"
appearance="secondary"
/>
<UnstyledInput
id="stacked-2"
Expand All @@ -194,7 +182,6 @@ export const Stacked = () => (
onChange={onChange}
icon="key"
type="password"
appearance="secondary"
/>
<UnstyledInput
id="stacked-3"
Expand All @@ -203,7 +190,6 @@ export const Stacked = () => (
stackLevel="middle"
hideLabel
onChange={onChange}
appearance="secondary"
/>
<UnstyledInput
id="stacked-4"
Expand All @@ -214,7 +200,6 @@ export const Stacked = () => (
onChange={onChange}
icon="key"
error="There's a snake in my boots"
appearance="secondary"
/>
</Form>
);
Expand Down Expand Up @@ -242,6 +227,15 @@ export const Code = () => (
onChange={onChange}
/>
<Input id="Code" value="Code" label="Code" hideLabel appearance="code" onChange={onChange} />
<Input
id="Code"
value="Code"
label="Code"
icon="link"
hideLabel
appearance="code"
onChange={onChange}
/>
<Input
id="Code-with-error"
placeholder="Code"
Expand Down
9 changes: 5 additions & 4 deletions src/components/Radio.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ export default {
component: Radio,
};

export const Basic = (args) => <Radio {...args} />;
Basic.args = { label: 'label', hideLabel: false };
export const Template = (args) => <Radio {...args} />;
Template.args = { label: 'label', hideLabel: false };
Template.story = { name: 'Playground' };

export const All = () => (
<form>
Expand All @@ -24,10 +25,10 @@ export const All = () => (
</form>
);

export const Unchecked = Basic.bind();
export const Unchecked = Template.bind();
Unchecked.args = { id: 'Mice', label: 'Mice', hideLabel: true, value: 'mice' };

export const Checked = Basic.bind();
export const Checked = Template.bind();
Checked.args = {
id: 'Dogs',
label: 'Dogs',
Expand Down
19 changes: 4 additions & 15 deletions src/components/Select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ const SelectWrapper = styled.span`
path {fill: ${color.mediumdark} }
}

${Selector} { box-shadow: ${color.border} 0 0 0 1px inset; }
${Selector}:focus { box-shadow: ${color.primary} 0 0 0 1px inset; }

${(props) =>
Expand All @@ -139,16 +140,7 @@ const SelectWrapper = styled.span`
color: ${color.darkest};
}

${(props) =>
props.appearance === 'secondary' &&
css`
${Selector} {
box-shadow: ${color.mediumlight} 0 0 0 1px inset;
}
${Selector}:focus {
box-shadow: ${color.secondary} 0 0 0 1px inset;
}
`}


${(props) =>
props.appearance === 'tertiary' &&
Expand All @@ -161,10 +153,7 @@ const SelectWrapper = styled.span`
background-color: transparent;
padding: 0 1.5em 0 0;
text-decoration: none;

&:focus {
box-shadow: none !important;
}
box-shadow: none;
}
&:before {
content: none;
Expand Down Expand Up @@ -285,7 +274,7 @@ Select.propTypes = {
id: PropTypes.string.isRequired,
options: PropTypes.arrayOf(PropTypes.shape(Option.propTypes)),
value: PropTypes.string,
appearance: PropTypes.oneOf(['default', 'secondary', 'tertiary']),
appearance: PropTypes.oneOf(['default', 'tertiary']),
label: PropTypes.string.isRequired,
hideLabel: PropTypes.bool,
error: PropTypes.string,
Expand Down
Loading