Repository navigation
feat(ios): add the button-ios visual recipe and alias button to it - #1588
Merged
Merged
Conversation
Binds padding, gap, radius, fill and label color through {size} and {style}
templating. Adds the SPButton implementation row and aliases button to
button-ios so render button --platform ios draws it.
|
Contributor
🎨 Token Changes ReportTokens Changed (0)Original Branch: This comment was automatically generated by the token diff tool. 🤖 |
Contributor
🧩 Component Schema Changes ReportNo component schema changes detected.This comment was automatically generated by the component schema diff tool. 🤖 |
Contributor
Run report for fce755ddTotal time: 8m 58s | Comparison time: 22m 58s | Estimated savings: 14m (61.0% faster)
Expanded report
Changed files |
7 of 10 tasks
6 of 10 tasks
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
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.
Known difference from Figma
Proposal 014 acceptance 3 is not met: the rendered height for size m is 32, and Figma has 39 (node
3956:67377). The renderer does not drawpaddingBlockStartorpaddingBlockEnd, so the container height is the renderer default (32) for s, m and l. This PR ships with the mismatch: no literal height and no renderer change. The recipe keeps thev-paddingbindings (5, 8, 16) so they take effect once the renderer draws block padding. Tracked in p6ga.8.58, which blocks p6ga.8.40; that bead stays open until the height matches or acceptance 3 is amended on purpose. No foundation or other platform recipe binds block padding, so drawing it later will not change foundation snapshots. The mismatch is visible in the images: at size l the 28 radius on a 32 high container draws as an oval.Description
Adds the platform-owned iOS Button recipe and points
buttonat it for theiosplatform (slice 1 of p6ga.8.6, PR 3 of the platform-recipes series after #1585, #1586 and #1587). All changes are underplatforms/iosplus tests; no published package is touched.platforms/ios/extensions/visuals/button-ios.json: the recipe.{size}binds padding, gap and corner radius.{style}binds one fill entry each for default, hover, down and disabled, and one label color entry plus a disabled one. Down binds the realdowntokens from feat(ios): add button-ios component and stopgap button tokens #1587. The label is hidden throughvisibleWhenonisLabelHidden. No focus entry (Figma has no focus variant).platforms/ios/manifest.json:componentAliases: { "button": "button-ios" }. It ships with the recipe because an alias without one would breakrender button --platform ios.platforms/ios/extensions/implementations/button-ios.json: one row,ios/SPButton/spectrum-ios.cli_platform.rs(below).docs/proposals/014-platform-owned-visual-recipes.md: the recorded recipe line counts.Recipe size.
button-ios.jsonis 121 lines with Accent only, 121 with Accent and Primary, and 121 for the eight-style projection. A style adds zero recipe lines when its tokens follow the{style}pattern. I checked this by adding a throwawaynegativestyle (one option value and its tokens, recipe file untouched) in a scratch copy and rendering it. The explicit per-style sketch in the proposal would have cost 144, 197 and 250 lines for one, two and three styles.Left out, on purpose.
documentationUrlis optional (p6ga.8.56) and not part of this PR.Two corrections to the proposal sketch. Disabled is selected with
options.isDisabled: true, because a recipestatescondition matches only the request's interaction states (hover,down). Down binds thedowntokens, not the hover token.Related Issue
Beads p6ga.8.40, under epic p6ga.8 (platform-aware rendering). Follows #1585, #1586 and #1587; proposal 014.
Motivation and Context
render button --platform iosshould draw the iOS Button, not the foundation recipe. With the recipe, the alias and the implementation row, the iOS platform manifest now owns one component end to end, and the template-based recipe stays the same size as styles are added.How Has This Been Tested?
#3b63fband#4069fd(default),#274deaand#345bf8(hover and down), label white. Disabled isrgba(0,0,0,0.03)andrgba(255,255,255,0.07)with labelrgba(0,0,0,0.22)andrgba(255,255,255,0.28). The one difference is height (see "Known difference from Figma").scalekey) resolve under both.ios.validate --platform ioswith the guard's arguments exits 0 on main and on the branch with the same 1,328 warnings and no new diagnostic.--platform ios,catalog exportand the foundation renders of every recipe are byte-identical to main, and with--platform iosonlybuttonchanges (plus its site entry and thebutton-ioscatalog row).recipe_snapshots, goldens and the legacy output are unchanged.platform-recipes.e2e: renamed the first test to "ios as shipped passes with its button-ios recipe" and moved tests 2 and 3 to the foundation badge recipe, sincebuttonno longer resolves to the foundation file under ios. They still prove a replacement is reported as SPEC-080 and an unresolvable binding fails the guard.cli_platform.rs: newios_render_button_draws_button_ios_and_foundation_is_unchanged(distinct size, radius and Primary fill from the foundation button; same scene asrender button-ios; plainrender buttonis the foundation). The existing no-warning check forrender button --platform iosstill passes.cargo fmt --check,cargo clippy --all-targets -- -D warnings,moon run sdk:test sdk-wasm:test design-data:validate design-data:validate-dataset tokens:verifyLegacyOutput root:validate-platform-recipes root:test-platform-recipes-guard root:test-platform-recipes-e2e --force, the changeset linter with--fail-on-warnings,check-ci-coverageandai:check, all passing.pnpm-lock.yamlis unchanged.docs/proposals/014-platform-owned-visual-recipes.mdalready fails Prettier on main (table alignment); I left that formatting alone and the paragraph I added is Prettier-clean.applyPlatformpath with the real iOS manifest. The embedded dataset carries no manifests, and the existing WASM test already covers the alias with a fixture.Screenshots (if appropriate):
Rendered with
design-data render button --platform ios(sizes s, m, l; default, hover, disabled; Accent and Primary), converted to PNG with headless Chrome:/private/var/folders/lv/cnbsxznj0z3c_3r74g6xr0h40000gq/T/opencode/shots840/button-ios-light.png/private/var/folders/lv/cnbsxznj0z3c_3r74g6xr0h40000gq/T/opencode/shots840/button-ios-dark.pngTypes of changes
Checklist: