Skip to content

Commit

Permalink
fix: remove dollar symbol from size props
Browse files Browse the repository at this point in the history
  • Loading branch information
@artmsilva
artmsilva committed Mar 2, 2022
1 parent 03ff95f commit c4d66a5
Show file tree
Hide file tree
Showing 8 changed files with 67 additions and 61 deletions.
16 changes: 11 additions & 5 deletions app/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
AlertBanner,
Checkbox,
Container,
Button,
} from "@washingtonpost/wpds-ui-kit";
import Chart from "@washingtonpost/wpds-assets/asset/chart";

Expand Down Expand Up @@ -67,10 +68,10 @@ function HomePage() {
<Icon label="Chart">
<Chart />
</Icon>
<Icon label="Chart" size="$150">
<Icon label="Chart" size="150">
<Chart />
</Icon>
<Icon label="Chart" size="$200">
<Icon label="Chart" size="200">
<Chart />
</Icon>
</HStack>
Expand All @@ -83,17 +84,22 @@ function HomePage() {
<AlertBanner.Trigger />
</AlertBanner.Root>

<h2>Button</h2>
<HStack>
<Button>Hello World</Button>
</HStack>

<h2>Checkbox</h2>
<HStack>
<>
<HStack>
<Checkbox checked={true} variant="primary" />
<Checkbox checked={true} variant="primary" size="125" />
<Checkbox checked={true} variant="secondary" />
<Checkbox checked={true} variant="cta" />
</HStack>
<HStack>
<Checkbox checked={true} size="$087" />
<Checkbox checked={true} size="$125" />
<Checkbox checked={true} size="087" />
<Checkbox checked={true} size="125" />
</HStack>
<HStack>
<Checkbox checked={true} style="fill" />
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 @@ -42,7 +42,7 @@ const AlertBannerTrigger = React.forwardRef<
}}
{...props}
>
<Icon size="$100" label="Close alert banner">
<Icon size="100" label="Close alert banner">
<Close />
</Icon>
</StyledAlertBannerTrigger>
Expand Down Expand Up @@ -191,7 +191,7 @@ const AlertBannerRoot = React.forwardRef<HTMLDivElement, AlertBannerVariants>(
},
}}
>
<Icon size="$100" label="">
<Icon size="100" label="">
<StyledAlertIcon variant={variant} />
</Icon>
</Button>
Expand Down
10 changes: 5 additions & 5 deletions ui/button/src/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,10 @@ export const Button = styled("button", {
},
},
size: {
$200: {
200: {
py: "$050",
},
$250: {
250: {
py: "$075",
},
},
Expand Down Expand Up @@ -95,16 +95,16 @@ export const Button = styled("button", {
},
defaultVariants: {
variant: "secondary",
size: "050",
size: "200",
style: "fill",
icon: "left",
},
compoundVariants: [
{
icon: "center",
size: "075",
size: "250",
css: {
padding: "$075",
padding: "$250",
fontSize: "0",
lineHeight: "0",
},
Expand Down
62 changes: 31 additions & 31 deletions ui/button/src/play.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default {
defaultValue: "secondary",
},
size: {
options: ["$200", "$250"],
options: ["200", "250"],
defaultValue: "050",
},
style: {
Expand Down Expand Up @@ -59,13 +59,13 @@ const Template = ({ children, ...args }) => (
{children}
</Component>
<Component {...args}>
<Icon size="$100" label="">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component {...args} icon="center">
<Icon size="$100" label="Icon label">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
</Component>
Expand All @@ -76,13 +76,13 @@ const Template = ({ children, ...args }) => (
{children}
</Component>
<Component {...args} style="fill" variant="primary">
<Icon size="$100" label="">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component {...args} icon="center" style="fill" variant="primary">
<Icon size="$100" label="Icon label">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
</Component>
Expand All @@ -93,13 +93,13 @@ const Template = ({ children, ...args }) => (
{children}
</Component>
<Component {...args} style="fill" variant="cta">
<Icon size="$100" label="">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component {...args} icon="center" style="fill" variant="cta">
<Icon size="$100" label="Icon label">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
</Component>
Expand All @@ -112,13 +112,13 @@ const Template = ({ children, ...args }) => (
{children}
</Component>
<Component {...args} style="outline" variant="primary">
<Icon size="$100" label="">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component {...args} icon="center" style="outline" variant="primary">
<Icon size="$100" label="Icon label">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
</Component>
Expand All @@ -134,13 +134,13 @@ const Template = ({ children, ...args }) => (
</Component>

<Component {...args} style="outline" variant="secondary">
<Icon size="$100" label="">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component {...args} icon="center" style="outline" variant="secondary">
<Icon size="$100" label="Icon label">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
</Component>
Expand All @@ -151,13 +151,13 @@ const Template = ({ children, ...args }) => (
{children}
</Component>
<Component {...args} style="outline" variant="cta">
<Icon size="$100" label="">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component {...args} icon="center" style="outline" variant="cta">
<Icon size="$100" label="Icon label">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
</Component>
Expand All @@ -168,7 +168,7 @@ const Template = ({ children, ...args }) => (
<Stack>
<Component
{...args}
size="$250"
size="250"
style="outline"
variant="primary"
icon="right"
Expand All @@ -177,24 +177,24 @@ const Template = ({ children, ...args }) => (
</Component>
<Component
{...args}
size="$250"
size="250"
style="outline"
variant="primary"
icon="right"
>
<Icon size="$100" label="">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component
{...args}
size="$250"
size="250"
icon="center"
style="outline"
variant="primary"
>
<Icon size="$100" label="Icon label">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
</Component>
Expand All @@ -207,7 +207,7 @@ const Template = ({ children, ...args }) => (
>
<Component
{...args}
size="$250"
size="250"
style="outline"
variant="secondary"
icon="right"
Expand All @@ -216,24 +216,24 @@ const Template = ({ children, ...args }) => (
</Component>
<Component
{...args}
size="$250"
size="250"
style="outline"
variant="secondary"
icon="right"
>
<Icon size="$100" label="">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component
{...args}
icon="center"
size="$250"
size="250"
style="outline"
variant="secondary"
>
<Icon size="$100" label="Icon label">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
</Component>
Expand All @@ -242,7 +242,7 @@ const Template = ({ children, ...args }) => (
<Stack>
<Component
{...args}
size="$250"
size="250"
style="outline"
variant="cta"
icon="right"
Expand All @@ -251,24 +251,24 @@ const Template = ({ children, ...args }) => (
</Component>
<Component
{...args}
size="$250"
size="250"
style="outline"
variant="cta"
icon="right"
>
<Icon size="$100" label="">
<Icon size="100" label="">
<Asset />
</Icon>
{children}
</Component>
<Component
{...args}
size="$250"
size="250"
icon="center"
style="outline"
variant="cta"
>
<Icon size="$100" label="Icon label">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
</Component>
Expand All @@ -279,7 +279,7 @@ const Template = ({ children, ...args }) => (
<Component
{...args}
disabled
size="$250"
size="250"
style="outline"
variant="cta"
icon="right"
Expand All @@ -291,11 +291,11 @@ const Template = ({ children, ...args }) => (
{...args}
disabled
icon="center"
size="$250"
size="250"
style="outline"
variant="secondary"
>
<Icon size="$100" label="Icon label">
<Icon size="100" label="Icon label">
<Asset />
</Icon>
</Component>
Expand Down
Loading

1 comment on commit c4d66a5

@vercel
Copy link

@vercel vercel bot commented on c4d66a5 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.