fix: raw button should not have any CSS styles

versini-org · Nov 12, 2023 · 2786993 · 2786993
1 parent 027fc81
commit 2786993
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 24 deletions.
diff --git a/packages/ui-components/src/common/constants.ts 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
@@ -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
@@ -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,
+				},
+		  );
 };