docs(foundations): add Feedback page defining pressed scale - #1994
Draft
minnimalist wants to merge 6 commits into
Draft
docs(foundations): add Feedback page defining pressed scale#1994minnimalist wants to merge 6 commits into
minnimalist wants to merge 6 commits into
Conversation
Define Pressed Scale as the visual feedback for press interactions. The shrink amount is defined as a fixed distance (2px) rather than a fixed ratio. The ratio is derived from the element size: basis = max(height, width / 4, 24). Add cross links between Motion, State and the new Interaction page. Co-Authored-By: Claude <noreply@anthropic.com>
…ules Position Interaction as the category of press responses and list the four expressions SEED actually uses (color, scale, margin, corner radius), so the page title no longer promises more than the content covers. Give the Scale vs Content Scale decision a single test: does shrinking the whole element break alignment, spacing or corner radius? Break the reason into those three parts and add Accordion as an example. Document how scale combines with Selected, Disabled and Loading, and state that scale does not affect layout. Remove the Checkbox example — checkbox.yaml has no pressed definition and checkmark.yaml only changes color, so the claim was not accurate. Retitle that step to cover nesting, which is what the remaining content describes. Co-Authored-By: Claude <noreply@anthropic.com>
Expand the "should this shrink" step with two checks: does the element have a surface, and does pressing it resolve to a single outcome. A List Item still qualifies even when it contains a Switch, because pressing anywhere in the row converges on one result. A content card whose tap, like, save and author actions are peers does not — use a background treatment there instead. Drop the nesting step. Its only example was inaccurate and the remaining guidance did not warrant its own step. Add image placeholders for the surface comparison, the single-action comparison, and the two Content Scale diagrams. Co-Authored-By: Claude <noreply@anthropic.com>
|
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Alpha Preview (Stackflow SPA)
|
Contributor
Alpha Preview (Storybook)
|
Contributor
Alpha Preview (Docs)
|
Rename the Foundations entry from Interaction to Feedback and turn it into a tabbed folder, so the pressed-scale content lives under a Scale tab. - feedback/meta.json declares `layout: "tabs"` with a Scale tab - feedback/index.mdx holds the overview and the four press expressions - feedback/scale.mdx holds the pressed-scale definition (was interaction.mdx) - motion.mdx and state.mdx now link to Feedback and Feedback > Scale Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
minnimalist
changed the title
The overview tab was a thin bridge into the scale content, and the content reads as one continuous flow — so a routed tab split worked against it. Collapse the tabbed folder back into one page; the ToC already provides the anchor navigation a tab strip would have duplicated. Also broaden the intro: feedback spans colour, scale, padding and radius as well as non-visual channels such as haptics, and this page defines scale. Promote tabs again once haptic or padding actually have documents. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
minnimalist
changed the title
Radius is no longer listed among the ways feedback is expressed, and the remaining prose is broken into shorter, plainer sentences. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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
2 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.
Summary
Adds a new Foundations › Feedback page defining pressed-scale feedback, plus cross-links from the existing Motion and State pages.
docs/content/foundations/feedback.mdx— new pagedocs/content/foundations/motion.mdx— +2 lines (link to Feedback)docs/content/foundations/state.mdx— +2 lines (mention scale on Pressed + link to the Scale section)Feedback is framed as the broader subject — colour, scale, padding and radius, plus non-visual channels such as haptics — and this page defines scale. Kept as a single page: the content reads as one continuous flow, and the ToC already provides the anchor navigation a tab strip would duplicate. Promote to routed tabs (like
foundations/color) once haptic or padding actually have documents.The core decision
Shrink is defined as a distance (2px) rather than a fixed ratio:
A fixed ratio makes the travelled distance grow with element width — at
0.98, an 80px-wide button moves 1.6px while a 720px one moves 14.4px, with no upper bound. Deriving the ratio from element size instead keeps the perceived amount of "press" consistent everywhere.Known gaps
coverImagefrontmatter is missing — needs a 3200×1680 asset atpublic/og/foundations/feedback.{png,webp}. Every other foundations page has one.images:og:generateonly transcodes png↔webp, so the asset has to be produced first.FigmaImageplaceholders are commented out pending real node ids. They must stay commented until then —id=""fails the build (requires a static non-empty 'id' prop).$scale.s95/s97/s98) inaction-button.yaml/list-item.yaml. Docs-first by intent; token migration to follow.Preview
https://work-foundations-interaction.seed-design.pages.dev/foundations/feedback
🤖 Generated with Claude Code