[FEATURE] UI Customization. Add next component directory with Button and Alert primitives by zhuje · Pull Request #213 · perses/shared

zhuje · 2026-08-05T02:31:29Z

Description

Create the Button and Alert component primitives as part of this initiative: UI Customization (perses/perses#3570).

Screenshots

Figures below show screenshots from Ladle for Button and Alert

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.

jgbernalp · 2026-08-11T12:57:51Z

@zhuje can you rename the PR. part 2 has no context. This will be included in the repo history so we should squash the commits with a meaningful message following the commit format

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

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

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

…and Alert primitives (#213) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

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

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

* [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 requested review from a team and AntoineThebaud as code owners August 5, 2026 02:31

zhuje marked this pull request as draft August 5, 2026 02:52

jgbernalp reviewed Aug 5, 2026

View reviewed changes

Comment thread components/src/next/css/index.css Outdated

jgbernalp reviewed Aug 5, 2026

View reviewed changes

Comment thread components/src/next/primitives/Button/Button.tsx

zhuje force-pushed the ui-customization branch from c114509 to 3ca3f2d Compare August 5, 2026 15:45

zhuje force-pushed the ui-customization-pt2-ou1328 branch from 3de4fac to 8dcf2da Compare August 5, 2026 19:09

zhuje marked this pull request as ready for review August 6, 2026 00:30

zhuje requested a review from jgbernalp August 6, 2026 00:30

zhuje changed the title ~~UI customization pt2 ou1328~~ [FEATURE] UI Customization Part 2. Component primitives Aug 6, 2026

zhuje changed the title ~~[FEATURE] UI Customization Part 2. Component primitives~~ [FEATURE] UI customization part 2 component primitives Aug 6, 2026