refactor: use the new button component on forms and dialogs (coder#16050)

This is a significant PR that will impact many parts of the UI, so I’d
like to ask you, @jaaydenh, for a very thorough review of the Storybook
stories on Chromatic. I know it’s a bit of a hassle with around 180
stories affected, but it’s all for a good cause 💪

Main changes:
- Update the `Button` component to match the [new buttons
design](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=3-1756&p=f&m=dev).
- Update forms and dialogs to use the new `Button` component.

Related to coder#14978

Author: BrunoQuaresma

site/e2e/helpers.ts

@@ -147,7 +147,7 @@ export const createWorkspace = async (
 		await popup.waitForSelector("text=You are now authenticated.");
 	}
 
-	await page.getByTestId("form-submit").click();
+	await page.getByRole("button", { name: /create workspace/i }).click();
 
 	const user = currentUser(page);
 
@@ -276,7 +276,7 @@ export const createTemplate = async (
 
 	const name = randomName();
 	await page.getByLabel("Name *").fill(name);
-	await page.getByTestId("form-submit").click();
+	await page.getByRole("button", { name: /save/i }).click();
 	await expectUrl(page).toHavePathName(
 		organizationsEnabled
 			? `/templates/${orgName}/${name}/files`
@@ -298,7 +298,7 @@ export const createGroup = async (page: Page): Promise<string> => {
 
 	const name = randomName();
 	await page.getByLabel("Name", { exact: true }).fill(name);
-	await page.getByTestId("form-submit").click();
+	await page.getByRole("button", { name: /save/i }).click();
 	await expectUrl(page).toHavePathName(`/groups/${name}`);
 	return name;
 };
@@ -982,7 +982,7 @@ export const updateTemplateSettings = async (
 		await page.getByLabel(labelText, { exact: true }).fill(value);
 	}
 
-	await page.getByTestId("form-submit").click();
+	await page.getByRole("button", { name: /save/i }).click();
 
 	const name = templateSettingValues.name ?? templateName;
 	await expectUrl(page).toHavePathNameEndingWith(`/${name}`);
@@ -1003,7 +1003,7 @@ export const updateWorkspace = async (
 	await page.getByTestId("confirm-button").click();
 
 	await fillParameters(page, richParameters, buildParameters);
-	await page.getByTestId("form-submit").click();
+	await page.getByRole("button", { name: /update parameters/i }).click();
 
 	await page.waitForSelector("*[data-testid='build-status'] >> text=Running", {
 		state: "visible",
@@ -1024,7 +1024,7 @@ export const updateWorkspaceParameters = async (
 	);
 
 	await fillParameters(page, richParameters, buildParameters);
-	await page.getByTestId("form-submit").click();
+	await page.getByRole("button", { name: /submit and restart/i }).click();
 
 	await page.waitForSelector("*[data-testid='build-status'] >> text=Running", {
 		state: "visible",
@@ -1091,7 +1091,7 @@ export async function createUser(
 	// as the label for the currently active option.
 	const passwordField = page.locator("input[name=password]");
 	await passwordField.fill(password);
-	await page.getByRole("button", { name: "Create user" }).click();
+	await page.getByRole("button", { name: /save/i }).click();
 	await expect(page.getByText("Successfully created user.")).toBeVisible();
 
 	await expect(page).toHaveTitle("Users - Coder");
@@ -1123,7 +1123,7 @@ export async function createOrganization(page: Page): Promise<{
 	const description = `Org description ${name}`;
 	await page.getByLabel("Description").fill(description);
 	await page.getByLabel("Icon", { exact: true }).fill("/emojis/1f957.png");
-	await page.getByRole("button", { name: "Submit" }).click();
+	await page.getByRole("button", { name: /save/i }).click();
 
 	await expectUrl(page).toHavePathName(`/organizations/${name}`);
 	await expect(page.getByText("Organization created.")).toBeVisible();

site/e2e/tests/deployment/idpOrgSync.spec.ts

@@ -67,14 +67,14 @@ test.describe("IdpOrgSyncPage", () => {
 		const syncField = page.getByRole("textbox", {
 			name: "Organization sync field",
 		});
-		const saveButton = page.getByRole("button", { name: "Save" }).first();
+		const saveButton = page.getByRole("button", { name: /save/i }).first();
 
 		await expect(saveButton).toBeDisabled();
 
 		await syncField.fill("test-field");
 		await expect(saveButton).toBeEnabled();
 
-		await page.getByRole("button", { name: "Save" }).click();
+		await page.getByRole("button", { name: /save/i }).click();
 
 		await expect(
 			page.getByText("Organization sync settings updated."),

site/e2e/tests/groups/createGroup.spec.ts

@@ -27,7 +27,7 @@ test("create group", async ({ page, baseURL }) => {
 	await page.getByLabel("Name", { exact: true }).fill(groupValues.name);
 	await page.getByLabel("Display Name").fill(groupValues.displayName);
 	await page.getByLabel("Avatar URL").fill(groupValues.avatarURL);
-	await page.getByRole("button", { name: "Submit" }).click();
+	await page.getByRole("button", { name: /save/i }).click();
 
 	await expect(page).toHaveTitle(`${groupValues.displayName} - Coder`);
 	await expect(page.getByText(groupValues.displayName)).toBeVisible();

site/e2e/tests/organizationGroups.spec.ts

@@ -34,7 +34,7 @@ test("create group", async ({ page }) => {
 	const displayName = `Group ${name}`;
 	await page.getByLabel("Display Name").fill(displayName);
 	await page.getByLabel("Avatar URL").fill("/emojis/1f60d.png");
-	await page.getByRole("button", { name: "Submit" }).click();
+	await page.getByRole("button", { name: /save/i }).click();
 
 	await expectUrl(page).toHavePathName(
 		`/organizations/${org.name}/groups/${name}`,
@@ -91,7 +91,7 @@ test("change quota settings", async ({ page }) => {
 
 	// Update Quota
 	await page.getByLabel("Quota Allowance").fill("100");
-	await page.getByRole("button", { name: "Submit" }).click();
+	await page.getByRole("button", { name: /save/i }).click();
 
 	// We should get sent back to the group page afterwards
 	expectUrl(page).toHavePathName(

site/e2e/tests/organizations.spec.ts

@@ -23,7 +23,7 @@ test("create and delete organization", async ({ page }) => {
 	await page.getByLabel("Display name").fill(`Org ${name}`);
 	await page.getByLabel("Description").fill(`Org description ${name}`);
 	await page.getByLabel("Icon", { exact: true }).fill("/emojis/1f957.png");
-	await page.getByRole("button", { name: "Submit" }).click();
+	await page.getByRole("button", { name: /save/i }).click();
 
 	// Expect to be redirected to the new organization
 	await expectUrl(page).toHavePathName(`/organizations/${name}`);
@@ -32,7 +32,7 @@ test("create and delete organization", async ({ page }) => {
 	const newName = randomName();
 	await page.getByLabel("Slug").fill(newName);
 	await page.getByLabel("Description").fill(`Org description ${newName}`);
-	await page.getByRole("button", { name: "Submit" }).click();
+	await page.getByRole("button", { name: /save/i }).click();
 
 	// Expect to be redirected when renaming the organization
 	await expectUrl(page).toHavePathName(`/organizations/${newName}`);

site/e2e/tests/organizations/customRoles/customRoles.spec.ts

@@ -87,7 +87,7 @@ test.describe("CustomRolesPage", () => {
 		await expect(organizationMemberCheckbox).toBeVisible();
 		await organizationMemberCheckbox.click();
 
-		const saveButton = page.getByRole("button", { name: "Save" }).first();
+		const saveButton = page.getByRole("button", { name: /save/i }).first();
 		await expect(saveButton).toBeVisible();
 		await saveButton.click();
 

site/e2e/tests/templates/updateTemplateSchedule.spec.ts

@@ -36,7 +36,7 @@ test("update template schedule settings without override other settings", async
 		waitUntil: "domcontentloaded",
 	});
 	await page.getByLabel("Default autostop (hours)").fill("48");
-	await page.getByRole("button", { name: "Submit" }).click();
+	await page.getByRole("button", { name: /save/i }).click();
 	await expect(page.getByText("Template updated successfully")).toBeVisible();
 
 	const updatedTemplate = await API.getTemplate(template.id);

site/e2e/tests/updateTemplate.spec.ts

@@ -67,7 +67,7 @@ test("require latest version", async ({ page }) => {
 	await expectUrl(page).toHavePathName(`/templates/${templateName}/settings`);
 	let checkbox = await page.waitForSelector("#require_active_version");
 	await checkbox.click();
-	await page.getByTestId("form-submit").click();
+	await page.getByRole("button", { name: /save/i }).click();
 
 	await page.goto(`/templates/${templateName}/settings`, {
 		waitUntil: "domcontentloaded",

site/src/components/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Trash } from "lucide-react";
+import { PlusIcon } from "lucide-react";
 import { Button } from "./Button";
 
 const meta: Meta<typeof Button> = {
@@ -8,7 +8,7 @@ const meta: Meta<typeof Button> = {
 	args: {
 		children: (
 			<>
-				<Trash />
+				<PlusIcon />
 				Button
 			</>
 		),
@@ -20,34 +20,41 @@ type Story = StoryObj<typeof Button>;
 
 export const Default: Story = {};
 
-export const Outline: Story = {
+export const DefaultDisabled: Story = {
 	args: {
-		variant: "outline",
+		disabled: true,
 	},
 };
 
-export const Subtle: Story = {
+export const DefaultSmall: Story = {
 	args: {
-		variant: "subtle",
+		size: "sm",
 	},
 };
 
-export const Warning: Story = {
+export const Outline: Story = {
 	args: {
-		variant: "warning",
+		variant: "outline",
 	},
 };
 
-export const DefaultDisabled: Story = {
+export const OutlineDisabled: Story = {
 	args: {
+		variant: "outline",
 		disabled: true,
 	},
 };
 
-export const OutlineDisabled: Story = {
+export const OutlineSmall: Story = {
 	args: {
 		variant: "outline",
-		disabled: true,
+		size: "sm",
+	},
+};
+
+export const Subtle: Story = {
+	args: {
+		variant: "subtle",
 	},
 };
 
@@ -58,23 +65,51 @@ export const SubtleDisabled: Story = {
 	},
 };
 
+export const SubtleSmall: Story = {
+	args: {
+		variant: "subtle",
+		size: "sm",
+	},
+};
+
+export const Destructive: Story = {
+	args: {
+		variant: "destructive",
+		children: "Delete",
+	},
+};
+
+export const DestructiveDisabled: Story = {
+	args: {
+		...Destructive.args,
+		disabled: true,
+	},
+};
+
+export const DestructiveSmall: Story = {
+	args: {
+		...Destructive.args,
+		size: "sm",
+	},
+};
+
 export const IconButtonDefault: Story = {
 	args: {
 		variant: "default",
-		children: <Trash />,
+		children: <PlusIcon />,
 	},
 };
 
 export const IconButtonOutline: Story = {
 	args: {
 		variant: "outline",
-		children: <Trash />,
+		children: <PlusIcon />,
 	},
 };
 
 export const IconButtonSubtle: Story = {
 	args: {
 		variant: "subtle",
-		children: <Trash />,
+		children: <PlusIcon />,
 	},
 };

site/src/components/Button/Button.tsx

@@ -8,38 +8,33 @@ import { forwardRef } from "react";
 import { cn } from "utils/cn";
 
 export const buttonVariants = cva(
-	`inline-flex items-center justify-center gap-2 whitespace-nowrap
+	`inline-flex items-center justify-center gap-1 whitespace-nowrap
 	border-solid rounded-md transition-colors
-	text-sm font-semibold font-medium  cursor-pointer
+	text-sm font-semibold font-medium  cursor-pointer no-underline
 	focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
 	disabled:pointer-events-none disabled:text-content-disabled
-	[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
-	px-3 py-2`,
+	[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:p-[2px]`,
 	{
 		variants: {
 			variant: {
 				default:
-					"bg-surface-invert-primary text-content-invert hover:bg-surface-invert-secondary border-none disabled:bg-surface-secondary",
+					"bg-surface-invert-primary text-content-invert hover:bg-surface-invert-secondary border-none disabled:bg-surface-secondary font-semibold",
 				outline:
 					"border border-border-default text-content-primary bg-transparent hover:bg-surface-secondary",
 				subtle:
 					"border-none bg-transparent text-content-secondary hover:text-content-primary",
-				warning:
-					"border border-border-error text-content-primary bg-surface-error hover:bg-transparent",
-				ghost:
-					"text-content-primary bg-transparent border-0 hover:bg-surface-secondary",
+				destructive:
+					"border border-border-destructive text-content-primary bg-surface-destructive hover:bg-transparent disabled:bg-transparent disabled:text-content-disabled font-semibold",
 			},
 
 			size: {
-				lg: "h-10",
-				default: "h-9",
-				sm: "h-8 px-2 py-1.5 text-xs",
-				icon: "h-10 w-10",
+				lg: "h-10 px-3 py-2 [&_svg]:size-icon-lg",
+				sm: "h-[30px] px-2 py-1.5 text-xs [&_svg]:size-icon-sm",
 			},
 		},
 		defaultVariants: {
 			variant: "default",
-			size: "default",
+			size: "lg",
 		},
 	},
 );