Change files

microsoft · Jan 11, 2021 · 84ff2a9 · 84ff2a9
1 parent 77c4f82
commit 84ff2a9
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 6 deletions.
diff --git a/...luentui-web-components-2021-01-05-13-44-17-users-v-sedono-fix-slider-disabled-cursor.json b/...luentui-web-components-2021-01-05-13-44-17-users-v-sedono-fix-slider-disabled-cursor.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix slider disabled and readonly cursor",
+  "packageName": "@fluentui/web-components",
+  "email": "sethdonohue@Admins-MBP.guest.corp.microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-01-05T21:44:17.903Z"
+}
diff --git a/packages/web-components/src/slider/fixtures/slider.html b/packages/web-components/src/slider/fixtures/slider.html
@@ -193,6 +193,43 @@ <h4 style="margin-top: 60px;">Disabled</h4>
           100
         </fluent-slider-label>
       </fluent-slider>
+      <!-- Read Only -->
+      <h4 style="margin-top: 60px;">Read Only</h4>
+      <fluent-slider min="0" max="100" step="5" readonly>
+        <fluent-slider-label position="0">
+          0
+        </fluent-slider-label>
+        <fluent-slider-label position="10">
+          10
+        </fluent-slider-label>
+        <fluent-slider-label position="20">
+          20
+        </fluent-slider-label>
+        <fluent-slider-label position="30">
+          30
+        </fluent-slider-label>
+        <fluent-slider-label position="40">
+          40
+        </fluent-slider-label>
+        <fluent-slider-label position="50">
+          50
+        </fluent-slider-label>
+        <fluent-slider-label position="60">
+          60
+        </fluent-slider-label>
+        <fluent-slider-label position="70">
+          70
+        </fluent-slider-label>
+        <fluent-slider-label position="80">
+          80
+        </fluent-slider-label>
+        <fluent-slider-label position="90">
+          90
+        </fluent-slider-label>
+        <fluent-slider-label position="100">
+          100
+        </fluent-slider-label>
+      </fluent-slider>
     </div>
   </div>
 </fluent-design-system-provider>
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
@@ -94,10 +94,7 @@ export const SliderStyles = css`
         min-height: calc(var(--design-unit) * 60px);
         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) {
@@ -132,9 +129,7 @@ export const SliderStyles = css`
             }
             :host(.disabled) {
                 opacity: 1;
-                cursor: ${disabledCursor};
             }
-            :host(.disabled) .slider,
             :host(.disabled) .track,
             :host(.disabled) .thumb-cursor {
                 forced-color-adjust: none;