[IGNORE] surface component slots for targeted customization by jgbernalp · Pull Request #404 · perses/shared

jgbernalp · 2026-10-27T10:28:12Z

Add component slots to allow targeted internal component customization

github-actions · 2026-10-27T10:28:41Z

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit a91d610.}

zhuje · 2026-10-27T19:28:52Z

@jgbernalp PTAL: hoisted some shared code for DRY, fixed some inconsistencies, added more typing for components with slotStyleProps that use custom properties.

Signed-off-by: Gabriel Bernal <gbernal@redhat.com>

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

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

…est.tsx for consistency with other component file structures Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

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

Expose CardHeaderSlotProps { content, end } so consumers can add className and style to the title wrapper and the trailing actions wrapper without changing structure, behavior, or accessibility, matching the slot convention introduced in #404. Adds CardHeader.slots.test.tsx, compile-time contracts in types.test.tsx, and a Slots story. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

* [FEATURE] UI Customization. Add Card component Adds Card, CardHeader and CardContent to the next primitives. Card takes variant ('elevated' | 'outlined' -> data-variant) plus spacing and sizing style props; CardHeader exposes children as the title slot and a single endElement slot; CardContent is a padded container. All defaults are wrapped in :where() so style props win. Each part accepts a closed-union 'as' prop (div|section|article, div|header, div|figure) so the dashboard Panel keeps its native section/header/figure semantics. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Fix Boolean endElement values no longer render an empty slot. - Card now clips edge-to-edge content to rounded boundaries. - Removed all new Card Oxlint warnings. - Updated tests and story example. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [ENHANCEMENT] address Card review findings - Add closed-union prop to Card/CardHeader/CardContent (div|section|article, div|header, div|figure) so the Panel migration keeps native semantics without role= suppressions - Use --perses-border-width-sm token; drop reset-owned box-sizing - Import the style engine via the system barrel - Remove file-wide jsx-a11y suppressions from tests and stories - Move story presentation styles into .ladle/stories.css - Complete the ComponentsContext provider example Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] import the layers prelude in card.css Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] wrap Card header slot defaults in :where() Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] wrap Card variant selectors in :where() Follows #401: every selector in a primitive stylesheet, including state and variant rules, is wrapped so consumer overrides never have to fight specificity. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] accept CSS custom properties on Card style props Follows #403: type style as PersesCSSProperties on CardProps, CardHeaderProps and CardContentProps so consumers can pass --perses-* and application variables without casting. The registry-derived check in types.test.tsx flagged Card after rebasing onto ui-customization; this resolves it. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [FEATURE] UI Customization. Add CardHeader slotProps for content and end Expose CardHeaderSlotProps { content, end } so consumers can add className and style to the title wrapper and the trailing actions wrapper without changing structure, behavior, or accessibility, matching the slot convention introduced in #404. Adds CardHeader.slots.test.tsx, compile-time contracts in types.test.tsx, and a Slots story. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] fix content box sizing reset in card Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] add subtle card variant and make names consistent Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] make start and end elements consistent across components Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] add side variants to padding and margin Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] add rounded styles Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] use radius css var for stories, make background consistent in dark mode Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] re format 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>

* [IGNORE] surface component slots for targeted customization Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] DRY. Hoist common code for 'mergeControlStyle' into styleProps.ts Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] add ps-TablePagination__select class to the select slot Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] move TextField and TablePagination slot tests into *.slots.test.tsx for consistency with other component file structures Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] type control slots with their component Style interface Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> --------- Signed-off-by: Gabriel Bernal <gbernal@redhat.com> Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> Co-authored-by: Jenny Zhu <jenny.a.zhu@gmail.com>

