Skip to content

Commit

Permalink
feat: Support additional sizes for tertiary button (#57)
Browse files Browse the repository at this point in the history
  • Loading branch information
ksk5280 authored Apr 26, 2021
1 parent 0ed6a30 commit 8818f70
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 11 deletions.
14 changes: 13 additions & 1 deletion src/components/Button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,15 @@ export default {
size: { control: false },
children: { control: false },
},
parameters: {
// To better view the hover state
backgrounds: { default: "white" },
},
} as Meta<ButtonProps>;

export function Buttons(args: ButtonProps) {
return (
<div css={Css.dg.$}>
<div css={Css.dg.flexColumn.childGap2.$}>
<div>
<h2>Primary</h2>
<div>
Expand Down Expand Up @@ -81,10 +85,18 @@ export function Buttons(args: ButtonProps) {
<Button {...args} variant="tertiary" label="Tertiary Button" />
<Button {...args} variant="tertiary" disabled label="Disabled" />
</div>
<div>
<Button {...args} size="md" variant="tertiary" label="Tertiary Button" />
<Button {...args} size="md" variant="tertiary" disabled label="Disabled" />
</div>
<div>
<Button {...args} icon="plus" variant="tertiary" label="Tertiary Button" />
<Button {...args} icon="plus" variant="tertiary" disabled label="Disabled" />
</div>
<div>
<Button {...args} icon="plus" size="md" variant="tertiary" label="Tertiary Button" />
<Button {...args} icon="plus" size="md" variant="tertiary" disabled label="Disabled" />
</div>
</div>

<div>
Expand Down
8 changes: 0 additions & 8 deletions src/components/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,6 @@ export function Button({ onClick: onPress, disabled: isDisabled, ...otherProps }
}

function getButtonStyles(variant: ButtonVariant, size: ButtonSize) {
// Handling tertiary separately as it only supports a single size button. The size it supports does not match styles of other buttons.
if (variant === "tertiary") {
return {
...variantStyles.tertiary,
baseStyles: { ...variantStyles.tertiary.baseStyles, ...Css.hPx(40).px1.$ },
};
}

return {
...variantStyles[variant],
baseStyles: { ...variantStyles[variant].baseStyles, ...sizeStyles[size] },
Expand Down
2 changes: 1 addition & 1 deletion src/components/IconButton.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default {
autoFocus: { control: false },
},
parameters: {
// To better view the icon hover state
// To better view the hover state
backgrounds: { default: "white" },
},
} as Meta<IconButtonProps>;
Expand Down
2 changes: 1 addition & 1 deletion src/components/NavLink.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default {
icon: { control: { type: "select", options: Object.keys(Icons) } },
},
parameters: {
// To better view the icon hover state
// To better view the hover state
backgrounds: { default: "white" },
},
} as Meta;
Expand Down

0 comments on commit 8818f70

Please sign in to comment.