feat(Alert): add preserveLineBreaks prop by fneves · Pull Request #1277 · ClickHouse/click-ui

fneves · 2026-10-20T13:18:17Z

Description

Add an opt-in preserveLineBreaks prop on Alert. When it is true, string text uses white-space: pre-wrap and overflow-wrap: anywhere. It defaults to false. Default Alert rendering matches main.

The title stays one line. The prop does not add a class on the title.

WarningAlert, DangerAlert, InfoAlert, and SuccessAlert pass the prop through.

The style applies only to string text. ReactNode text does not change, because white-space inherits.

Why `preserveLineBreaks`

The name states the user-facing goal: keep \n as line breaks in the text. It is not a CSS identifier such as preWrap. It is not preserveWhitespace, which would claim consecutive spaces as the feature. The overflow wrap for long tokens is a companion to that line-break opt-in.

Opt-in decision

preserveLineBreaks defaults to false. Existing alerts keep collapsed whitespace. Consumers that pass error strings with \n set the prop.

The title does not opt in. A heading stays one line.

Control-plane follow-up: pass preserveLineBreaks on WarningAlert in ErrorBox.tsx and drop the QueryErrorAlert styled override.

Links and tickets

CUI-335
SQL-2580 (consumer follow-up after this ships)

Good to know

Visual: unchanged by default. Existing Alert snapshots still pass.
The new Multiline text story snapshot changed on purpose. The title string still contains \n, and it now renders as one line. The text keeps its line breaks.
Stories: CollapsedNewlines shows the default. MultilineText and LongUnbrokenToken set preserveLineBreaks. Playground has a boolean control.

Checklist

Breaking changes? (add migration notes in changesets) — not breaking. Minor changeset for a new prop. Default behaviour is unchanged.
Visual changes? (specify in changesets) — none by default. Opt-in text only. The title stays one line.
Design review needed?

Contribution

Sufficient research before PR
Self-reviewed the PR
Manually tested the changes (when applies - visual confirmation in Storybook)
build and build-storybook work locally
Tests and Stories are aligned with the changes

Accessibility

Keyboard - no new interactive controls. Dismiss still works with the existing button.
Names — dismiss still has aria-label="close". No new icon-only controls.
Vision — colors still come from tokens. I checked WCAG 2.2 1.4.4 Resize / wrap on the opt-in long-token story. The title stays one line, so the heading does not split. I did not re-run axe in the Storybook Accessibility panel.

Screenshots

Default (preserveLineBreaks={false}): \n collapses.

Opt-in (preserveLineBreaks={true}): line breaks stay in the text.

Opt-in long unbroken token wrapping:

Note

Low Risk
Opt-in display behavior on a UI component with default unchanged; no auth, data, or API surface changes.

^{Reviewed by Cursor Bugbot for commit 41b78b9. Bugbot is set up for automated code reviews on this repo. Configure here.}

Render `\n` in string `text` and `title` with pre-wrap, and wrap long unbroken tokens. ReactNode content is unchanged. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

changeset-bot · 2026-10-20T13:18:25Z

🦋 Changeset detected

Latest commit: 41b78b9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

CLAassistant · 2026-10-20T13:19:15Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

Keep default Alert rendering unchanged. String text and title preserve newlines only when preserveLineBreaks is true. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

Show Alexey's SQL Console S3 signatures error with preserveLineBreaks off and on so the PR before/after matches the original control-plane case. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

Use multilineS3SignaturesError for the multi-line S3 signatures error (SQL-2580 / CUI-335). The rendered message text is unchanged. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

preserveLineBreaks sets pre-wrap only on string text. A title stays one line, including when the string contains a newline. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

XOP

we can proceed with this change and add extra Text.wrap mode later for convenience

Restore the original title markup. The opt-in class only sets white-space: pre-wrap. Long tokens still wrap through the existing word-break on the text wrapper. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

workflow-authentication-public · 2026-10-23T11:50:00Z

Storybook Preview Deployed

✅ Preview URL: https://click-kg1elalmo-clickhouse.vercel.app

Built from commit: fe2c191e1fa744f750ea65c75588f054c5716143

