[change] W3C verticalAlign style

* Add support for verticalAlign style. * Deprecate textAlignVertical style. Ref #2379
necolas · Mar 20, 2023 · 5bc5142 · 5bc5142
1 parent c6e77c3
commit 5bc5142
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/...es/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js b/...es/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
@@ -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
@@ -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
@@ -253,6 +253,7 @@ export type LayoutStyles = {|
  */
 
 export type ShadowStyles = {|
+  // @deprecated
   shadowColor?: ?ColorValue,
   shadowOffset?: {|
     width?: DimensionValue,