From 1d08097971ab96925c6db1c534d502b9e0570d57 Mon Sep 17 00:00:00 2001 From: Josiah Ivey Date: Mon, 21 Sep 2026 12:17:43 -0700 Subject: [PATCH 1/6] fix button not wrapping text This fixes an issue with the button text not wrapping when the button becomes longer than the width of the viewport, creating overflow. It should instead wrap to a new line (and not be limited by height.) I also customized the list of ladle viewport sizes to include 320, it will hopefully make it easier to test that minimum size to spot issues like this in the future. --- .ladle/config.mjs | 9 ++++ package.json | 2 +- src/components/Button.css | 3 +- src/components/Button.stories.tsx | 77 ++++++++++++++++++++++--------- 4 files changed, 65 insertions(+), 26 deletions(-) diff --git a/.ladle/config.mjs b/.ladle/config.mjs index f336e4ec3..23b0c89e3 100644 --- a/.ladle/config.mjs +++ b/.ladle/config.mjs @@ -3,4 +3,13 @@ export default { outDir: 'docs', mode: 'preview', viteConfig: '.ladle/vite.config.ts', + addons: { + width: { + options: { + narrow: 320, + medium: 720, + large: 1200 + }, + } + } }; diff --git a/package.json b/package.json index 3384fd4dd..341d96b20 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@openstax/ui-components", - "version": "1.23.9", + "version": "1.23.10", "license": "MIT", "os": [ "darwin", "linux" ], "repository": "https://github.com/openstax/ui-components.git", diff --git a/src/components/Button.css b/src/components/Button.css index 3521a9cfe..0fee057b4 100644 --- a/src/components/Button.css +++ b/src/components/Button.css @@ -8,7 +8,7 @@ flex-direction: row; justify-content: center; align-items: center; - height: 4rem; + min-height: 4rem; padding: 0 3rem; border: 0; border-radius: 0.5rem; @@ -16,7 +16,6 @@ transition: all 0.2s ease-in-out; text-decoration: none; user-select: none; - white-space: nowrap; /* Variant-specific styles using CSS custom properties with fallback defaults (primary variant) */ background-color: var(--button-bg, #d4450c); diff --git a/src/components/Button.stories.tsx b/src/components/Button.stories.tsx index b632304b2..69843e102 100644 --- a/src/components/Button.stories.tsx +++ b/src/components/Button.stories.tsx @@ -1,28 +1,59 @@ -import { Button, LinkButton, ButtonLink } from "./Button"; +import React from 'react'; +import { Button, LinkButton, ButtonLink } from './Button'; +import { Input } from 'react-aria-components'; -export const Primary = () => <> - - - -; +export const Primary = () => { + const [state, setState] = React.useState('Primary'); -export const Light = () => <> - - - -; + return ( + <> + setState(e.target.value)} /> +
+
+ + + + + ); +}; -export const Secondary = () => <> - - - -; +export const Light = () => ( + <> + + + + +); -export const Link = () => <> - Primary - Button -; +export const Secondary = () => ( + <> + + + + +); -export const Linkish = () => <> - alert('hi')}>press to say hi -; +export const Link = () => ( + <> + Primary + + Button + + +); + +export const Linkish = () => ( + <> + alert('hi')}>press to say hi + +); From 899666932ad4ffe5ae97a89afe965e140e8cf1e5 Mon Sep 17 00:00:00 2001 From: Josiah Ivey Date: Mon, 21 Sep 2026 12:23:32 -0700 Subject: [PATCH 2/6] also force breaking words without spaces --- src/components/Button.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Button.css b/src/components/Button.css index 0fee057b4..495568f95 100644 --- a/src/components/Button.css +++ b/src/components/Button.css @@ -16,6 +16,7 @@ transition: all 0.2s ease-in-out; text-decoration: none; user-select: none; + overflow-wrap: anywhere; /* Variant-specific styles using CSS custom properties with fallback defaults (primary variant) */ background-color: var(--button-bg, #d4450c); From 024e985ff63486fedcc03ae65d79ae0e5b366504 Mon Sep 17 00:00:00 2001 From: Josiah Ivey Date: Mon, 21 Sep 2026 12:37:37 -0700 Subject: [PATCH 3/6] restore formatting --- src/components/Button.stories.tsx | 52 ++++++++++--------------------- 1 file changed, 17 insertions(+), 35 deletions(-) diff --git a/src/components/Button.stories.tsx b/src/components/Button.stories.tsx index 69843e102..af41185c6 100644 --- a/src/components/Button.stories.tsx +++ b/src/components/Button.stories.tsx @@ -19,41 +19,23 @@ export const Primary = () => { ); }; -export const Light = () => ( - <> - - - - -); +export const Light = () => <> + + + +; -export const Secondary = () => ( - <> - - - - -); +export const Secondary = () => <> + + + +; -export const Link = () => ( - <> - Primary - - Button - - -); +export const Link = () => <> + Primary + Button +; -export const Linkish = () => ( - <> - alert('hi')}>press to say hi - -); +export const Linkish = () => <> + alert('hi')}>press to say hi +; From c3f8a1115a41471ce4bddfa9537b2a413436d302 Mon Sep 17 00:00:00 2001 From: Josiah Ivey Date: Mon, 21 Sep 2026 13:39:24 -0700 Subject: [PATCH 4/6] Add aria-label to Input component in Button stories Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- src/components/Button.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Button.stories.tsx b/src/components/Button.stories.tsx index af41185c6..15aad3af0 100644 --- a/src/components/Button.stories.tsx +++ b/src/components/Button.stories.tsx @@ -7,7 +7,7 @@ export const Primary = () => { return ( <> - setState(e.target.value)} /> + setState(e.target.value)} />

From 7bcce38cb7e4298215408be45575d05c7e6b3427 Mon Sep 17 00:00:00 2001 From: Roy Johnson Date: Mon, 21 Sep 2026 15:46:25 -0500 Subject: [PATCH 5/6] Remove @types/dompurify (stub) --- package-lock.json | 16 ++-------------- package.json | 1 - 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 94b88c9b7..85b7dac79 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@openstax/ui-components", - "version": "1.23.7", + "version": "1.23.10", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@openstax/ui-components", - "version": "1.23.7", + "version": "1.23.10", "license": "MIT", "os": [ "darwin", @@ -28,7 +28,6 @@ "@testing-library/react": "^12.0.0", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.2", - "@types/dompurify": "^3.0.0", "@types/jest": "^28.1.4", "@types/node": "^18.7.5", "@types/node-fetch": "^2.6.2", @@ -5104,17 +5103,6 @@ "@types/ms": "*" } }, - "node_modules/@types/dompurify": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.2.0.tgz", - "integrity": "sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==", - "deprecated": "This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.", - "dev": true, - "license": "MIT", - "dependencies": { - "dompurify": "*" - } - }, "node_modules/@types/estree": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", diff --git a/package.json b/package.json index 341d96b20..49c83d6ed 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,6 @@ "@testing-library/react": "^12.0.0", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.2", - "@types/dompurify": "^3.0.0", "@types/jest": "^28.1.4", "@types/node": "^18.7.5", "@types/node-fetch": "^2.6.2", From d368917c05266595476dbe8e86726712aa786543 Mon Sep 17 00:00:00 2001 From: Josiah Ivey Date: Wed, 30 Sep 2026 09:04:37 -0700 Subject: [PATCH 6/6] bump version --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 85b7dac79..7b67dfbfb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@openstax/ui-components", - "version": "1.23.10", + "version": "1.24.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@openstax/ui-components", - "version": "1.23.10", + "version": "1.24.3", "license": "MIT", "os": [ "darwin", diff --git a/package.json b/package.json index 05c2d12a7..45376140f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@openstax/ui-components", - "version": "1.23.10", + "version": "1.24.3", "license": "MIT", "os": [ "darwin", "linux" ], "repository": "https://github.com/openstax/ui-components.git",