fix(slider, dialog): fix slider disabled ring and dialog story (#705)

* fixing the dialog stories * fixing slider disabled state and dialog stories * fixing slider and dialog * fixing slider and dialog Co-authored-by: yinon <yinon@hotmail.com>
Vonage · Mar 16, 2021 · 1f99f6c · 1f99f6c
1 parent 44cff74
commit 1f99f6c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 6 deletions.
diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
@@ -46,20 +46,20 @@ const IconTemplate = args => html`
 `;
 
 export const Basic = Template.bind({});
-Basic.args = { };
+Basic.args = {};
 
 export const Heading = Template.bind({});
-Heading.args = { heading: 'Hello Modal!'};
+Heading.args = { heading: 'Hello Modal!' };
 
 export const Icon = IconTemplate.bind({});
-Icon.args = { heading: 'Homey feeling'};
+Icon.args = { heading: 'Homey feeling' };
 
 export const Stacked = Template.bind({});
-Stacked.args = { stacked: ''};
+Stacked.args = { stacked: '' };
 
 export const Modal = Template.bind({});
-Modal.args = { heading: 'This is a modal window', scrimClickAction: ''};
+Modal.args = { heading: 'This is a modal window', scrimClickAction: '' };
 
 function handleOpenDialogClick(e) {
-	e.target.parentNode.querySelector('#dialog-a').show();
+	document.querySelector('vwc-dialog').show();
 }
diff --git a/components/slider/src/vwc-slider.scss b/components/slider/src/vwc-slider.scss
@@ -45,3 +45,8 @@
 .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
 	color: var(#{scheme-variables.$vvd-color-on-primary});
 }
+
+.mdc-slider.mdc-slider--disabled .mdc-slider__thumb {
+	stroke: var(#{scheme-variables.$vvd-color-base});
+}
+
diff --git a/components/slider/test/slider.test.js b/components/slider/test/slider.test.js
@@ -74,5 +74,44 @@ describe('slider', () => {
 			};
 			assertComputedStyle(sliderPin, expectedStylesPin);
 		});
+
+		it('should style the disabled slider', async () => {
+			const actualElements = addElement(
+				textToDomToParent(
+					`<${VWC_SLIDER} disabled min="0" max="100" value="50" pin></${VWC_SLIDER}>`
+				)
+			);
+			await waitNextTask();
+			const scheme = schemeService.getSelectedScheme();
+
+			const sliderTrack = actualElements[0].shadowRoot.querySelector(
+				'.mdc-slider__track'
+			);
+			expect(sliderTrack).to.exist;
+			const expectedStylesTrack = {
+				backgroundColor: 'rgb(154, 154, 154)'
+			};
+			assertComputedStyle(sliderTrack, expectedStylesTrack);
+
+			const sliderThumb = actualElements[0].shadowRoot.querySelector(
+				'.mdc-slider__thumb'
+			);
+			expect(sliderThumb).to.exist;
+			const expectedStylesThumb = {
+				stroke: 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;
+			console.log(getComputedStyle(sliderPin));
+			// const expectedStylesPin = {
+			// 	backgroundColor: scheme === 'light' ? 'rgba(0, 0, 0, 0)' : 'rgba(255, 255, 255, 0)',
+			// 	color: scheme === 'light' ? 'rgb(0, 0, 0)' : 'rgb(0, 0, 0)',
+			// };
+			// assertComputedStyle(sliderPin, expectedStylesPin);
+		});
 	});
 });