fix(audio-player): change slider knob design- visible on hover/focus …

…only (VIV-1990) (#2090)
Vonage · Feb 2, 2025 · b1b19c4 · b1b19c4
1 parent 04d4c58
commit b1b19c4
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 2 deletions.
diff --git a/libs/components/src/lib/audio-player/audio-player.scss b/libs/components/src/lib/audio-player/audio-player.scss
@@ -15,7 +15,7 @@
 	align-items: center;
 	padding: 8px;
 	color: var(#{constants.$vvd-color-canvas-text});
-	gap: 16px;
+	gap: 8px;
 	inline-size: 100%;
 	user-select: none;
 

diff --git a/libs/components/src/lib/audio-player/audio-player.template.ts b/libs/components/src/lib/audio-player/audio-player.template.ts
@@ -118,7 +118,8 @@ function renderSlider(context: VividElementDefinitionContext) {
 		max="100"
 		ariaValuetext="${(x) => formatTime(x.currentTime)}"
 		connotation="${(x) => x.connotation}"
-		?disabled="${(x) => x.disabled || !x.duration}">
+		?disabled="${(x) => x.disabled || !x.duration}"
+		internal-part>
 	</${sliderTag}>`;
 }
 

diff --git a/...o-player/ui.test.ts-snapshots/snapshots-audio-player-Desktop-Chromium-linux.png b/...o-player/ui.test.ts-snapshots/snapshots-audio-player-Desktop-Chromium-linux.png
diff --git a/...io-player/ui.test.ts-snapshots/snapshots-audio-player-Desktop-Firefox-linux.png b/...io-player/ui.test.ts-snapshots/snapshots-audio-player-Desktop-Firefox-linux.png
diff --git a/...dio-player/ui.test.ts-snapshots/snapshots-audio-player-Desktop-Safari-linux.png b/...dio-player/ui.test.ts-snapshots/snapshots-audio-player-Desktop-Safari-linux.png
diff --git a/libs/components/src/lib/slider/slider.scss b/libs/components/src/lib/slider/slider.scss
@@ -255,3 +255,29 @@ $track-thickness: 2px;
 	color: var(#{constants.$vvd-color-canvas-text});
 	font: var(#{constants.$vvd-typography-base-bold});
 }
+
+/* Customize for Audio-Player */
+/* stylelint-disable */
+:host([internal-part]) {
+	.thumb-container {
+		opacity: 0;
+		transition: opacity 0.2s ease;
+	}
+	.control {
+		&.horizontal {
+			.track {
+				top: 16px;
+				block-size: 4px;
+				overflow: hidden;
+			}
+		}
+
+		&:hover,
+		&:focus {
+			.thumb-container {
+				opacity: 1;
+			}
+		}
+	}
+}
+/* stylelint-enable */