From 5bc51420a8a69f7ae3ac7d6ef79a56211bd395d1 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@fb.com>
Date: Mon, 28 Nov 2022 12:37:21 -0800
Subject: [PATCH] [change] W3C verticalAlign style

* Add support for verticalAlign style.
* Deprecate textAlignVertical style.

Ref #2379
---
 .../__tests__/compiler-createReactDOMStyle-test.js    | 11 +++++++++++
 .../StyleSheet/compiler/createReactDOMStyle.js        |  8 +++++++-
 packages/react-native-web/src/exports/Text/types.js   |  7 +++++--
 packages/react-native-web/src/types/styles.js         |  1 +
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js
index 0ddbf73f..3a023093 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js
@@ -215,6 +215,17 @@ describe('compiler/createReactDOMStyle', () => {
     });
   });
 
+  test('verticalAlign', () => {
+    expect(
+      createReactDOMStyle({
+        verticalAlign: 'top',
+        textAlignVertical: 'center'
+      })
+    ).toEqual({
+      verticalAlign: 'top'
+    });
+  });
+
   describe('transform', () => {
     // passthrough if transform value is ever a string
     test('string', () => {
diff --git a/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js
index 315969b2..0ee748fd 100644
--- a/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js
+++ b/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js
@@ -167,7 +167,13 @@ const createReactDOMStyle = (style: Style, isInline?: boolean): Style => {
         resolvedStyle[prop] = value;
       }
     } else if (prop === 'textAlignVertical') {
-      resolvedStyle.verticalAlign = value === 'center' ? 'middle' : value;
+      warnOnce(
+        'textAlignVertical',
+        '"textAlignVertical" style is deprecated. Use "verticalAlign".'
+      );
+      if (resolvedStyle.verticalAlign == null) {
+        resolvedStyle.verticalAlign = value === 'center' ? 'middle' : value;
+      }
     } else if (prop === 'textDecorationLine') {
       // use 'text-decoration' for browsers that only support CSS2
       // text-decoration (e.g., IE, Edge)
diff --git a/packages/react-native-web/src/exports/Text/types.js b/packages/react-native-web/src/exports/Text/types.js
index 65e252d5..ddf391c8 100644
--- a/packages/react-native-web/src/exports/Text/types.js
+++ b/packages/react-native-web/src/exports/Text/types.js
@@ -52,7 +52,6 @@ export type TextStyle = {
     | 'left'
     | 'right'
     | 'start',
-  textAlignVertical?: ?string,
   textDecorationColor?: ?ColorValue,
   textDecorationLine?:
     | 'none'
@@ -67,6 +66,7 @@ export type TextStyle = {
     | 'geometricPrecision'
     | 'optimizeLegibility'
     | 'optimizeSpeed',
+  textShadow?: ?string,
   textShadowColor?: ?ColorValue,
   textShadowOffset?: {| width?: number, height?: number |},
   textShadowRadius?: ?number,
@@ -79,13 +79,16 @@ export type TextStyle = {
     | 'isolate-override'
     | 'plaintext',
   userSelect?: 'none' | 'text',
+  verticalAlign?: ?string,
   whiteSpace?: ?string,
   wordBreak?: 'normal' | 'break-all' | 'break-word' | 'keep-all',
   wordWrap?: ?string,
   writingDirection?: 'auto' | 'ltr' | 'rtl',
   /* @platform web */
   MozOsxFontSmoothing?: ?string,
-  WebkitFontSmoothing?: ?string
+  WebkitFontSmoothing?: ?string,
+  // deprecated
+  textAlignVertical?: ?string
 };
 
 export type TextProps = {
diff --git a/packages/react-native-web/src/types/styles.js b/packages/react-native-web/src/types/styles.js
index 2ed34b22..cb31a62d 100644
--- a/packages/react-native-web/src/types/styles.js
+++ b/packages/react-native-web/src/types/styles.js
@@ -253,6 +253,7 @@ export type LayoutStyles = {|
  */
 
 export type ShadowStyles = {|
+  // @deprecated
   shadowColor?: ?ColorValue,
   shadowOffset?: {|
     width?: DimensionValue,