fix(ui5-slider): improve labels structure and placement (#11848)

Author: Vonahz

packages/main/src/RangeSlider.ts

@@ -953,13 +953,6 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 			endHandle: {
 				[this.directionStart]: `${this._secondHandlePositionFromStart!}%`,
 			},
-			label: {
-				"width": `${this._labelWidth}%`,
-			},
-			labelContainer: {
-				"width": `100%`,
-				[this.directionStart]: `-${this._labelWidth / 2}%`,
-			},
 		};
 	}
 }

packages/main/src/Slider.ts

@@ -318,13 +318,6 @@ class Slider extends SliderBase implements IFormInputElement {
 			handle: {
 				[this.directionStart]: `${this._handlePositionFromStart}%`,
 			},
-			label: {
-				"width": `${this._labelWidth}%`,
-			},
-			labelContainer: {
-				"width": `100%`,
-				[this.directionStart]: `-${this._labelWidth / 2}%`,
-			},
 		};
 	}
 

packages/main/src/SliderBase.ts

@@ -206,12 +206,6 @@ abstract class SliderBase extends UI5Element {
 
 	_handleActionKeyPress(e: Event) {} // eslint-disable-line
 
-	// used in base template, but implemented in subclasses
-	abstract styles: {
-		label: Record<string, string>,
-		labelContainer: Record<string, string>,
-	};
-
 	abstract tickmarksObject: Array<boolean>;
 	abstract _ariaLabelledByText: string;
 
@@ -395,21 +389,28 @@ abstract class SliderBase extends UI5Element {
 		// In such case the labels must correspond to the tickmarks, only the first and the last one should exist.
 		if (spaceBetweenTickmarks < SliderBase.MIN_SPACE_BETWEEN_TICKMARKS) {
 			this._hiddenTickmarks = true;
-			this._labelsOverlapping = true;
 		} else {
 			this._hiddenTickmarks = false;
 		}
 
 		if (this.labelInterval <= 0 || this._hiddenTickmarks) {
+			this._labelsOverlapping = true;
 			return;
 		}
 
 		// Check if there are any overlapping labels.
 		// If so - only the first and the last one should be visible
-		const labelItems = this.shadowRoot!.querySelectorAll(".ui5-slider-labels li");
-		this._labelsOverlapping = [...labelItems].some(label => label.scrollWidth > label.clientWidth);
-	}
 
+		const remInPx = parseFloat(getComputedStyle(document.documentElement).fontSize); // calculate 1 rem in pixels
+		const childWidthPx = 2 * remInPx; // as specified label must be 2 rems so calculate one child width in pixels
+
+		const labelItemsParent = this.shadowRoot!.querySelector(".ui5-slider-labels") as HTMLElement;
+
+		const labelItemsSumWidth = this._labels.length * childWidthPx; // all labels width
+		const labelItemsParentWidth = labelItemsParent.clientWidth; // label parent width
+
+		this._labelsOverlapping = labelItemsParentWidth < labelItemsSumWidth;
+	}
 	/**
 	 * Called when the user starts interacting with the slider.
 	 * After a down event on the slider root, listen for move events on window, so the slider value

packages/main/src/SliderBaseTemplate.tsx

@@ -35,16 +35,15 @@ export default function SliderBaseTemplate(this: SliderBase, hooks?: {
 						</>)}
 					</ul>
 					{!!this.labelInterval &&
-							<ul class={{
-								"ui5-slider-labels": true,
-								"ui5-slider-hidden-labels": this._labelsOverlapping,
-							}}
-							style={this.styles.labelContainer}
-							>
-								{this._labels.map(l =>
-									<li style={this.styles.label}>{l}</li>
-								)}
-							</ul>
+						<ul class={{
+							"ui5-slider-labels": true,
+							"ui5-slider-hidden-labels": this._labelsOverlapping,
+						}}
+						>
+							{this._labels.map(l =>
+								<li data-counter={l}></li>
+							)}
+						</ul>
 					}
 				</>}
 

packages/main/src/themes/SliderBase.css

@@ -93,7 +93,7 @@
 
 .ui5-slider-tickmarks li {
 	height: var(--_ui5_slider_tickmark_height);
-	border-inline-start: 1px solid var(--_ui5_slider_tickmark_bg);
+	border-inline-start: 0.0625rem solid var(--_ui5_slider_tickmark_bg);
 }
 
 .ui5-slider-handle {
@@ -203,28 +203,38 @@
 	margin: 0;
 	padding: 0;
 	white-space: nowrap;
+    height: 1rem;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
 }
 
 .ui5-slider-labels li {
-	position: relative;
+    position: relative;
 	list-style: none;
-	padding-top: 0.3125rem;
-	height: 1rem;
 	margin: 0;
 	text-align: center;
 	display: inline-block;
-	color: var(--_ui5_slider_label_color);
 	font-family: var(--sapFontFamily);
 	font-size: var(--_ui5_slider_label_fontsize);
 	padding-top: 0;
 	box-sizing: border-box;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	vertical-align: top;
+    width: 0.0625rem;
+    visibility: hidden;
+}
+
+.ui5-slider-labels li::after {
+	content: attr(data-counter);
+	position: absolute;
+	top: 0;
+	visibility: visible;
+    display: inline-block;
+    width: 2rem;
+	color: var(--_ui5_slider_label_color);
+    transform: translateX(-50%);
 }
 
-.ui5-slider-hidden-labels li:not(:first-child):not(:last-child) {
+.ui5-slider-hidden-labels li:not(:first-child):not(:last-child)::after {
 	visibility: hidden;
 }