diff --git a/packages/moonstone/ProgressBar/ProgressBar.js b/packages/moonstone/ProgressBar/ProgressBar.js index ec3f19faeb..9333332938 100644 --- 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 ( {percentageText}