feat(Alert): add maxHeight with show more toggle by fneves · Pull Request #1279 · ClickHouse/click-ui

fneves · 2026-10-23T17:17:36Z

Description

Alert takes four new optional props. Long alert or error text can now be capped, so a long message no longer shifts the layout around it. This follow-up was agreed in #1277.

maxHeight?: number | string caps the collapsed alert, toggle included. A number is px; a string is any CSS length ('12lh', '100%'). When the text overflows, a Show more / Show less toggle appears.
onExpandedChange?: (expanded: boolean) => void fires when the user toggles. It only fires when maxHeight is set.
expandLabel / collapseLabel (strings) default to 'Show more' / 'Show less'.
WarningAlert, DangerAlert, InfoAlert and SuccessAlert pass the props through.

<WarningAlert title="Query failed" text={error.message} preserveLineBreaks maxHeight={240} />
<WarningAlert key={run.id} text={error.message} maxHeight="100%" onExpandedChange={track} />

Behaviour:

Collapsed: the text is clipped to maxHeight, fades out at the bottom (mask-image, which works on any background), and shows the toggle.
Expanded: the cap lifts. In a sized parent the alert fills that parent, and the text scrolls inside when it is taller than the parent. Show less returns to the collapsed cap and scrolls back to the top.
Fit check: the toggle only appears when the text doesn't fit the space it would have without the toggle, so it can't get stuck at the boundary. The title stays pinned, and only the text area clips or scrolls.
State: the expanded state is internal. Remount with key to reset it.
Default: without maxHeight, nothing changes. No new class, custom property, observer or DOM.

Links and tickets

CUI-336
Follow-up from CUI-335 / feat(Alert): add preserveLineBreaks prop #1277

Good to know

Deliberately out of scope: controlled expanded / defaultExpanded, and opening the text in a modal.
Pre-existing Alert issues, unchanged here, for a follow-up: the dismiss button's name sits on the icon, the root has no role, AlertProps doesn't extend HTMLAttributes, and there is no forwardRef.
Overflow measuring: a private hook, useAlertOverflow, in the Alert folder. It is not exported, and useIsTruncated is untouched. Observers are created once per mount and not rebuilt on toggle.
Tokens: no exact token exists for the fade height or the toggle gap, so they use the nearest spacing tokens: --click-container-space-sm and --click-container-gap-xxs.
Prefixed mask: -webkit-mask-image sits beside mask-image under a scoped stylelint disable, because the browserslist targets include Chrome below 120 and the build has no autoprefixer.
MaxHeightBounded story: the alert sits in a 240px column. Collapsed height stays at maxHeight. Expanded height fills the column and the text scrolls.
MaxHeightKeyboard story: once expanded, the scroll region is one Shift+Tab back from the toggle, because the DOM order is title, text, toggle.
Open question for maintainers: feat(Alert): add preserveLineBreaks prop #1277 also floated a dedicated error-message component instead of growing Alert. This PR takes the prop route; happy to discuss.
No new dependencies. eslint-suppressions.json is unchanged.

Checklist

Breaking changes? (add migration notes in changesets) — no. The changeset is minor.
Visual changes? (specify in changesets) — only when maxHeight is set. Collapsed snapshots are unchanged. The four expanded snapshots were regenerated because the expanded alert now fills its container.
Design review needed? — yes, for the text-style toggle and the labels.

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 — the toggle is a native <button> (Enter / Space), and focus stays on it after both actions. While expanded and scrollable, the text area is focusable, so arrow keys scroll it. Tabbing onto a link inside clipped text expands the alert. Esc doesn't apply.
Names — the toggle's visible label is its accessible name, with aria-expanded and aria-controls. When a title exists, the scroll region is role="region", named by the title.
Vision — the toggle inherits the alert text colour, and its focus ring uses --click-global-color-outline-default. The fade is removed in forced-colors mode. The text toggle is under 24 px tall and relies on the WCAG 2.5.8 spacing exception (it sits alone on its row).

WCAG 2.2 criteria checked: 1.4.3 Contrast (the toggle inherits the alert text colour), 2.1.1 Keyboard, 2.4.3 Focus Order, 2.4.7 Focus Visible, 2.5.3 Label in Name, 4.1.2 Name, Role, Value. In the Storybook Accessibility panel, axe shows no new violations on the new stories. The existing colour-contrast findings on info-state alerts also appear on the current StateInfo story. Not tested with a real screen reader.

