From 278699336cc18ca3a79a7914415b26ae82965bad Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Sun, 12 Nov 2023 10:55:43 -0500
Subject: [PATCH] fix: raw button should not have any CSS styles

---
 .../ui-components/src/common/constants.ts     |  1 +
 .../Button/__tests__/Button.test.tsx          |  7 +++
 .../src/components/Button/utilities.ts        | 51 ++++++++++---------
 3 files changed, 35 insertions(+), 24 deletions(-)
 create mode 100644 packages/ui-components/src/common/constants.ts

diff --git a/packages/ui-components/src/common/constants.ts b/packages/ui-components/src/common/constants.ts
new file mode 100644
index 00000000..ad6f22c8
--- /dev/null
+++ b/packages/ui-components/src/common/constants.ts
@@ -0,0 +1 @@
+export const BUTTON_CLASSNAME = "av-button";
diff --git a/packages/ui-components/src/components/Button/__tests__/Button.test.tsx b/packages/ui-components/src/components/Button/__tests__/Button.test.tsx
index fa3d0b07..303321c4 100644
--- a/packages/ui-components/src/components/Button/__tests__/Button.test.tsx
+++ b/packages/ui-components/src/components/Button/__tests__/Button.test.tsx
@@ -69,6 +69,13 @@ describe("Button modifiers", () => {
 		const button = await screen.findByRole("button");
 		expect(button.className).toContain("w-full");
 	});
+
+	it("should render a raw button with no styling", async () => {
+		render(<Button raw>hello</Button>);
+		const button = await screen.findByRole("button");
+		expect(button.className).toContain("av-button");
+		expect(button.className).not.toContain("py-2");
+	});
 });
 
 describe("Button methods", () => {
diff --git a/packages/ui-components/src/components/Button/utilities.ts b/packages/ui-components/src/components/Button/utilities.ts
index 135d9ebf..bd639a69 100644
--- a/packages/ui-components/src/components/Button/utilities.ts
+++ b/packages/ui-components/src/components/Button/utilities.ts
@@ -1,5 +1,7 @@
 import clsx from "clsx";
 
+import { BUTTON_CLASSNAME } from "../../common/constants";
+
 export const TYPE_ICON = "icon";
 export const TYPE_BUTTON = "button";
 export const TYPE_LINK = "link";
@@ -23,28 +25,29 @@ export const getButtonClasses = ({
 	fullWidth,
 	slim,
 }: getButtonClassesProps) => {
-	return clsx(
-		className,
-		"focus:outline-none focus:ring-2 focus:ring-slate-300 focus:ring-offset-0",
-		{
-			"text-sm font-medium sm:text-base": type === TYPE_BUTTON,
-			"text-center text-sm": type === TYPE_LINK,
-			"p-2": type === TYPE_ICON,
-			"rounded-full ": !raw,
-			"rounded-sm ": raw,
-			"bg-slate-900 text-slate-200 hover:bg-slate-800 active:bg-slate-700 active:text-slate-300":
-				kind === "dark" && !disabled && !raw,
-			"bg-slate-900 text-slate-200": kind === "dark" && disabled && !raw,
-			"bg-slate-500 text-slate-200 hover:bg-slate-600 active:bg-slate-700 active:text-slate-300":
-				kind === "light" && !disabled && !raw,
-			"bg-slate-500 text-slate-200": kind === "light" && disabled && !raw,
-			"w-full": fullWidth,
-			"px-0 py-1 sm:px-4":
-				(slim && !raw && (type === TYPE_BUTTON || type === TYPE_LINK)) ||
-				(!slim && !raw && type === TYPE_LINK),
-			"px-4 py-2": !slim && !raw && type === TYPE_BUTTON,
-			"disabled:cursor-not-allowed disabled:opacity-50": disabled,
-			"max-h-8": type === TYPE_LINK,
-		},
-	);
+	return raw
+		? clsx(BUTTON_CLASSNAME, className)
+		: clsx(
+				BUTTON_CLASSNAME,
+				className,
+				"rounded-full focus:outline-none focus:ring-2 focus:ring-slate-300 focus:ring-offset-0",
+				{
+					"text-sm font-medium sm:text-base": type === TYPE_BUTTON,
+					"text-center text-sm": type === TYPE_LINK,
+					"p-2": type === TYPE_ICON,
+					"bg-slate-900 text-slate-200 hover:bg-slate-800 active:bg-slate-700 active:text-slate-300":
+						kind === "dark" && !disabled,
+					"bg-slate-900 text-slate-200": kind === "dark" && disabled,
+					"bg-slate-500 text-slate-200 hover:bg-slate-600 active:bg-slate-700 active:text-slate-300":
+						kind === "light" && !disabled,
+					"bg-slate-500 text-slate-200": kind === "light" && disabled,
+					"w-full": fullWidth,
+					"px-0 py-1 sm:px-4":
+						(slim && (type === TYPE_BUTTON || type === TYPE_LINK)) ||
+						(!slim && type === TYPE_LINK),
+					"px-4 py-2": !slim && type === TYPE_BUTTON,
+					"disabled:cursor-not-allowed disabled:opacity-50": disabled,
+					"max-h-8": type === TYPE_LINK,
+				},
+		  );
 };