Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: mark inset*, marginBlock*, marginInline*, paddingBlock* and paddingInline* props as built-in support #219

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+44 −98
Open

feat: mark inset*, marginBlock*, marginInline*, paddingBlock* and paddingInline* props as built-in support #219

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9817b67
feat: add new layout props
ecreeth Oct 14, 2024
2d3fb88
Merge branch 'main' into add-new-layout-props
ecreeth Nov 13, 2024
5f3a3e3
fix: snapshots tests
ecreeth Nov 13, 2024
c8d25c4
feat: add new layout props
ecreeth Oct 14, 2024
e75fa97
fix: snapshots tests
ecreeth Nov 13, 2024
71f927b
Merge branch 'add-new-layout-props' of https://github.com/ecreeth/rea…
ecreeth Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions apps/website/docs/api/02-css/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,13 +156,13 @@ The following tables represent the compatibility status of the strict CSS API fo
| gap | ✅ | ✅ | |
| height | ✅ | ✅ | |
| inlineSize | 🟡 | 🟡 | |
| inset | 🟡 | 🟡 | |
| insetBlock | 🟡 | 🟡 | |
| insetBlockEnd | 🟡 | 🟡 | |
| insetBlockStart | 🟡 | 🟡 | |
| insetInline | 🟡 | 🟡 | |
| insetInlineEnd | 🟡 | 🟡 | |
| insetInlineStart | 🟡 | 🟡 | |
| inset | ✅ | ✅ | |
| insetBlock | ✅ | ✅ | |
| insetBlockEnd | ✅ | ✅ | |
| insetBlockStart | ✅ | ✅ | |
| insetInline | ✅ | ✅ | |
| insetInlineEnd | ✅ | ✅ | |
| insetInlineStart | ✅ | ✅ | |
| isolation | ✅ | ✅ | |
| justifyContent | ✅ | ✅ | |
| justifyItems | ❌ | ❌ | |
Expand All @@ -175,13 +175,13 @@ The following tables represent the compatibility status of the strict CSS API fo
| listStylePosition | ❌ | ❌ | |
| listStyleType | ❌ | ❌ | |
| margin | ✅ | ✅ | |
| marginBlock | 🟡 | 🟡 | |
| marginBlockEnd | 🟡 | 🟡 | |
| marginBlockStart | 🟡 | 🟡 | |
| marginBlock | ✅ | ✅ | |
| marginBlockEnd | ✅ | ✅ | |
| marginBlockStart | ✅ | ✅ | |
| marginBottom | ✅ | ✅ | |
| marginInline | 🟡 | 🟡 | |
| marginInlineEnd | 🟡 | 🟡 | |
| marginInlineStart | 🟡 | 🟡 | |
| marginInline | ✅ | ✅ | |
| marginInlineEnd | ✅ | ✅ | |
| marginInlineStart | ✅ | ✅ | |
| marginLeft | ✅ | ✅ | |
| marginRight | ✅ | ✅ | |
| marginTop | ✅ | ✅ | |
Expand All @@ -208,13 +208,13 @@ The following tables represent the compatibility status of the strict CSS API fo
| overflowX | ❌ | ❌ | |
| overflowY | ❌ | ❌ | |
| padding | ✅ | ✅ | |
| paddingBlock | 🟡 | 🟡 | |
| paddingBlockEnd | 🟡 | 🟡 | |
| paddingBlockStart | 🟡 | 🟡 | |
| paddingBlock | ✅ | ✅ | |
| paddingBlockEnd | ✅ | ✅ | |
| paddingBlockStart | ✅ | ✅ | |
| paddingBottom | ✅ | ✅ | |
| paddingInline | 🟡 | 🟡 | |
| paddingInlineEnd | 🟡 | 🟡 | |
| paddingInlineStart | 🟡 | 🟡 | |
| paddingInline | ✅ | ✅ | |
| paddingInlineEnd | ✅ | ✅ | |
| paddingInlineStart | ✅ | ✅ | |
| paddingLeft | ✅ | ✅ | |
| pointerRight | ✅ | ✅ | |
| pointerTop | ✅ | ✅ | |
Expand Down
53 changes: 0 additions & 53 deletions packages/react-strict-dom/src/native/stylex/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -553,63 +553,10 @@ export function props(
nativeProps.cursorColor = styleValue;
}
}
// inset
else if (styleProp === 'inset') {
nextStyle.top = nextStyle.top ?? styleValue;
nextStyle.start = nextStyle.start ?? styleValue;
nextStyle.end = nextStyle.end ?? styleValue;
nextStyle.bottom = nextStyle.bottom ?? styleValue;
} else if (styleProp === 'insetBlock') {
nextStyle.top = nextStyle.top ?? styleValue;
nextStyle.bottom = nextStyle.bottom ?? styleValue;
} else if (styleProp === 'insetBlockEnd') {
nextStyle.bottom = flatStyle.bottom ?? styleValue;
} else if (styleProp === 'insetBlockStart') {
nextStyle.top = flatStyle.top ?? styleValue;
} else if (styleProp === 'insetInline') {
nextStyle.end = nextStyle.end ?? styleValue;
nextStyle.start = nextStyle.start ?? styleValue;
} else if (styleProp === 'insetInlineEnd') {
nextStyle.end = flatStyle.end ?? styleValue;
} else if (styleProp === 'insetInlineStart') {
nextStyle.start = flatStyle.start ?? styleValue;
}
// lineClamp polyfill
else if (styleProp === 'lineClamp') {
nativeProps.numberOfLines = styleValue;
}
// marginBlock
else if (styleProp === 'marginBlock') {
nextStyle.marginVertical = styleValue;
} else if (styleProp === 'marginBlockStart') {
nextStyle.marginTop = nextStyle.marginTop ?? styleValue;
} else if (styleProp === 'marginBlockEnd') {
nextStyle.marginBottom = nextStyle.marginBottom ?? styleValue;
}
// marginInline
else if (styleProp === 'marginInline') {
nextStyle.marginHorizontal = styleValue;
} else if (styleProp === 'marginInlineStart') {
nextStyle.marginStart = styleValue;
} else if (styleProp === 'marginInlineEnd') {
nextStyle.marginEnd = styleValue;
}
// paddingBlock
else if (styleProp === 'paddingBlock') {
nextStyle.paddingVertical = styleValue;
} else if (styleProp === 'paddingBlockStart') {
nextStyle.paddingTop = nextStyle.paddingTop ?? styleValue;
} else if (styleProp === 'paddingBlockEnd') {
nextStyle.paddingBottom = nextStyle.paddingBottom ?? styleValue;
}
// paddingInline
else if (styleProp === 'paddingInline') {
nextStyle.paddingHorizontal = styleValue;
} else if (styleProp === 'paddingInlineStart') {
nextStyle.paddingStart = styleValue;
} else if (styleProp === 'paddingInlineEnd') {
nextStyle.paddingEnd = styleValue;
}
// '::placeholder' polyfill
else if (styleProp === 'placeholderTextColor') {
nativeProps.placeholderTextColor = styleValue;
Expand Down
47 changes: 23 additions & 24 deletions packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -999,10 +999,7 @@ exports[`properties: logical direction inlineSize: minInlineSize after minWidth
exports[`properties: logical direction inset: inset 1`] = `
{
"style": {
"bottom": 1,
"end": 1,
"start": 1,
"top": 1,
"inset": 1,
},
}
`;
Expand All @@ -1011,6 +1008,7 @@ exports[`properties: logical direction inset: inset vs top 1`] = `
{
"style": {
"bottom": 100,
"insetBlockStart": 3,
Copy link
Contributor

@necolas necolas Oct 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks like a regression? Depends on whether RN ignore the logical style in favor of the physical style

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is how RN works, so this might be expected.

"left": 10,
"right": 10,
"top": 100,
Expand All @@ -1021,8 +1019,7 @@ exports[`properties: logical direction inset: inset vs top 1`] = `
exports[`properties: logical direction inset: insetBlock 1`] = `
{
"style": {
"bottom": 2,
"top": 2,
"insetBlock": 2,
},
}
`;
Expand All @@ -1031,6 +1028,7 @@ exports[`properties: logical direction inset: insetBlock vs top 1`] = `
{
"style": {
"bottom": 100,
"insetBlockStart": 3,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here too

"top": 100,
},
}
Expand All @@ -1039,7 +1037,7 @@ exports[`properties: logical direction inset: insetBlock vs top 1`] = `
exports[`properties: logical direction inset: insetBlockEnd 1`] = `
{
"style": {
"bottom": 4,
"insetBlockEnd": 4,
},
}
`;
Expand All @@ -1048,21 +1046,23 @@ exports[`properties: logical direction inset: insetBlockEnd vs bottom 1`] = `
{
"style": {
"bottom": 100,
"insetBlockEnd": 4,
},
}
`;

exports[`properties: logical direction inset: insetBlockStart 1`] = `
{
"style": {
"top": 3,
"insetBlockStart": 3,
},
}
`;

exports[`properties: logical direction inset: insetBlockStart vs top 1`] = `
{
"style": {
"insetBlockStart": 3,
"top": 100,
},
}
Expand All @@ -1071,120 +1071,119 @@ exports[`properties: logical direction inset: insetBlockStart vs top 1`] = `
exports[`properties: logical direction inset: insetInline 1`] = `
{
"style": {
"end": 5,
"start": 5,
"insetInline": 5,
},
}
`;

exports[`properties: logical direction inset: insetInlineEnd 1`] = `
{
"style": {
"end": 7,
"insetInlineEnd": 7,
},
}
`;

exports[`properties: logical direction inset: insetInlineStart 1`] = `
{
"style": {
"start": 6,
"insetInlineStart": 6,
},
}
`;

exports[`properties: logical direction margin: marginBlock 1`] = `
{
"style": {
"marginVertical": 1,
"marginBlock": 1,
},
}
`;

exports[`properties: logical direction margin: marginBlockEnd 1`] = `
{
"style": {
"marginBottom": 3,
"marginBlockEnd": 3,
},
}
`;

exports[`properties: logical direction margin: marginBlockStart 1`] = `
{
"style": {
"marginTop": 2,
"marginBlockStart": 2,
},
}
`;

exports[`properties: logical direction margin: marginInline 1`] = `
{
"style": {
"marginHorizontal": 1,
"marginInline": 1,
},
}
`;

exports[`properties: logical direction margin: marginInlineEnd 1`] = `
{
"style": {
"marginEnd": 3,
"marginInlineEnd": 3,
},
}
`;

exports[`properties: logical direction margin: marginInlineStart 1`] = `
{
"style": {
"marginStart": 2,
"marginInlineStart": 2,
},
}
`;

exports[`properties: logical direction padding: paddingBlock 1`] = `
{
"style": {
"paddingVertical": 1,
"paddingBlock": 1,
},
}
`;

exports[`properties: logical direction padding: paddingBlockEnd 1`] = `
{
"style": {
"paddingBottom": 3,
"paddingBlockEnd": 3,
},
}
`;

exports[`properties: logical direction padding: paddingBlockStart 1`] = `
{
"style": {
"paddingTop": 2,
"paddingBlockStart": 2,
},
}
`;

exports[`properties: logical direction padding: paddingInline 1`] = `
{
"style": {
"paddingHorizontal": 1,
"paddingInline": 1,
},
}
`;

exports[`properties: logical direction padding: paddingInlineEnd 1`] = `
{
"style": {
"paddingEnd": 3,
"paddingInlineEnd": 3,
},
}
`;

exports[`properties: logical direction padding: paddingInlineStart 1`] = `
{
"style": {
"paddingStart": 2,
"paddingInlineStart": 2,
},
}
`;
Expand Down
Loading