Screencast

Collapsed, then expanded (the alert fills the container and the text scrolls), then collapsed.

Note

Low Risk
Additive optional API on a display component with no change when maxHeight is omitted; moderate complexity in overflow measurement and a11y but heavily tested.

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

Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

…g it Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

changeset-bot · 2026-10-23T17:17:42Z

🦋 Changeset detected

Latest commit: ca3b277

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-23T17:18:33Z

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.}

Collapsed alerts stay capped by maxHeight. Expanded alerts lift that cap, grow to the parent, and scroll the text when it still overflows. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

The expanded alert now fills its container, so the expanded captures are taller and show the text scrollbar. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

workflow-authentication-public · 2026-10-26T08:59:19Z

Storybook Preview Deployed

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

Built from commit: afc2417f0912334c144fd8f6ff24b27270913ec7

workflow-authentication-public · 2026-10-26T09:01:46Z

Chromatic Storybook

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

Built from commit: ca3b27708a1e9480dca977c66bbda2bcbcdf0f11 · Chromatic run

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

cursor

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit ca3b277. Configure here.}

cursor · 2026-10-26T09:05:15Z

+  min-height: 0;
+  max-height: none;
+  flex: 1 1 auto;
+}


Expanding drops the height cap

High Severity

Expanding applies alert_expanded, which sets max-height to none. If the parent has no definite height, height: 100% and flex: 1 1 auto do nothing, so the alert grows with the text. Overflow then measures as false, the Show less toggle unmounts, and the expanded layout cannot be collapsed.

Additional Locations (1)

src/components/Alert/Alert.tsx#L199-L200

^{Reviewed by Cursor Bugbot for commit ca3b277. Configure here.}

cursoragent and others added 7 commits October 23, 2026 16:47

feat(Alert): add maxHeight with show more toggle

081e3a3

Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

docs(Alert): add max height stories

c8be6c0

Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

test(Alert): add max height visual specs

07bb24a

Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

chore: add changeset for Alert maxHeight

ef7572d

Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

docs(Alert): spy on onExpandedChange in play stories

182d160

Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

fix(Alert): disconnect height observers when the alert is dismissed

9d3d9ce

Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

fix(Alert): let the title wrap in maxHeight mode instead of truncatin…

68815ed

…g it Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

cursoragent and others added 2 commits October 26, 2026 08:55

fix(Alert): fill the container when maxHeight is expanded

ebca59d

Collapsed alerts stay capped by maxHeight. Expanded alerts lift that cap, grow to the parent, and scroll the text when it still overflows. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

test(Alert): update expanded maxHeight snapshots

ca3b277

The expanded alert now fills its container, so the expanded captures are taller and show the text scrollbar. Co-authored-by: Fábio Neves <fabio.neves@clickhouse.com>

cursor Bot reviewed Oct 26, 2026

View reviewed changes

Navigation Menu

Repository navigation

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

feat(Alert): add maxHeight with show more toggle#1279
fneves wants to merge 9 commits into
mainfrom
fn/cui-336-alert-max-height-0fd0

fneves commented Oct 23, 2026 •

edited by cursor Bot

Loading

Uh oh!

changeset-bot Bot commented Oct 23, 2026 •

edited

Loading

Uh oh!

CLAassistant commented Oct 23, 2026

Uh oh!

workflow-authentication-public Bot commented Oct 26, 2026

Uh oh!

workflow-authentication-public Bot commented Oct 26, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Oct 26, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

Description

Links and tickets

Good to know

Checklist

Contribution

Accessibility

Screencast

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

CLAassistant commented Oct 23, 2026

Uh oh!

workflow-authentication-public Bot commented Oct 26, 2026

Storybook Preview Deployed

Uh oh!

workflow-authentication-public Bot commented Oct 26, 2026

Chromatic Storybook

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Oct 26, 2026

Choose a reason for hiding this comment

Expanding drops the height cap

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fneves commented Oct 23, 2026 •

edited by cursor Bot

Loading

changeset-bot Bot commented Oct 23, 2026 •

edited

Loading