[FEATURE] UI Customization. Modify Button with responsive resizing. by zhuje · Pull Request #352 · perses/shared

zhuje · 2026-10-05T20:52:03Z

Description

Follow-up to #299, addressing this review thread:
adding responsiveness to Button later would be a breaking change, so it should land before the primitive is adopted.
Part of the UI customization initiative (perses/perses#3570). Stacked on #299.

Responsive `size`

size now accepts Responsive<ButtonSize> in addition to a scalar:

<Button size={{ default: 'md', lg: 'sm' }}>Save</Button>

This covers the a11y use case from the thread — a thumb-friendly md target on small screens and a denser sm
button where a pointer is available — and replaces the only responsive-sizing pattern in the app today
(CRUDButton.tsx: sx={{ paddingX: isMobileSize ? 1 : undefined }}).

Scalar sizes are unchanged and still render data-size.
Responsive objects render ps-Button--size-<breakpoint>-<size> modifier classes (e.g. ps-Button--size-xs-md =
"at the xs viewport, render size md"). A missing default key falls back to md.
button.css sizes are now driven by --ps-button-py / --ps-button-px / --ps-button-font-size, so the
data-size attribute and the breakpoint classes share one definition and consumers can override padding per button
with a class.
Adds responsiveVariantClassNames to system/responsive.ts for reuse by other variant-style props.

MUI / Patternfly Parity

Added missing feature to establish parity with MUI and Patternfly

Prop	Motivation
`startIcon` / `endIcon`	19 MUI `startIcon=` usages. Wrapped in `Icon` (`.ps-Button__startIcon` / `__endIcon`); the spinner replaces `startIcon` while `loading`.
`fullWidth`	MUI `fullWidth` / PF `isBlock`. Renders `data-full-width`.
`render` / `nativeButton`	MUI `component={RouterLink}` (Header, SearchList) / PF `component`. Exposed from Base UI.
`focusableWhenDisabled`	PF `isAriaDisabled` — keeps the button focusable (tooltips, SR) via `aria-disabled`. Exposed from Base UI; disabled/hover CSS now also matches `[aria-disabled='true']`.
`variant="link"`	PF `variant="link"`. Transparent, underlined.

Screenshots

Checklist

Pull request has a descriptive title and context useful to a reviewer.
Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
All commits have DCO signoffs.

UI Changes

Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
Code follows the UI guidelines.
E2E tests are stable and unlikely to be flaky.
See e2e docs for more details. Common issues include:
- Is the data inconsistent? You need to mock API requests.
- Does the time change? You need to use consistent time values or mock time utilities.
- Does it have loading states? You need to wait for loading to complete.

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

…and Alert primitives (#213) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

… and remove CommonJS (#300) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

… Node updates Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

…Update Box.tsx, Box.test.tsx and Box.stories.tsx to improve how props are checked and applied Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

Add a reusable Box primitive with token-based padding, margin, gap, and common layout props. Add reusable spacing utility styles and responsive spacing support through shared primitive system utilities. Add Box stories and focused tests. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

- Exported the shared responsive stylesheet from @perses-dev/components. - Renamed responsive CSS variables from --ps-box-* to generic --ps- responsive-*, so the responsive utility can be reused by future layout primitives. - Updated the responsive stylesheet and Box test to use the new variable names. - Simplified spacing CSS by removing intermediate --ps-spacing-value-* variables and referencing Perses spacing tokens directly. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

github-actions · 2026-10-05T20:52:30Z

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit 152a291.}

Addresses react-doctor no-object-keys-values-entries-on-maybe-undefined (#352 (comment)). The value is already narrowed by isResponsiveValue, but the linter does not follow custom type guards, so add a `?? {}` fallback. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

Same react-doctor guard as 361da01, applied to the helper added in this branch. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

zhuje · 2026-10-05T21:05:01Z

+  if (!isResponsiveValue(value)) return undefined;
+
+  return Object.fromEntries(
+    Object.entries(value).map(([breakpoint, token]) => [


Fixed in #299 361da01
Rebased
Fix in this branch

* [FEATURE] create @perses-dev/design-tokens package (#198) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [FEATURE] UI Customization. Add next component directory with Button and Alert primitives (#213) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [FEATURE] UI Customization: Component Provider (#241) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [BREAKINGCHANGE] Update files to align with PR#248 Upgrade to Node 24 and remove CommonJS (#300) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] UI Customization. Update package-lock.json for to align with Node updates Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Regenerate package-lock.json after rebase onto main Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [FEATURE] UI Customization. Add Divider primitive (#318) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [FEATURE] UI customization. Add Box primitive component Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Update package.json so design-tokens are a dependency Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Address comments. Move spacing functions to their own file. Update Box.tsx, Box.test.tsx and Box.stories.tsx to improve how props are checked and applied Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Update package-lock.json after rebase onto ui-customization Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Use CSS classes for Box spacing Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [FEATURE] Add Box primitive component Add a reusable Box primitive with token-based padding, margin, gap, and common layout props. Add reusable spacing utility styles and responsive spacing support through shared primitive system utilities. Add Box stories and focused tests. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Address comments - Exported the shared responsive stylesheet from @perses-dev/components. - Renamed responsive CSS variables from --ps-box-* to generic --ps- responsive-*, so the responsive utility can be reused by future layout primitives. - Updated the responsive stylesheet and Box test to use the new variable names. - Simplified spacing CSS by removing intermediate --ps-spacing-value-* variables and referencing Perses spacing tokens directly. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Guard Object.entries against undefined in responsive helpers Addresses react-doctor no-object-keys-values-entries-on-maybe-undefined (#352 (comment)). The value is already narrowed by isResponsiveValue, but the linter does not follow custom type guards, so add a `?? {}` fallback. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] remove unnecessary coalescing Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] categorize properties for reuse, add story Sample helper, refactor box stories Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] remove oxlint ignore Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] regenerate package-lock.json Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] adjust sample to include code snippets Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] fix lint error Signed-off-by: Gabriel Bernal <gbernal@redhat.com> --------- Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> Signed-off-by: Gabriel Bernal <gbernal@redhat.com> Co-authored-by: Gabriel Bernal <gbernal@redhat.com>

zhuje · 2026-10-13T22:25:59Z

close for #360

zhuje added 14 commits September 23, 2026 15:43

[FEATURE] create @perses-dev/design-tokens package (#198)

33c5be8

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[FEATURE] UI Customization. Add next component directory with Button …

455739c

…and Alert primitives (#213) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[FEATURE] UI Customization: Component Provider (#241)

c0fb97d

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[BREAKINGCHANGE] Update files to align with PR#248 Upgrade to Node 24…

7b43ff2

… and remove CommonJS (#300) Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[IGNORE] UI Customization. Update package-lock.json for to align with…

8dd065a

… Node updates Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[IGNORE] Regenerate package-lock.json after rebase onto main

a04da7d

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[FEATURE] UI Customization. Add Divider primitive (#318)

56c5a50

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[FEATURE] UI customization. Add Box primitive component

4589e3e

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[IGNORE] Update package.json so design-tokens are a dependency

e96e32e

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[IGNORE] Address comments. Move spacing functions to their own file. …

00b4ea6

…Update Box.tsx, Box.test.tsx and Box.stories.tsx to improve how props are checked and applied Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[IGNORE] Update package-lock.json after rebase onto ui-customization

5b96827

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[IGNORE] Use CSS classes for Box spacing

48903ab

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

zhuje requested a review from a team as a code owner October 5, 2026 20:52

zhuje requested review from celian-garcia and jgbernalp and removed request for a team and celian-garcia October 5, 2026 20:52

zhuje added 4 commits October 5, 2026 16:59

[FEATURE] UI Customization. Modify Button to have responsiveness

3379a7e

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[FEATURE] Add props necessary for migration of MUI

4242467

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[IGNORE] Guard Object.entries in responsiveVariantClassNames

152a291

Same react-doctor guard as 361da01, applied to the helper added in this branch. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

zhuje force-pushed the button-responsive-size branch from cc98a6b to 152a291 Compare October 5, 2026 21:03

zhuje commented Oct 5, 2026

View reviewed changes

This was referenced Oct 5, 2026

[FEATURE] UI Customization. Modify Alert with responsive resizing #353

Closed

[FEATURE] UI customization. Add Box primitive component #299

Merged

jgbernalp force-pushed the ui-customization branch from 56c5a50 to 3eaff7f Compare October 13, 2026 11:46

zhuje closed this Oct 13, 2026

Navigation Menu

Repository navigation

[FEATURE] UI Customization. Modify Button with responsive resizing. - #352

[FEATURE] UI Customization. Modify Button with responsive resizing. #352
zhuje wants to merge 18 commits into
ui-customizationfrom
button-responsive-size

zhuje commented Oct 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 5, 2026 •

edited

Loading

Uh oh!

zhuje Oct 5, 2026

Uh oh!

zhuje commented Oct 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

zhuje commented Oct 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Responsive size

MUI / Patternfly Parity

Screenshots

Checklist

UI Changes

Uh oh!

github-actions Bot commented Oct 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zhuje Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

zhuje commented Oct 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

zhuje commented Oct 5, 2026 •

edited

Loading

Responsive `size`

github-actions Bot commented Oct 5, 2026 •

edited

Loading