PLAT-52586: Fix ProgressBar tooltip in vertical orientation (#1523)

* fix orientation props * tooltip position fix Integrated-By: Ryan Duffy ([email protected])
enactjs · Mar 23, 2018 · f77edac · f77edac
1 parent 795b031
commit f77edac
Showing 1 changed file with 31 additions and 26 deletions.
diff --git a/packages/moonstone/ProgressBar/ProgressBar.js b/packages/moonstone/ProgressBar/ProgressBar.js
@@ -48,6 +48,17 @@ const ProgressBarBase = kind({
 		 */
 		css: PropTypes.object,
 
+		/**
+		 * Sets the orientation of the slider, whether the progress-bar depicts its progress value
+		 * in a left and right orientation or up and down onientation.
+		 * Must be either `'horizontal'` or `'vertical'`.
+		 *
+		 * @type {String}
+		 * @default 'horizontal'
+		 * @public
+		 */
+		orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+
 		/**
 		 * The proportion of the filled portion of the progress bar. Valid values are
 		 * between `0` and `1`.
@@ -76,16 +87,7 @@ const ProgressBarBase = kind({
 		 * @type {Boolean}
 		 * @public
 		 */
-		tooltipForceSide: PropTypes.bool,
-
-		/**
-		 * If `true` the progress bar will be oriented vertically.
-		 *
-		 * @type {Boolean}
-		 * @default false
-		 * @public
-		 */
-		vertical: PropTypes.bool
+		tooltipForceSide: PropTypes.bool
 	},
 
 	styles: {
@@ -94,32 +96,35 @@ const ProgressBarBase = kind({
 	},
 
 	computed: {
-		tooltipComponent: ({progress, tooltip, tooltipForceSide, vertical}) => {
+		tooltipComponent: ({progress, tooltip, tooltipForceSide, orientation}) => {
 			if (tooltip) {
 				const progressAfterMidpoint = progress > 0.5;
 				const progressPercentage = Math.min(parseInt(progress * 100), 100);
 				const percentageText = `${progressPercentage}%`;
-				const tooltipVerticalPosition = {
-					top: `${100 - progressPercentage}%`,
-					right: tooltipForceSide ? 'auto' : ri.unit(-36, 'rem'),
-					left: tooltipForceSide ? ri.unit(72, 'rem') : null
-				};
-				const tooltipHorizontalPosition = progressAfterMidpoint ? {
-					right: `${100 - progressPercentage}%`,
-					bottom: ri.unit(24, 'rem')
-				} : {
-					left: percentageText,
-					bottom: ri.unit(24, 'rem')
-				};
-
-				const tooltipPosition = vertical ? tooltipVerticalPosition : tooltipHorizontalPosition;
+
+				let tooltipPosition;
+				if (orientation === 'vertical') {
+					tooltipPosition = {
+						top: `${100 - progressPercentage}%`,
+						right: tooltipForceSide ? 'auto' : ri.unit(ri.scale(-36), 'rem'),
+						left: tooltipForceSide ? ri.unit(ri.scale(72), 'rem') : null
+					};
+				} else {
+					tooltipPosition = progressAfterMidpoint ? {
+						right: `${100 - progressPercentage}%`,
+						bottom: ri.unit(ri.scale(24), 'rem')
+					} : {
+						left: percentageText,
+						bottom: ri.unit(ri.scale(24), 'rem')
+					};
+				}
 
 				return (
 					<ProgressBarTooltip
 						forceSide={tooltipForceSide}
 						knobAfterMidpoint={progressAfterMidpoint}
 						style={tooltipPosition}
-						vertical={vertical}
+						orientation={orientation}
 					>
 						{percentageText}
 					</ProgressBarTooltip>