workflow-authentication-public · 2026-10-23T11:50:50Z

Chromatic Storybook

Check	Status	Link
Storybook	✅ 670 stories published	Open Storybook
UI Tests	⏳ 6 changes must be accepted as baselines	Open build

Built from commit: 41b78b9c918010c090e959283d847d8203d88698 · Chromatic run

_{Statuses as of the end of the run. The build link shows the live review state.}

XOP

LGTM :)

fix(Alert): preserve line breaks in string text

7c2ffb5

Render `\n` in string `text` and `title` with pre-wrap, and wrap long unbroken tokens. ReactNode content is unchanged. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

feat(Alert): add preserveLineBreaks opt-in prop

d4497b1

Keep default Alert rendering unchanged. String text and title preserve newlines only when preserveLineBreaks is true. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

cursor Bot changed the title ~~fix(Alert): preserve line breaks in string text~~ feat(Alert): add preserveLineBreaks prop Oct 20, 2026

cursoragent and others added 2 commits October 20, 2026 15:42

test(Alert): add S3 signatures error before/after stories

198bcbf

Show Alexey's SQL Console S3 signatures error with preserveLineBreaks off and on so the PR before/after matches the original control-plane case. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

test(Alert): rename the S3 signatures error fixture

4fdc537

Use multilineS3SignaturesError for the multi-line S3 signatures error (SQL-2580 / CUI-335). The rendered message text is unchanged. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

XOP reviewed Oct 21, 2026

View reviewed changes

Comment thread src/components/Alert/Alert.module.css Outdated

fix(Alert): keep the title on one line

cb9d2ff

preserveLineBreaks sets pre-wrap only on string text. A title stays one line, including when the string contains a newline. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

fneves marked this pull request as ready for review October 23, 2026 08:03

XOP reviewed Oct 23, 2026

View reviewed changes

Comment thread src/components/Alert/Alert.tsx Outdated

Comment thread src/components/Alert/Alert.module.css Outdated

fix(Alert): limit preserveLineBreaks to the text

41b78b9

Restore the original title markup. The opt-in class only sets white-space: pre-wrap. Long tokens still wrap through the existing word-break on the text wrapper. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

XOP approved these changes Oct 23, 2026

View reviewed changes

fneves merged commit 822b25d into main Oct 23, 2026
12 checks passed

fneves deleted the fn/cui-335-alert-line-breaks-6722 branch October 23, 2026 15:36

fneves mentioned this pull request Oct 23, 2026

feat(Alert): add maxHeight with show more toggle #1279

Open

10 of 11 tasks

Navigation Menu

Repository navigation

feat(Alert): add preserveLineBreaks prop - #1277

feat(Alert): add preserveLineBreaks prop#1277
fneves merged 6 commits into
mainfrom
fn/cui-335-alert-line-breaks-6722

fneves commented Oct 20, 2026 •

edited by cursor Bot

Loading

Uh oh!

changeset-bot Bot commented Oct 20, 2026 •

edited

Loading

Uh oh!

CLAassistant commented Oct 20, 2026

Uh oh!

Uh oh!

XOP left a comment

Uh oh!

Uh oh!

Uh oh!

workflow-authentication-public Bot commented Oct 23, 2026

Uh oh!

workflow-authentication-public Bot commented Oct 23, 2026

Uh oh!

XOP left a comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

fneves commented Oct 20, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Why preserveLineBreaks

Opt-in decision

Links and tickets

Good to know

Checklist

Contribution

Accessibility

Screenshots

Uh oh!

changeset-bot Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

CLAassistant commented Oct 20, 2026

Uh oh!

Uh oh!

XOP left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

workflow-authentication-public Bot commented Oct 23, 2026

Storybook Preview Deployed

Uh oh!

workflow-authentication-public Bot commented Oct 23, 2026

Chromatic Storybook

Uh oh!

XOP left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

fneves commented Oct 20, 2026 •

edited by cursor Bot

Loading

Why `preserveLineBreaks`

changeset-bot Bot commented Oct 20, 2026 •

edited

Loading