@edux-design/buttons 0.1.3 → 0.2.0

package/src/elements/MenuButton.jsx

@@ -1,44 +1,68 @@
-import React from "react";
-import { MenuButtonContext } from "../util/MenuButtonContext";
+import React, { forwardRef } from "react";
 import { cx } from "@edux-design/utils";
 import { Chevron } from "@edux-design/icons";
 
 /**
  * Props for the MenuButton component.
  *
- * @typedef {Object} MenuButtonProps
- * @property {React.ReactNode} [children] - Content to display inside the button (usually label or icon).
- * @property {"small"|"medium"} [size="medium"] - Size variant controlling button height.
+ * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
+ *   children?: React.ReactNode,
+ *   caret?: React.ReactNode,
+ *   size?: "small"|"medium",
+ *   className?: string,
+ * }} MenuButtonProps
  */
 
 /**
  * MenuButton component.
  *
- * Provides a styled menu trigger button with optional sizing.
- * It uses a `MenuButtonContext` provider to share internal state
- * with child menu items.
+ * Provides a styled button intended for menu triggers.
+ * Consumers should pass `aria-expanded`, `aria-controls`, and any
+ * custom labeling they need. `aria-haspopup="menu"` is applied by default.
  *
  * @component
- * @type {React.FC<MenuButtonProps>}
+ * @type {React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>}
  *
  * @example
  * ```jsx
- * <MenuButton size="small">Options</MenuButton>
+ * <MenuButton aria-expanded={open} onClick={() => setOpen((prev) => !prev)}>
+ *   Options
+ * </MenuButton>
  * ```
  */
-export function MenuButton({ children, size }) {
-  const SPLIT_BUTTON_STYLES = cx(
-    "w-[36px] border-l-[1px] border-l-black flex flex-row justify-center items-center",
+export const MenuButton = forwardRef(function MenuButton(
+  {
+    children,
+    caret,
+    size = "medium",
+    className,
+    type = "button",
+    "aria-haspopup": ariaHasPopup = "menu",
+    ...props
+  },
+  ref,
+) {
+  const styles = cx(
+    "inline-flex items-center justify-center gap-8 rounded-lg border-2 border-border-primary-base bg-bg-base px-16 text-fg-primary-emphasis transition-all duration-300 ease-in-out outline-none focus:shadow-focus focus-visible:shadow-focus disabled:cursor-not-allowed disabled:border-border-subtle disabled:bg-bg-inactive disabled:text-fg-inactive",
     {
-      "h-[32px]": size === "small",
-      "h-[40px] py-2": size === "medium" || size === undefined,
-    }
+      "min-h-control-sm text-sm": size === "small",
+      "min-h-control-md text-base": size === "medium",
+    },
+    className,
   );
 
   return (
-    <MenuButtonContext.Provider value>
-      <div className={SPLIT_BUTTON_STYLES}>{children}</div>
-      <Chevron />
-    </MenuButtonContext.Provider>
+    <button
+      {...props}
+      ref={ref}
+      type={type}
+      aria-haspopup={ariaHasPopup}
+      className={styles}
+    >
+      {children ? <span>{children}</span> : null}
+      <span aria-hidden="true" className="flex items-center text-current">
+        {caret ?? <Chevron />}
+      </span>
+    </button>
   );
-}
+});

package/src/elements/MenuButton.test.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MenuButton } from "./MenuButton";
+
+describe("MenuButton", () => {
+  it("renders a semantic button trigger", () => {
+    render(<MenuButton>Options</MenuButton>);
+
+    expect(screen.getByRole("button", { name: "Options" })).toHaveAttribute(
+      "aria-haspopup",
+      "menu",
+    );
+  });
+
+  it("forwards interactive props to the native button", () => {
+    const onClick = vi.fn();
+    render(
+      <MenuButton aria-expanded={true} onClick={onClick}>
+        Options
+      </MenuButton>,
+    );
+
+    const button = screen.getByRole("button", { name: "Options" });
+    fireEvent.click(button);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(button).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it.each([
+    ["small", "min-h-control-sm"],
+    ["medium", "min-h-control-md"],
+  ])("maps the %s size to the shared control token", (size, className) => {
+    render(<MenuButton size={size}>Options</MenuButton>);
+
+    expect(screen.getByRole("button", { name: "Options" })).toHaveClass(
+      className,
+    );
+  });
+});

package/src/elements/testA11y.js

@@ -0,0 +1,14 @@
+import axe from "axe-core";
+
+export async function expectNoAxeViolations(container) {
+  const results = await axe.run(container, {
+    rules: {
+      "color-contrast": { enabled: false },
+    },
+  });
+  const message = results.violations
+    .map((violation) => `${violation.id}: ${violation.help}`)
+    .join("\n");
+
+  expect(results.violations, message).toHaveLength(0);
+}