Skip to content

feat: let inset dock take a second value for the spanned sides - #246

Merged
tenphi merged 1 commit into
mainfrom
feat-dock-span-value
Jul 29, 2026
Merged

feat: let inset dock take a second value for the spanned sides#246
tenphi merged 1 commit into
mainfrom
feat-dock-span-value

Conversation

@tenphi

@tenphi tenphi commented Jul 29, 2026

Copy link
Copy Markdown
Owner

Follow-up to #244. dock shipped in 2.10.0 applying a single value to both the pinned edge and the sides it spans, so there was no way to inset the sides differently from the edge.

Change

Values are already consumed positionally by the named directions:

inset: '1x 2x left right'   // left 1x, right 2x

So the value after the directional ones now applies to the perpendicular pair that dock spans:

inset: '2x 4x bottom dock'  // inset: auto 32px 16px 32px   (bottom 2x, sides 4x)
inset: '2x 4x right dock'   // inset: 32px 16px 32px auto   (right 2x, top/bottom 4x)

With no second value the span keeps reusing the edge's own value, so everything released in 2.10.0 is unchanged:

inset: 'bottom dock'      // inset: auto 0 0 0
inset: '2x bottom dock'   // inset: auto 16px 16px 16px
inset: 'right dock'       // inset: 0 0 0 auto
inset: 'dock'             // inset: 0

The span pass runs before the explicitly named directions, so a named direction always wins over the value it would otherwise inherit as a perpendicular side.

Note on the first slot

The requested shape was inset: '0 32x 16x 32x'; this emits auto 32px 16px 32px. The 32/16/32 match — the difference is the un-docked edge, which stays auto rather than becoming 0.

That's deliberate and consistent with 2.10.0: inset: 'bottom dock' gives auto 0 0 0. Pinning the opposite edge to 0 as well would stretch the element vertically, which is the opposite of docking it to the bottom. Happy to change it if 0 was actually intended rather than shorthand for "untouched".

Reviewer notes

  • 1747 tests pass (+1), tsc, eslint, prettier clean, all five size-limit entries within budget.
  • I dropped one test I first wrote for inset: '1x 2x bottom left dock'. My expected value was wrong, and tracing the real behaviour (16px 8px 8px 16px) showed why: with two directions, each one's span writes over the other's. Combining dock with several edges has no well-defined meaning, so rather than lock in confusing output with a test I left it unasserted and documented dock as intended for a single edge.
  • Docs and prop-type JSDoc updated with the two-value form.

🤖 Generated with Claude Code

Values are consumed positionally by the named directions —
`inset: '1x 2x left right'` sets left 1x and right 2x — so the value after the
directional ones now applies to the perpendicular pair a `dock` spans:

  inset: '2x 4x bottom dock'  ->  inset: auto 32px 16px 32px

With no second value the span keeps reusing the edge's own value, so
`inset: 'bottom dock'` and `inset: '2x bottom dock'` are unchanged.

The span is applied before the explicitly named directions so a named
direction always wins over the value it would inherit as a perpendicular side.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown
Contributor

📦 Snapshot release

Published 0.0.0-snapshot.ec4d6f3.

pnpm add @tenphi/tasty@0.0.0-snapshot.ec4d6f3

@tenphi
tenphi merged commit 6ae0b6a into main Jul 29, 2026
6 of 7 checks passed
@tenphi
tenphi deleted the feat-dock-span-value branch July 29, 2026 12:24
@github-actions github-actions Bot mentioned this pull request Jul 29, 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