Skip to content

fix: preserve spacing for loose lists in Prose component#1025

Merged
craigcarlyle merged 1 commit intomainfrom
craig/fix-prose-loose-list-spacing
Apr 3, 2026
Merged

fix: preserve spacing for loose lists in Prose component#1025
craigcarlyle merged 1 commit intomainfrom
craig/fix-prose-loose-list-spacing

Conversation

@craigcarlyle
Copy link
Copy Markdown
Contributor

Closes Doist/Issues#19859

Short description

Fixes a rendering bug where bullet point lists with blank lines between items (known as "loose lists" in CommonMark) appear visually identical to tight lists (no blank lines).

Root cause

In CommonMark, blank lines between list items produce a "loose" list where each <li> wraps its content in <p> tags. The Prose CSS rule ul li p:first-child { margin: 0 } zeroes out the paragraph margin for all first-child <p> elements inside list items. For single-paragraph loose list items (the common case), this <p> is always :first-child, so its margin is always zero — making loose lists look identical to tight lists.

Fix

Add a li:has(> p) + li rule that detects loose list items (those containing <p> children) and applies --reactist-prose-space-2 margin between them, matching paragraph-level spacing. This preserves the existing tight list spacing (0.5 * space-1) while giving loose lists the visual gap users expect.

The :has() selector has excellent browser support (Chrome 105+, Firefox 121+, Safari 15.4+).

Storybook

Updated the prose example to show both a tight list and a loose list side-by-side for visual comparison.

PR Checklist

  • Added tests for bugs / new features
  • Updated docs (storybooks, readme)
  • Reviewed and approved Chromatic visual regression tests in CI

Made with Cursor

Loose lists (bullet lists with blank lines between items) produce <p>
inside <li> per the CommonMark spec. The existing li p:first-child
rule zeroes out the paragraph margin, making loose and tight lists
visually identical. Add a li:has(> p) + li rule that gives loose list
items paragraph-level spacing so the user's intended blank lines are
preserved.

Made-with: Cursor
Copy link
Copy Markdown
Member

@doistbot doistbot left a comment

Choose a reason for hiding this comment

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

This PR fixes the rendering of loose lists in the Prose component by utilizing the :has() selector to apply appropriate margins between items. It is a great improvement that cleanly restores expected visual gaps for Markdown content while preserving the existing spacing for tight lists. However, the current selector specifically targets direct paragraph children and might miss other CommonMark block elements—such as preformatted text or blockquotes—that could also produce loose list items.

Share FeedbackReview Logs

@craigcarlyle craigcarlyle self-assigned this Apr 3, 2026
@craigcarlyle craigcarlyle requested review from a team and pauloslund and removed request for a team April 3, 2026 16:55
@craigcarlyle craigcarlyle merged commit 67d6aae into main Apr 3, 2026
4 of 6 checks passed
@craigcarlyle craigcarlyle deleted the craig/fix-prose-loose-list-spacing branch April 3, 2026 16:55
doist-release-bot bot added a commit that referenced this pull request Apr 3, 2026
## [30.1.1](v30.1.0...v30.1.1) (2026-04-03)

### Bug Fixes

* pass NPM_TOKEN to semantic-release in release workflow ([#1026](#1026)) ([cc23af1](cc23af1))
* preserve spacing for loose lists in Prose component ([#1025](#1025)) ([67d6aae](67d6aae))
doist-release-bot bot added a commit that referenced this pull request Apr 3, 2026
## [30.1.1](v30.1.0...v30.1.1) (2026-04-03)

### Bug Fixes

* pass NPM_TOKEN to semantic-release in release workflow ([#1026](#1026)) ([cc23af1](cc23af1))
* preserve spacing for loose lists in Prose component ([#1025](#1025)) ([67d6aae](67d6aae))
* revert partial 30.1.1 release to allow clean re-release ([#1027](#1027)) ([64c6447](64c6447))
@doist-release-bot
Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 30.1.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@doist-release-bot doist-release-bot bot added the Released PRs that have been merged and released label Apr 3, 2026
@craigcarlyle
Copy link
Copy Markdown
Contributor Author

@pauloslund This is being reverted, no need to review.

craigcarlyle added a commit that referenced this pull request Apr 3, 2026
craigcarlyle added a commit that referenced this pull request Apr 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Released PRs that have been merged and released

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants