fix(ui): keep field errors red inside dialog sections - #501
Merged
Merged
Conversation
`.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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changes
Field errors inside a
PanelDialog.Sectionare red again. Before, every fielderror 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.Maintoolbar and in aDetailPanelsection'sactions: their descriptions and errors now keep thestandalone 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 pwas meant for the section subtitle butmatched every paragraph in the section, including the body. It is more
specific than
.k2b-ui .k2b-field__error, and the stylesheet is unlayered, soit also beat utility classes and notice styles.
AppOverviewandDetailPanelused the same barepselector in their headers, which reachedinto 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, andDetailPanel(
docs-site/src/ui/context/layout/) now say that only the container's ownsubtitle or description is muted and that fields in the body or slots keep
their own description and error styles.
Verification
container-field-parts.browser.test.ts: places a fieldwith a description and an error inside a
PanelDialog.Section, theAppOverviewtoolbar, and aDetailPanelsection's actions, and comparestheir 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.
bounding boxes and computed styles with the stylesheet from
mainand fromthis 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 checkpasses (after rebasing onto current
main).bun run check: 18/18 rules pass.git diff --checkis clean.