[change] W3C fontVariant style values

* Add support for space-separated values. * Deprecate array values. Ref #2379
necolas · Mar 20, 2023 · c6e77c3 · c6e77c3
1 parent 72f9d4d
commit c6e77c3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/packages/react-native-web-examples/pages/text/index.js b/packages/react-native-web-examples/pages/text/index.js
@@ -76,27 +76,27 @@ function FontVariant() {
   return (
     <View>
       <Heading>fontVariant</Heading>
-      <Text style={{ fontVariant: ['small-caps'] }}>Small Caps{'\n'}</Text>
+      <Text style={{ fontVariant: 'small-caps' }}>Small Caps{'\n'}</Text>
       <Text
         style={{
-          fontVariant: ['oldstyle-nums']
+          fontVariant: 'oldstyle-nums'
         }}
       >
         Old Style nums 0123456789{'\n'}
       </Text>
       <Text
         style={{
-          fontVariant: ['lining-nums']
+          fontVariant: 'lining-nums'
         }}
       >
         Lining nums 0123456789{'\n'}
       </Text>
-      <Text style={{ fontVariant: ['tabular-nums'] }}>
+      <Text style={{ fontVariant: 'tabular-nums' }}>
         Tabular nums{'\n'}
         1111{'\n'}
         2222{'\n'}
       </Text>
-      <Text style={{ fontVariant: ['proportional-nums'] }}>
+      <Text style={{ fontVariant: 'proportional-nums' }}>
         Proportional nums{'\n'}
         1111{'\n'}
         2222{'\n'}

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
@@ -192,6 +192,12 @@ describe('compiler/createReactDOMStyle', () => {
   });
 
   test('fontVariant', () => {
+    expect(
+      createReactDOMStyle({ fontVariant: 'common-ligatures small-caps' })
+    ).toEqual({
+      fontVariant: 'common-ligatures small-caps'
+    });
+
     expect(
       createReactDOMStyle({ fontVariant: ['common-ligatures', 'small-caps'] })
     ).toEqual({

diff --git a/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js
@@ -9,6 +9,7 @@
 
 import normalizeValueWithProperty from './normalizeValueWithProperty';
 import canUseDOM from '../../../modules/canUseDom';
+import { warnOnce } from '../../../modules/warnOnce';
 
 type Style = { [key: string]: any };
 
@@ -157,7 +158,13 @@ const createReactDOMStyle = (style: Style, isInline?: boolean): Style => {
       }
     } else if (prop === 'fontVariant') {
       if (Array.isArray(value) && value.length > 0) {
+        warnOnce(
+          'fontVariant',
+          '"fontVariant" style array value is deprecated. Use space-separated values.'
+        );
         resolvedStyle.fontVariant = value.join(' ');
+      } else {
+        resolvedStyle[prop] = value;
       }
     } else if (prop === 'textAlignVertical') {
       resolvedStyle.verticalAlign = value === 'center' ? 'middle' : value;