WRQ-11247: Added fontScale prop for large text mode scale values

packages/ui/resolution/ResolutionDecorator.js

@@ -9,7 +9,7 @@
 import PropTypes from 'prop-types';
 import hoc from '@enact/core/hoc';
 
-import {init, config as riConfig, defineScreenTypes, getResolutionClasses} from './resolution';
+import {init, calculateFontSize, config as riConfig, defineScreenTypes, getResolutionClasses, updateBaseFontSize, updateFontScale} from './resolution';
 
 /**
  * Default config for `ResolutionDecorator`.
@@ -97,7 +97,22 @@
 		static displayName = 'ResolutionDecorator';
 
 		static propTypes = /** @lends ui/resolution.ResolutionDecorator.prototype */ {
-			className: PropTypes.string
+			className: PropTypes.string,
+
+			/**
+			 * Font Scale for large text mode.
+	 		 * Use this value to set the scale of the font.
+	 		 * This is the value that will be multiplied by pxPerRem, which is determined by resolution.
+			 *
+			 * @type {Number}
+			 * @default 1
+			 * @public
+			 */
+			fontScale: PropTypes.number
+		};
+
+		static defaultProps = {
+			fontScale: 1
 		};
 
 		constructor (props) {
@@ -114,6 +129,15 @@
 			if (config.dynamic) window.addEventListener('resize', this.handleResize);
 			// eslint-disable-next-line react/no-find-dom-node
 			this.rootNode = ReactDOM.findDOMNode(this);
+
+			updateFontScale(this.props.fontScale);
+		}
+
+		componentDidUpdate (prevProps) {
+			if (prevProps.fontScale !== this.props.fontScale) {
+				updateFontScale(this.props.fontScale);
+				updateBaseFontSize(calculateFontSize());
+			}
 		}
 
 		componentWillUnmount () {
@@ -145,11 +169,15 @@
 		}
 
 		render () {
+			const {...rest} = this.props;
+
+			delete rest.fontScale;
+
 			// Check if the classes are different from our previous classes
 			let classes = getResolutionClasses();
 
 			if (this.props.className) classes += (classes ? ' ' : '') + this.props.className;
-			return <Wrapped {...this.props} className={classes} />;
+			return <Wrapped {...rest} className={classes} />;
 		}
 	};
 });

packages/ui/resolution/resolution.js

@@ -1,4 +1,5 @@
 let baseScreen,
+	fontScale = 1,
 	orientation,
 	riRatio,
 	screenType,
@@ -201,11 +202,11 @@
 	let size;
 
 	if (orientation === 'portrait' && config.orientationHandling === 'scale') {
-		size = scrObj.height / scrObj.width * scrObj.pxPerRem;
+		size = scrObj.height / scrObj.width * (scrObj.pxPerRem * fontScale);
 	} else {
-		size = scrObj.pxPerRem;
+		size = (scrObj.pxPerRem * fontScale);
 		if (orientation === 'landscape' && shouldScaleFontSize) {
-			size = parseInt(workspaceBounds.height * scrObj.pxPerRem / scrObj.height);
+			size = parseInt(workspaceBounds.height * (scrObj.pxPerRem * fontScale) / scrObj.height);
 		}
 	}
 	return size + 'px';
@@ -224,6 +225,17 @@
 	}
 }
 
+/**
+ * @function
+ * @memberof ui/resolution
+ * @param {Number}    scale     A value is used multiflied scale to base font size.
+ * @returns {undefined}
+ * @private
+ */
+function updateFontScale (fontScaleValue) {
+	fontScale = fontScaleValue;
+}
+
 /**
  * Returns the CSS classes for the given `type`.
  *
@@ -494,5 +506,7 @@
 	scaleToRem,
 	selectSrc,
 	unit,
-	unitToPixelFactors
+	unitToPixelFactors,
+	updateBaseFontSize,
+	updateFontScale
 };