fix(vwc-slider): viv-433 slider pin text not visible in dark mode (#702)

* override pin color var * add pin test
Vonage · Mar 15, 2021 · 0edc9cb · 0edc9cb
1 parent 1fe2bee
commit 0edc9cb
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/components/slider/package.json b/components/slider/package.json
@@ -35,6 +35,7 @@
 		"tslib": "^2.0.3"
 	},
 	"devDependencies": {
+		"@vonage/vvd-design-tokens": "^2.0.4",
 		"@vonage/vvd-typography": "^2.0.4",
 		"@vonage/vvd-umbrella": "^2.0.4",
 		"typescript": "^4.1.3"

diff --git a/components/slider/src/vwc-slider.scss b/components/slider/src/vwc-slider.scss
@@ -1,3 +1,4 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
 @use '@vonage/vvd-typography/scss/typography' as typography;
 
 :host {
@@ -40,3 +41,7 @@
 		}
 	}
 }
+
+.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
+	color: var(#{scheme-variables.$vvd-color-on-primary});
+}
diff --git a/components/slider/test/slider.test.js b/components/slider/test/slider.test.js
@@ -40,7 +40,7 @@ describe('slider', () => {
 		it('should style the basic slider', async () => {
 			const actualElements = addElement(
 				textToDomToParent(
-					`<${VWC_SLIDER} min="0" max="100" value="50"></${VWC_SLIDER}>`
+					`<${VWC_SLIDER} min="0" max="100" value="50" pin></${VWC_SLIDER}>`
 				)
 			);
 			await waitNextTask();
@@ -63,6 +63,16 @@ describe('slider', () => {
 				fill: scheme === 'light' ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)',
 			};
 			assertComputedStyle(sliderThumb, expectedStylesThumb);
+
+			const sliderPin = actualElements[0].shadowRoot.querySelector(
+				'.mdc-slider__pin'
+			);
+			expect(sliderPin).to.exist;
+			const expectedStylesPin = {
+				backgroundColor: scheme === 'light' ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)',
+				color: scheme === 'light' ? 'rgb(255, 255, 255)' : 'rgb(0, 0, 0)',
+			};
+			assertComputedStyle(sliderPin, expectedStylesPin);
 		});
 	});
 });