feat(webkit): add a border prop to LogView - #828
Merged
Conversation
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.
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.
robsongajunior
approved these changes
Jul 29, 2026
gdsantana
approved these changes
Jul 29, 2026
isaquebock
approved these changes
Jul 29, 2026
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.
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.
borderdefaults totrue, so nothing changes for existing consumers. Setting itfalsedrops the outline and the radius together (both hang offdata-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-tscclean,catalog:checkregenerated (the new prop is in the MCP catalog). New coverage:data-borderis"true"by default and absent whenborder: false— the attribute is the whole mechanism, so its presence is the thing worth asserting rather than the classes hanging off it;Flushstory fixture composes and renders the borderless shell.Visual regression
Baselines are regenerated and committed (ubuntu-latest, via the
app-storybook-generate-baselinedispatch). Delta: 6 files, all new, nothing moved, no orphans.components-code-logview--flush*across the 6-mode matrix.DefaultandLoadingcame 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
Flushbaseline 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
argTypes, story and "Show code" snippet all updated together, so the docs panel stays paste-and-run.