From 4f73ae264db746a72ab0ea085921a13cac2a757a Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Mon, 4 Mar 2024 13:32:30 +0900 Subject: [PATCH 1/7] Added fontScale prop in ThemeDecorator for testing large text mode Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- ThemeDecorator/ThemeDecorator.js | 9 +++++++-- samples/sampler/.storybook/preview.js | 12 +++++++++++- .../sampler/src/ThemeEnvironment/ThemeEnvironment.js | 1 + 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/ThemeDecorator/ThemeDecorator.js b/ThemeDecorator/ThemeDecorator.js index 42c4f05a5e..1a07528faa 100644 --- a/ThemeDecorator/ThemeDecorator.js +++ b/ThemeDecorator/ThemeDecorator.js @@ -54,6 +54,11 @@ const defaultConfig = /** @lends sandstone/ThemeDecorator.ThemeDecorator.default */ disableFullscreen: false, + /** + * Font scale for large text mode. + */ + fontScale: 1, + /** * Enables a floating layer for popup components. * @@ -169,7 +174,7 @@ const defaultConfig = /** @lends sandstone/ThemeDecorator.ThemeDecorator.default * @public */ const ThemeDecorator = hoc(defaultConfig, (config, Wrapped) => { - const {accessible, ri, i18n, spotlight, float, noAutoFocus, overlay, + const {accessible, ri, i18n, spotlight, float, fontScale, noAutoFocus, overlay, skin, disableFullscreen, rootId} = config; // Apply classes depending on screen type (overlay / fullscreen) @@ -182,7 +187,7 @@ const ThemeDecorator = hoc(defaultConfig, (config, Wrapped) => { let App = Wrapped; if (float) App = FloatingLayerDecorator({wrappedClassName: bgClassName}, App); - if (ri) App = ResolutionDecorator(ri, App); + if (ri) App = ResolutionDecorator({...ri, fontScale}, App); if (i18n) { // Apply the @enact/i18n decorator around the font decorator so the latter will update the // font stylesheet when the locale changes diff --git a/samples/sampler/.storybook/preview.js b/samples/sampler/.storybook/preview.js index af1e1b57f0..5f17cc8924 100644 --- a/samples/sampler/.storybook/preview.js +++ b/samples/sampler/.storybook/preview.js @@ -48,6 +48,15 @@ const skins = { 'Light': 'light' }; +const fontScales = { + '1': 1, + '1.2': 1.2, + '1.4': 1.4, + '1.6': 1.6, + '1.8': 1.8, + '2': 2 +}; + configureActions(); if (process.env.STORYBOOK_APPLY_GA_COOKIEBANNER) { @@ -89,13 +98,14 @@ export const parameters = { export const globalTypes = { 'locale': getObjectType('locale', 'en-US', locales), 'large text': getBooleanType('large text'), + 'font scale': getObjectType('font scale', '1', fontScales), 'high contrast': getBooleanType('high contrast'), 'skin': getObjectType('skin', 'neutral', skins), 'background': getObjectType('background', 'default', backgrounds), 'debug aria': getBooleanType('debug aria'), 'debug layout': getBooleanType('debug layout'), 'debug spotlight': getBooleanType('debug spotlight'), - 'debug sprites': getBooleanType('debug sprites') + 'debug sprites': getBooleanType('debug sprites'), }; export const decorators = [ThemeEnvironment]; diff --git a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js index c02a2cdba9..e7212024af 100644 --- a/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js +++ b/samples/sampler/src/ThemeEnvironment/ThemeEnvironment.js @@ -71,6 +71,7 @@ const StorybookDecorator = (story, config = {}) => { title={componentName === config.name ? `${config.kind}`.replace(/\//g, ' ').trim() : `${componentName} ${config.name}`} description={hasInfoText ? config.parameters.info.text : null} locale={globals.locale} + fontScale={JSON.parse(globals['font scale'])} textSize={JSON.parse(globals['large text']) ? 'large' : 'normal'} highContrast={JSON.parse(globals['high contrast'])} style={{ From 6a044f3f3f393757687431aad8d222ecb6214370 Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Mon, 4 Mar 2024 14:57:22 +0900 Subject: [PATCH 2/7] Fixed to set default font scale value in storybook Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- samples/sampler/.storybook/preview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/sampler/.storybook/preview.js b/samples/sampler/.storybook/preview.js index 5f17cc8924..70de5dd3d4 100644 --- a/samples/sampler/.storybook/preview.js +++ b/samples/sampler/.storybook/preview.js @@ -98,7 +98,7 @@ export const parameters = { export const globalTypes = { 'locale': getObjectType('locale', 'en-US', locales), 'large text': getBooleanType('large text'), - 'font scale': getObjectType('font scale', '1', fontScales), + 'font scale': getObjectType('font scale', 1, fontScales), 'high contrast': getBooleanType('high contrast'), 'skin': getObjectType('skin', 'neutral', skins), 'background': getObjectType('background', 'default', backgrounds), From 92cf1a77912b5cf41f626841bca5810ac787b47f Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Mon, 4 Mar 2024 17:46:37 +0900 Subject: [PATCH 3/7] Added 3x, 4x, and 5x to the font scale options Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- samples/sampler/.storybook/preview.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/samples/sampler/.storybook/preview.js b/samples/sampler/.storybook/preview.js index 70de5dd3d4..31c57f519d 100644 --- a/samples/sampler/.storybook/preview.js +++ b/samples/sampler/.storybook/preview.js @@ -54,7 +54,10 @@ const fontScales = { '1.4': 1.4, '1.6': 1.6, '1.8': 1.8, - '2': 2 + '2': 2, + '3': 3, + '4': 4, + '5': 5 }; configureActions(); From c04260b1ee80ce4c3c45d2a04d5b5f3818a6280c Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Wed, 13 Mar 2024 17:09:47 +0900 Subject: [PATCH 4/7] Applied reviews - Delete fontScale from ThemeDecorator's config It only needs to be passed as a prop, not as a ThemeDecorator config Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- ThemeDecorator/ThemeDecorator.js | 4 ++-- samples/sampler/.storybook/preview.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ThemeDecorator/ThemeDecorator.js b/ThemeDecorator/ThemeDecorator.js index 1a07528faa..af0887641d 100644 --- a/ThemeDecorator/ThemeDecorator.js +++ b/ThemeDecorator/ThemeDecorator.js @@ -174,7 +174,7 @@ const defaultConfig = /** @lends sandstone/ThemeDecorator.ThemeDecorator.default * @public */ const ThemeDecorator = hoc(defaultConfig, (config, Wrapped) => { - const {accessible, ri, i18n, spotlight, float, fontScale, noAutoFocus, overlay, + const {accessible, ri, i18n, spotlight, float, noAutoFocus, overlay, skin, disableFullscreen, rootId} = config; // Apply classes depending on screen type (overlay / fullscreen) @@ -187,7 +187,7 @@ const ThemeDecorator = hoc(defaultConfig, (config, Wrapped) => { let App = Wrapped; if (float) App = FloatingLayerDecorator({wrappedClassName: bgClassName}, App); - if (ri) App = ResolutionDecorator({...ri, fontScale}, App); + if (ri) App = ResolutionDecorator(ri, App); if (i18n) { // Apply the @enact/i18n decorator around the font decorator so the latter will update the // font stylesheet when the locale changes diff --git a/samples/sampler/.storybook/preview.js b/samples/sampler/.storybook/preview.js index 31c57f519d..f83c1358f7 100644 --- a/samples/sampler/.storybook/preview.js +++ b/samples/sampler/.storybook/preview.js @@ -108,7 +108,7 @@ export const globalTypes = { 'debug aria': getBooleanType('debug aria'), 'debug layout': getBooleanType('debug layout'), 'debug spotlight': getBooleanType('debug spotlight'), - 'debug sprites': getBooleanType('debug sprites'), + 'debug sprites': getBooleanType('debug sprites') }; export const decorators = [ThemeEnvironment]; From 4b70eb0ca300b85b5706f172912c85fbc3789f37 Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Tue, 19 Mar 2024 19:08:32 +0900 Subject: [PATCH 5/7] Removed fontScale in DefaultConfig of ThemeDecorator Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- ThemeDecorator/ThemeDecorator.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/ThemeDecorator/ThemeDecorator.js b/ThemeDecorator/ThemeDecorator.js index af0887641d..42c4f05a5e 100644 --- a/ThemeDecorator/ThemeDecorator.js +++ b/ThemeDecorator/ThemeDecorator.js @@ -54,11 +54,6 @@ const defaultConfig = /** @lends sandstone/ThemeDecorator.ThemeDecorator.default */ disableFullscreen: false, - /** - * Font scale for large text mode. - */ - fontScale: 1, - /** * Enables a floating layer for popup components. * From 3929db6d4f791edd9459b0e19ee5ccea04a2cc2f Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Fri, 29 Mar 2024 17:41:57 +0900 Subject: [PATCH 6/7] Added fontScale to config of ThemeDecorator - FontScale must be updated before the scale function is called Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- ThemeDecorator/ThemeDecorator.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ThemeDecorator/ThemeDecorator.js b/ThemeDecorator/ThemeDecorator.js index 38c451dcc3..70a87ab426 100644 --- a/ThemeDecorator/ThemeDecorator.js +++ b/ThemeDecorator/ThemeDecorator.js @@ -168,7 +168,7 @@ const defaultConfig = /** @lends sandstone/ThemeDecorator.ThemeDecorator.default * @public */ const ThemeDecorator = hoc(defaultConfig, (config, Wrapped) => { - const {accessible, ri, i18n, spotlight, float, noAutoFocus, overlay, + const {accessible, ri, i18n, spotlight, float, noAutoFocus, overlay, fontScale, skin, disableFullscreen, rootId} = config; // Apply classes depending on screen type (overlay / fullscreen) @@ -181,7 +181,7 @@ const ThemeDecorator = hoc(defaultConfig, (config, Wrapped) => { let App = Wrapped; if (float) App = FloatingLayerDecorator({wrappedClassName: bgClassName}, App); - if (ri) App = ResolutionDecorator(ri, App); + if (ri) App = ResolutionDecorator({...ri, fontScale}, App); if (i18n) { // Apply the @enact/i18n decorator around the font decorator so the latter will update the // font stylesheet when the locale changes From 9ed65137250d9d25601828f35a011e7fa2ad5905 Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Mon, 1 Apr 2024 15:14:09 +0900 Subject: [PATCH 7/7] Added fontScale default value is 1 to defaultConfig Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- ThemeDecorator/ThemeDecorator.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/ThemeDecorator/ThemeDecorator.js b/ThemeDecorator/ThemeDecorator.js index 70a87ab426..185e93bad1 100644 --- a/ThemeDecorator/ThemeDecorator.js +++ b/ThemeDecorator/ThemeDecorator.js @@ -65,6 +65,15 @@ const defaultConfig = /** @lends sandstone/ThemeDecorator.ThemeDecorator.default */ float: true, + /** + * Font scale value for large text mode. + * + * @type {Number} + * @default 1 + * @public + */ + fontScale: 1, + /** * Options for I18nDecorator. *