WRR-4972: Fixed PageViews dot indicator to be centered

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)
enactjs · Oct 9, 2024 · 2618b25 · 2618b25
1 parent b10fe56
commit 2618b25
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/PageViews/PageViews.js b/PageViews/PageViews.js
@@ -249,8 +249,9 @@ const PageViewsBase = kind({
 			return (
 				<>
 					{pageIndicatorType !== 'number' ?
-						<Row className={classNames(css.steps, {[css.hidden]: !isStepVisible})}>
+						<Row className={classNames(css.stepsRow, {[css.hidden]: !isStepVisible})}>
 							<Steps
+								css={css}
 								current={index + 1}
 								currentIcon="circle"
 								futureIcon="circle"
@@ -260,7 +261,7 @@ const PageViewsBase = kind({
 								size={30}
 							/>
 						</Row> :
-						<Row className={css.steps}>
+						<Row className={css.stepsRow}>
 							<Cell className={css.navButton} shrink>
 								{isPrevButtonVisible ? <Button aria-label={$L('Previous')} icon="arrowlargeleft" iconFlip="auto" id="PrevNavButton" onClick={onPrevClick} size="small" /> : null}
 							</Cell>

diff --git a/PageViews/PageViews.module.less b/PageViews/PageViews.module.less
@@ -28,7 +28,7 @@
 		width: @sand-pageviews-number-navigation-button-area-width;
 	}
 
-	.steps {
+	.stepsRow {
 		align-items: center;
 		justify-content: center;
 		text-align: center;
@@ -38,7 +38,7 @@
 		}
 	}
 
-	&.number .steps {
+	&.number .stepsRow {
 		min-height: @sand-pageviews-number-steps-area-min-height;
 		.pageNumber {
 			width: @sand-pageviews-number-steps-number-width;
@@ -49,10 +49,16 @@
 	}
 
 	&.dot .steps {
+		display: flex;
 		min-height: @sand-pageviews-dot-steps-area-min-height;
+		align-items: center;
+		.step {
+			line-height: @sand-pageviews-dot-steps-area-min-height;
+			height: @sand-pageviews-dot-steps-area-min-height
+		}
 	}
 
-	&.fullContents .steps {
+	&.fullContents .stepsRow {
 		position: absolute;
 		align-self: center;
 		bottom: @sand-pageviews-full-steps-position-bottom;

diff --git a/styles/variables.less b/styles/variables.less
@@ -762,7 +762,7 @@
 // PageViews
 // ---------------------------------------
 @sand-pageviews-navigation-button-area-width: 216px;
-@sand-pageviews-steps-area-min-height: 132px;
+@sand-pageviews-steps-area-min-height: 114px;
 @sand-pageviews-dot-steps-area-min-height: @sand-pageviews-steps-area-min-height;
 @sand-pageviews-full-steps-area-min-height: @sand-pageviews-steps-area-min-height;
 @sand-pageviews-full-steps-position-bottom: 0;