Add Fabric implementation of flow-relative padding and margin (#35342)

Summary:
Pull Request resolved: #35342

This is a native implementation of the JS shimmed layout-specific properties in #35316.

There is an experiment splitting the prop splitting codepath in Fabric, so this change effectively has two implementations depending on whether `enablePropIteratorSetter` is enabled.

None of these changes make sense to propagate Yoga. `inlineEnd`, etc are already mapped to `YGEdgeStart` and `YGEdgeEnd`, but RN's mapping used a different name. Then `blockStart`, `blockEnd`, map directly to existing edges in all cases since we don't support a writing mode.

On web, the last value in the style which computes the given dimension is given precedence. E.g. if "left" comes after "start" it will be chosen. Yoga stylesheets are unordered, and precedence for edges is given based on specificity (left > start > horizontal > all).

We give precedence to new renamings (e.g. start to inlineStart), but to preserve consistent behavior, we give precedence to specific edges before overwriting them with flow relative ones (e.g. marginTop has precedence over marginBlockStar).

Changelog:
[General][Added] - Add Fabric implementation of flow-relative padding and margin

Reviewed By: javache

Differential Revision: D41267765

fbshipit-source-id: 896e2ed71fe8bf83aef00b0a9d70fd20b2ce47a7

Author: NickGerleman

Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -49,9 +49,15 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   justifyContent: true,
   left: true,
   margin: true,
+  marginBlock: true,
+  marginBlockEnd: true,
+  marginBlockStart: true,
   marginBottom: true,
   marginEnd: true,
   marginHorizontal: true,
+  marginInline: true,
+  marginInlineEnd: true,
+  marginInlineStart: true,
   marginLeft: true,
   marginRight: true,
   marginStart: true,
@@ -63,9 +69,15 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   minWidth: true,
   overflow: true,
   padding: true,
+  paddingBlock: true,
+  paddingBlockEnd: true,
+  paddingBlockStart: true,
   paddingBottom: true,
   paddingEnd: true,
   paddingHorizontal: true,
+  paddingInline: true,
+  paddingInlineEnd: true,
+  paddingInlineStart: true,
   paddingLeft: true,
   paddingRight: true,
   paddingStart: true,

Libraries/NativeComponent/BaseViewConfig.android.js

@@ -212,24 +212,36 @@ const validAttributesForNonEventProps = {
   display: true,
 
   margin: true,
-  marginVertical: true,
-  marginHorizontal: true,
-  marginStart: true,
-  marginEnd: true,
-  marginTop: true,
+  marginBlock: true,
+  marginBlockEnd: true,
+  marginBlockStart: true,
   marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginInline: true,
+  marginInlineEnd: true,
+  marginInlineStart: true,
   marginLeft: true,
   marginRight: true,
+  marginStart: true,
+  marginTop: true,
+  marginVertical: true,
 
   padding: true,
-  paddingVertical: true,
-  paddingHorizontal: true,
-  paddingStart: true,
-  paddingEnd: true,
-  paddingTop: true,
+  paddingBlock: true,
+  paddingBlockEnd: true,
+  paddingBlockStart: true,
   paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingInline: true,
+  paddingInlineEnd: true,
+  paddingInlineStart: true,
   paddingLeft: true,
   paddingRight: true,
+  paddingStart: true,
+  paddingTop: true,
+  paddingVertical: true,
 
   borderWidth: true,
   borderStartWidth: true,

Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -249,25 +249,37 @@ const validAttributesForNonEventProps = {
   // borderEndWidth: true,
   // borderWidth: true,
 
-  marginTop: true,
-  marginRight: true,
+  margin: true,
+  marginBlock: true,
+  marginBlockEnd: true,
+  marginBlockStart: true,
   marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginInline: true,
+  marginInlineEnd: true,
+  marginInlineStart: true,
   marginLeft: true,
+  marginRight: true,
   marginStart: true,
-  marginEnd: true,
+  marginTop: true,
   marginVertical: true,
-  marginHorizontal: true,
-  margin: true,
 
-  paddingTop: true,
-  paddingRight: true,
+  padding: true,
+  paddingBlock: true,
+  paddingBlockEnd: true,
+  paddingBlockStart: true,
   paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingInline: true,
+  paddingInlineEnd: true,
+  paddingInlineStart: true,
   paddingLeft: true,
+  paddingRight: true,
   paddingStart: true,
-  paddingEnd: true,
+  paddingTop: true,
   paddingVertical: true,
-  paddingHorizontal: true,
-  padding: true,
 
   flex: true,
   flexGrow: true,

Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -69,9 +69,15 @@ export interface FlexStyle {
     | undefined;
   left?: number | string | undefined;
   margin?: number | string | undefined;
+  marginBlock?: number | string | undefined;
+  marginBlockEnd?: number | string | undefined;
+  marginBlockStart?: number | string | undefined;
   marginBottom?: number | string | undefined;
   marginEnd?: number | string | undefined;
   marginHorizontal?: number | string | undefined;
+  marginInline?: number | string | undefined;
+  marginInlineEnd?: number | string | undefined;
+  marginInlineStart?: number | string | undefined;
   marginLeft?: number | string | undefined;
   marginRight?: number | string | undefined;
   marginStart?: number | string | undefined;
@@ -84,8 +90,14 @@ export interface FlexStyle {
   overflow?: 'visible' | 'hidden' | 'scroll' | undefined;
   padding?: number | string | undefined;
   paddingBottom?: number | string | undefined;
+  paddingBlock?: number | string | undefined;
+  paddingBlockEnd?: number | string | undefined;
+  paddingBlockStart?: number | string | undefined;
   paddingEnd?: number | string | undefined;
   paddingHorizontal?: number | string | undefined;
+  paddingInline?: number | string | undefined;
+  paddingInlineEnd?: number | string | undefined;
+  paddingInlineStart?: number | string | undefined;
   paddingLeft?: number | string | undefined;
   paddingRight?: number | string | undefined;
   paddingStart?: number | string | undefined;

Libraries/StyleSheet/StyleSheetTypes.js

@@ -179,6 +179,25 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   margin?: DimensionValue,
 
+  /** Setting `marginBlock` has the same effect as setting both
+   *  `marginTop` and `marginBottom`.
+   */
+  marginBlock?: DimensionValue,
+
+  /** `marginBlockEnd` works like `margin-block-end`in CSS. Because React
+   *  Native doesn not support `writing-mode` this is always mapped to
+   *  `margin-bottom`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end
+   *  for more details.
+   */
+  marginBlockEnd?: DimensionValue,
+
+  /** `marginBlockEnd` works like `margin-block-end`in CSS. Because React
+   *  Native doesn not support `writing-mode` this is always mapped to
+   *  `margin-top`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end
+   *  for more details.
+   */
+  marginBlockStart?: DimensionValue,
+
   /** `marginBottom` works like `margin-bottom` in CSS.
    *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
    *  for more details.
@@ -196,6 +215,23 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   marginHorizontal?: DimensionValue,
 
+  /** Setting `marginInline` has the same effect as setting
+   *  both `marginLeft` and `marginRight`.
+   */
+  marginInline?: DimensionValue,
+
+  /**
+   * When direction is `ltr`, `marginInlineEnd` is equivalent to `marginRight`.
+   * When direction is `rtl`, `marginInlineEnd` is equivalent to `marginLeft`.
+   */
+  marginInlineEnd?: DimensionValue,
+
+  /**
+   * When direction is `ltr`, `marginInlineStart` is equivalent to `marginLeft`.
+   * When direction is `rtl`, `marginInlineStart` is equivalent to `marginRight`.
+   */
+  marginInlineStart?: DimensionValue,
+
   /** `marginLeft` works like `margin-left` in CSS.
    *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
    *  for more details.
@@ -232,6 +268,23 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   padding?: DimensionValue,
 
+  /** Setting `paddingBlock` is like setting both of
+   *  `paddingTop` and `paddingBottom`.
+   */
+  paddingBlock?: DimensionValue,
+
+  /** `paddingBlockEnd` works like `padding-bottom` in CSS.
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
+   * for more details.
+   */
+  paddingBlockEnd?: DimensionValue,
+
+  /** `paddingBlockStart` works like `padding-top` in CSS.
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
+   * for more details.
+   */
+  paddingBlockStart?: DimensionValue,
+
   /** `paddingBottom` works like `padding-bottom` in CSS.
    * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
    * for more details.
@@ -249,6 +302,23 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   paddingHorizontal?: DimensionValue,
 
+  /** Setting `paddingInline` is like setting both of
+   *  `paddingLeft` and `paddingRight`.
+   */
+  paddingInline?: DimensionValue,
+
+  /**
+   * When direction is `ltr`, `paddingInlineEnd` is equivalent to `paddingRight`.
+   * When direction is `rtl`, `paddingInlineEnd` is equivalent to `paddingLeft`.
+   */
+  paddingInlineEnd?: DimensionValue,
+
+  /**
+   * When direction is `ltr`, `paddingInlineStart` is equivalent to `paddingLeft`.
+   * When direction is `rtl`, `paddingInlineStart` is equivalent to `paddingRight`.
+   */
+  paddingInlineStart?: DimensionValue,
+
   /** `paddingLeft` works like `padding-left` in CSS.
    * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
    * for more details.

ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp

@@ -316,13 +316,62 @@ void YogaLayoutableShadowNode::updateYogaProps() {
   ensureUnsealed();
 
   auto props = static_cast<YogaStylableProps const &>(*props_);
+  auto styleResult = applyAliasedProps(props.yogaStyle, props);
 
   // Resetting `dirty` flag only if `yogaStyle` portion of `Props` was changed.
-  if (!yogaNode_.isDirty() && (props.yogaStyle != yogaNode_.getStyle())) {
+  if (!yogaNode_.isDirty() && (styleResult != yogaNode_.getStyle())) {
     yogaNode_.setDirty(true);
   }
 
-  yogaNode_.setStyle(props.yogaStyle);
+  yogaNode_.setStyle(styleResult);
+}
+
+/*static*/ YGStyle YogaLayoutableShadowNode::applyAliasedProps(
+    const YGStyle &baseStyle,
+    const YogaStylableProps &props) {
+  YGStyle result{baseStyle};
+
+  // Aliases with precedence
+  if (!props.marginInline.isUndefined()) {
+    result.margin()[YGEdgeHorizontal] = props.marginInline;
+  }
+  if (!props.marginInlineStart.isUndefined()) {
+    result.margin()[YGEdgeStart] = props.marginInlineStart;
+  }
+  if (!props.marginInlineEnd.isUndefined()) {
+    result.margin()[YGEdgeEnd] = props.marginInlineEnd;
+  }
+  if (!props.marginBlock.isUndefined()) {
+    result.margin()[YGEdgeVertical] = props.marginBlock;
+  }
+  if (!props.paddingInline.isUndefined()) {
+    result.padding()[YGEdgeHorizontal] = props.paddingInline;
+  }
+  if (!props.paddingInlineStart.isUndefined()) {
+    result.padding()[YGEdgeStart] = props.paddingInlineStart;
+  }
+  if (!props.paddingInlineEnd.isUndefined()) {
+    result.padding()[YGEdgeEnd] = props.paddingInlineEnd;
+  }
+  if (!props.paddingBlock.isUndefined()) {
+    result.padding()[YGEdgeVertical] = props.paddingBlock;
+  }
+
+  // Aliases without precedence
+  if (CompactValue(result.margin()[YGEdgeTop]).isUndefined()) {
+    result.margin()[YGEdgeTop] = props.marginBlockStart;
+  }
+  if (CompactValue(result.margin()[YGEdgeBottom]).isUndefined()) {
+    result.margin()[YGEdgeBottom] = props.marginBlockEnd;
+  }
+  if (CompactValue(result.padding()[YGEdgeTop]).isUndefined()) {
+    result.padding()[YGEdgeTop] = props.paddingBlockStart;
+  }
+  if (CompactValue(result.padding()[YGEdgeBottom]).isUndefined()) {
+    result.padding()[YGEdgeBottom] = props.paddingBlockEnd;
+  }
+
+  return result;
 }
 
 void YogaLayoutableShadowNode::setSize(Size size) const {

ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.h

@@ -24,6 +24,8 @@ namespace facebook {
 namespace react {
 
 class YogaLayoutableShadowNode : public LayoutableShadowNode {
+  using CompactValue = facebook::yoga::detail::CompactValue;
+
  public:
   using UnsharedList = butter::small_vector<
       YogaLayoutableShadowNode *,
@@ -173,6 +175,14 @@ class YogaLayoutableShadowNode : public LayoutableShadowNode {
   static void swapLeftAndRightInYogaStyleProps(
       YogaLayoutableShadowNode const &shadowNode);
 
+  /*
+   * Combine a base YGStyle with aliased properties which should be flattened
+   * into it. E.g. reconciling "marginInlineStart" and "marginStart".
+   */
+  static YGStyle applyAliasedProps(
+      const YGStyle &baseStyle,
+      const YogaStylableProps &props);
+
 #pragma mark - Consistency Ensuring Helpers
 
   void ensureConsistency() const;