@bug-on/md3-react 2.0.3 → 3.0.0

package/src/ui/button-group.tsx

@@ -0,0 +1,350 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import type { ButtonProps } from "./button";
+import { Icon } from "./icon";
+
+/**
+ * Thuộc tính truyền vào cho thành phần nhóm nút (Button Group).
+ */
+export interface ButtonGroupProps
+	extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+	/**
+	 * Cấu trúc hiển thị của nhóm nút:
+	 * - `standard`: Các nút cách xa và có khoảng cách độc lập với nhau (gap).
+	 * - `connected`: Các nút nối liền khung viền với nhau để tạo thành dạng Segmented Button.
+	 * @default "standard"
+	 */
+	variant?: "standard" | "connected";
+	/**
+	 * Hướng sắp xếp của các nút trong nhóm.
+	 * @default "horizontal"
+	 */
+	orientation?: "horizontal" | "vertical";
+	/**
+	 * Đặt thành `true` nếu bạn muốn nhóm hiển thị dạng `standard` giãn đều lấp đầy toàn bộ khu vực chứa (container).
+	 * @default false
+	 */
+	fullWidth?: boolean;
+	/**
+	 * Áp dụng thống nhất chung một kích thước (`size`) cho tất cả các con trong nhóm (ghi đè kích thước lẻ từng nút).
+	 */
+	size?: "xs" | "sm" | "md" | "lg" | "xl";
+	/**
+	 * Bật/tắt hiệu ứng thu phóng độ rộng / khoảng đệm (Morphing Width) khi nhấn vào các nút (áp dụng cho nhóm `standard`).
+	 * @default true
+	 */
+	morphingWidth?: boolean;
+	/**
+	 * Tự động hiển thị biểu tượng (icon) Check khi một nút trạng thái nằm trong nhóm được chỉ định là `selected={true}`.
+	 * @default false
+	 */
+	showCheck?: boolean;
+}
+
+// Bảng ánh xạ padding mặc định tương ứng với từng size trong button.tsx
+const SIZE_PADDING_MAP: Record<string, string> = {
+	xs: "0.75rem",
+	sm: "1rem",
+	md: "1.5rem",
+	lg: "3rem",
+	xl: "3rem",
+};
+
+// Bảng ánh xạ Pill Radius (h/2) để animation mượt mà
+const PILL_RADIUS_MAP: Record<string, number> = {
+	xs: 16,
+	sm: 20,
+	md: 28,
+	lg: 48,
+	xl: 68,
+};
+
+// ĐỒNG BỘ SPECS MD3: Bảng ánh xạ góc bo bên trong (Inner Radius) của Connected Group
+const INNER_RADIUS_MAP: Record<string, number> = {
+	xs: 4,
+	sm: 8,
+	md: 8,
+	lg: 16,
+	xl: 20,
+};
+
+// Bảng ánh xạ Pressed Radius để morphing shape từ pill sang square
+const PRESSED_RADIUS_MAP: Record<string, number> = {
+	xs: 8,
+	sm: 10,
+	md: 16,
+	lg: 28,
+	xl: 40,
+};
+
+const ButtonGroupComponent = React.forwardRef<
+	HTMLFieldSetElement,
+	ButtonGroupProps
+>(
+	(
+		{
+			className,
+			variant = "standard",
+			orientation = "horizontal",
+			fullWidth = false,
+			size,
+			morphingWidth = true,
+			showCheck = false,
+			children,
+			...props
+		},
+		ref,
+	) => {
+		const [pressedIndex, setPressedIndex] = React.useState<number | null>(null);
+
+		const childrenArray = React.useMemo(
+			() => React.Children.toArray(children).filter(React.isValidElement),
+			[children],
+		);
+		const count = childrenArray.length;
+
+		const handlePointerLeaveAndUp = React.useCallback(() => {
+			setPressedIndex(null);
+		}, []);
+
+		return (
+			<fieldset
+				ref={ref}
+				className={cn(
+					"inline-flex p-0 m-0 border-none max-w-full overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+					orientation === "vertical" ? "flex-col items-stretch" : "flex-row",
+					// SPECS: Standard = 8px (gap-2), Connected = chính xác 2px
+					variant === "standard" ? "gap-2" : "gap-0.5",
+					fullWidth && (orientation === "horizontal" ? "w-full" : "h-full"),
+					className,
+				)}
+				onPointerLeave={handlePointerLeaveAndUp}
+				onPointerUp={handlePointerLeaveAndUp}
+				{...props}
+			>
+				{childrenArray.map((child, index) => {
+					const isFirst = index === 0;
+					const isLast = index === count - 1;
+
+					const element = child as React.ReactElement<ButtonProps>;
+
+					// Lấy kích thước hiện tại để tính toán Specs
+					// Ưu tiên prop size của Group, nếu không có thì lấy của nút con, mặc định là "sm"
+					const itemSize = size || element.props.size || "sm";
+					const basePx = SIZE_PADDING_MAP[itemSize] || "1rem";
+					const innerRadius = INNER_RADIUS_MAP[itemSize] || 8;
+
+					// Inject style động
+					const dynamicStyle: React.CSSProperties = {
+						...element.props.style,
+						"--m3-inner-rad": `${innerRadius}px`,
+					} as React.CSSProperties;
+
+					let motionPropsToOverride: Partial<ButtonProps> = {};
+					let explicitIcon = element.props.icon;
+					const isSelected = element.props.selected === true;
+
+					if (showCheck && isSelected && !explicitIcon) {
+						explicitIcon = <Icon name="check" aria-hidden="true" />;
+					}
+
+					// 1. STANDARD GROUP: Xử lý hiệu ứng Morphing Width khi press
+					if (
+						variant === "standard" &&
+						orientation === "horizontal" &&
+						morphingWidth
+					) {
+						const isPressed = pressedIndex === index;
+						const isNeighbor =
+							pressedIndex !== null && Math.abs(pressedIndex - index) === 1;
+
+						if (fullWidth) {
+							if (isPressed) {
+								dynamicStyle.flex = "1.15";
+							} else if (pressedIndex !== null) {
+								dynamicStyle.flex = isNeighbor ? "0.925" : "1";
+							} else {
+								dynamicStyle.flex = "1";
+							}
+							dynamicStyle.transition = "flex 0.3s cubic-bezier(0.2, 0, 0, 1)";
+						} else {
+							if (isPressed) {
+								dynamicStyle.paddingInline = `calc(${basePx} + 0.6rem)`;
+							} else if (isNeighbor) {
+								dynamicStyle.paddingInline = `calc(${basePx} - 0.3rem)`;
+							} else {
+								dynamicStyle.paddingInline = basePx;
+							}
+							dynamicStyle.transition =
+								"padding 0.2s cubic-bezier(0.2, 0, 0, 1)";
+						}
+
+						const pressedRadius = PRESSED_RADIUS_MAP[itemSize] || 10;
+
+						motionPropsToOverride = {
+							whileTap: {
+								scale: 0.98,
+								borderRadius: pressedRadius,
+							},
+							transition: { type: "spring", stiffness: 400, damping: 25 },
+						};
+					}
+
+					// 2. CONNECTED GROUP: Xử lý trạng thái Selected và Border Radius
+					let connectedClasses = "";
+					if (variant === "connected") {
+						// Ưu tiên z-index khi selected/hover để đè viền lên nhau
+						if (isSelected) {
+							connectedClasses = "z-20";
+						}
+
+						const r = PILL_RADIUS_MAP[itemSize] || 20;
+						const i = innerRadius;
+						let tl = r,
+							tr = r,
+							br = r,
+							bl = r;
+
+						if (!isSelected) {
+							if (orientation === "horizontal") {
+								if (isFirst && !isLast) {
+									tl = r;
+									tr = i;
+									br = i;
+									bl = r;
+								} else if (!isFirst && isLast) {
+									tl = i;
+									tr = r;
+									br = r;
+									bl = i;
+								} else if (!isFirst && !isLast) {
+									tl = i;
+									tr = i;
+									br = i;
+									bl = i;
+								}
+							} else {
+								// vertical
+								if (isFirst && !isLast) {
+									tl = r;
+									tr = r;
+									br = i;
+									bl = i;
+								} else if (!isFirst && isLast) {
+									tl = i;
+									tr = i;
+									br = r;
+									bl = r;
+								} else if (!isFirst && !isLast) {
+									tl = i;
+									tr = i;
+									br = i;
+									bl = i;
+								}
+							}
+						}
+
+						// Set inline style (fallback/SSR)
+						dynamicStyle.borderTopLeftRadius = `${tl}px`;
+						dynamicStyle.borderTopRightRadius = `${tr}px`;
+						dynamicStyle.borderBottomRightRadius = `${br}px`;
+						dynamicStyle.borderBottomLeftRadius = `${bl}px`;
+
+						// Transition CSS thuần
+						dynamicStyle.transition =
+							"border-top-left-radius 0.25s cubic-bezier(0.2, 0, 0, 1), border-top-right-radius 0.25s cubic-bezier(0.2, 0, 0, 1), border-bottom-right-radius 0.25s cubic-bezier(0.2, 0, 0, 1), border-bottom-left-radius 0.25s cubic-bezier(0.2, 0, 0, 1), padding 0.2s cubic-bezier(0.2, 0, 0, 1), flex 0.2s cubic-bezier(0.2, 0, 0, 1)";
+
+						// VÔ HIỆU HÓA Framer Motion borderRadius trên children Button bằng cách override explicit corners
+						const animateProps =
+							typeof element.props.animate === "object" &&
+							!Array.isArray(element.props.animate)
+								? element.props.animate
+								: {};
+						const whileTapProps =
+							typeof element.props.whileTap === "object" &&
+							!Array.isArray(element.props.whileTap)
+								? element.props.whileTap
+								: {};
+
+						// Tính toán corners khi pressed: tất cả corners đều thu về innerRadius hoặc pressedRadius
+						// Theo MD3, khi nhấn Segmented Button, nó nên morph về dạng vuông hơn.
+						const pr = INNER_RADIUS_MAP[itemSize] || 8;
+
+						motionPropsToOverride.animate = {
+							...animateProps,
+							borderRadius: undefined,
+							borderTopLeftRadius: tl,
+							borderTopRightRadius: tr,
+							borderBottomRightRadius: br,
+							borderBottomLeftRadius: bl,
+						} as ButtonProps["animate"];
+						motionPropsToOverride.whileTap = {
+							...whileTapProps,
+							borderRadius: undefined,
+							borderTopLeftRadius: pr,
+							borderTopRightRadius: pr,
+							borderBottomRightRadius: pr,
+							borderBottomLeftRadius: pr,
+						} as ButtonProps["whileTap"];
+
+						motionPropsToOverride.transition = {
+							type: "spring",
+							bounce: 0,
+							duration: 0.2,
+						};
+					}
+
+					return React.cloneElement(element, {
+						key: element.key ?? index,
+						tabIndex: isFirst ? 0 : -1,
+						size: size || element.props.size, // Push size group down to children
+						icon: explicitIcon, // Override icon if showCheck injected it
+						// Automatically apply unselected/selected color semantics for connected group
+						...(variant === "connected" && {
+							colorStyle: element.props.colorStyle || "tonal",
+							selectedColorStyle: element.props.selectedColorStyle || "filled",
+						}),
+						className: cn(
+							element.props.className,
+							connectedClasses,
+							"focus-visible:z-10 hover:z-10 relative",
+						),
+						style: dynamicStyle,
+						onPointerDown: (e: React.PointerEvent<HTMLButtonElement>) => {
+							setPressedIndex(index);
+							if (element.props.onPointerDown) {
+								element.props.onPointerDown(e);
+							}
+						},
+						...motionPropsToOverride,
+					});
+				})}
+			</fieldset>
+		);
+	},
+);
+
+ButtonGroupComponent.displayName = "ButtonGroup";
+
+/**
+ * Component Nhóm Nút (Button Group) được sử dụng để gom nhóm nhiều nút có công năng tương tự lại với nhau.
+ * Hỗ trợ tạo các bộ nút độc lập (Standard) hoặc khối liên kết liền mạch (Connected/Segmented Buttons).
+ * Kế thừa cơ chế chuyển động kết hợp liền mạch của MD3 Expressive.
+ *
+ * @example
+ * ```tsx
+ * // Nhóm nút tiêu chuẩn rời rạc (Standard)
+ * <ButtonGroup variant="standard">
+ *   <Button>Lựa chọn 1</Button>
+ *   <Button>Lựa chọn 2</Button>
+ * </ButtonGroup>
+ *
+ * // Nhóm nút liền khối (Connected Segmented Button)
+ * <ButtonGroup variant="connected" showCheck fullWidth>
+ *   <Button variant="toggle" selected={view === "day"} onClick={() => setView("day")}>Ngày</Button>
+ *   <Button variant="toggle" selected={view === "week"} onClick={() => setView("week")}>Tuần</Button>
+ *   <Button variant="toggle" selected={view === "month"} onClick={() => setView("month")}>Tháng</Button>
+ * </ButtonGroup>
+ * ```
+ */
+export const ButtonGroup = React.memo(ButtonGroupComponent);

