Skip to content

Commit

Permalink
feat: change to isOutline prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@artmsilva
artmsilva committed Mar 2, 2022
1 parent db361e0 commit 5b57d13
Show file tree
Hide file tree
Showing 7 changed files with 61 additions and 79 deletions.
2 changes: 1 addition & 1 deletion .storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
require("dotenv").config();

module.exports = {
stories: ["../ui/**/*.stories.@(ts|tsx|js|jsx)"],
stories: ["../ui/**/src/*.stories.@(ts|tsx|js|jsx)"],
addons: [
"@storybook/addon-essentials",
"@storybook/addon-interactions",
Expand Down
4 changes: 2 additions & 2 deletions app/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ function HomePage() {
<Checkbox checked={true} size="125" />
</HStack>
<HStack>
<Checkbox checked={true} style="fill" />
<Checkbox checked={true} style="outline" />
<Checkbox checked={true} />
<Checkbox checked={true} isOutline />
</HStack>
<HStack>
<Checkbox checked={true} />
Expand Down
4 changes: 2 additions & 2 deletions ui/alert-banner/src/AlertBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const AlertBannerTrigger = React.forwardRef<
return (
<StyledAlertBannerTrigger
ref={ref}
style="outline"
isOutline
icon="center"
variant="primary"
css={{
Expand Down Expand Up @@ -177,7 +177,7 @@ const AlertBannerRoot = React.forwardRef<HTMLDivElement, AlertBannerVariants>(
as="div"
icon="center"
variant="primary"
style="outline"
isOutline
css={{
alignSelf: "flex-start",
border: "none",
Expand Down
14 changes: 7 additions & 7 deletions ui/button/src/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ export const Button = styled("button", {
py: "$075",
},
},
style: {
outline: {
isOutline: {
true: {
background: "none",
border: "1px solid",
"@hover": {
Expand All @@ -73,7 +73,7 @@ export const Button = styled("button", {
},
},
},
fill: {},
false: {},
},
icon: {
center: {
Expand All @@ -96,7 +96,7 @@ export const Button = styled("button", {
defaultVariants: {
variant: "secondary",
size: "200",
style: "fill",
isOutline: false,
icon: "left",
},
compoundVariants: [
Expand All @@ -110,23 +110,23 @@ export const Button = styled("button", {
},
},
{
style: "outline",
isOutline: true,
variant: "primary",
css: {
background: "none",
color: theme.colors.primary,
},
},
{
style: "outline",
isOutline: true,
variant: "secondary",
css: {
background: "none",
color: theme.colors.secondary,
},
},
{
style: "outline",
isOutline: true,
variant: "cta",
css: {
background: "none",
Expand Down
76 changes: 29 additions & 47 deletions ui/button/src/play.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ export default {
options: ["200", "250"],
defaultValue: "200",
},
style: {
options: ["outline", "fill"],
defaultValue: "fill",
isOutline: {
options: [true, false],
defaultValue: false,
},
icon: {
options: ["center", "left", "right", "none"],
Expand Down Expand Up @@ -72,33 +72,33 @@ const Template = ({ children, ...args }) => (
</Stack>

<Stack>
<Component {...args} style="fill" variant="primary">
<Component {...args} variant="primary">
{children}
</Component>
<Component {...args} style="fill" variant="primary">
<Component {...args} variant="primary">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component {...args} icon="center" style="fill" variant="primary">
<Component {...args} icon="center" variant="primary">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
</Component>
</Stack>

<Stack>
<Component {...args} style="fill" variant="cta">
<Component {...args} variant="cta">
{children}
</Component>
<Component {...args} style="fill" variant="cta">
<Component {...args} variant="cta">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component {...args} icon="center" style="fill" variant="cta">
<Component {...args} icon="center" variant="cta">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
Expand All @@ -108,16 +108,16 @@ const Template = ({ children, ...args }) => (

<Column>
<Stack>
<Component {...args} style="outline" variant="primary">
<Component {...args} isOutline variant="primary">
{children}
</Component>
<Component {...args} style="outline" variant="primary">
<Component {...args} isOutline variant="primary">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component {...args} icon="center" style="outline" variant="primary">
<Component {...args} icon="center" isOutline variant="primary">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
Expand All @@ -129,34 +129,34 @@ const Template = ({ children, ...args }) => (
background: theme.colors.accessible,
}}
>
<Component {...args} style="outline" variant="secondary">
<Component {...args} isOutline variant="secondary">
{children}
</Component>

<Component {...args} style="outline" variant="secondary">
<Component {...args} isOutline variant="secondary">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component {...args} icon="center" style="outline" variant="secondary">
<Component {...args} icon="center" isOutline variant="secondary">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
</Component>
</Stack>

<Stack>
<Component {...args} style="outline" variant="cta">
<Component {...args} isOutline variant="cta">
{children}
</Component>
<Component {...args} style="outline" variant="cta">
<Component {...args} isOutline variant="cta">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component {...args} icon="center" style="outline" variant="cta">
<Component {...args} icon="center" isOutline variant="cta">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
Expand All @@ -169,7 +169,7 @@ const Template = ({ children, ...args }) => (
<Component
{...args}
size="250"
style="outline"
isOutline
variant="primary"
icon="right"
>
Expand All @@ -178,7 +178,7 @@ const Template = ({ children, ...args }) => (
<Component
{...args}
size="250"
style="outline"
isOutline
variant="primary"
icon="right"
>
Expand All @@ -191,7 +191,7 @@ const Template = ({ children, ...args }) => (
{...args}
size="250"
icon="center"
style="outline"
isOutline
variant="primary"
>
<Icon size="100" label="Icon label">
Expand All @@ -208,7 +208,7 @@ const Template = ({ children, ...args }) => (
<Component
{...args}
size="250"
style="outline"
isOutline
variant="secondary"
icon="right"
>
Expand All @@ -217,7 +217,7 @@ const Template = ({ children, ...args }) => (
<Component
{...args}
size="250"
style="outline"
isOutline
variant="secondary"
icon="right"
>
Expand All @@ -230,7 +230,7 @@ const Template = ({ children, ...args }) => (
{...args}
icon="center"
size="250"
style="outline"
isOutline
variant="secondary"
>
<Icon size="100" label="Icon label">
Expand All @@ -240,34 +240,16 @@ const Template = ({ children, ...args }) => (
</Stack>

<Stack>
<Component
{...args}
size="250"
style="outline"
variant="cta"
icon="right"
>
<Component {...args} size="250" isOutline variant="cta" icon="right">
{children}
</Component>
<Component
{...args}
size="250"
style="outline"
variant="cta"
icon="right"
>
<Component {...args} size="250" isOutline variant="cta" icon="right">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component
{...args}
size="250"
icon="center"
style="outline"
variant="cta"
>
<Component {...args} size="250" icon="center" isOutline variant="cta">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
Expand All @@ -280,7 +262,7 @@ const Template = ({ children, ...args }) => (
{...args}
disabled
size="250"
style="outline"
isOutline
variant="cta"
icon="right"
>
Expand All @@ -292,7 +274,7 @@ const Template = ({ children, ...args }) => (
disabled
icon="center"
size="250"
style="outline"
isOutline
variant="secondary"
>
<Icon size="100" label="Icon label">
Expand Down
Loading

1 comment on commit 5b57d13

@vercel
Copy link

@vercel vercel bot commented on 5b57d13 Mar 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.