Skip to content

feat(webkit): add a border prop to LogView - #828

Merged
isaquebock merged 4 commits into
mainfrom
feat/log-view-border
Jul 29, 2026
Merged

feat(webkit): add a border prop to LogView#828
isaquebock merged 4 commits into
mainfrom
feat/log-view-border

Conversation

@gabriel-lisboa-azion

@gabriel-lisboa-azion gabriel-lisboa-azion commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

Summary

The log shell always drew its own outline and corner radius. Placed inside a surface that already frames it — an accordion panel, a drawer, a card — that produced a visible box inside a box, and the only escape was for the consumer to override the border with a class.

border defaults to true, so nothing changes for existing consumers. Setting it false drops the outline and the radius together (both hang off data-border, so one attribute governs the pair) and leaves the internal header/footer dividers alone — those separate regions within the shell, not the shell from its host.

Tests

Full webkit suite green (83 files / 1694 passing, 6 skipped), eslint + vue-tsc clean, catalog:check regenerated (the new prop is in the MCP catalog). New coverage:

  • data-border is "true" by default and absent when border: false — the attribute is the whole mechanism, so its presence is the thing worth asserting rather than the classes hanging off it;
  • the Flush story fixture composes and renders the borderless shell.

Visual regression

Baselines are regenerated and committed (ubuntu-latest, via the app-storybook-generate-baseline dispatch). Delta: 6 files, all new, nothing moved, no orphans.

  • 6 newcomponents-code-logview--flush* across the 6-mode matrix.
  • 12 unchangedDefault and Loading came back byte-identical, which is the proof the prop is additive: the border stays on by default and no current consumer's rendering shifts.

I checked the Flush baseline itself rather than trusting the count: the card draws one frame, the shell inside draws no second outline or radius, and the internal header/body divider is retained. That is exactly the documented split between framing the shell and separating regions within it.

Notes

  • Additive prop, default preserves current rendering — no migration for consumers.
  • Spec, argTypes, story and "Show code" snippet all updated together, so the docs panel stays paste-and-run.
  • No new dependency. No breaking change.

The log shell always drew its own outline and corner radius. Placed inside a
surface that already frames it - an accordion panel, a drawer, a card - that
produced a visible box inside a box, and the only escape was for the consumer
to override the border with a class.

border defaults to true, so nothing changes for existing consumers. Setting it
false drops the outline and the radius together (both hang off data-border, so
one attribute governs the pair) and leaves the internal header/footer dividers
alone - those separate regions within the shell, not the shell from its host.

The Flush story renders the borderless shell inside a framed card, which is the
case the prop exists for and the one the visual matrix needs to see.
gabriel-lisboa-azion and others added 3 commits July 29, 2026 08:58
Six new snapshots for the borderless shell rendered inside a framed card - the
case the border prop exists for, and one no existing story covered.

Default and Loading keep the border by default, so their 12 snapshots came back
byte-identical: the prop is additive and changes nothing for current consumers.
Verified in the baseline that the shell draws no second outline or radius inside
the card while its internal header/body divider is retained, which is the
documented split between framing the shell and separating regions within it.

Generated on ubuntu-latest via app-storybook-generate-baseline; no baseline
outside components-code-logview changed, and none was orphaned.
@isaquebock
isaquebock merged commit 83cd899 into main Jul 29, 2026
23 checks passed
@robsongajunior
robsongajunior deleted the feat/log-view-border branch July 29, 2026 17:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

4 participants