Change files

microsoft · Jan 5, 2021 · 1d89a58 · 1d89a58
1 parent d0d59e6
commit 1d89a58
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;