fix(end-page): align thank-you paragraph typography with other admin content#9756
fix(end-page): align thank-you paragraph typography with other admin content#9756tutntut wants to merge 2 commits into
Conversation
Reproduces #9434 — markdown bullets in the thank-you page paragraph render differently from the surrounding text. Added ahead of the fix so before/after can be compared on the same story. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…content The end page styled its admin-authored paragraph with subhead-1 (weight 500, secondary.500) while every other renderer of primary admin-authored paragraph content (FormInstructions, SectionField, ParagraphField) uses body-1 (weight 400, secondary.700). This made the whole thank-you paragraph read as bolded, and markdown bullets inside it visibly inconsistent with the rest of the platform. Use the shared body-1/secondary.700 baseline so both plain paragraphs and bullet lists on the thank-you page match admin content elsewhere. Closes #9434 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
| @@ -56,8 +56,8 @@ export const EndPageBlock = ({ | |||
| const mdComponents = useMdComponents({ | |||
| styles: { | |||
| text: { | |||
There was a problem hiding this comment.
Why the fix is here rather than in the shared useMdComponents hook: the reported "bolded bullets" were a symptom, not the bug. EndPageBlock styled its admin-authored paragraph with subhead-1 (weight 500, secondary.500), while every other renderer of primary admin-authored paragraph content — FormInstructions, SectionField, ParagraphField — uses body-1 (weight 400, secondary.700). A survey of all 15 useMdComponents consumers confirmed EndPageBlock was the sole outlier among primary-paragraph renderers (ImageField and FormLabel deviate deliberately, as smaller supporting text). Changing the end-page text style to the shared baseline fixes bullets and plain paragraphs in one move.
Alternatives tried and rejected:
- A
listStylesfallback inuseMdComponentssoulpicks upstyles.text— only patched bullets, left plain paragraphs at weight 500, and added complexity to a shared hook to work around one caller. This was the first implementation attempt and was reverted. - Passing explicit
liststyles from EndPageBlock only — same partial-fix problem.
Closes #9434
Problem
Markdown bullet points added to the thank-you page paragraph render with visibly different styling from the surrounding text — the paragraph text appears bolded while the bullets do not. Closes #9434.
Solution
The bolded bullets were a symptom, not the bug: the end page styled its admin-authored paragraph with
subhead-1(weight 500,secondary.500), while every other renderer of primary admin-authored paragraph content — FormInstructions, SectionField, ParagraphField — usesbody-1(weight 400,secondary.700). A survey of all 15useMdComponentsconsumers confirmed the end page was the sole outlier. SwitchingEndPageBlockto the shared baseline fixes both plain paragraphs and bullet lists in one move. A Storybook story with a bulleted paragraph was added as a repro.Alternatives considered
useMdComponentshook soulelements would pick up the caller's text style, but dropped it — it only patched bullets, leaving plain end-page paragraphs still rendered at weight 500, and it added complexity to a shared hook to work around one caller's styling choice.subhead-1, but the git history is flattened at the monorepo migration, so the original intent is unrecoverable. It likely aimed to make the thank-you message read as a subtitle under the h2 title — fine for one-liners, but it breaks down for multi-paragraph admin content with lists.Screenshots
Breaking Changes
No - backwards compatible. Note the visual change applies to every form's thank-you page (paragraph weight 500 → 400, colour
secondary.500→secondary.700) — worth a design sanity-check.Tests
TC1: bulleted thank-you paragraph
* item)TC2: existing plain thank-you paragraphs
Clean-up
🤖 Generated with Claude Code