From fd273f83e0bf58e7f2bb51ee91c3ac5a3d8e4439 Mon Sep 17 00:00:00 2001
From: Jakub Piasecki <jakub.piasecki@swmansion.com>
Date: Thu, 31 Oct 2024 16:12:46 -0700
Subject: [PATCH] Add RNTester examples for `display: contents` (#47201)

Summary:
Adds a page dedicated to `display: contents` to RNTester APIs section. Those can be used to verify that it's working correctly visually.

Needs https://github.com/facebook/react-native/pull/47194

## Changelog:

[INTERNAL] [ADDED] - Added `display: contents` examples to RNTester

Pull Request resolved: https://github.com/facebook/react-native/pull/47201

Test Plan:
Row styles are ignored in new arch and TextInputs as leaf are hidden

https://www.internalfb.com/compare-screenshots-from-diff/D65248256

Reviewed By: javache

Differential Revision: D65248256

Pulled By: NickGerleman

fbshipit-source-id: 90410e1380e4cdb22cb4cac5c8c21e08a088ce69
---
 .../DisplayContents/DisplayContentsExample.js | 221 ++++++++++++++++++
 .../js/utils/RNTesterList.android.js          |   6 +
 .../rn-tester/js/utils/RNTesterList.ios.js    |   6 +
 3 files changed, 233 insertions(+)
 create mode 100644 packages/rn-tester/js/examples/DisplayContents/DisplayContentsExample.js

diff --git a/packages/rn-tester/js/examples/DisplayContents/DisplayContentsExample.js b/packages/rn-tester/js/examples/DisplayContents/DisplayContentsExample.js
new file mode 100644
index 00000000000..754b2adab84
--- /dev/null
+++ b/packages/rn-tester/js/examples/DisplayContents/DisplayContentsExample.js
@@ -0,0 +1,221 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+import type {RNTesterModule} from '../../types/RNTesterTypes';
+
+import * as React from 'react';
+import {StyleSheet, TextInput, View, Text} from 'react-native';
+
+const styles = StyleSheet.create({
+  contents: {
+    display: 'contents',
+  },
+  box: {
+    width: 200,
+    height: 100,
+  },
+  wrap: {
+    flexWrap: 'wrap',
+  },
+  tinyBox: {
+    width: 50,
+    height: 25,
+  },
+  border1: {
+    borderWidth: 1,
+    borderColor: 'brown',
+  },
+  border2: {
+    borderWidth: 1,
+    borderColor: 'magenta',
+  },
+  border3: {
+    borderWidth: 1,
+    borderColor: 'green',
+  },
+  row: {
+    flexDirection: 'row',
+  },
+});
+
+export default ({
+  title: 'Display: contents',
+  category: 'UI',
+  description:
+    'Demonstrates various ways display: contents may be used in the tree',
+  examples: [
+    {
+      title: 'Single display: contents node',
+      name: 'single-contents-node',
+      description:
+        'Single display: contents node with flex-direction: row (should be ignored in layout)',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="display-contents-test-single-node-root"
+            style={[styles.box, styles.border1]}>
+            <View
+              testID="display-contents-test-single-node-child"
+              style={[styles.box, styles.border2, styles.row, styles.contents]}>
+              <View
+                testID="display-contents-test-single-node-grandchild-1"
+                style={[styles.tinyBox, styles.border3]}
+              />
+              <View
+                testID="display-contents-test-single-node-grandchild-2"
+                style={[styles.tinyBox, styles.border3]}
+              />
+            </View>
+          </View>
+        );
+      },
+    },
+    {
+      title: 'Multiple display: contents nodes',
+      name: 'multiple-contents-nodes',
+      description:
+        'Three display: contents nodes with flex-direction: row (they should be ignored in layout)',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="display-contents-test-multiple-node-root"
+            style={[styles.box, styles.border1, styles.wrap]}>
+            <View
+              testID="display-contents-test-single-node-child-1"
+              style={[styles.box, styles.border2, styles.row, styles.contents]}>
+              <View
+                testID="display-contents-test-single-node-grandchild-1"
+                style={[styles.tinyBox, styles.border3]}
+              />
+              <View
+                testID="display-contents-test-single-node-grandchild-2"
+                style={[styles.tinyBox, styles.border3]}
+              />
+            </View>
+
+            <View
+              testID="display-contents-test-single-node-child-2"
+              style={[styles.box, styles.border2, styles.row, styles.contents]}>
+              <View
+                testID="display-contents-test-single-node-grandchild-3"
+                style={[styles.tinyBox, styles.border2]}
+              />
+              <View
+                testID="display-contents-test-single-node-grandchild-4"
+                style={[styles.tinyBox, styles.border2]}
+              />
+            </View>
+
+            <View
+              testID="display-contents-test-single-node-child-3"
+              style={[styles.box, styles.border2, styles.row, styles.contents]}>
+              <View
+                testID="display-contents-test-single-node-grandchild-5"
+                style={[styles.tinyBox, styles.border3]}
+              />
+              <View
+                testID="display-contents-test-single-node-grandchild-6"
+                style={[styles.tinyBox, styles.border3]}
+              />
+            </View>
+          </View>
+        );
+      },
+    },
+    {
+      title: 'Nested display: contents nodes',
+      name: 'nested-contents-nodes',
+      description:
+        'Single display: contents node with two nested display: contents nodes, each with flex-direction: row (they should be ignored in layout)',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="display-contents-test-multiple-node-root"
+            style={[styles.box, styles.border1, styles.wrap]}>
+            <View
+              testID="display-contents-test-single-node-child-1"
+              style={[styles.box, styles.border2, styles.row, styles.contents]}>
+              <View
+                testID="display-contents-test-single-node-grandchild-1"
+                style={[styles.tinyBox, styles.border2]}
+              />
+              <View
+                testID="display-contents-test-single-node-grandchild-2"
+                style={[styles.tinyBox, styles.border1, styles.contents]}>
+                <View
+                  testID="display-contents-test-single-node-great-grandchild-1"
+                  style={[styles.tinyBox, styles.border3]}
+                />
+                <View
+                  testID="display-contents-test-single-node-great-grandchild-2"
+                  style={[styles.tinyBox, styles.border3]}
+                />
+              </View>
+            </View>
+          </View>
+        );
+      },
+    },
+    {
+      title: 'Leaf node with display: contents',
+      name: 'contents-leaf-node',
+      description:
+        'Single display: contents leaf node (should be ignored in layout)',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="display-contents-test-single-node-root"
+            style={[styles.box, styles.border1]}>
+            <View
+              testID="display-contents-test-single-node-child"
+              style={[styles.tinyBox, styles.border2, styles.contents]}
+            />
+          </View>
+        );
+      },
+    },
+    {
+      title: 'TextInput with display: contents',
+      name: 'contents-textinput',
+      description:
+        'A TextInput with display: contents style (should behave as if display: none was set)',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="display-contents-textinput-root"
+            style={[styles.box, styles.border1, styles.wrap]}>
+            <TextInput
+              testID="display-contents-textinput"
+              style={[
+                styles.tinyBox,
+                styles.border2,
+                styles.row,
+                styles.contents,
+              ]}
+            />
+            <TextInput
+              testID="display-contents-textinput2"
+              style={[
+                styles.tinyBox,
+                styles.border2,
+                styles.row,
+                styles.contents,
+              ]}>
+              <Text>Text1</Text>
+              <Text>Text2</Text>
+            </TextInput>
+          </View>
+        );
+      },
+    },
+  ],
+}: RNTesterModule);
diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js
index f30daae7bfc..5f531c5ded2 100644
--- a/packages/rn-tester/js/utils/RNTesterList.android.js
+++ b/packages/rn-tester/js/utils/RNTesterList.android.js
@@ -202,6 +202,12 @@ const APIs: Array<RNTesterModuleInfo> = ([
     category: 'UI',
     module: require('../examples/Dimensions/DimensionsExample'),
   },
+  {
+    key: 'DisplayContentsExample',
+    category: 'UI',
+    module: require('../examples/DisplayContents/DisplayContentsExample')
+      .default,
+  },
   // Only show the link for the example if the API is available.
   typeof IntersectionObserver === 'function'
     ? {
diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js
index 554eb979098..cf06c62fa77 100644
--- a/packages/rn-tester/js/utils/RNTesterList.ios.js
+++ b/packages/rn-tester/js/utils/RNTesterList.ios.js
@@ -211,6 +211,12 @@ const APIs: Array<RNTesterModuleInfo> = ([
     key: 'Dimensions',
     module: require('../examples/Dimensions/DimensionsExample'),
   },
+  {
+    key: 'DisplayContentsExample',
+    category: 'UI',
+    module: require('../examples/DisplayContents/DisplayContentsExample')
+      .default,
+  },
   // Only show the link for the example if the API is available.
   typeof IntersectionObserver === 'function'
     ? {