package/src/ui/button.test.tsx

@@ -0,0 +1,297 @@
+"use client";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from "./button";
+
+// ── Inline SVG test icon (no external deps) ───────────────────────────────────
+const TestIcon = () => (
+	<svg data-testid="test-icon" aria-hidden="true" viewBox="0 0 24 24" />
+);
+
+describe("Button Component", () => {
+	// ── Existing tests (preserved) ─────────────────────────────────────────────
+
+	it("renders correctly with default props", () => {
+		render(<Button>Click me</Button>);
+		const button = screen.getByRole("button");
+		expect(button).toBeInTheDocument();
+		expect(button).toHaveTextContent("Click me");
+	});
+
+	it("handles onClick event", () => {
+		const handleClick = vi.fn();
+		render(<Button onClick={handleClick}>Click me</Button>);
+		fireEvent.click(screen.getByRole("button"));
+		expect(handleClick).toHaveBeenCalledTimes(1);
+	});
+
+	it("respects colorStyle variant classes", () => {
+		render(<Button colorStyle="outlined">Outlined</Button>);
+		const button = screen.getByRole("button");
+		expect(button.className).toContain("bg-transparent");
+		expect(button.className).toContain("border");
+	});
+
+	it("applies toggle 'selected' behavior", () => {
+		const { rerender } = render(
+			<Button variant="toggle" selected={false}>
+				Toggle
+			</Button>,
+		);
+		const button = screen.getByRole("button");
+		expect(button).toHaveAttribute("aria-pressed", "false");
+
+		rerender(
+			<Button variant="toggle" selected={true}>
+				Toggle
+			</Button>,
+		);
+		expect(button).toHaveAttribute("aria-pressed", "true");
+	});
+
+	it("shows ripple effect wrapper layer (visual verification representation)", () => {
+		render(<Button>Ripple Test</Button>);
+		const button = screen.getByRole("button");
+		fireEvent.pointerDown(button, { clientX: 10, clientY: 10 });
+	});
+
+	// ── New: Disabled state ────────────────────────────────────────────────────
+
+	describe("disabled state", () => {
+		it("has disabled attribute when disabled prop is passed", () => {
+			render(<Button disabled>Disabled</Button>);
+			expect(screen.getByRole("button")).toBeDisabled();
+		});
+
+		it("does not trigger onClick when disabled", () => {
+			const handleClick = vi.fn();
+			render(
+				<Button disabled onClick={handleClick}>
+					Disabled
+				</Button>,
+			);
+			fireEvent.click(screen.getByRole("button"));
+			expect(handleClick).not.toHaveBeenCalled();
+		});
+	});
+
+	// ── New: Keyboard navigation ───────────────────────────────────────────────
+
+	describe("keyboard navigation", () => {
+		it("triggers onClick when Enter is pressed", () => {
+			const handleClick = vi.fn();
+			render(<Button onClick={handleClick}>Enter Key</Button>);
+			const button = screen.getByRole("button");
+			button.focus();
+			fireEvent.keyDown(button, { key: "Enter" });
+			expect(handleClick).toHaveBeenCalledTimes(1);
+		});
+
+		it("triggers onClick when Space is pressed", () => {
+			const handleClick = vi.fn();
+			render(<Button onClick={handleClick}>Space Key</Button>);
+			const button = screen.getByRole("button");
+			button.focus();
+			fireEvent.keyDown(button, { key: " " });
+			expect(handleClick).toHaveBeenCalledTimes(1);
+		});
+
+		it("does not trigger onClick for unrelated keys", () => {
+			const handleClick = vi.fn();
+			render(<Button onClick={handleClick}>Tab Key</Button>);
+			fireEvent.keyDown(screen.getByRole("button"), { key: "Tab" });
+			expect(handleClick).not.toHaveBeenCalled();
+		});
+	});
+
+	// ── New: Icon position ─────────────────────────────────────────────────────
+
+	describe("icon position", () => {
+		it("renders leading icon before label in DOM order", () => {
+			render(
+				<Button icon={<TestIcon />} iconPosition="leading">
+					Label
+				</Button>,
+			);
+			const button = screen.getByRole("button");
+			const spans = Array.from(button.querySelectorAll("span"));
+			const iconIndex = spans.findIndex((s) =>
+				s.querySelector("[data-testid='test-icon']"),
+			);
+			const labelIndex = spans.findIndex((s) =>
+				s.textContent?.includes("Label"),
+			);
+			expect(iconIndex).toBeGreaterThanOrEqual(0);
+			expect(labelIndex).toBeGreaterThanOrEqual(0);
+			expect(iconIndex).toBeLessThan(labelIndex);
+		});
+
+		it("renders trailing icon after label in DOM order", () => {
+			render(
+				<Button icon={<TestIcon />} iconPosition="trailing">
+					Label
+				</Button>,
+			);
+			const button = screen.getByRole("button");
+			const spans = Array.from(button.querySelectorAll("span"));
+			const iconIndex = spans.findIndex((s) =>
+				s.querySelector("[data-testid='test-icon']"),
+			);
+			const labelIndex = spans.findIndex((s) =>
+				s.textContent?.includes("Label"),
+			);
+			expect(iconIndex).toBeGreaterThanOrEqual(0);
+			expect(labelIndex).toBeGreaterThanOrEqual(0);
+			expect(iconIndex).toBeGreaterThan(labelIndex);
+		});
+
+		it("marks icon span with aria-hidden", () => {
+			render(
+				<Button icon={<TestIcon />} iconPosition="leading">
+					With Icon
+				</Button>,
+			);
+			const button = screen.getByRole("button");
+			// Icon wrapper span should be aria-hidden
+			const iconWrapper = button.querySelector(
+				"span[aria-hidden='true']:has([data-testid='test-icon'])",
+			);
+			expect(iconWrapper).toBeInTheDocument();
+		});
+	});
+
+	// ── New: Sentence-case label ───────────────────────────────────────────────
+
+	describe("sentence-case label", () => {
+		it("converts ALL CAPS to sentence-case", () => {
+			render(<Button>HELLO WORLD</Button>);
+			expect(screen.getByRole("button")).toHaveTextContent("Hello world");
+		});
+
+		it("converts all-lowercase to sentence-case", () => {
+			render(<Button>hello world</Button>);
+			expect(screen.getByRole("button")).toHaveTextContent("Hello world");
+		});
+
+		it("handles mixed case correctly", () => {
+			render(<Button>hElLo WoRlD</Button>);
+			expect(screen.getByRole("button")).toHaveTextContent("Hello world");
+		});
+	});
+
+	// ── New: RTL layout ────────────────────────────────────────────────────────
+
+	describe("RTL layout", () => {
+		it("renders without crash inside dir=rtl container", () => {
+			const { container } = render(
+				<div dir="rtl">
+					<Button>RTL Button</Button>
+				</div>,
+			);
+			expect(container.querySelector("button")).toBeInTheDocument();
+		});
+
+		it("applies flex-row class regardless of text direction", () => {
+			render(
+				<div dir="rtl">
+					<Button>Button RTL</Button>
+				</div>,
+			);
+			expect(screen.getByRole("button").className).toContain("flex-row");
+		});
+
+		it("renders trailing icon after label in RTL context", () => {
+			render(
+				<div dir="rtl">
+					<Button icon={<TestIcon />} iconPosition="trailing">
+						RTL Trailing
+					</Button>
+				</div>,
+			);
+			const button = screen.getByRole("button");
+			const spans = Array.from(button.querySelectorAll("span"));
+			const iconIndex = spans.findIndex((s) =>
+				s.querySelector("[data-testid='test-icon']"),
+			);
+			const labelIndex = spans.findIndex((s) =>
+				s.textContent?.includes("Rtl trailing"),
+			);
+			// DOM order is still trailing (CSS handles visual flip in RTL via flex)
+			expect(iconIndex).toBeGreaterThan(labelIndex);
+		});
+	});
+
+	// ── New: aria-label ────────────────────────────────────────────────────────
+
+	describe("aria-label", () => {
+		it("sets aria-label to children string as fallback", () => {
+			render(<Button>Submit</Button>);
+			expect(screen.getByRole("button")).toHaveAttribute(
+				"aria-label",
+				"Submit",
+			);
+		});
+
+		it("uses explicit aria-label prop when provided", () => {
+			render(<Button aria-label="Custom Label">Submit</Button>);
+			expect(screen.getByRole("button")).toHaveAttribute(
+				"aria-label",
+				"Custom Label",
+			);
+		});
+
+		it("does not set aria-label when children is not a string", () => {
+			render(
+				<Button>
+					<span>Node child</span>
+				</Button>,
+			);
+			// aria-label should be undefined (not set) for non-string children
+			// unless explicitly provided
+			expect(screen.getByRole("button")).not.toHaveAttribute("aria-label");
+		});
+	});
+
+	// ── New: asChild prop ──────────────────────────────────────────────────────
+
+	describe("asChild prop", () => {
+		it("renders children as the root element", () => {
+			render(
+				<Button asChild>
+					<a href="/test">Link Button</a>
+				</Button>,
+			);
+			const link = screen.getByRole("link");
+			expect(link).toBeInTheDocument();
+			expect(link.tagName.toLowerCase()).toBe("a");
+			expect(link).toHaveAttribute("href", "/test");
+			expect(link.className).toContain(
+				"transition-[background-color,color,border-color,box-shadow,opacity,filter]",
+			);
+		});
+	});
+
+	// ── New: loading prop ──────────────────────────────────────────────────────
+
+	describe("loading prop", () => {
+		it("disables interaction and sets aria-busy", () => {
+			const handleClick = vi.fn();
+			render(
+				<Button loading onClick={handleClick}>
+					Submit
+				</Button>,
+			);
+			const button = screen.getByRole("button");
+			expect(button).toHaveAttribute("aria-busy", "true");
+
+			fireEvent.click(button);
+			expect(handleClick).not.toHaveBeenCalled();
+		});
+
+		it("renders the loading indicator", () => {
+			render(<Button loading>Submit</Button>);
+			expect(screen.getByLabelText("Loading")).toBeInTheDocument();
+		});
+	});
+});