View: add center keyword for insetInline and insetBlock#650
Merged
Conversation
Adds insetInline and insetBlock props to View and supports a new "center" value on both, which centers absolutely positioned elements on their axis via 50% inset combined with a translate. Also fixes the zIndex resolver return type missing classNames, which broke the mixin typecheck. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01F6V36sEHRNKzN996awyGmG
size-limit report 📦
|
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
insetInlineandinsetBlockprops toView(the style mixin already had resolvers for them, but they weren't exposed on the component)"center"keyword value alongside unit numbers and"auto".insetInline="center"centers an absolutely positioned element on the inline axis,insetBlock="center"on the block axis, and setting both centers it fullyleft: 50%(ortop: 50%) plus atranslate: -50%on the matching axis. The two axes compose through--rs-inset-translate-x/ycustom properties (registered with@property … inherits: falseso they don't leak into nested centered elements), so using both keywords resolves totranslate: -50% -50%widthresolver (@value center/@value unit), so responsive values like{ s: "center", m: 4 }correctly switch between centering and unit insets per viewport, with the translate reset on unit viewportsleft/top) are used for the center value on purpose: centering is symmetric, so this keeps it direction-agnostic and RTL needs no extra handlingzIndexresolver's return type missingclassNames, which broketsconresolveMixinsince the last commit on mainRelated Issue
N/A
Screenshots / Recordings
Verified in a real browser (Storybook + Playwright) by measuring bounding boxes against the container center across LTR/RTL and s/m viewports:
insetInline="center"insetBlock="center"insetInline={{ s: "center", m: 4 }}All centered cases measured a 0.0px offset from the container center. New story examples were added under the View
insetstory.Notes for Reviewers
inset.csskeeps the attribute-selector rules forinset,insetTop/Bottom/Start/End; only the inline/block rules moved intoinset.module.csssince they now need value-based classnamesvar(--rs-inset-translate-x, 0)fallbacks keep centering working in browsers without@propertysupport (with the minor caveat that the custom properties become inheritable there)insetInline/insetBlockresolvers reflect the added classnames; all 181 unit tests pass,tsc(esm and stories configs) and stylelint/oxlint are clean🤖 Generated with Claude Code
https://claude.ai/code/session_01F6V36sEHRNKzN996awyGmG
Generated by Claude Code