feat(Button): adding support for radius prop (#813)

versini-org · Dec 28, 2024 · 6a0719e · 6a0719e
1 parent 29ca970
commit 6a0719e
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 5 deletions.
diff --git a/packages/api/src/stories/Components/Button.stories.tsx b/packages/api/src/stories/Components/Button.stories.tsx
@@ -59,3 +59,17 @@ export const Truncate: Story = {
 		);
 	},
 };
+
+export const Square: Story = {
+	...commonControlsSetup,
+	args: { radius: "small" },
+	render: (args) => (
+		<div className="flex flex-wrap gap-2">
+			<Button {...args}>1</Button>
+			<Button {...args}>2</Button>
+			<Button {...args}>3</Button>
+			<Button {...args}>...</Button>
+			<Button {...args}>101</Button>
+		</div>
+	),
+};
diff --git a/packages/ui-button/src/components/Button/Button.tsx b/packages/ui-button/src/components/Button/Button.tsx
@@ -19,6 +19,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonTypes.Props>(
 			spacing,
 			variant = "primary",
 			noTruncate = false,
+			radius = "large",
 
 			...otherProps
 		},
@@ -37,6 +38,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonTypes.Props>(
 			spacing,
 			variant,
 			noTruncate,
+			radius,
 		});
 
 		return (

diff --git a/packages/ui-button/src/components/Button/ButtonIcon.tsx b/packages/ui-button/src/components/Button/ButtonIcon.tsx
@@ -28,6 +28,7 @@ export const ButtonIcon = React.forwardRef<
 			spacing,
 			noBackground = false,
 			align = "center",
+			radius = "large",
 
 			...otherProps
 		},
@@ -48,6 +49,7 @@ export const ButtonIcon = React.forwardRef<
 			spacing,
 			noBackground,
 			align,
+			radius,
 		});
 		const iconClass = clsx({
 			"text-copy-accent-dark": mode === "light" && !raw,

diff --git a/packages/ui-button/src/components/Button/ButtonLink.tsx b/packages/ui-button/src/components/Button/ButtonLink.tsx
@@ -22,6 +22,7 @@ export const ButtonLink = React.forwardRef<
 			noTruncate = false,
 			noNewWindowIcon = false,
 			spacing,
+			radius = "large",
 
 			...otherProps
 		},
@@ -39,6 +40,7 @@ export const ButtonLink = React.forwardRef<
 			noBorder,
 			spacing,
 			noTruncate,
+			radius,
 		});
 
 		const newWindow = target === "_blank";

diff --git a/packages/ui-button/src/components/Button/utilities.ts b/packages/ui-button/src/components/Button/utilities.ts
@@ -26,6 +26,7 @@ type getButtonClassesProps = {
 	noBackground?: boolean;
 	noTruncate?: boolean;
 	variant?: "primary" | "secondary" | "danger";
+	radius?: "small" | "medium" | "large";
 } & SpacingTypes.Props;
 
 const getButtonSizesClasses = ({
@@ -83,18 +84,27 @@ const getButtonBaseClasses = ({
 	noBackground,
 	noTruncate,
 	variant,
+	radius,
 }: {
 	mode: "dark" | "light" | "system" | "alt-system";
 	variant: "primary" | "secondary" | "danger";
 	noBackground?: boolean;
 	noTruncate?: boolean;
+	radius?: "small" | "medium" | "large";
 }) => {
 	if (noBackground) {
-		return "not-prose rounded-full";
+		return clsx("not-prose", {
+			"rounded-full": radius === "large",
+			"rounded-md": radius === "medium",
+			"rounded-sm": radius === "small",
+		});
 	}
 
 	if (variant === "primary") {
-		return clsx("not-prose rounded-full", {
+		return clsx("not-prose", {
+			"rounded-full": radius === "large",
+			"rounded-md": radius === "medium",
+			"rounded-sm": radius === "small",
 			truncate: !noTruncate,
 			"bg-action-dark text-copy-light": mode === "dark",
 			"bg-action-light text-copy-lighter": mode === "light",
@@ -105,7 +115,10 @@ const getButtonBaseClasses = ({
 		});
 	}
 	if (variant === "secondary") {
-		return clsx("not-prose rounded-full", {
+		return clsx("not-prose", {
+			"rounded-full": radius === "large",
+			"rounded-md": radius === "medium",
+			"rounded-sm": radius === "small",
 			truncate: !noTruncate,
 			"bg-action-dark text-copy-light": mode === "light",
 			"bg-action-light text-copy-lighter": mode === "dark",
@@ -116,7 +129,10 @@ const getButtonBaseClasses = ({
 		});
 	}
 	if (variant === "danger") {
-		return clsx("not-prose rounded-full", {
+		return clsx("not-prose", {
+			"rounded-full": radius === "large",
+			"rounded-md": radius === "medium",
+			"rounded-sm": radius === "small",
 			truncate: !noTruncate,
 			"bg-action-danger-dark text-copy-light": mode === "dark",
 			"bg-action-danger-light text-copy-lighter": mode === "light",
@@ -286,6 +302,7 @@ export const getButtonClasses = ({
 	variant,
 	noTruncate,
 	align,
+	radius,
 }: getButtonClassesProps) => {
 	if (!variant) {
 		variant = "primary";
@@ -296,7 +313,13 @@ export const getButtonClasses = ({
 				BUTTON_CLASSNAME,
 				className,
 				getSpacing(spacing),
-				getButtonBaseClasses({ mode, variant, noBackground, noTruncate }),
+				getButtonBaseClasses({
+					mode,
+					variant,
+					noBackground,
+					noTruncate,
+					radius,
+				}),
 				getButtonSizesClasses({ type, size, labelRight, labelLeft, align }),
 				getButtonBorderClasses({ mode, variant, noBorder }),
 				getButtonFocusClasses({ focusMode }),

diff --git a/packages/ui-button/src/components/private/ButtonSort.tsx b/packages/ui-button/src/components/private/ButtonSort.tsx
@@ -29,6 +29,7 @@ export const ButtonSort_private = React.forwardRef<
 			noBackground = false,
 			align = "center",
 			active = false,
+			radius = "large",
 
 			...otherProps
 		},
@@ -49,6 +50,7 @@ export const ButtonSort_private = React.forwardRef<
 			spacing,
 			noBackground,
 			align,
+			radius,
 		});
 		const iconClass = clsx({
 			"text-copy-accent-dark": mode === "light" && !raw,

diff --git a/packages/ui-types/src/button.d.ts b/packages/ui-types/src/button.d.ts
@@ -38,6 +38,10 @@ type CommonButtonProps = {
 	 * The size of the Button.
 	 */
 	size?: "small" | "medium" | "large";
+	/**
+	 * The rounded style of the Button.
+	 */
+	radius?: "small" | "medium" | "large";
 } & SpacingTypes.Props;
 
 declare namespace ButtonTypes {