Add marginX/marginY and paddingX/paddingY to the style attributes#619
Merged
simonklee merged 5 commits intoanomalyco:mainfrom Feb 4, 2026
Merged
Conversation
Introduce horizontal/vertical shorthand properties for margins and padding. Update LayoutOptions to include marginX, marginY, paddingX and paddingY; apply them in setOptions to set both corresponding Yoga edges; add instance setters that update the Yoga node and request a render. Add unit tests verifying acceptance of number, auto/percent (where applicable), null and undefined for each new property.
viralcodex
requested review from
Hona,
kommander,
msmps and
simonklee
as code owners
viralcodex
changed the title
Collaborator
|
Hi, I think that's fine to add as convenience and it's only additive to the API, so shouldn't be an issue. Now that we have proper docs for the website, maybe we could directly document that there as well? |
@opentui/core
@opentui/react
@opentui/solid
@opentui/core-darwin-arm64
@opentui/core-darwin-x64
@opentui/core-linux-arm64
@opentui/core-linux-x64
@opentui/core-win32-arm64
@opentui/core-win32-x64
commit: |
Contributor
Author
|
Hi @kommander, sure I can add it there as well, not an issue |
Update layout to include axis-specific spacing properties (paddingX, paddingY, marginX, marginY) in the docs.
Contributor
Author
|
@kommander, added in the docs, please let me know if I have missed something or something else is needed/changed. Thanks 😄 |
simonklee
added a commit
to simonklee/opentui
that referenced
this pull request
Feb 4, 2026
I noticed when reviewing anomalyco#619 that Yoga supports Edge.All, Edge.Horizontal, and Edge.Vertical to set multiple edges in a single call. Use these instead of calling setMargin or setPadding four times for uniform values or twice for axis values.
simonklee
added a commit
that referenced
this pull request
Feb 4, 2026
I noticed when reviewing #619 that Yoga supports Edge.All, Edge.Horizontal, and Edge.Vertical to set multiple edges in a single call. Use these instead of calling setMargin or setPadding four times for uniform values or twice for axis values. Co-authored-by: Matt Simpson <7691252+msmps@users.noreply.github.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
3 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.
Fixes: #618
Hi team,
Here's a small change that I have added.
X and Y attributes for both padding and margin just to make writing these values a little easier.
This is my first PR on this project and I am using this project for my own CLI tool I am building.
We can discuss and see if it fits with the project requirements.
But from a Dev experience point of view, I felt like I should add it to make it better, Also this aligns with people accustomed to tailwindCSS as well.
Here's a small demo:
Screen.Recording.2026-02-02.at.5.04.34.PM.mov