Skip to content

[FEATURE] UI Customization. Add Divider primitive - #318

Merged
jgbernalp merged 1 commit into
ui-customizationfrom
zhuje/ou1579-ui-customization-divider-component
Sep 24, 2026
Merged

jgbernalp merged 1 commit into
ui-customizationfrom
zhuje/ou1579-ui-customization-divider-component

Conversation

@zhuje

@zhuje zhuje commented Sep 23, 2026

Copy link
Copy Markdown
Contributor

Description

Adds a reusable Divider primitive to @perses-dev/components/next/primitives.

  • Implements horizontal and vertical Base UI separators with Perses token-based styling.
  • Exports Divider and DividerProps from the primitives barrel.
  • Registers Divider in PersesComponents and defaultComponents.
  • Adds unit tests, public-export coverage, and Ladle stories for both orientations.

Screenshots

Screenshot 2026-09-23 at 5 38 45 PM Screenshot 2026-09-23 at 5 38 40 PM

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>
@zhuje
zhuje requested a review from a team as a code owner September 23, 2026 21:39
@github-actions

Copy link
Copy Markdown

React Doctor found no new issues. 🎉

Reviewed by React Doctor for commit bf44da0.

@jgbernalp
jgbernalp merged commit 56c5a50 into ui-customization Sep 24, 2026
14 checks passed
@jgbernalp
jgbernalp deleted the zhuje/ou1579-ui-customization-divider-component branch September 24, 2026 09:34
jgbernalp pushed a commit that referenced this pull request Oct 13, 2026
Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>
jgbernalp added a commit that referenced this pull request Oct 13, 2026
* [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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants