Skip to content

feat(many): support current spacing tokens in the margin prop for v2 components#2587

Open
balzss wants to merge 1 commit into
masterfrom
new-margin-spacing
Open

feat(many): support current spacing tokens in the margin prop for v2 components#2587
balzss wants to merge 1 commit into
masterfrom
new-margin-spacing

Conversation

@balzss

@balzss balzss commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

Summary

Makes the current (era-3) spacing tokensgeneral.*, gap.*, and padding.card.* dot-paths — first-class on the margin prop of v2 components. View v2 already resolved them at runtime, but the Spacing prop type and the component/guide docs only advertised the two older token eras, so the new tokens had no autocomplete, no validation, and weren't documented.

What's included

  • emotion — add CurrentSpacingValues (era-3 dot-path literals) to the Spacing union; mark the era-1 (OldSpacingValues) and phased-out era-2 (NewSpacingValues) unions as @deprecated. Non-breaking — old tokens still resolve.
  • v2 components — sync the margin JSDoc to the canonical wording (link to the spacing guide, current-token example) across the v2 props.ts files.
  • docs — rewrite the Layout Spacing guide to lead with the current tokens (verified value tables) and demote the older eras to a "Deprecated tokens" section; update View/Flex/Tag README examples.
  • tests — era-3 dot-path resolution in calcSpacingFromShorthand, View v2 integration tests (general.spaceMd0.75rem), and regression-test page examples.

Scope / decisions

  • v2 components only; padding prop and v1/legacy components intentionally left out.
  • Dot-path API kept as-is — no resolver/token-merge change.

Verification

  • pnpm run test:vitest emotion (78 pass) and ui-view (16 pass)
  • pnpm run ts:check clean; eslint 0 errors

Remaining

  • Visual regression (regression-test Cypress/Chromatic) not yet run — page examples added.
  • Misspelled tokens still compile (type ends in (string & {})) and fail silently at runtime; a louder dev-mode warning could be added as a follow-up.

…components

Surface the current (era-3) spacing tokens (general.*, gap.*, padding.card.*
dot-paths) on the `margin` prop of v2 components. View v2 already resolved them
at runtime, but the `Spacing` type and component docs only advertised the older
token eras.

- emotion: add CurrentSpacingValues dot-path literals to the Spacing union and
  mark the legacy (era-1) and phased-out (era-2) unions as @deprecated
- v2 components: sync the margin JSDoc to point at the spacing guide and use a
  current-token example
- docs: rewrite the Layout Spacing guide to lead with the current tokens and
  demote the older eras to a "Deprecated tokens" section; update View/Flex/Tag
  README examples
- tests: cover era-3 dot-path resolution in calcSpacingFromShorthand and add
  View v2 integration tests; add regression-test examples

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

Copy link
Copy Markdown
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2587/

Built to branch gh-pages at 2026-06-10 12:37 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

github-actions Bot pushed a commit that referenced this pull request Jun 10, 2026
@github-actions

Copy link
Copy Markdown

Visual regression report

⚠️ Changes detected.

Status Count
Unchanged 31
Changed 1
New 0
Removed 0

📊 View full report

Diff images (1)

view.png — 5306 pixels differ

Baselines come from the visual-baselines branch. They refresh on every merge to master.

@balzss balzss self-assigned this Jun 10, 2026
@balzss balzss marked this pull request as ready for review June 11, 2026 11:44
@balzss balzss requested review from ToMESSKa and git-nandor June 11, 2026 11:44
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