Skip to content

fix(stack): Hide leading, consectuive, and trailing dividers with CSS - #1202

Open
pawelgrimm wants to merge 6 commits into
mainfrom
pawel/fix/stack-hide-leading-divider
Open

fix(stack): Hide leading, consectuive, and trailing dividers with CSS#1202
pawelgrimm wants to merge 6 commits into
mainfrom
pawel/fix/stack-hide-leading-divider

Conversation

@pawelgrimm

@pawelgrimm pawelgrimm commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

Short description

Previously, if you used <Stack> with the dividers option, and one of the children returned null, we would still display a divider between each child, potentially resulting in leading, consecutive, or trailing dividers. Now, we hide those extra dividers with CSS.

📸 Demo

BeforeAfter
image CleanShot 2026-09-03 at 13 05 03@2x

PR Checklist

  • Added tests for bugs / new features
    • Covered by existing visual regression tests
  • Updated docs (storybooks, readme)
    • Not needed, IMHO
  • Reviewed and approved Chromatic visual regression tests in CI

@pawelgrimm
pawelgrimm force-pushed the pawel/fix/stack-hide-leading-divider branch from b3afb85 to 65f5a32 Compare September 3, 2026 18:03
@pawelgrimm pawelgrimm changed the title fix(stack): Hide leading divider with CSS fix(stack): Hide leading, consectuive, and trailing dividers with CSS Sep 3, 2026
@pawelgrimm
pawelgrimm force-pushed the pawel/fix/stack-hide-leading-divider branch from 845667c to 791a25a Compare September 3, 2026 18:08
@pawelgrimm pawelgrimm self-assigned this Sep 3, 2026
@pawelgrimm pawelgrimm added the 🙋 Ask PR Used for PRs that need a review before merging. label Sep 3, 2026
@pawelgrimm
pawelgrimm marked this pull request as ready for review September 3, 2026 18:08

@doistbot doistbot left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR hides leading, consecutive, and trailing dividers in Stack with CSS, fixing stray dividers when children render null.

Few things worth tightening:

  • The styles.stack class is applied unconditionally, so a user-supplied <hr> as a first, last, or adjacent child can get hidden even when dividers="none". Consider applying the class only when dividers are enabled, or scoping the selectors to the generated Divider.
  • Text-node children break the sibling-selector logic: in <Stack dividers="primary"><div>A</div>B</Stack>, the needed divider before B gets hidden since CSS selectors only see elements. Wrapping primitive children or marking their dividers would fix this.
  • The existing renders dividers when instructed to do so snapshots need updating — they don't expect the new stack class on every rendered Stack, so the Jest suite will fail.

Share FeedbackReview Logs

Comment thread src/stack/stack.tsx
Comment thread src/stack/stack.tsx
Comment thread src/stack/stack.module.css Outdated
@pawelgrimm
pawelgrimm force-pushed the pawel/fix/stack-hide-leading-divider branch from cde3e2d to ccce32e Compare September 3, 2026 20:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🙋 Ask PR Used for PRs that need a review before merging.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants