Skip to content

Commit 66df926

Browse files
navin-moorthynavin-moorthy
committed
feat(props): ✨ provide clone passing props
1 parent 1b151ee commit 66df926

File tree

13 files changed

+85
-106
lines changed

13 files changed

+85
-106
lines changed

‎src/badge/Badge.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { tcm } from "../utils";
1+
import { cx } from "@renderlesskit/react";
22

33
import { useTheme } from "../theme";
44
import { Box, BoxProps } from "../box";
@@ -38,7 +38,7 @@ export const Badge = forwardRefWithAs<BadgeProps, HTMLSpanElement, "span">(
3838
} = props;
3939

4040
const badge = useTheme("badge");
41-
const badgeStyles = tcm(
41+
const badgeStyles = cx(
4242
badge.base,
4343
badge.size[size],
4444
badge.variant[variant][themeColor],

‎src/box/Box.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import { Role, RoleProps } from "reakit";
22

3+
import { tcm } from "../utils";
34
import { forwardRefWithAs } from "../utils/types";
45

56
export type BoxProps = RoleProps & {};
67

78
export const Box = forwardRefWithAs<BoxProps, HTMLDivElement, "div">(
89
(props, ref) => {
9-
return <Role ref={ref} {...props} />;
10+
const { className, ...rest } = props;
11+
const classNameProp = tcm(className);
12+
13+
return <Role ref={ref} className={classNameProp} {...rest} />;
1014
},
1115
);
1216

‎src/box/__keys.ts‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎src/box/stories/Box.stories.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Meta } from "@storybook/react";
22

33
import { Box } from "../index";
4-
import { tcm } from "../../utils";
54

65
export default {
76
title: "Primitives/Box",
@@ -50,17 +49,9 @@ export const AsButton = () => {
5049
<Box
5150
as="button"
5251
type="button"
53-
className={tcm(
54-
"h-8 px-4 text-base font-bold text-white bg-red-500 rounded-md",
55-
)}
52+
className="h-8 px-4 text-base font-bold text-white bg-red-500 rounded-md"
5653
>
5754
Button
5855
</Box>
5956
);
6057
};
61-
62-
export const AsPrevButtonComp = () => (
63-
<Box as={AsButton} className="bg-green-500">
64-
Button
65-
</Box>
66-
);

‎src/button/Button.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -78,16 +78,16 @@ export const Button = forwardRefWithAs<
7878
const button = useTheme("button");
7979
const baseStyles = tcm(
8080
button.base,
81-
!iconOnly ? button.size.default[size] : button.size.iconOnly[size],
81+
!iconOnly ? button.size.default[size] : button.size.iconOnly.base[size],
8282
button.variant.default[variant],
8383
button.variant.hover[variant],
8484
button.variant.active[variant],
8585
button.variant.focus[variant],
8686
button.variant.disabled[variant],
8787
className,
8888
);
89-
const suffixStyles = tcm(button.suffix.size[size]);
90-
const prefixStyles = tcm(button.prefix.size[size]);
89+
const suffixStyles = tcm(button.size.suffix[size]);
90+
const prefixStyles = tcm(button.size.prefix[size]);
9191

9292
const prevLoading = usePrevious(loading);
9393

@@ -106,11 +106,7 @@ export const Button = forwardRefWithAs<
106106
>
107107
{(!prefix && !suffix) || iconOnly ? (
108108
loading ? (
109-
<ButtonFullWidthSpinner
110-
spinner={spinner}
111-
iconOnly={iconOnly}
112-
size={size}
113-
>
109+
<ButtonFullWidthSpinner spinner={spinner} size={size}>
114110
{iconOnly ? withIconA11y(iconOnly) : children}
115111
</ButtonFullWidthSpinner>
116112
) : (

‎src/button/ButtonSpinner.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
import * as React from "react";
22

3+
import { passProps } from "../utils";
34
import { useTheme } from "../theme";
45
import { Spinner } from "../spinner";
56
import { ButtonProps } from "./Button";
6-
import { tcm, runIfFn } from "../utils";
7+
import { cx } from "@renderlesskit/react";
78

89
export type ButtonSpinnerProps = Partial<
910
Pick<ButtonProps, "spinner" | "size" | "iconOnly" | "prefix" | "suffix">
1011
> & {};
1112

1213
export const ButtonSpinner: React.FC<ButtonSpinnerProps> = props => {
13-
const { spinner, iconOnly, prefix, suffix, size = "md" } = props;
14-
const button = useTheme("button");
14+
const { spinner, prefix, suffix, size = "md" } = props;
1515

16-
const spinnerStyles = tcm(
17-
!iconOnly
18-
? button.spinner.default.size[size]
19-
: button.spinner.iconOnly.size[size],
20-
prefix ? button.spinner.prefix.size[size] : "",
21-
suffix ? button.spinner.suffix.size[size] : "",
16+
const button = useTheme("button");
17+
const spinnerStyles = cx(
18+
prefix
19+
? button.size.prefix[size]
20+
: suffix
21+
? button.size.suffix[size]
22+
: button.size.iconOnly.text[size],
2223
);
2324

24-
if (spinner) return <>{runIfFn(spinner, { className: spinnerStyles })}</>;
25+
if (spinner) return <>{passProps(spinner, { className: spinnerStyles })}</>;
2526

2627
return <Spinner className={spinnerStyles} size="em" />;
2728
};

‎src/button/CloseButton.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
import { CloseIcon } from "../icons";
42
import { Button, ButtonProps } from "./Button";
53
import { forwardRefWithAs } from "../utils/types";
@@ -17,7 +15,7 @@ export const CloseButton = forwardRefWithAs<
1715
<Button
1816
ref={ref}
1917
aria-label="Close"
20-
iconOnly={(children as React.ReactElement) || <CloseIcon />}
18+
iconOnly={children || <CloseIcon />}
2119
{...rest}
2220
/>
2321
);

‎src/button/stories/Button.stories.tsx‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { cx } from "@renderlesskit/react";
12
import { useState, useEffect } from "react";
23
import { ComponentStory, ComponentMeta } from "@storybook/react";
34

@@ -6,7 +7,7 @@ import {
67
CloseButton as CloseButtonComponent,
78
CloseButtonProps,
89
} from "../index";
9-
import { Spinner } from "../../spinner";
10+
import { Spinner, SpinnerProps } from "../../spinner";
1011
import { CaretRightIcon, ClockIcon } from "../../icons";
1112
import { createControls } from "../../../.storybook/utils";
1213

@@ -183,7 +184,11 @@ export const PrefixStack: Story = {
183184

184185
export const PrefixSuffix: Story = {
185186
...Default,
186-
args: { ...Default.args, prefix: <ClockIcon />, suffix: <CaretRightIcon /> },
187+
args: {
188+
...Default.args,
189+
prefix: <ClockIcon />,
190+
suffix: <CaretRightIcon />,
191+
},
187192
};
188193

189194
export const PrefixSuffixStack: Story = {
@@ -209,8 +214,24 @@ export const ExtendedSize: Story = {
209214
args: { ...Default.args, children: "xxl", size: "xxl" },
210215
};
211216

212-
const ExtendedSpinnerComponent = () => {
213-
return <Spinner size="em" className="text-base text-red-500" />;
217+
export const ExtendedPrefixSuffix: Story = {
218+
...Default,
219+
args: {
220+
...Default.args,
221+
className: "p-5 text-lg",
222+
prefix: <ClockIcon className="mx-4 text-lg text-orange-500" />,
223+
suffix: <CaretRightIcon className="mx-4 text-lg text-emarald-500" />,
224+
},
225+
};
226+
227+
const ExtendedSpinnerComponent: React.FC<SpinnerProps> = props => {
228+
return (
229+
<Spinner
230+
size="em"
231+
{...props}
232+
className={cx(props.className, "text-red-500")}
233+
/>
234+
);
214235
};
215236

216237
export const ExtendedSpinner: Story = {

‎src/icon/Icon.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Credits to https://github.com/chakra-ui/chakra-ui/tree/main/packages/icon
22
import * as React from "react";
3+
import { cx } from "@renderlesskit/react";
34

4-
import { tcm } from "../utils";
55
import { useTheme } from "../theme";
66
import { Box, BoxProps } from "../box";
77
import { forwardRefWithAs } from "../utils/types";
@@ -44,7 +44,7 @@ export const Icon = forwardRefWithAs<IconProps, HTMLOrSVGElement, "svg">(
4444
const shared: any = {
4545
ref,
4646
focusable,
47-
className: tcm(iconStyles, className),
47+
className: cx(iconStyles, className),
4848
};
4949

5050
const _viewBox = viewBox ?? fallbackIcon.viewBox;

‎src/spinner/Spinner.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { tcm } from "../utils";
1+
import { cx } from "@renderlesskit/react";
2+
23
import { useTheme } from "../theme";
34
import { Box, BoxProps } from "../box";
45
import { forwardRefWithAs } from "../utils/types";
@@ -39,7 +40,7 @@ export const Spinner = forwardRefWithAs<SpinnerProps, HTMLDivElement, "div">(
3940
...rest
4041
} = props;
4142
const theme = useTheme();
42-
const spinnerStyles = tcm(
43+
const spinnerStyles = cx(
4344
theme.spinner.base,
4445
theme.spinner.size[size],
4546
theme.spinner.stroke[stroke],

0 commit comments

Comments
 (0)