fix: slider disabled and readonly cursor styles (#4224)

* add readonly example, fix disabled cursor styles * update to use attributes instead of classes Co-authored-by: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
microsoft · Jan 14, 2021 · 554760e · 554760e
1 parent 8a9bcb8
commit 554760e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 10 deletions.
diff --git a/packages/web-components/fast-components/src/slider/fixtures/base.html b/packages/web-components/fast-components/src/slider/fixtures/base.html
@@ -301,5 +301,42 @@ <h4>Disabled</h4>
                 100
             </fast-slider-label>
         </fast-slider>
+        <!-- Read Only -->
+        <h4>Read Only</h4>
+        <fast-slider min="0" max="100" step="5" readonly>
+            <fast-slider-label position="0">
+                0
+            </fast-slider-label>
+            <fast-slider-label position="10">
+                10
+            </fast-slider-label>
+            <fast-slider-label position="20">
+                20
+            </fast-slider-label>
+            <fast-slider-label position="30">
+                30
+            </fast-slider-label>
+            <fast-slider-label position="40">
+                40
+            </fast-slider-label>
+            <fast-slider-label position="50">
+                50
+            </fast-slider-label>
+            <fast-slider-label position="60">
+                60
+            </fast-slider-label>
+            <fast-slider-label position="70">
+                70
+            </fast-slider-label>
+            <fast-slider-label position="80">
+                80
+            </fast-slider-label>
+            <fast-slider-label position="90">
+                90
+            </fast-slider-label>
+            <fast-slider-label position="100">
+                100
+            </fast-slider-label>
+        </fast-slider>
     </div>
 </fast-design-system-provider>
diff --git a/packages/web-components/fast-components/src/slider/slider.styles.ts b/packages/web-components/fast-components/src/slider/slider.styles.ts
@@ -109,13 +109,10 @@ export const SliderStyles = css`
         min-height: calc(var(--thumb-size) * 1px);
         min-width: calc(var(--design-unit) * 20px);
     }
-    :host(.disabled) .label,
-    :host(.readonly) .label,
-    :host(.readonly) .slider,
-    :host(.disabled) .slider {
+    :host([disabled]), :host([readonly]) {
         cursor: ${disabledCursor};
     }
-    :host(.disabled) {
+    :host([disabled]) {
         opacity: var(--disabled-opacity);
     }
 `.withBehaviors(
@@ -143,13 +140,11 @@ export const SliderStyles = css`
             :host(:${focusVisible}) .thumb-cursor {
                 border-color: ${SystemColors.Highlight};
             }
-            :host(.disabled) {
+            :host([disabled]) {
                 opacity: 1;
-                cursor: ${disabledCursor};
             }
-            :host(.disabled) .slider,
-            :host(.disabled) .track,
-            :host(.disabled) .thumb-cursor {
+            :host([disabled]) .track,
+            :host([disabled]) .thumb-cursor {
                 forced-color-adjust: none;
                 background: ${SystemColors.GrayText};
             }