Skip to content

feat: add gap, aspectRatio, flex, direction and boxSizing to UiTransform - #1528

Draft
cyaiox wants to merge 1 commit into
mainfrom
cyaiox/feat-react-ecs
Draft

feat: add gap, aspectRatio, flex, direction and boxSizing to UiTransform#1528
cyaiox wants to merge 1 commit into
mainfrom
cyaiox/feat-react-ecs

Conversation

@cyaiox

@cyaiox cyaiox commented Aug 6, 2026

Copy link
Copy Markdown
Member

What

Adds the remaining "easy" Yoga layout properties to UiTransformProps in @dcl/react-ecs:

  • gap / rowGap / columnGap — flexbox gutters with CSS-like semantics. gap accepts a single value (both axes) or a two-value shorthand ('10px 5%' → row then column); supports px, %, vw, vh and bare numbers via the existing parsePositionUnit pipeline. Longhands win over the shorthand on their axis.
  • aspectRatio — locks the element's width/height ratio.
  • flex — the Yoga flex shorthand. The prop already existed in UiTransformProps but was silently dropped at serialization because PBUiTransform had no such field; it now works.
  • direction — layout direction ('inherit' | 'ltr' | 'rtl').
  • boxSizing'border-box' | 'content-box'.

Protocol dependency

Built on decentraland/protocol#460 (fields 78–87 + YGDirection/YGBoxSizing enums on component 1050). Both @dcl/protocol pins currently point at that PR's CI package — they must be repointed to the published version once the protocol PR merges, before this lands (make update-protocol).

Notes

  • New enum zero-values equal Yoga's defaults (YGDIR_INHERIT, YGBS_BORDER_BOX), so proto3 default-omission and the reconciler's falsy-diff behavior are both safe.
  • Snapshots regenerated; the non-UI .crdt diffs are bundle-size/malloc counters from the enlarged generated protobuf code. No ERR! lines.
  • Renderer support is required for these to take effect in-world (Unity/Bevy need to map the new fields into Yoga/Taffy; percentage gap needs Yoga ≥ 3.1, box_sizing needs Yoga ≥ 3.2). Until then the fields serialize and are ignored.

Testing

  • 4 new react-ecs test cases (shorthand parsing, longhand precedence, clearing transitions) + full/unset serialization cases in UiComponent.spec.ts.
  • Full make test: 155 suites / 1159 tests green, @dcl/ecs 100% coverage gate passing.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying js-sdk-toolchain with  Cloudflare Pages  Cloudflare Pages

Latest commit: d32c26c
Status: ✅  Deploy successful!
Preview URL: https://f63bf955.js-sdk-toolchain.pages.dev
Branch Preview URL: https://cyaiox-feat-react-ecs.js-sdk-toolchain.pages.dev

View logs

@github-actions

github-actions Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Test this pull request

  • The @dcl/sdk package can be tested in scenes by running

    npm install "https://sdk-team-cdn.decentraland.org/@dcl/js-sdk-toolchain/branch/cyaiox/feat-react-ecs/dcl-sdk-7.25.1-31092407930.commit-97ef834.tgz"
  • The @dcl/js-runtime package can be tested in scenes by running

    npm install "https://sdk-team-cdn.decentraland.org/@dcl/js-sdk-toolchain/branch/cyaiox/feat-react-ecs/@dcl/js-runtime/dcl-js-runtime-7.25.1-31092407930.commit-97ef834.tgz"
  • To test with npx init

    export SDK_COMMANDS="https://sdk-team-cdn.decentraland.org/@dcl/js-sdk-toolchain/branch/cyaiox/feat-react-ecs/dcl-sdk-commands-7.25.1-31092407930.commit-97ef834.tgz"
    npx $SDK_COMMANDS init
  • The /changerealm command to test test in-world

    /changerealm https://sdk-team-cdn.decentraland.org/ipfs/cyaiox/feat-react-ecs-e2e
    
  • You can preview this build entering:
    https://playground.decentraland.org/?sdk-branch=cyaiox/feat-react-ecs

@github-actions

github-actions Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

⚠️ Local Dependencies Detected

This PR contains package dependencies that use local paths (file:) or non-allowed URLs (http:, https:, git:).
These must be published and referenced properly before merging.

Not allowed dependencies:

- Dependency @dcl/protocol is not pointing to a published version: https://sdk-team-cdn.decentraland.org/@dcl/protocol/branch//dcl-protocol-1.0.0-31028775440.commit-ffd471e.tgz

Review the workflow logs for more details.

Note: This comment is automatically updated when the PR is updated.

@cyaiox
cyaiox marked this pull request as draft August 6, 2026 16:42
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