feat(many): support current spacing tokens in the margin prop for v2 components#2587
Open
balzss wants to merge 1 commit into
Open
feat(many): support current spacing tokens in the margin prop for v2 components#2587balzss wants to merge 1 commit into
balzss wants to merge 1 commit into
Conversation
…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>
|
Visual regression report
Diff images (1)view.png — 5306 pixels differBaselines come from the |
ToMESSKa
requested changes
Jun 18, 2026
git-nandor
requested changes
Jun 18, 2026
| * familiar CSS-like shorthand. For example: `margin="small auto large"`. | ||
| * Valid values are `0`, `none`, `auto`, and Spacing token values, | ||
| * see https://instructure.design/layout-spacing. Apply these values via | ||
| * familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`. |
Contributor
There was a problem hiding this comment.
In v2 Avatar, Flex, FormFieldLayout, Link still recommend the legacy margin="small auto large"
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
3 participants
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 & why
The current (era-3) spacing tokens —
general.*,gap.*,padding.card.*(dot-path notation, e.g.margin="general.spaceMd") — already resolved at runtime in View v2, but theSpacingprop type and the docs only advertised the two older token eras. So the new tokens had no autocomplete, no type hints, and weren't documented.This PR makes them first-class on the
marginprop of v2 components. Non-breaking — the older tokens still resolve at runtime and are only marked@deprecated.What changed
emotion)CurrentSpacingValues(era-3 dot-paths) to theSpacingunion; mark era-1 / era-2 unions@deprecated.marginJSDoc across all v2props.tsfiles — link to the spacing guide + current-token example.marginexamples togeneral.*tokens (value-preserving mapping).theme-overridesversion-banner pattern.calcSpacingFromShorthand; View v2 integration test (general.spaceMd→0.75rem); regression-test page examples.Reviewer notes
small→general.spaceMd,medium→general.spaceXl, …).large/x-largehave nogeneralequivalent (scale tops out at 2rem) and compress togeneral.space2xl— the only intentional visual change, limited to doc examples.margin/paddingonly. These resolve era-3 dot-paths viacalcSpacingFromShorthand. TheFlexgapprop uses a separate flat-key resolver that doesn't understand dot-paths, so it's intentionally not shown with them.Testing
pnpm run test:vitest emotion→ 78 passedpnpm run test:vitest ui-view→ 16 passedFollow-ups (not in this PR)
paddingprop examples still use legacy tokens (kept out of scope; easy identical sweep).(string & {})) and only warn at runtime — a louder dev-mode warning could be added later.