Skip to content

[FEATURE] UI Customization. Define layers in every component so consumers do not have to initialize them - #392

Merged
zhuje merged 1 commit into
ui-customizationfrom
jgbernalp/fix-css-layers
Oct 23, 2026
Merged

zhuje merged 1 commit into
ui-customizationfrom
jgbernalp/fix-css-layers

Conversation

@jgbernalp

Copy link
Copy Markdown
Contributor

No description provided.

…mers do not have to initialize them

Signed-off-by: Gabriel Bernal <gbernal@redhat.com>
@jgbernalp
jgbernalp requested a review from zhuje October 23, 2026 12:12
@jgbernalp
jgbernalp requested a review from a team as a code owner October 23, 2026 12:12
@github-actions

Copy link
Copy Markdown

React Doctor found no new issues. 🎉

Reviewed by React Doctor for commit 95e954d.

@zhuje

zhuje commented Oct 23, 2026

Copy link
Copy Markdown
Contributor

Awesome. The @import '@perses-dev/design-tokens/css/layers'; makes more sense for reuse, and thanks for fixing perses.utilties declarations!

/lgtm

@zhuje
zhuje merged commit 7cd1dd1 into ui-customization Oct 23, 2026
14 checks passed
@zhuje
zhuje deleted the jgbernalp/fix-css-layers branch October 23, 2026 18:34
zhuje added a commit that referenced this pull request Oct 27, 2026
Declare `box-sizing: border-box` on `.ps-Grid` and `.ps-GridItem`,
matching Box, Stack, Checkbox, Switch and Table, and flip the test to
assert it is present.

The design-tokens reset (`@layer perses.reset`) does set border-box on
every element, but `@perses-dev/components/next/css` deliberately does
not import that reset. A consumer who loads only the components CSS
therefore gets content-box, and `<Grid width="100%" px="md">` overflows
its container while the same props on Box and Stack do not.

Also add the `@perses-dev/design-tokens/css/layers` import prelude that
every primitive stylesheet must start with since #392 (layers.test.ts).

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>
zhuje added a commit that referenced this pull request Oct 28, 2026
Declare `box-sizing: border-box` on `.ps-Grid` and `.ps-GridItem`,
matching Box, Stack, Checkbox, Switch and Table, and flip the test to
assert it is present.

The design-tokens reset (`@layer perses.reset`) does set border-box on
every element, but `@perses-dev/components/next/css` deliberately does
not import that reset. A consumer who loads only the components CSS
therefore gets content-box, and `<Grid width="100%" px="md">` overflows
its container while the same props on Box and Stack do not.

Also add the `@perses-dev/design-tokens/css/layers` import prelude that
every primitive stylesheet must start with since #392 (layers.test.ts).

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>
zhuje pushed a commit that referenced this pull request Oct 28, 2026
…mers do not have to initialize them (#392)

Signed-off-by: Gabriel Bernal <gbernal@redhat.com>
zhuje added a commit that referenced this pull request Oct 28, 2026
Declare `box-sizing: border-box` on `.ps-Grid` and `.ps-GridItem`,
matching Box, Stack, Checkbox, Switch and Table, and flip the test to
assert it is present.

The design-tokens reset (`@layer perses.reset`) does set border-box on
every element, but `@perses-dev/components/next/css` deliberately does
not import that reset. A consumer who loads only the components CSS
therefore gets content-box, and `<Grid width="100%" px="md">` overflows
its container while the same props on Box and Stack do not.

Also add the `@perses-dev/design-tokens/css/layers` import prelude that
every primitive stylesheet must start with since #392 (layers.test.ts).

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.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