feat(ActionGroup): add preserveOrder prop for DOM-order layout by Lisa18289 · Pull Request #2652 · mittwald/flow

Lisa18289 · 2026-07-15T13:04:34Z

Was

Führt eine additive Prop preserveOrder (Default false) auf ActionGroup ein. Damit trennen wir die zwei Layout-Modi sauber:

Default (sortiert): unverändert — automatische Anordnung nach Slot/Farbe (abort links, primary rechts), mit Gap. Verschoben unter einen .sorted-Modifier, sodass sich für bestehende Consumer (Modal, Confirmation-Modals) nichts ändert.
preserveOrder: die ActionGroup erzwingt nichts — keine Sortierung, keine Ausrichtung, kein Gap. Buttons bleiben in DOM-Reihenfolge; Ausrichtung/Abstand regelt der umgebende Kontext per CSS.

Consumer umgestellt

Kontext	Verhalten
Modal / Confirmation	unverändert (sortiert, Gap, cancel-links/primary-rechts)
Alert	`preserveOrder` — links, DOM-Reihenfolge
Section-Header	neu: ActionGroup wird unterstützt (in den Header-`actions`-Tunnel, rechtsbündig, `size="s"`)
IllustratedMessage, LightBox, Message, List	`preserveOrder` — DOM-Reihenfolge

LightBox behält seinen eigenen vertikalen row-gap (bewusst, Icon-Button-Spalte).

Ergänzt

Story PreserveOrder (ActionGroup) und WithHeaderActionGroup (Section)
Docs-Beispiel + Abschnitt „Reihenfolge beibehalten" auf der ActionGroup-Seite
Remote-Visual-Test ActionGroup-preserveOrder (prüft zugleich, dass die Prop die Remote-Grenze übersteht)
Generierte Remote-Artefakte regeneriert (RemoteActionGroupElement)

Hinweis Screenshots

Alert/IllustratedMessage/Message/List/Section ändern ihr visuelles Verhalten und der neue Test hat noch keine Baseline — deshalb das update-screenshots-Label, damit die Baselines in der CI generiert werden.

Verifiziert lokal

pnpm build ✅ · pnpm nx test:compile components ✅ · pnpm nx test:compile remote-react-components ✅

🤖 Generated with Claude Code

Introduce an additive `preserveOrder` prop (default `false`) on ActionGroup. When set, the group imposes nothing: no color-based sorting, no abort/primary pole-split, no alignment and no gap between actions — the buttons stay in source order and the surrounding context controls spacing and placement via its own CSS. The automatic arrangement (sorting, gap, flex-end) now lives under a `.sorted` modifier, so the default rendering is unchanged for existing consumers (Modal, confirmation modals). Adopt DOM-order layout in the contexts that want it: - Alert: actions left-aligned in source order - Section header: now supports ActionGroup (tunneled into the header actions, right-aligned, size s), matching the existing single-button placement - IllustratedMessage, LightBox, Message, List: opt into preserveOrder Add a story, a docs example, and a remote visual test for preserveOrder. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-07-15T13:05:13Z

Coverage Report for ./packages/components/

Status	Category	Percentage	Covered / Total
🔵	Lines	80.59%	324 / 402
🔵	Statements	80.53%	331 / 411
🔵	Functions	85.22%	75 / 88
🔵	Branches	67.26%	150 / 223

File Coverage

No changed files found.

Generated in workflow #5644 for commit d71d99e by the Vitest Coverage Report Action

github-actions · 2026-07-15T13:13:30Z

🚀 Preview Deployment

Preview environments are ready:

Type	URL
docs	pr-2652.docs.review.flow-components.de
storybook	pr-2652.storybook.review.flow-components.de

Images:

docs: ghcr.io/mittwald/flow/docs:pr-2652
storybook: ghcr.io/mittwald/flow/storybook:pr-2652

Co-authored-by: Lisa18289 <84317589+Lisa18289@users.noreply.github.com>

preserveOrder should only drop the automatic slot sorting and the abort-left/primary-right pole-split — not the spacing between actions. Move the gap back onto the base .actionGroup so it applies in both modes; only justify-content/flex-grow/order/margins stay under the .sorted modifier. Update the docs wording accordingly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-authored-by: Lisa18289 <84317589+Lisa18289@users.noreply.github.com>

In preserveOrder mode ActionGroup no longer applies slot classes or the abort/primary auto-margins, and the base group no longer forces justify-content. Remove overrides that only existed to counteract that: - IllustratedMessage: the `button { margin: 0 }` reset (no auto-margins to cancel anymore) - Message: `justify-content: start` on the action group (now the flex default). The .actionGroupAction marker class is kept — it still distinguishes group buttons from standalone .action buttons. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The base ActionGroup only sets flex-grow:1 under the .sorted modifier, so in preserveOrder contexts flex-grow is already the initial value 0. Remove the now-redundant `flex-grow: 0` overrides on the action groups in LightBox, LightBoxGallery and the List header. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drop the sentence about group alignment being up to the surrounding context. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drop the trailing clause about spacing and left-to-right layout. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…d row-gap The action group's vertical spacing now comes from the ActionGroup's own gap (spacing "m" = --size-px--m), which equals the previous --light-box--spacing, so there is no visual change. Drop row-gap from the shared .actions/.actionGroup rule and keep it only on .actions (which still spaces the close button from the group). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Same as the LightBox change: the gallery item action group gets its vertical spacing from the ActionGroup's own gap (spacing "m" = --size-px--m, equal to the previous --light-box--spacing), so drop the dedicated row-gap. No visual change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Add a `size` prop on ActionGroup that propagates to the buttons and links inside the group via its PropsContext, replacing the per-consumer `ActionGroup: { Button: { size: "s" } }` pattern. Migrate Alert, the Section header and Message to `ActionGroup: { size: "s" }`; links inside those groups are now sized as well. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Document the new size prop: a Storybook story, a docs example plus an "Größe" section on the ActionGroup page, and a remote visual test covering size "s"/"m" with buttons and links. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-authored-by: Lisa18289 <84317589+Lisa18289@users.noreply.github.com>

Give the link the "secondary" slot and make the size "m" group mirror the size "s" group, so the screenshot compares identical content at both sizes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…ignment-review-9b36b7

Co-authored-by: Lisa18289 <84317589+Lisa18289@users.noreply.github.com>

The stretch prop no longer exists after merging main; remove it from the preserveOrder and size examples. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…iew-9b36b7' into claude/actiongroup-alignment-review-9b36b7

Address review feedback: type the size prop as ButtonProps["size"] instead of duplicating the literal, and add size/preserveOrder to the PropsContextProvider dependencies so the context updates when they change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…ignment-review-9b36b7

Lisa18289 added the update-screenshots Label a PR to update the screenshots used for visual regression testing label Jul 15, 2026

Lisa18289 requested review from Jan-Eimertenbrink, ins0, maaaathis and mfal as code owners July 15, 2026 13:04