Skip to content

Commit f3dd70e

Browse files
omeroomero
authored
♻️feat: children for button icon (#143)
1 parent eed8d9f commit f3dd70e

File tree

9 files changed

+51
-72
lines changed

9 files changed

+51
-72
lines changed

‎starters/next/components/primitives/Button/Button.stories.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ const meta: Meta<typeof Button> = {
88
tags: ['autodocs'],
99
args: {
1010
text: 'Default',
11-
icon: undefined,
1211
variant: 'default',
1312
size: 'default',
13+
children: undefined,
1414
},
1515
argTypes: {
1616
variant: {
@@ -28,11 +28,6 @@ const meta: Meta<typeof Button> = {
2828
control: 'select',
2929
options: ['default', 'sm', 'lg', 'icon'],
3030
},
31-
icon: {
32-
table: {
33-
disable: true,
34-
},
35-
},
3631
},
3732
}
3833

@@ -78,13 +73,14 @@ export const Large: Story = {
7873

7974
export const WithIcon: Story = {
8075
args: {
81-
icon: ChevronRight,
76+
text: 'With Icon',
77+
children: <ChevronRight />,
8278
},
8379
}
8480

8581
export const IconOnly: Story = {
8682
args: {
8783
text: '',
88-
icon: ChevronRight,
84+
children: <ChevronRight />,
8985
},
9086
}

‎starters/next/components/primitives/Button/Button.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LucideIcon } from 'lucide-react'
1+
import { ReactNode } from 'react'
22
import { Link } from '@/components/primitives'
33
import {
44
Button as ShadcnButton,
@@ -9,16 +9,17 @@ export interface ButtonProps extends Omit<ShadcnButtonProps, 'asChild'> {
99
href: string
1010
internal?: boolean
1111
text: string
12-
icon?: LucideIcon
12+
children?: ReactNode
1313
}
1414

15-
export const Button = ({ href, text, internal, ...props }: ButtonProps) => {
16-
const content = (
17-
<>
18-
{text}
19-
{props.icon && <props.icon className="ml-2 h-4 w-4" />}
20-
</>
21-
)
15+
export const Button = ({
16+
href,
17+
text,
18+
internal,
19+
children,
20+
...props
21+
}: ButtonProps) => {
22+
const content = children ? (text ? <>{text} {children}</> : children) : (text && <>{text}</>)
2223
if (href) {
2324
return (
2425
<Link internal={internal} href={href}>

‎starters/next/components/primitives/TeaserCard/TeaserCard.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,9 @@ export const TeaserCard = ({
6161
<p className="flex-grow text-sm text-muted-foreground">{summary}</p>
6262
{details && (
6363
<div className="pt-2">
64-
<Button
65-
variant="link"
66-
className="p-0"
67-
icon={ChevronRight}
68-
internal
69-
{...details}
70-
/>
64+
<Button variant="link" className="p-0" internal {...details}>
65+
<ChevronRight className="ml-2 h-4 w-4" />
66+
</Button>
7167
</div>
7268
)}
7369
</div>

‎starters/remix/app/components/primitives/Button/Button.stories.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ const meta: Meta<typeof Button> = {
88
tags: ['autodocs'],
99
args: {
1010
text: 'Default',
11-
icon: undefined,
1211
variant: 'default',
1312
size: 'default',
13+
children: undefined,
1414
},
1515
argTypes: {
1616
variant: {
@@ -28,11 +28,6 @@ const meta: Meta<typeof Button> = {
2828
control: 'select',
2929
options: ['default', 'sm', 'lg', 'icon'],
3030
},
31-
icon: {
32-
table: {
33-
disable: true,
34-
},
35-
},
3631
},
3732
}
3833

@@ -78,13 +73,14 @@ export const Large: Story = {
7873

7974
export const WithIcon: Story = {
8075
args: {
81-
icon: ChevronRight,
76+
text: 'With Icon',
77+
children: <ChevronRight />,
8278
},
8379
}
8480

8581
export const IconOnly: Story = {
8682
args: {
8783
text: '',
88-
icon: ChevronRight,
84+
children: <ChevronRight />,
8985
},
9086
}

‎starters/remix/app/components/primitives/Button/Button.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LucideIcon } from 'lucide-react'
1+
import { ReactNode } from 'react'
22
import { Link } from '~/components/primitives'
33
import {
44
Button as ShadcnButton,
@@ -9,16 +9,17 @@ export interface ButtonProps extends Omit<ShadcnButtonProps, 'asChild'> {
99
href: string
1010
internal?: boolean
1111
text: string
12-
icon?: LucideIcon
12+
children?: ReactNode
1313
}
1414

15-
export const Button = ({ href, text, internal, ...props }: ButtonProps) => {
16-
const content = (
17-
<>
18-
{text}
19-
{props.icon && <props.icon className="ml-2 h-4 w-4" />}
20-
</>
21-
)
15+
export const Button = ({
16+
href,
17+
text,
18+
internal,
19+
children,
20+
...props
21+
}: ButtonProps) => {
22+
const content = children ? (text ? <>{text} {children}</> : children) : (text && <>{text}</>)
2223
if (href) {
2324
return (
2425
<Link internal={internal} href={href}>

‎starters/remix/app/components/primitives/TeaserCard/TeaserCard.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,9 @@ export const TeaserCard = ({
6161
<p className="flex-grow text-sm text-muted-foreground">{summary}</p>
6262
{details && (
6363
<div className="pt-2">
64-
<Button
65-
variant="link"
66-
className="p-0"
67-
icon={ChevronRight}
68-
internal
69-
{...details}
70-
/>
64+
<Button variant="link" className="p-0" internal {...details}>
65+
<ChevronRight className="ml-2 h-4 w-4" />
66+
</Button>
7167
</div>
7268
)}
7369
</div>

‎starters/storybook/app/components/primitives/Button/Button.stories.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ const meta: Meta<typeof Button> = {
88
tags: ['autodocs'],
99
args: {
1010
text: 'Default',
11-
icon: undefined,
1211
variant: 'default',
1312
size: 'default',
13+
children: undefined,
1414
},
1515
argTypes: {
1616
variant: {
@@ -28,11 +28,6 @@ const meta: Meta<typeof Button> = {
2828
control: 'select',
2929
options: ['default', 'sm', 'lg', 'icon'],
3030
},
31-
icon: {
32-
table: {
33-
disable: true,
34-
},
35-
},
3631
},
3732
}
3833

@@ -78,13 +73,14 @@ export const Large: Story = {
7873

7974
export const WithIcon: Story = {
8075
args: {
81-
icon: ChevronRight,
76+
text: 'With Icon',
77+
children: <ChevronRight />,
8278
},
8379
}
8480

8581
export const IconOnly: Story = {
8682
args: {
8783
text: '',
88-
icon: ChevronRight,
84+
children: <ChevronRight />,
8985
},
9086
}

‎starters/storybook/app/components/primitives/Button/Button.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LucideIcon } from 'lucide-react'
1+
import { ReactNode } from 'react'
22
import { Link } from '~/components/primitives'
33
import {
44
Button as ShadcnButton,
@@ -9,16 +9,17 @@ export interface ButtonProps extends Omit<ShadcnButtonProps, 'asChild'> {
99
href: string
1010
internal?: boolean
1111
text: string
12-
icon?: LucideIcon
12+
children?: ReactNode
1313
}
1414

15-
export const Button = ({ href, text, internal, ...props }: ButtonProps) => {
16-
const content = (
17-
<>
18-
{text}
19-
{props.icon && <props.icon className="ml-2 h-4 w-4" />}
20-
</>
21-
)
15+
export const Button = ({
16+
href,
17+
text,
18+
internal,
19+
children,
20+
...props
21+
}: ButtonProps) => {
22+
const content = children ? (text ? <>{text} {children}</> : children) : (text && <>{text}</>)
2223
if (href) {
2324
return (
2425
<Link internal={internal} href={href}>

‎starters/storybook/app/components/primitives/TeaserCard/TeaserCard.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,9 @@ export const TeaserCard = ({
6161
<p className="flex-grow text-sm text-muted-foreground">{summary}</p>
6262
{details && (
6363
<div className="pt-2">
64-
<Button
65-
variant="link"
66-
className="p-0"
67-
icon={ChevronRight}
68-
internal
69-
{...details}
70-
/>
64+
<Button variant="link" className="p-0" internal {...details}>
65+
<ChevronRight className="ml-2 h-4 w-4" />
66+
</Button>
7167
</div>
7268
)}
7369
</div>

0 commit comments

Comments
 (0)