feat(ButtonIcon): adding support for prop "align" (#498)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **New Features**
- Added an `align` property to the `ButtonIcon` component to customize
alignment with a default of "center".

- **Tests**
- Implemented new test cases to verify the alignment functionality of
the `ButtonIcon` component.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/documentation/src/Components/ButtonIcon.stories.tsx

@@ -81,8 +81,13 @@ export default {
 		noBackground: false,
 		size: "medium",
 		label: "some label",
+		align: "center",
 	},
 	argTypes: {
+		align: {
+			options: ["center", "left", "right"],
+			control: { type: "radio" },
+		},
 		mode: {
 			options: ["dark", "light", "system", "alt-system"],
 			control: { type: "radio" },

packages/ui-components/src/components/Button/ButtonIcon.tsx

@@ -23,6 +23,7 @@ export const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(
 			labelLeft,
 			spacing,
 			noBackground = false,
+			align = "center",
 
 			...otherProps
 		},
@@ -42,6 +43,7 @@ export const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(
 			labelLeft,
 			spacing,
 			noBackground,
+			align,
 		});
 		const iconClass = clsx({
 			"text-copy-accent-dark": mode === "light" && !raw,

packages/ui-components/src/components/Button/ButtonTypes.d.ts

@@ -79,6 +79,11 @@ export type ButtonIconProps = {
 	 * The children to render.
 	 */
 	children: React.ReactNode;
+	/**
+	 * Cell content alignment.
+	 * @default "center"
+	 */
+	align?: "left" | "right" | "center";
 	/**
 	 * The label to show next to the icon.
 	 */

packages/ui-components/src/components/Button/__tests__/ButtonIcon.test.tsx

@@ -190,6 +190,36 @@ describe("ButtonIcon modifiers", () => {
 		expect(button.className).toContain("w-full");
 	});
 
+	it("should render a left-aligned button icon", async () => {
+		render(
+			<ButtonIcon align="left">
+				<IconSettings />
+			</ButtonIcon>,
+		);
+		const button = await screen.findByRole("button");
+		expect(button.className).toContain("justify-start");
+	});
+
+	it("should render a right-aligned button icon", async () => {
+		render(
+			<ButtonIcon align="right">
+				<IconSettings />
+			</ButtonIcon>,
+		);
+		const button = await screen.findByRole("button");
+		expect(button.className).toContain("justify-end");
+	});
+
+	it("should render a center-aligned button icon", async () => {
+		render(
+			<ButtonIcon align="center">
+				<IconSettings />
+			</ButtonIcon>,
+		);
+		const button = await screen.findByRole("button");
+		expect(button.className).toContain("justify-center");
+	});
+
 	it("should render a size small button icon", async () => {
 		render(
 			<ButtonIcon size="small">

packages/ui-components/src/components/Button/utilities.ts

@@ -19,6 +19,7 @@ type getButtonClassesProps = {
 	size: string;
 	type: typeof TYPE_BUTTON | typeof TYPE_ICON | typeof TYPE_LINK;
 
+	align?: "center" | "left" | "right";
 	className?: string;
 	labelLeft?: string;
 	labelRight?: string;
@@ -32,9 +33,11 @@ const getButtonSizesClasses = ({
 	size,
 	labelRight,
 	labelLeft,
+	align,
 }: {
 	size: string;
 	type: typeof TYPE_BUTTON | typeof TYPE_ICON | typeof TYPE_LINK;
+	align?: "center" | "left" | "right";
 	labelLeft?: string;
 	labelRight?: string;
 }) => {
@@ -58,7 +61,10 @@ const getButtonSizesClasses = ({
 			});
 
 		case TYPE_ICON:
-			return clsx("inline-flex items-center justify-center", {
+			return clsx("inline-flex items-center", {
+				"justify-center": align === "center",
+				"justify-start": align === "left",
+				"justify-end": align === "right",
 				"h-6 w-6 p-0": size === "small" && !(labelRight || labelLeft),
 				"h-6 px-4 text-sm font-medium":
 					size === "small" && (labelRight || labelLeft),
@@ -279,6 +285,7 @@ export const getButtonClasses = ({
 	noBackground,
 	variant,
 	noTruncate,
+	align,
 }: getButtonClassesProps) => {
 	if (!variant) {
 		variant = "primary";
@@ -290,7 +297,7 @@ export const getButtonClasses = ({
 				className,
 				getSpacing(spacing),
 				getButtonBaseClasses({ mode, variant, noBackground, noTruncate }),
-				getButtonSizesClasses({ type, size, labelRight, labelLeft }),
+				getButtonSizesClasses({ type, size, labelRight, labelLeft, align }),
 				getButtonBorderClasses({ mode, variant, noBorder }),
 				getButtonFocusClasses({ focusMode }),
 				getButtonHoverClasses({ mode, variant, disabled }),