* [FEATURE] UI Customization. Add Card component Adds Card, CardHeader and CardContent to the next primitives. Card takes variant ('elevated' | 'outlined' -> data-variant) plus spacing and sizing style props; CardHeader exposes children as the title slot and a single endElement slot; CardContent is a padded container. All defaults are wrapped in :where() so style props win. Each part accepts a closed-union 'as' prop (div|section|article, div|header, div|figure) so the dashboard Panel keeps its native section/header/figure semantics. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] Fix Boolean endElement values no longer render an empty slot. - Card now clips edge-to-edge content to rounded boundaries. - Removed all new Card Oxlint warnings. - Updated tests and story example. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [ENHANCEMENT] address Card review findings - Add closed-union prop to Card/CardHeader/CardContent (div|section|article, div|header, div|figure) so the Panel migration keeps native semantics without role= suppressions - Use --perses-border-width-sm token; drop reset-owned box-sizing - Import the style engine via the system barrel - Remove file-wide jsx-a11y suppressions from tests and stories - Move story presentation styles into .ladle/stories.css - Complete the ComponentsContext provider example Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] import the layers prelude in card.css Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] wrap Card header slot defaults in :where() Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] wrap Card variant selectors in :where() Follows #401: every selector in a primitive stylesheet, including state and variant rules, is wrapped so consumer overrides never have to fight specificity. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] accept CSS custom properties on Card style props Follows #403: type style as PersesCSSProperties on CardProps, CardHeaderProps and CardContentProps so consumers can pass --perses-* and application variables without casting. The registry-derived check in types.test.tsx flagged Card after rebasing onto ui-customization; this resolves it. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [FEATURE] UI Customization. Add CardHeader slotProps for content and end Expose CardHeaderSlotProps { content, end } so consumers can add className and style to the title wrapper and the trailing actions wrapper without changing structure, behavior, or accessibility, matching the slot convention introduced in #404. Adds CardHeader.slots.test.tsx, compile-time contracts in types.test.tsx, and a Slots story. Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com> * [IGNORE] fix content box sizing reset in card Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] add subtle card variant and make names consistent Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] make start and end elements consistent across components Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] add side variants to padding and margin Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] add rounded styles Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] use radius css var for stories, make background consistent in dark mode Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * [IGNORE] re format 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>

jgbernalp requested a review from zhuje October 27, 2026 10:28

jgbernalp requested a review from a team as a code owner October 27, 2026 10:28

jgbernalp added this pull request to stack #405 October 27, 2026 10:28

zhuje force-pushed the jgbernalp/add-component-slot branch from d35c033 to 9f91d37 Compare October 27, 2026 19:25

Base automatically changed from jgbernalp/fix-selection-size-tests to ui-customization October 27, 2026 20:20

jgbernalp and others added 5 commits October 27, 2026 16:20

[IGNORE] surface component slots for targeted customization

d5413c5

Signed-off-by: Gabriel Bernal <gbernal@redhat.com>

[IGNORE] DRY. Hoist common code for 'mergeControlStyle' into stylePro…

37852a9

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

[IGNORE] add ps-TablePagination__select class to the select slot

c68051b

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

[IGNORE] move TextField and TablePagination slot tests into *.slots.t…

ea924b0

…est.tsx for consistency with other component file structures Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

[IGNORE] type control slots with their component Style interface

a91d610

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

zhuje force-pushed the jgbernalp/add-component-slot branch from 9f91d37 to a91d610 Compare October 27, 2026 20:20

zhuje merged commit 580827e into ui-customization Oct 27, 2026
14 checks passed

zhuje deleted the jgbernalp/add-component-slot branch October 27, 2026 20:26

Navigation Menu

Repository navigation

[IGNORE] surface component slots for targeted customization - #404

[IGNORE] surface component slots for targeted customization#404
zhuje merged 5 commits into
ui-customizationfrom
jgbernalp/add-component-slot

jgbernalp commented Oct 27, 2026

Uh oh!

github-actions Bot commented Oct 27, 2026 •

edited

Loading

Uh oh!

zhuje commented Oct 27, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

jgbernalp commented Oct 27, 2026

Uh oh!

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

Uh oh!

Uh oh!

zhuje commented Oct 27, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented Oct 27, 2026 •

edited

Loading