feat(many): support current spacing tokens in the margin prop for v2 components#2587
feat(many): support current spacing tokens in the margin prop for v2 components#2587balzss wants to merge 1 commit into
Conversation
|
Visual regression report
Diff images (1)view.png — 5306 pixels differBaselines come from the |
| * 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"`. |
There was a problem hiding this comment.
In v2 Avatar, Flex, FormFieldLayout, Link still recommend the legacy margin="small auto large"
…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 across all v2 components to point at the spacing guide and use a current-token example - docs: re-add the Layout Spacing guide as a v11.7+ version-gated page, following the theme-overrides version-banner pattern; convert legacy margin values in v2 README examples to the current general.* tokens (value-preserving mapping) - 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 Opus 4.8 (1M context) <noreply@anthropic.com>
balzss
force-pushed
the
new-margin-spacing
branch
from
4eb8fa9 to
6da57ff
Compare
There was a problem hiding this comment.
see my comments. Also looking at the token code, its really not clear for me where the tokens are coming from. Is it in SharedTokens or in Semantics? I guess its in SharedTokens, otherwise we could have different values for each theme. But then the token values from semaintics need to be deleted? e.g. ui-themes/src/themes/newThemeTokens/dark/semantics.ts vs ui-themes/src/themes/newThemeTokens/dark/sharedTokens.ts
| type: embed | ||
| --- | ||
| <Alert variant="warning" margin="0 0 medium"> | ||
| The spacing tokens documented on this page (such as <code>general.spaceMd</code>) require <strong>v11.7+</strong> components and are applied through the <code>margin</code> and <code>padding</code> props. If you are viewing the v11.6 version, <Link href={window.location.pathname.match(/v\d+_\d+/) ? window.location.pathname.replace(/v\d+_\d+/, 'v11_7') : `/v11_7${window.location.pathname}`}>switch to v11.7</Link> to see the examples working correctly. |
There was a problem hiding this comment.
If you are viewing the v11.6 version, switch to v11.7 to see the examples working correctly.
no need for this text, it always shows 11.7
|
|
||
| ## Tokens | ||
|
|
||
| ### General scale |
There was a problem hiding this comment.
I would also add that the actual values are theme-dependent
| | padding.card.md | 0.75rem | 12px | | ||
| | padding.card.lg | 1rem | 16px | | ||
|
|
||
| ## Applying spacing |
There was a problem hiding this comment.
I would also mention which part of our themes contain these tokens (is it in sharedTokens?)
4 participants
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.