Merge pull request #1098 from jobara/FLUID-6754

FLUID-6754: add system-ui font option to UIO
fluid-project · Jul 25, 2024 · f35856c · f35856c
2 parents bc5ae09 + ecdb80e
commit f35856c
Show file tree

Hide file tree

Showing 24 changed files with 51 additions and 53 deletions.
diff --git a/src/framework/preferences/css/sass/PrefsEditor.scss b/src/framework/preferences/css/sass/PrefsEditor.scss
@@ -66,28 +66,6 @@ $icon-font: 'PrefsFramework-Icons';
             display: block;
             font-weight: bold;
             margin: 0 auto;
-
-            option {
-                &.fl-font-times {
-                    font-family: var(--fl-font-family, "Times New Roman", serif);
-                }
-
-                &.fl-font-comic-sans {
-                    font-family: var(--fl-font-family, "Comic Sans MS", cursive, sans-serif);
-                }
-
-                &.fl-font-arial {
-                    font-family: var(--fl-font-family, Arial, sans-serif);
-                }
-
-                &.fl-font-verdana {
-                    font-family: var(--fl-font-family, Verdana, sans-serif);
-                }
-
-                &.fl-font-open-dyslexic {
-                    font-family: var(--fl-font-family, OpenDyslexic, sans-serif);
-                }
-            }
         }
 
         &:focus {

diff --git a/src/framework/preferences/css/sass/utils/_fonts.scss b/src/framework/preferences/css/sass/utils/_fonts.scss
@@ -2,6 +2,7 @@
 
 $fonts: (
     ".fl-font-arial": "Arial",
+    ".fl-font-system-ui": "system-ui",
     ".fl-font-verdana": "Verdana",
     ".fl-font-times": "Georgia, Times, Times New Roman, serif",
     ".fl-font-comic-sans": "Comic Sans MS, sans-serif",

diff --git a/src/framework/preferences/js/StarterGrades.js b/src/framework/preferences/js/StarterGrades.js
@@ -50,6 +50,7 @@ fluid.defaults("fluid.uiEnhancer.cssClassEnhancerBase", {
     classnameMap: {
         "textFont": {
             "default": "",
+            "system": "fl-font-system-ui",
             "times": "fl-font-times",
             "comic": "fl-font-comic-sans",
             "arial": "fl-font-arial",
@@ -246,6 +247,7 @@ fluid.defaults("fluid.prefs.starterPanels", {
                 stringArrayIndex: {
                     textFont: [
                         "textFont-default",
+                        "textFont-system",
                         "textFont-times",
                         "textFont-comic",
                         "textFont-arial",
@@ -255,7 +257,7 @@ fluid.defaults("fluid.prefs.starterPanels", {
                     ]
                 },
                 controlValues: {
-                    textFont: ["default", "times", "comic", "arial", "verdana", "open-dyslexic", "atkinson-hyperlegible"]
+                    textFont: ["default", "system", "times", "comic", "arial", "verdana", "open-dyslexic", "atkinson-hyperlegible"]
                 }
             }
         },

diff --git a/src/framework/preferences/js/StarterSchemas.js b/src/framework/preferences/js/StarterSchemas.js
@@ -74,6 +74,7 @@ fluid.defaults("fluid.prefs.auxSchema.textFont", {
                 type: "fluid.prefs.enactor.textFont",
                 classes: {
                     "default": "",
+                    "system": "fl-font-system-ui",
                     "times": "fl-font-times",
                     "comic": "fl-font-comic-sans",
                     "arial": "fl-font-arial",
@@ -88,6 +89,7 @@ fluid.defaults("fluid.prefs.auxSchema.textFont", {
                 classnameMap: {
                     "textFont": {
                         "default": "",
+                        "system": "fl-font-system-ui",
                         "times": "fl-font-times",
                         "comic": "fl-font-comic-sans",
                         "arial": "fl-font-arial",
@@ -225,9 +227,10 @@ fluid.defaults("fluid.prefs.schemas.textFont", {
         "fluid.prefs.textFont": {
             "type": "string",
             "default": "default",
-            "enum": ["default", "times", "comic", "arial", "verdana", "open-dyslexic", "atkinson-hyperlegible"],
+            "enum": ["default", "system", "times", "comic", "arial", "verdana", "open-dyslexic", "atkinson-hyperlegible"],
             "enumLabels": [
                 "textFont-default",
+                "textFont-system",
                 "textFont-times",
                 "textFont-comic",
                 "textFont-arial",

diff --git a/src/framework/preferences/messages/contrast.json b/src/framework/preferences/messages/contrast.json
@@ -1,5 +1,5 @@
 {
-    "contrast-default": "Default",
+    "contrast-default": "No Preference",
     "contrast-bw": "Black on white",
     "contrast-wb": "White on black",
     "contrast-by": "Black on yellow",

diff --git a/src/framework/preferences/messages/contrast_en.json b/src/framework/preferences/messages/contrast_en.json
@@ -1,5 +1,5 @@
 {
-    "contrast-default": "Default",
+    "contrast-default": "No Preference",
     "contrast-bw": "Black on white",
     "contrast-wb": "White on black",
     "contrast-by": "Black on yellow",

diff --git a/src/framework/preferences/messages/contrast_en_CA.json b/src/framework/preferences/messages/contrast_en_CA.json
@@ -1,5 +1,5 @@
 {
-    "contrast-default": "Default",
+    "contrast-default": "No Preference",
     "contrast-bw": "Black on white",
     "contrast-wb": "White on black",
     "contrast-by": "Black on yellow",

diff --git a/src/framework/preferences/messages/contrast_en_US.json b/src/framework/preferences/messages/contrast_en_US.json
@@ -1,5 +1,5 @@
 {
-    "contrast-default": "Default",
+    "contrast-default": "No Preference",
     "contrast-bw": "Black on white",
     "contrast-wb": "White on black",
     "contrast-by": "Black on yellow",

diff --git a/src/framework/preferences/messages/contrast_es.json b/src/framework/preferences/messages/contrast_es.json
@@ -1,5 +1,5 @@
 {
-    "contrast-default": "Defecto",
+    "contrast-default": "Sin cambios",
     "contrast-bw": "Negro sobre blanco",
     "contrast-wb": "Blanco sobre negro",
     "contrast-by": "Negro sobre amarillo",

diff --git a/src/framework/preferences/messages/contrast_fa.json b/src/framework/preferences/messages/contrast_fa.json
@@ -1,5 +1,5 @@
 {
-    "contrast-default": "پیش فرض",
+    "contrast-default": "بدون اولویت",
     "contrast-bw": "متن سیاه روی زمینه سفید",
     "contrast-wb": "متن سفید روی زمینه سیاه",
     "contrast-by": "متن سیاه روی زمینه زرد",

diff --git a/src/framework/preferences/messages/contrast_fr.json b/src/framework/preferences/messages/contrast_fr.json
@@ -1,5 +1,5 @@
 {
-    "contrast-default": "Défaut",
+    "contrast-default": "Pas de préférence",
     "contrast-bw": "Noir sur blanc",
     "contrast-wb": "Blanc sur noir",
     "contrast-by": "Noir sur jaune",

diff --git a/src/framework/preferences/messages/contrast_pt_BR.json b/src/framework/preferences/messages/contrast_pt_BR.json
@@ -1,5 +1,5 @@
 {
-    "contrast-default": "Padrão",
+    "contrast-default": "Sem Preferência",
     "contrast-bw": "Preto sobre branco",
     "contrast-wb": "Branco sobre preto",
     "contrast-by": "Preto sobre amarelo",

diff --git a/src/framework/preferences/messages/textFont.json b/src/framework/preferences/messages/textFont.json
@@ -1,5 +1,6 @@
 {
-    "textFont-default": "Default",
+    "textFont-default": "No Preference",
+    "textFont-system": "Device Font",
     "textFont-times": "Times New Roman",
     "textFont-comic": "Comic Sans",
     "textFont-arial": "Arial",

diff --git a/src/framework/preferences/messages/textFont_en.json b/src/framework/preferences/messages/textFont_en.json
@@ -1,5 +1,6 @@
 {
-    "textFont-default": "Default",
+    "textFont-default": "No Preference",
+    "textFont-system": "Device Font",
     "textFont-times": "Times New Roman",
     "textFont-comic": "Comic Sans",
     "textFont-arial": "Arial",

diff --git a/src/framework/preferences/messages/textFont_en_CA.json b/src/framework/preferences/messages/textFont_en_CA.json
@@ -1,5 +1,6 @@
 {
-    "textFont-default": "Default",
+    "textFont-default": "No Preference",
+    "textFont-system": "Device Font",
     "textFont-times": "Times New Roman",
     "textFont-comic": "Comic Sans",
     "textFont-arial": "Arial",

diff --git a/src/framework/preferences/messages/textFont_en_US.json b/src/framework/preferences/messages/textFont_en_US.json
@@ -1,5 +1,6 @@
 {
-    "textFont-default": "Default",
+    "textFont-default": "No Preference",
+    "textFont-system": "Device Font",
     "textFont-times": "Times New Roman",
     "textFont-comic": "Comic Sans",
     "textFont-arial": "Arial",

diff --git a/src/framework/preferences/messages/textFont_es.json b/src/framework/preferences/messages/textFont_es.json
@@ -1,5 +1,6 @@
 {
-    "textFont-default": "Defecto",
+    "textFont-default": "Sin cambios",
+    "textFont-system": "Letras del dispositivo",
     "textFont-times": "Times New Roman",
     "textFont-comic": "Comic Sans",
     "textFont-arial": "Arial",

diff --git a/src/framework/preferences/messages/textFont_fa.json b/src/framework/preferences/messages/textFont_fa.json
@@ -1,5 +1,6 @@
 {
-    "textFont-default": "پیش فرض",
+    "textFont-default": "بدون اولویت",
+    "textFont-system": "فونت پیش فرض",
     "textFont-times": "Times New Roman",
     "textFont-comic": "Comic Sans",
     "textFont-arial": "Arial",

diff --git a/src/framework/preferences/messages/textFont_fr.json b/src/framework/preferences/messages/textFont_fr.json
@@ -1,5 +1,6 @@
 {
-    "textFont-default": "Défaut",
+    "textFont-default": "Pas de préférence",
+    "textFont-system": "Police de l’appareil",
     "textFont-times": "Times New Roman",
     "textFont-comic": "Comic Sans",
     "textFont-arial": "Arial",

diff --git a/src/framework/preferences/messages/textFont_pt_BR.json b/src/framework/preferences/messages/textFont_pt_BR.json
@@ -1,5 +1,6 @@
 {
-    "textFont-default": "Padrão",
+    "textFont-default": "Sem Preferência",
+    "textFont-system": "Fonte do Dispositivo",
     "textFont-times": "Times New Roman",
     "textFont-comic": "Comic Sans",
     "textFont-arial": "Arial",

diff --git a/tests/framework-tests/preferences/data/textFont_en.json b/tests/framework-tests/preferences/data/textFont_en.json
@@ -1,5 +1,6 @@
 {
     "textFont-default": "Default",
+    "textFont-system": "Device Font",
     "textFont-times": "Times New Roman",
     "textFont-comic": "Comic Sans",
     "textFont-arial": "Arial",

diff --git a/tests/framework-tests/preferences/js/IntegrationTestsCommon.js b/tests/framework-tests/preferences/js/IntegrationTestsCommon.js
@@ -185,8 +185,10 @@ fluid.tests.prefs.enhancerOptions = {
     }
 };
 
-fluid.tests.prefs.testStrings = ["Test1", "Test2", "Test3", "Test4", "Test5", "Test6", "Test7"];
-fluid.tests.prefs.testControlValues = ["a", "b", "c", "d", "e", "f", "g"];
+// TODO: The number of values in these arrays is dependent on the starter grades stringArrayIndex
+//       This should be refactored so that it isn't so tightly coupled.
+fluid.tests.prefs.testStrings = ["Test1", "Test2", "Test3", "Test4", "Test5", "Test6", "Test7", "Test 8"];
+fluid.tests.prefs.testControlValues = ["a", "b", "c", "d", "e", "f", "g", "h"];
 
 fluid.tests.prefs.testComponentIntegration = function (prefsEditor) {
     var body = $("body");
@@ -199,13 +201,13 @@ fluid.tests.prefs.testComponentIntegration = function (prefsEditor) {
     var actualTextFontStrings = prefsEditor.textFont.options.strings.textFont;
     var actualTextFontControlValues = prefsEditor.textFont.options.controlValues.textFont;
 
-    jqUnit.assertEquals("There are 7 elements in the text font string list", 7, actualTextFontStrings.length);
+    jqUnit.assertEquals("There are 8 elements in the text font string list", 8, actualTextFontStrings.length);
     jqUnit.assertEquals("The first text font string value matches", testStrings[0], actualTextFontStrings[0]);
-    jqUnit.assertEquals("The seventh text font string value matches", testStrings[6], actualTextFontStrings[6]);
+    jqUnit.assertEquals("The eighth text font string value matches", testStrings[7], actualTextFontStrings[7]);
 
-    jqUnit.assertEquals("There are 7 elements in the text font control value list", 7, actualTextFontControlValues.length);
+    jqUnit.assertEquals("There are 8 elements in the text font control value list", 8, actualTextFontControlValues.length);
     jqUnit.assertEquals("The first text font control value matches", testControlValues[0], actualTextFontControlValues[0]);
-    jqUnit.assertEquals("The seventh text font control value matches", testControlValues[6], actualTextFontControlValues[6]);
+    jqUnit.assertEquals("The eighth text font control value matches", testControlValues[7], actualTextFontControlValues[7]);
 };
 
 fluid.defaults("fluid.tests.prefs.mungingIntegrationBase", {

diff --git a/tests/framework-tests/preferences/js/PanelsTests.js b/tests/framework-tests/preferences/js/PanelsTests.js
@@ -1039,7 +1039,8 @@ fluid.tests.prefsPaneltemplatePrefix = "../../../../src/framework/preferences/ht
 fluid.defaults("fluid.tests.prefs.panel.textFont", {
     gradeNames: ["fluid.prefs.panel.textFont", "fluid.tests.panels.utils.defaultTestPanel", "fluid.tests.panels.utils.injectTemplates"],
     messageBase: {
-        "textFont-default": "default",
+        "textFont-default": "No Preference",
+        "textFont-system": "Device Font",
         "textFont-times": "Times New Roman",
         "textFont-comic": "Comic Sans",
         "textFont-arial": "Arial",
@@ -1060,6 +1061,7 @@ fluid.defaults("fluid.tests.prefs.panel.textFont", {
     classnameMap: {
         "textFont": {
             "default": "",
+            "system": "fl-font-system-ui",
             "times": "fl-font-times",
             "comic": "fl-font-comic-sans",
             "arial": "fl-font-arial",
@@ -1071,6 +1073,7 @@ fluid.defaults("fluid.tests.prefs.panel.textFont", {
     stringArrayIndex: {
         textFont: [
             "textFont-default",
+            "textFont-system",
             "textFont-times",
             "textFont-comic",
             "textFont-arial",
@@ -1080,7 +1083,7 @@ fluid.defaults("fluid.tests.prefs.panel.textFont", {
         ]
     },
     controlValues: {
-        textFont: ["default", "times", "comic", "arial", "verdana", "open-dyslexic", "atkinson-hyperlegible"]
+        textFont: ["default", "system", "times", "comic", "arial", "verdana", "open-dyslexic", "atkinson-hyperlegible"]
     }
 });
 
@@ -1118,14 +1121,14 @@ fluid.setLogging(true);
 fluid.defaults("fluid.tests.textFontTester", {
     gradeNames: ["fluid.test.testCaseHolder"],
     testOptions: {
-        expectedNumOfOptions: 7,
+        expectedNumOfOptions: 8,
         defaultValue: "default",
         newValue: "comic"
     },
     modules: [{
         name: "Test the text font settings panel",
         tests: [{
-            expect: 11,
+            expect: 12,
             name: "Test the rendering of the text font panel",
             sequence: [{
                 listener: "fluid.tests.textFontPanel.testDefault",
@@ -1204,8 +1207,8 @@ fluid.defaults("fluid.tests.textFontOverrideTester", {
 fluid.defaults("fluid.tests.prefs.panel.contrast", {
     gradeNames: ["fluid.prefs.panel.contrast", "fluid.tests.panels.utils.defaultTestPanel", "fluid.tests.panels.utils.injectTemplates"],
     messageBase: {
-        "contrast": ["Default", "Black on white", "White on black", "Black on yellow", "Yellow on black", "Low contrast"],
-        "contrast-default": "Default",
+        "contrast": ["No Preference", "Black on white", "White on black", "Black on yellow", "Yellow on black", "Low contrast"],
+        "contrast-default": "No Preference",
         "contrast-bw": "Black on white",
         "contrast-wb": "White on black",
         "contrast-by": "Black on yellow",

diff --git a/tests/framework-tests/preferences/js/PrefsEditorTests.js b/tests/framework-tests/preferences/js/PrefsEditorTests.js
@@ -152,7 +152,7 @@ fluid.tests.prefs.assertInit = function (prefsEditor) {
     jqUnit.assertEquals("Initialization: The first theme is default", "default", themeValues[0]);
 
     var fontValues = prefsEditor.textFont.options.controlValues.textFont;
-    jqUnit.assertEquals("Initialization: There are 7 font values in font style adjuster", 7, fontValues.length);
+    jqUnit.assertEquals("Initialization: There are 8 font values in font style adjuster", 8, fontValues.length);
     jqUnit.assertTrue("Initialization: There is a default font value", fontValues.indexOf("default") !== -1);
 
     jqUnit.assertEquals("Initialization: The onPrefsEditorRefresh event has been called once", 1, prefsEditor.refreshCount);