Skip to content

Commit

Permalink
feat: add bordered variant for buttons (#27)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChristopherChudzicki
ChristopherChudzicki authored Dec 20, 2024
1 parent 8375c8a commit d04887c
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 36 deletions.
65 changes: 39 additions & 26 deletions src/components/Button/ActionButton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const VARIANTS = enumValues<ActionButtonProps["variant"]>({
primary: true,
secondary: true,
tertiary: true,
bordered: true,
text: true,
unstable_noBorder: true,
unstable_inverted: true,
Expand Down Expand Up @@ -86,6 +87,9 @@ export const VariantsAndEdge: Story = {
<ActionButton {...args} edge="none" variant="tertiary">
{ICONS.DeleteIcon}
</ActionButton>
<ActionButton {...args} edge="none" variant="bordered">
{ICONS.DeleteIcon}
</ActionButton>
<ActionButton {...args} edge="none" variant="text">
{ICONS.DeleteIcon}
</ActionButton>
Expand All @@ -100,6 +104,9 @@ export const VariantsAndEdge: Story = {
<ActionButton {...args} edge="rounded" variant="tertiary">
{ICONS.DeleteIcon}
</ActionButton>
<ActionButton {...args} edge="rounded" variant="bordered">
{ICONS.DeleteIcon}
</ActionButton>
<ActionButton {...args} edge="rounded" variant="text">
{ICONS.DeleteIcon}
</ActionButton>
Expand All @@ -114,6 +121,9 @@ export const VariantsAndEdge: Story = {
<ActionButton {...args} edge="circular" variant="tertiary">
{ICONS.DeleteIcon}
</ActionButton>
<ActionButton {...args} edge="circular" variant="bordered">
{ICONS.DeleteIcon}
</ActionButton>
<ActionButton {...args} edge="circular" variant="text">
{ICONS.DeleteIcon}
</ActionButton>
Expand All @@ -123,6 +133,35 @@ export const VariantsAndEdge: Story = {
tags: ["main"],
}

/**
* `ActionButtonLink` is styled as a `ActionButton` that renders an anchor tag.
*
* To use a custom link component (E.g. `Link` from `react-router` or `next/link`),
* pass it as the `Component` prop. Alternatively, customize the project-wide
* default link adapter via [Theme's LinkAdapter](../?path=/docs/smoot-design-themeprovider--docs)
*/
export const Links: Story = {
render: () => (
<Stack direction="row" gap={2} sx={{ my: 2 }}>
<ActionButtonLink href="#fake" variant="primary">
{ICONS.DeleteIcon}
</ActionButtonLink>
<ActionButtonLink href="#fake" variant="secondary">
{ICONS.DeleteIcon}
</ActionButtonLink>
<ActionButtonLink href="#fake" variant="tertiary">
{ICONS.DeleteIcon}
</ActionButtonLink>
<ActionButtonLink href="#fake" variant="bordered">
{ICONS.DeleteIcon}
</ActionButtonLink>
<ActionButtonLink href="#fake" variant="text">
{ICONS.DeleteIcon}
</ActionButtonLink>
</Stack>
),
}

export const Showcase: Story = {
render: (args) => (
<Grid container sx={{ maxWidth: "750px" }} rowGap={2}>
Expand Down Expand Up @@ -158,29 +197,3 @@ export const Showcase: Story = {
</Grid>
),
}

/**
* `ActionButtonLink` is styled as a `ActionButton` that renders an anchor tag.
*
* To use a custom link component (E.g. `Link` from `react-router` or `next/link`),
* pass it as the `Component` prop. Alternatively, customize the project-wide
* default link adapter via [Theme's LinkAdapter](../?path=/docs/smoot-design-themeprovider--docs)
*/
export const Links: Story = {
render: () => (
<Stack direction="row" gap={2} sx={{ my: 2 }}>
<ActionButtonLink href="#fake" variant="primary">
{ICONS.DeleteIcon}
</ActionButtonLink>
<ActionButtonLink href="#fake" variant="secondary">
{ICONS.DeleteIcon}
</ActionButtonLink>
<ActionButtonLink href="#fake" variant="tertiary">
{ICONS.DeleteIcon}
</ActionButtonLink>
<ActionButtonLink href="#fake" variant="text">
{ICONS.DeleteIcon}
</ActionButtonLink>
</Stack>
),
}
13 changes: 13 additions & 0 deletions src/components/Button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const VARIANTS = enumValues<ButtonProps["variant"]>({
primary: true,
secondary: true,
tertiary: true,
bordered: true,
text: true,
unstable_noBorder: true,
unstable_inverted: true,
Expand Down Expand Up @@ -77,6 +78,9 @@ export const VariantsAndEdge: Story = {
<Button edge="none" variant="tertiary" {...args}>
Tertiary
</Button>
<Button edge="none" variant="bordered" {...args}>
Bordered
</Button>
<Button edge="none" variant="text" {...args}>
Text
</Button>
Expand All @@ -91,6 +95,9 @@ export const VariantsAndEdge: Story = {
<Button edge="rounded" variant="tertiary" {...args}>
Tertiary
</Button>
<Button edge="rounded" variant="bordered" {...args}>
Bordered
</Button>
<Button edge="rounded" variant="text" {...args}>
Text
</Button>
Expand All @@ -105,6 +112,9 @@ export const VariantsAndEdge: Story = {
<Button edge="circular" variant="tertiary" {...args}>
Tertiary
</Button>
<Button edge="circular" variant="bordered" {...args}>
Bordered
</Button>
<Button edge="circular" variant="text" {...args}>
Text
</Button>
Expand Down Expand Up @@ -193,6 +203,9 @@ export const Links: Story = {
<ButtonLink href="#fake" variant="tertiary">
Link
</ButtonLink>
<ButtonLink href="#fake" variant="bordered">
Link
</ButtonLink>
<ButtonLink href="#fake" variant="text">
Link
</ButtonLink>
Expand Down
28 changes: 18 additions & 10 deletions src/components/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ type ButtonVariant =
| "secondary"
| "tertiary"
| "text"
| "bordered"
| "unstable_noBorder"
| "unstable_inverted"
| "unstable_success"
Expand Down Expand Up @@ -107,7 +108,7 @@ const buttonStyles = (props: ButtonStyleProps & { theme: Theme }) => {
...props,
}
const { colors } = theme.custom
const hasBorder = variant === "secondary"
const hasBorder = variant === "secondary" || variant === "bordered"
return css([
{
color: theme.palette.text.primary,
Expand Down Expand Up @@ -151,11 +152,6 @@ const buttonStyles = (props: ButtonStyleProps & { theme: Theme }) => {
boxShadow: "none",
},
},
hasBorder && {
backgroundColor: "transparent",
borderColor: "currentcolor",
borderStyle: "solid",
},
variant === "unstable_success" && {
backgroundColor: colors.darkGreen,
color: colors.white,
Expand All @@ -172,13 +168,11 @@ const buttonStyles = (props: ButtonStyleProps & { theme: Theme }) => {
boxShadow: "none",
},
},
hasBorder && {
variant === "secondary" && {
color: colors.red,
backgroundColor: "transparent",
borderColor: "currentcolor",
borderStyle: "solid",
},
variant === "secondary" && {
color: colors.red,
":hover:not(:disabled)": {
// brightRed at 0.06 alpha
backgroundColor: "rgba(255, 20, 35, 0.06)",
Expand All @@ -199,6 +193,20 @@ const buttonStyles = (props: ButtonStyleProps & { theme: Theme }) => {
color: colors.silverGray,
},
},
variant === "bordered" && {
backgroundColor: colors.white,
color: colors.silverGrayDark,
border: `1px solid ${colors.silverGrayLight}`,
":hover:not(:disabled)": {
backgroundColor: colors.lightGray1,
color: colors.darkGray2,
},
":disabled": {
backgroundColor: colors.lightGray2,
border: `1px solid ${colors.lightGray2}`,
color: colors.silverGrayDark,
},
},
variant === "unstable_noBorder" && {
backgroundColor: colors.white,
color: colors.darkGray2,
Expand Down

0 comments on commit d04887c

Please sign in to comment.