Skip to content

feat(lynx): add AspectRatio component#1648

Open
junghyeonsu wants to merge 2 commits into
lynx-toggle-pkgfrom
lynx-aspect-ratio-pkg
Open

feat(lynx): add AspectRatio component#1648
junghyeonsu wants to merge 2 commits into
lynx-toggle-pkgfrom
lynx-aspect-ratio-pkg

Conversation

@junghyeonsu

Copy link
Copy Markdown
Contributor

Summary

Adds AspectRatio to @seed-design/lynx-react.

Changes

  • AspectRatio uses the native aspect-ratio CSS property (no ::before/padding-bottom hack — Lynx has no pseudo-element styling). overflow defaults to hidden (matches web). radius/stroke are left to ImageFrame.
  • AspectRatio PoC page in examples/lynx-spa (VariantCatalog with picsum placeholder images, mode="aspectFill")
  • Fix: VariantCatalog "Examples" tab now scrolls (flex flex-col was missing on the wrapper)

Verification

  • lynx-react: typecheck + 25 tests + build green
  • lynx-spa: typecheck green
  • Device PoC confirmed: ratios (1:1/4:3/16:9/3:4) render correctly, children fill, images cover

Stack

PR 4/4 — base: lynx-toggle-pkg (PR #1647). AspectRatio itself is independent; it sits at the end of the stack. Merge #1645#1646#1647 → this.

🤖 Generated with Claude Code

@changeset-bot

changeset-bot Bot commented Jun 8, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 6cc0adc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@seed-design/lynx-react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitai Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ab2e35c4-60a0-40c1-840d-05e86bad19b5

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch lynx-aspect-ratio-pkg

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@junghyeonsu junghyeonsu self-assigned this Jun 8, 2026
junghyeonsu and others added 2 commits June 8, 2026 19:09
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@junghyeonsu junghyeonsu force-pushed the lynx-aspect-ratio-pkg branch from 6cc0adc to c113c93 Compare June 8, 2026 10:09
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