Revert "feat: Add Fabric implementation of inset logical properties (#35692)"

This reverts commit 9669c10afc.

packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -46,13 +46,6 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   flexWrap: true,
   gap: true,
   height: true,
-  inset: true,
-  insetBlock: true,
-  insetBlockEnd: true,
-  insetBlockStart: true,
-  insetInline: true,
-  insetInlineEnd: true,
-  insetInlineStart: true,
   justifyContent: true,
   left: true,
   margin: true,

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -258,14 +258,6 @@ const validAttributesForNonEventProps = {
   top: true,
   bottom: true,
 
-  inset: true,
-  insetBlock: true,
-  insetBlockEnd: true,
-  insetBlockStart: true,
-  insetInline: true,
-  insetInlineEnd: true,
-  insetInlineStart: true,
-
   position: true,
 
   style: ReactNativeStyleAttributes,

packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -236,14 +236,6 @@ const validAttributesForNonEventProps = {
   bottom: true,
   left: true,
 
-  inset: true,
-  insetBlock: true,
-  insetBlockEnd: true,
-  insetBlockStart: true,
-  insetInline: true,
-  insetInlineEnd: true,
-  insetInlineStart: true,
-
   width: true,
   height: true,
 

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -69,13 +69,6 @@ export interface FlexStyle {
   flexShrink?: number | undefined;
   flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;
   height?: DimensionValue | undefined;
-  inset?: DimensionValue | undefined;
-  insetBlock?: DimensionValue | undefined;
-  insetBlockEnd?: DimensionValue | undefined;
-  insetBlockStart?: DimensionValue | undefined;
-  insetInline?: DimensionValue | undefined;
-  insetInlineEnd?: DimensionValue | undefined;
-  insetInlineStart?: DimensionValue | undefined;
   justifyContent?:
     | 'flex-start'
     | 'flex-end'

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

@@ -134,80 +134,6 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   top?: DimensionValue,
 
-  /** `inset` is a shorthand that corresponds to the top, right, bottom, and/or left properties.
-   *
-   *  It works similarly to `inset` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset
-   *  for more details of how `inset` affects layout.
-   */
-  inset?: DimensionValue,
-
-  /** `insetBlock` is a shorthand that corresponds to the `insetBlockStart` and `insetBlockEnd` properties.
-   *
-   *  It works similarly to `inset-block` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block
-   *  for more details of how `inset-block` affects layout.
-   */
-  insetBlock?: DimensionValue,
-
-  /** `insetBlockEnd` is a logical property that sets the length that an
-   *  element is offset in the block direction from its ending edge.
-   *
-   *  It works similarly to `inset-block-end` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end
-   *  for more details of how `inset-block-end` affects layout.
-   */
-  insetBlockEnd?: DimensionValue,
-
-  /** `insetBlockStart` is a logical property that sets the length that an
-   *  element is offset in the block direction from its starting edge.
-   *
-   *  It works similarly to `inset-block-start` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start
-   *  for more details of how `inset-block-start` affects layout.
-   */
-  insetBlockStart?: DimensionValue,
-
-  /** `insetInline` is a shorthand that corresponds to the `insetInlineStart` and `insetInlineEnd` properties.
-   *
-   *  It works similarly to `inset-inline` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline
-   *  for more details of how `inset-inline` affects layout.
-   */
-  insetInline?: DimensionValue,
-
-  /** `insetInlineEnd` is a logical property that sets the length that an
-   *  element is offset in the starting inline direction.
-   *
-   *  It works similarly to `inset-inline-end` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end
-   *  for more details of how `inset-inline-end` affects layout.
-   */
-  insetInlineEnd?: DimensionValue,
-
-  /** `insetInlineStart` is a logical property that sets the length that an
-   *  element is offset in the starting inline direction.
-   *
-   *  It works similarly to `inset-inline-start` in CSS, but in React Native you
-   *  must use points or percentages. Ems and other units are not supported.
-   *
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start
-   *  for more details of how `inset-inline-start` affects layout.
-   */
-  insetInlineStart?: DimensionValue,
-
   /** `minWidth` is the minimum width for this component, in logical pixels.
    *
    *  It works similarly to `min-width` in CSS, but in React Native you

packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp

@@ -369,21 +369,6 @@ void YogaLayoutableShadowNode::updateYogaProps() {
   YGStyle result{baseStyle};
 
   // Aliases with precedence
-  if (!props.inset.isUndefined()) {
-    result.position()[YGEdgeAll] = props.inset;
-  }
-  if (!props.insetBlock.isUndefined()) {
-    result.position()[YGEdgeVertical] = props.insetBlock;
-  }
-  if (!props.insetInline.isUndefined()) {
-    result.position()[YGEdgeHorizontal] = props.insetInline;
-  }
-  if (!props.insetInlineEnd.isUndefined()) {
-    result.position()[YGEdgeEnd] = props.insetInlineEnd;
-  }
-  if (!props.insetInlineStart.isUndefined()) {
-    result.position()[YGEdgeStart] = props.insetInlineStart;
-  }
   if (!props.marginInline.isUndefined()) {
     result.margin()[YGEdgeHorizontal] = props.marginInline;
   }
@@ -410,12 +395,6 @@ void YogaLayoutableShadowNode::updateYogaProps() {
   }
 
   // Aliases without precedence
-  if (CompactValue(result.position()[YGEdgeBottom]).isUndefined()) {
-    result.position()[YGEdgeBottom] = props.insetBlockEnd;
-  }
-  if (CompactValue(result.position()[YGEdgeTop]).isUndefined()) {
-    result.position()[YGEdgeTop] = props.insetBlockStart;
-  }
   if (CompactValue(result.margin()[YGEdgeTop]).isUndefined()) {
     result.margin()[YGEdgeTop] = props.marginBlockStart;
   }

packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp

@@ -136,13 +136,6 @@ void YogaStylableProps::setProp(
     static const auto defaults = YogaStylableProps{};
 
     // Aliases
-    RAW_SET_PROP_SWITCH_CASE(inset, "inset");
-    RAW_SET_PROP_SWITCH_CASE(insetBlock, "insetBlock");
-    RAW_SET_PROP_SWITCH_CASE(insetBlockEnd, "insetBlockEnd");
-    RAW_SET_PROP_SWITCH_CASE(insetBlockStart, "insetBlockStart");
-    RAW_SET_PROP_SWITCH_CASE(insetInline, "insetInline");
-    RAW_SET_PROP_SWITCH_CASE(insetInlineEnd, "insetInlineEnd");
-    RAW_SET_PROP_SWITCH_CASE(insetInlineStart, "insetInlineStart");
     RAW_SET_PROP_SWITCH_CASE(marginInline, "marginInline");
     RAW_SET_PROP_SWITCH_CASE(marginInlineStart, "marginInlineStart");
     RAW_SET_PROP_SWITCH_CASE(marginInlineEnd, "marginInlineEnd");
@@ -242,48 +235,6 @@ void YogaStylableProps::convertRawPropAliases(
     const PropsParserContext &context,
     YogaStylableProps const &sourceProps,
     RawProps const &rawProps) {
-  inset = convertRawProp(
-      context,
-      rawProps,
-      "inset",
-      sourceProps.inset,
-      CompactValue::ofUndefined());
-  insetBlock = convertRawProp(
-      context,
-      rawProps,
-      "insetBlock",
-      sourceProps.insetBlock,
-      CompactValue::ofUndefined());
-  insetBlockEnd = convertRawProp(
-      context,
-      rawProps,
-      "insetBlockEnd",
-      sourceProps.insetBlockEnd,
-      CompactValue::ofUndefined());
-  insetBlockStart = convertRawProp(
-      context,
-      rawProps,
-      "insetBlockStart",
-      sourceProps.insetBlockStart,
-      CompactValue::ofUndefined());
-  insetInline = convertRawProp(
-      context,
-      rawProps,
-      "insetInline",
-      sourceProps.insetInline,
-      CompactValue::ofUndefined());
-  insetInlineEnd = convertRawProp(
-      context,
-      rawProps,
-      "insetInlineEnd",
-      sourceProps.insetInlineEnd,
-      CompactValue::ofUndefined());
-  insetInlineStart = convertRawProp(
-      context,
-      rawProps,
-      "insetInlineStart",
-      sourceProps.insetInlineStart,
-      CompactValue::ofUndefined());
   marginInline = convertRawProp(
       context,
       rawProps,

packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h

@@ -43,11 +43,6 @@ class YogaStylableProps : public Props {
 
   // Duplicates of existing properties with different names, taking
   // precedence. E.g. "marginBlock" instead of "marginVertical"
-  CompactValue inset;
-  CompactValue insetInline;
-  CompactValue insetInlineEnd;
-  CompactValue insetInlineStart;
-
   CompactValue marginInline;
   CompactValue marginInlineStart;
   CompactValue marginInlineEnd;
@@ -61,10 +56,6 @@ class YogaStylableProps : public Props {
   // BlockEnd/BlockStart map to top/bottom (no writing mode), but we preserve
   // Yoga's precedence and prefer specific edges (e.g. top) to ones which are
   // flow relative (e.g. blockStart).
-  CompactValue insetBlock;
-  CompactValue insetBlockEnd;
-  CompactValue insetBlockStart;
-
   CompactValue marginBlockStart;
   CompactValue marginBlockEnd;
 

packages/rn-tester/js/examples/View/ViewExample.js

@@ -688,129 +688,4 @@ exports.examples = [
       return <FlexGapExample />;
     },
   },
-  {
-    title: 'Insets',
-    render(): React.Node {
-      return (
-        <View style={{rowGap: 10}}>
-          <View style={{position: 'relative', height: 50, borderWidth: 1}}>
-            <View
-              style={{
-                backgroundColor: '#527FE4',
-                padding: 5,
-                position: 'absolute',
-                inset: 10,
-              }}>
-              <Text style={{fontSize: 11}}>inset 10</Text>
-            </View>
-          </View>
-          <View style={{position: 'relative', height: 50, borderWidth: 1}}>
-            <View
-              style={{
-                backgroundColor: '#527FE4',
-                padding: 5,
-                position: 'absolute',
-                insetBlock: 5,
-              }}>
-              <Text style={{fontSize: 11}}>insetBlock 5</Text>
-            </View>
-          </View>
-          <View style={{position: 'relative', height: 50, borderWidth: 1}}>
-            <View
-              style={{
-                backgroundColor: '#527FE4',
-                padding: 5,
-                position: 'absolute',
-                insetBlockEnd: 5,
-              }}>
-              <Text style={{fontSize: 11}}>insetBlockEnd 5</Text>
-            </View>
-          </View>
-          <View style={{position: 'relative', height: 50, borderWidth: 1}}>
-            <View
-              style={{
-                backgroundColor: '#527FE4',
-                padding: 5,
-                position: 'absolute',
-                insetBlockStart: 5,
-              }}>
-              <Text style={{fontSize: 11}}>insetBlockStart 5</Text>
-            </View>
-          </View>
-          <View style={{position: 'relative', height: 50, borderWidth: 1}}>
-            <View
-              style={{
-                backgroundColor: '#527FE4',
-                padding: 5,
-                position: 'absolute',
-                insetInline: 5,
-              }}>
-              <Text style={{fontSize: 11}}>insetInline 5</Text>
-            </View>
-          </View>
-          <View style={{position: 'relative', height: 50, borderWidth: 1}}>
-            <View
-              style={{
-                backgroundColor: '#527FE4',
-                padding: 5,
-                position: 'absolute',
-                insetInlineEnd: 5,
-              }}>
-              <Text style={{fontSize: 11}}>insetInlineEnd 5</Text>
-            </View>
-          </View>
-          <View style={{position: 'relative', height: 50, borderWidth: 1}}>
-            <View
-              style={{
-                backgroundColor: '#527FE4',
-                padding: 5,
-                position: 'absolute',
-                insetInlineStart: 5,
-              }}>
-              <Text style={{fontSize: 11}}>insetInlineStart 5</Text>
-            </View>
-          </View>
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Logical Border Color',
-    render(): React.Node {
-      return (
-        <View style={{rowGap: 10}}>
-          <View style={{position: 'relative', height: 50, borderWidth: 1}}>
-            <View
-              style={{
-                borderBlockColor: 'orange',
-                borderWidth: 5,
-                position: 'absolute',
-                top: 10,
-                bottom: 10,
-                left: 10,
-                right: 10,
-              }}>
-              <Text style={{fontSize: 11}}>borderBlockColor orange</Text>
-            </View>
-          </View>
-          <View style={{position: 'relative', height: 65, borderWidth: 1}}>
-            <View
-              style={{
-                borderBlockEndColor: 'green',
-                borderBlockStartColor: 'purple',
-                borderWidth: 5,
-                position: 'absolute',
-                top: 10,
-                bottom: 10,
-                left: 10,
-                right: 10,
-              }}>
-              <Text style={{fontSize: 11}}>borderBlockStartColor purple</Text>
-              <Text style={{fontSize: 11}}>borderBlockEndColor green</Text>
-            </View>
-          </View>
-        </View>
-      );
-    },
-  },
 ];