Skip to content

fix(ui): keep field errors red inside dialog sections - #501

Merged
ValentinKolb merged 2 commits into
mainfrom
fix/ui-dialog-section-field-errors
Oct 1, 2026
Merged

ValentinKolb merged 2 commits into
mainfrom
fix/ui-dialog-section-field-errors

Conversation

@ValentinKolb

Copy link
Copy Markdown
Collaborator

What changes

Field errors inside a PanelDialog.Section are red again. Before, every field
error in a section body rendered in the muted grey of the section subtitle,
with an extra top margin, so a validation message looked like a hint. Field
descriptions there had the same problem.

The same applies to fields placed in the AppOverview.Main toolbar and in a
DetailPanel section's actions: their descriptions and errors now keep the
standalone field styles.

Other paragraphs in these places (app hints, notices, paragraphs styled with
utility classes) also keep their own styles now instead of being forced to the
muted 11 or 12 px subtitle look. Section subtitles and panel descriptions look
exactly as before.

This answers a request from another Cloud application, where a form inside a
dialog section showed its validation errors in grey.

Why

.k2b-ui .k2b-panel-dialog__section p was meant for the section subtitle but
matched every paragraph in the section, including the body. It is more
specific than .k2b-ui .k2b-field__error, and the stylesheet is unlayered, so
it also beat utility classes and notice styles. AppOverview and
DetailPanel used the same bare p selector in their headers, which reached
into fields placed in their toolbar and actions slots.

The subtitle and the two header descriptions now have their own classes, and
only those are styled.

Documentation

The UI context pages for PanelDialog, AppOverview, and DetailPanel
(docs-site/src/ui/context/layout/) now say that only the container's own
subtitle or description is muted and that fields in the body or slots keep
their own description and error styles.

Verification

  • New browser test container-field-parts.browser.test.ts: places a field
    with a description and an error inside a PanelDialog.Section, the
    AppOverview toolbar, and a DetailPanel section's actions, and compares
    their computed color, size, and margin with a standalone field. It also
    checks that a paragraph styled by a layered utility keeps its color and size.
    With the old rules the error renders grey and the paragraph at 11 or 12 px.
  • No layout shift: section subtitles and header descriptions have identical
    bounding boxes and computed styles with the stylesheet from main and from
    this branch, measured in Chromium at 1440 px and 390 px (before rebasing onto
    a tabs-only change in main).
  • bun run --cwd packages/ui test: 714 tests pass, packed consumer check
    passes (after rebasing onto current main).
  • bun run check: 18/18 rules pass.
  • git diff --check is clean.

`.k2b-ui .k2b-panel-dialog__section p` was meant for the section subtitle
but matched every paragraph in the section body. It outranks
`.k2b-ui .k2b-field__error`, so every field error inside a
PanelDialog.Section rendered grey with an extra top margin, and the
stylesheet is unlayered, so it also overrode the utility classes and
notice styles of any other paragraph there.

The subtitle now has its own class and only that is styled. The same
bare-`p` pattern also reached into fields placed in the AppOverview
toolbar and DetailPanel section header slots; their descriptions get
classes too. Subtitles render identically (boxes and computed styles
match at 1440 and 390 px). A browser test compares a field's
description and error inside each container with a standalone field.
Dropping the bare `p` rules is meant to give every paragraph in a
PanelDialog section, the AppOverview toolbar, and a DetailPanel section's
actions its own styles, not only field descriptions and errors. That is a
visible change for app hints that were forced to 11 px muted before, so the
browser test now also places a paragraph styled by a layered utility next to
the field and checks that it keeps its color and size. With the old rules
it renders at 11 or 12 px in the muted color.

The DetailPanel context page gets the same note as PanelDialog and
AppOverview, since its section header changed the same way.
@ValentinKolb
ValentinKolb enabled auto-merge October 1, 2026 04:22
@ValentinKolb
ValentinKolb added this pull request to the merge queue Oct 1, 2026
Merged via the queue into main with commit 6ee0b0a Oct 1, 2026
17 checks passed
@ValentinKolb
ValentinKolb deleted the fix/ui-dialog-section-field-errors branch October 1, 2026 04:44
@github-actions github-actions Bot mentioned this pull request Oct 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant