[fix] Text support for 'fontVariant' style

Fix #824
Close #825

packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js

@@ -22,6 +22,23 @@ describe('StyleSheet/createReactDOMStyle', () => {
     expect(firstStyle).toEqual(secondStyle);
   });
 
+  test('shortform -> longform', () => {
+    const style = {
+      borderStyle: 'solid',
+      boxSizing: 'border-box',
+      borderBottomColor: 'white',
+      borderBottomWidth: 1,
+      borderWidth: 0,
+      marginTop: 50,
+      marginVertical: 25,
+      margin: 10,
+      overflow: 'hidden',
+      overscrollBehavior: 'contain'
+    };
+
+    expect(createReactDOMStyle(style)).toMatchSnapshot();
+  });
+
   describe('borderWidth styles', () => {
     test('defaults to 0 when "null"', () => {
       expect(createReactDOMStyle({ borderWidth: null })).toEqual({
@@ -134,21 +151,10 @@ describe('StyleSheet/createReactDOMStyle', () => {
     });
   });
 
-  test('shortform -> longform', () => {
+  test('fontVariant', () => {
-    const style = {
+    expect(createReactDOMStyle({ fontVariant: ['common-ligatures', 'small-caps'] })).toEqual({
-      borderStyle: 'solid',
+      fontVariant: 'common-ligatures small-caps'
-      boxSizing: 'border-box',
+    });
-      borderBottomColor: 'white',
-      borderBottomWidth: 1,
-      borderWidth: 0,
-      marginTop: 50,
-      marginVertical: 25,
-      margin: 10,
-      overflow: 'hidden',
-      overscrollBehavior: 'contain'
-    };
-
-    expect(createReactDOMStyle(style)).toMatchSnapshot();
   });
 
   describe('shadow styles', () => {

packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js

@@ -247,6 +247,13 @@ const createReducer = (style, styleProps) => {
         break;
       }
 
+      case 'fontVariant': {
+        if (Array.isArray(value) && value.length > 0) {
+          resolvedStyle.fontVariant = value.join(' ');
+        }
+        break;
+      }
+
       case 'shadowColor':
       case 'shadowOffset':
       case 'shadowOpacity':

packages/react-native-web/src/exports/Text/TextStylePropTypes.js

@@ -10,7 +10,7 @@
 
 import ColorPropType from '../ColorPropType';
 import ViewStylePropTypes from '../View/ViewStylePropTypes';
-import { number, oneOf, oneOfType, shape, string } from 'prop-types';
+import { array, number, oneOf, oneOfType, shape, string } from 'prop-types';
 
 const numberOrString = oneOfType([number, string]);
 
@@ -35,6 +35,7 @@ const TextStylePropTypes = {
   fontSize: numberOrString,
   fontStyle: string,
   fontWeight: string,
+  fontVariant: array,
   letterSpacing: numberOrString,
   lineHeight: numberOrString,
   textAlign: TextAlignPropType,

packages/react-native-web/src/exports/Text/index.js

@@ -109,6 +109,7 @@ const styles = StyleSheet.create({
     // inherit parent font styles
     fontFamily: 'inherit',
     fontSize: 'inherit',
+    fontVariant: ['inherit'],
     whiteSpace: 'inherit'
   },
   notSelectable: {

website/storybook/1-components/Text/TextScreen.js

@@ -196,6 +196,10 @@ const stylePropTypes = [
     name: 'fontStyle',
     typeInfo: 'string'
   },
+  {
+    name: 'fontVariant',
+    typeInfo: 'Array<string>'
+  },
   {
     name: 'fontWeight',
     typeInfo: 'string'