diff --git a/.changeset/calm-links-select.md b/.changeset/calm-links-select.md new file mode 100644 index 000000000..03f1b60f4 --- /dev/null +++ b/.changeset/calm-links-select.md @@ -0,0 +1,5 @@ +--- +"@cloudflare/kumo": patch +--- + +Allow users to select and copy LinkButton text while preserving Button text selection behavior. diff --git a/packages/kumo/src/components/button/button.test.tsx b/packages/kumo/src/components/button/button.test.tsx index 276bfae92..ed2cf490d 100644 --- a/packages/kumo/src/components/button/button.test.tsx +++ b/packages/kumo/src/components/button/button.test.tsx @@ -59,6 +59,13 @@ describe("Button", () => { expect(button.hasAttribute("disabled")).toBe(true); }); + it("prevents text selection", () => { + render(); + const button = screen.getByRole("button"); + expect(button.classList.contains("select-none")).toBe(true); + expect(button.classList.contains("select-text")).toBe(false); + }); + it("forwards ref to the ); @@ -207,6 +214,13 @@ describe("LinkButton", () => { expect(link.getAttribute("href")).toBe("/home"); }); + it("allows text selection", () => { + render(Home); + const link = screen.getByRole("link"); + expect(link.classList.contains("select-text")).toBe(true); + expect(link.classList.contains("select-none")).toBe(false); + }); + it("external sets target='_blank' and rel='noopener noreferrer'", () => { render( @@ -283,6 +297,17 @@ describe("LinkButton", () => { expect(button.getAttribute("data-kumo-component")).toBe("LinkButton"); }); + it("allows text selection", () => { + render( + + Home + , + ); + const button = screen.getByRole("button", { name: "Home" }); + expect(button.classList.contains("select-text")).toBe(true); + expect(button.classList.contains("select-none")).toBe(false); + }); + it("wraps a title in an enabled tooltip trigger around the disabled button", () => { render( diff --git a/packages/kumo/src/components/button/button.tsx b/packages/kumo/src/components/button/button.tsx index b5f59bd1d..a8e50b53d 100644 --- a/packages/kumo/src/components/button/button.tsx +++ b/packages/kumo/src/components/button/button.tsx @@ -480,7 +480,7 @@ export const LinkButton = React.forwardRef( return (