From 7c46a3667e83884813225e0dd8b34020ee86decb Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Mon, 3 Aug 2020 13:49:15 -0700
Subject: [PATCH] [fix] update System font stack

Remove system-ui as it has rendering issues for certain OS/language combinations.
See https://phabricator.wikimedia.org/T175877

Fix #1638
---
 .../__tests__/__snapshots__/compile-test.js.snap          | 4 ++--
 .../__snapshots__/createReactDOMStyle-test.js.snap        | 8 ++++----
 .../react-native-web/src/exports/StyleSheet/constants.js  | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap
index eed035a8..d5eea8fd 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap
@@ -26,7 +26,7 @@ Object {
     "identifier": "r-fontFamily-1qd0xha",
     "property": "fontFamily",
     "rules": Array [
-      ".r-fontFamily-1qd0xha{font-family:system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif;}",
+      ".r-fontFamily-1qd0xha{font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;}",
     ],
     "value": "System",
   },
@@ -88,7 +88,7 @@ Object {
       "@keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
       "@-webkit-keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
       "@keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
-      ".css-text-1jr0ypv{-webkit-animation-direction:alternate,alternate-reverse;-webkit-animation-name:r-animation-8jhqzh,r-animation-5azpl5;-webkit-transform:translateX(50px);animation-direction:alternate,alternate-reverse;animation-name:r-animation-8jhqzh,r-animation-5azpl5;font:14px system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif;margin-left:10px;margin-right:10px;transform:translateX(50px);}",
+      ".css-text-1jr0ypv{-webkit-animation-direction:alternate,alternate-reverse;-webkit-animation-name:r-animation-8jhqzh,r-animation-5azpl5;-webkit-transform:translateX(50px);animation-direction:alternate,alternate-reverse;animation-name:r-animation-8jhqzh,r-animation-5azpl5;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;margin-left:10px;margin-right:10px;transform:translateX(50px);}",
     ],
   },
 }
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
index baeb06b9..8b231fea 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
@@ -8,25 +8,25 @@ Object {
 
 exports[`StyleSheet/createReactDOMStyle fontFamily "Noto, System" 1`] = `
 Object {
-  "fontFamily": "Noto,system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+  "fontFamily": "Noto,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
 }
 `;
 
 exports[`StyleSheet/createReactDOMStyle fontFamily "Noto, System" 2`] = `
 Object {
-  "font": "14px Noto, system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+  "font": "14px Noto, -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
 }
 `;
 
 exports[`StyleSheet/createReactDOMStyle fontFamily "System" 1`] = `
 Object {
-  "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+  "fontFamily": "-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
 }
 `;
 
 exports[`StyleSheet/createReactDOMStyle fontFamily "System" 2`] = `
 Object {
-  "font": "14px system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+  "font": "14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
 }
 `;
 
diff --git a/packages/react-native-web/src/exports/StyleSheet/constants.js b/packages/react-native-web/src/exports/StyleSheet/constants.js
index 2be8088c..4f5b60f5 100644
--- a/packages/react-native-web/src/exports/StyleSheet/constants.js
+++ b/packages/react-native-web/src/exports/StyleSheet/constants.js
@@ -56,4 +56,4 @@ export const STYLE_SHORT_FORM_EXPANSIONS = {
 
 export const MONOSPACE_FONT_STACK = 'monospace,monospace';
 export const SYSTEM_FONT_STACK =
-  'system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif';
+  '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif';