fix(slider): make min value style match mocks (#2641)

* make slider disabled state match mocks

* added test

* fix lint

* min value style

* thumb label min value style

* fix lint & add tests

* fix lint

* addressed comments

Author: mmalerba

src/lib/slider/_slider-theme.scss

@@ -5,10 +5,11 @@
 @mixin md-slider-theme($theme) {
   $accent: map-get($theme, accent);
 
-  // TODO(iveysaur): Find an implementation to hide the track under a disabled thumb.
   $md-slider-off-color: rgba(black, 0.26);
-  $md-slider-focused-color: rgba(black, 0.38);
+  $md-slider-off-focused-color: rgba(black, 0.38);
   $md-slider-disabled-color: rgba(black, 0.26);
+  $md-slider-labeled-min-value-thumb-color: black;
+  $md-slider-labeled-min-value-thumb-label-color: rgba(black, 0.26);
 
   .md-slider-track-background {
     background-color: $md-slider-off-color;
@@ -30,10 +31,58 @@
     color: md-color($accent, default-contrast);
   }
 
+  md-slider:hover,
+  .md-slider-active {
+    .md-slider-track-background {
+      background-color: $md-slider-off-focused-color;
+    }
+  }
+
   .md-slider-disabled {
+    .md-slider-track-background,
     .md-slider-track-fill,
     .md-slider-thumb {
-      background-color: $md-slider-off-color;
+      background-color: $md-slider-disabled-color;
+    }
+
+    &:hover {
+      .md-slider-track-background {
+        background-color: $md-slider-disabled-color;
+      }
+    }
+  }
+
+  .md-slider-min-value {
+    &.md-slider-thumb-label-showing {
+      .md-slider-thumb,
+      .md-slider-thumb-label {
+        background-color: $md-slider-labeled-min-value-thumb-color;
+      }
+
+      &.md-slider-active {
+        .md-slider-thumb,
+        .md-slider-thumb-label {
+          background-color: $md-slider-labeled-min-value-thumb-label-color;
+        }
+      }
+    }
+
+    &:not(.md-slider-thumb-label-showing) {
+      .md-slider-thumb {
+        border-color: $md-slider-off-color;
+        background-color: transparent;
+      }
+
+      &:hover,
+      &.md-slider-active {
+        .md-slider-thumb {
+          border-color: $md-slider-off-focused-color;
+        }
+
+        &.md-slider-disabled .md-slider-thumb {
+          border-color: $md-slider-disabled-color;
+        }
+      }
     }
   }
 }

src/lib/slider/slider.scss

@@ -9,6 +9,9 @@ $md-slider-padding: 8px !default;
 
 $md-slider-track-thickness: 2px !default;
 $md-slider-thumb-size: 20px !default;
+$md-slider-thumb-border-width: 3px !default;
+$md-slider-thumb-border-width-active: 2px !default;
+$md-slider-thumb-border-width-disabled: 4px !default;
 
 $md-slider-thumb-default-scale: 0.7 !default;
 $md-slider-thumb-focus-scale: 1 !default;
@@ -45,13 +48,15 @@ md-slider {
 .md-slider-track-fill {
   position: absolute;
   transform-origin: 0 0;
-  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+              background-color $swift-ease-out-duration $swift-ease-out-timing-function;
 }
 
 .md-slider-track-background {
   position: absolute;
   transform-origin: 100% 100%;
-  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+              background-color $swift-ease-out-duration $swift-ease-out-timing-function;
 }
 
 .md-slider-ticks-container {
@@ -62,6 +67,7 @@ md-slider {
 }
 
 .md-slider-ticks {
+  box-sizing: border-box;
   opacity: 0;
   transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
 }
@@ -76,11 +82,15 @@ md-slider {
   position: absolute;
   right: -$md-slider-thumb-size / 2;
   bottom: -$md-slider-thumb-size / 2;
+  box-sizing: border-box;
   width: $md-slider-thumb-size;
   height: $md-slider-thumb-size;
+  border: $md-slider-thumb-border-width solid transparent;
   border-radius: 50%;
   transform: scale($md-slider-thumb-default-scale);
-  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+              background-color $swift-ease-out-duration $swift-ease-out-timing-function,
+              border-color $swift-ease-out-duration $swift-ease-out-timing-function;
 }
 
 .md-slider-thumb-label {
@@ -91,16 +101,17 @@ md-slider {
   width: $md-slider-thumb-label-size;
   height: $md-slider-thumb-label-size;
   border-radius: 50%;
-  transition: 300ms $swift-ease-in-out-timing-function;
-  transition-property: transform, border-radius;
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+              border-radius  $swift-ease-out-duration $swift-ease-out-timing-function,
+              background-color  $swift-ease-out-duration $swift-ease-out-timing-function;
 }
 
 .md-slider-thumb-label-text {
   z-index: 1;
   font-size: 12px;
   font-weight: bold;
   opacity: 0;
-  transition: opacity 300ms $swift-ease-in-out-timing-function;
+  transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
 }
 
 
@@ -123,13 +134,15 @@ md-slider {
     position: absolute;
     border: 0 solid $md-slider-tick-color;
     opacity: 0;
-    transition: opacity 300ms $swift-ease-in-out-timing-function;
+    transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
   }
 
   &.md-slider-active,
   &:hover {
-    .md-slider-wrapper::after {
-      opacity: 1;
+    &:not(.md-slider-hide-last-tick) {
+      .md-slider-wrapper::after {
+        opacity: 1;
+      }
     }
 
     .md-slider-ticks {
@@ -162,6 +175,7 @@ md-slider {
 // Active slider.
 .md-slider-active {
   .md-slider-thumb {
+    border-width: $md-slider-thumb-border-width-active;
     transform: scale($md-slider-thumb-focus-scale);
   }
 
@@ -182,6 +196,7 @@ md-slider {
 // Disabled slider.
 .md-slider-disabled {
   .md-slider-thumb {
+    border-width: $md-slider-thumb-border-width-disabled;
     transform: scale($md-slider-thumb-disabled-scale);
   }
 
@@ -239,6 +254,7 @@ md-slider {
     // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).
     background: -moz-repeating-linear-gradient(0.0001deg, $md-slider-tick-color,
         $md-slider-tick-color $md-slider-tick-size, transparent 0, transparent) repeat;
+    background-clip: content-box;
     height: $md-slider-track-thickness;
     width: 100%;
   }
@@ -252,7 +268,7 @@ md-slider {
   .md-slider-thumb-label {
     right: -$md-slider-thumb-label-size / 2;
     top: -($md-slider-thumb-label-size + $md-slider-thumb-arrow-gap);
-    transform: translateY($md-slider-thumb-label-size / 2 + $md-slider-thumb-arrow-gap) scale(0.4)
+    transform: translateY($md-slider-thumb-label-size / 2 + $md-slider-thumb-arrow-gap) scale(0.01)
         rotate(45deg);
   }
 
@@ -312,6 +328,7 @@ md-slider {
   .md-slider-ticks {
     background: repeating-linear-gradient(to bottom, $md-slider-tick-color,
         $md-slider-tick-color $md-slider-tick-size, transparent 0, transparent) repeat;
+    background-clip: content-box;
     width: $md-slider-track-thickness;
     height: 100%;
   }
@@ -325,8 +342,8 @@ md-slider {
   .md-slider-thumb-label {
     bottom: -$md-slider-thumb-label-size / 2;
     left: -($md-slider-thumb-label-size + $md-slider-thumb-arrow-gap);
-    transform: translateX($md-slider-thumb-label-size / 2 + $md-slider-thumb-arrow-gap)
-        scale(0.4) rotate(-45deg);
+    transform: translateX($md-slider-thumb-label-size / 2 + $md-slider-thumb-arrow-gap) scale(0.01)
+        rotate(-45deg);
   }
 
   .md-slider-thumb-label-text {

src/lib/slider/slider.spec.ts

@@ -162,6 +162,23 @@ describe('MdSlider', () => {
 
       expect(sliderNativeElement.classList).not.toContain('md-slider-sliding');
     });
+
+    it('should have thumb gap when at min value', () => {
+      expect(trackFillElement.style.transform).toContain('translateX(-7px)');
+
+      dispatchClickEventSequence(sliderNativeElement, 0);
+      fixture.detectChanges();
+
+      expect(trackFillElement.style.transform).toContain('translateX(-10px)');
+    });
+
+    it('should not have thumb gap when not at min value', () => {
+      dispatchClickEventSequence(sliderNativeElement, 1);
+      fixture.detectChanges();
+
+      // Some browsers use '0' and some use '0px', so leave off the closing paren.
+      expect(trackFillElement.style.transform).toContain('translateX(0');
+    });
   });
 
   describe('disabled slider', () => {
@@ -1038,6 +1055,14 @@ describe('MdSlider', () => {
 
       expect(sliderInstance.value).toBe(1);
     });
+
+    it('should hide last tick when inverted and at min value', () => {
+      testComponent.invert = true;
+      fixture.detectChanges();
+
+      expect(sliderNativeElement.classList.contains('md-slider-hide-last-tick'))
+          .toBe(true, 'last tick should be hidden');
+    });
   });
 
   describe('vertical slider', () => {
@@ -1198,7 +1223,7 @@ class SliderWithChangeHandler {
 }
 
 @Component({
-  template: `<div [dir]="dir"><md-slider [invert]="invert"></md-slider></div>`,
+  template: `<div [dir]="dir"><md-slider [invert]="invert" tickInterval="5"></md-slider></div>`,
   styles: [styles],
 })
 class SliderWithDirAndInvert {

src/lib/slider/slider.ts

@@ -17,7 +17,7 @@ import {
   HammerInput,
   coerceBooleanProperty,
   coerceNumberProperty,
-  DefaultStyleCompatibilityModeModule,
+  DefaultStyleCompatibilityModeModule
 } from '../core';
 import {Dir} from '../core/rtl/dir';
 import {CommonModule} from '@angular/common';
@@ -29,7 +29,7 @@ import {
   LEFT_ARROW,
   UP_ARROW,
   RIGHT_ARROW,
-  DOWN_ARROW,
+  DOWN_ARROW
 } from '../core/keyboard/keycodes';
 
 /**
@@ -41,6 +41,12 @@ const MIN_AUTO_TICK_SEPARATION = 30;
 /** The thumb gap size for a disabled slider. */
 const DISABLED_THUMB_GAP = 7;
 
+/** The thumb gap size for a non-active slider at its minimum value. */
+const MIN_VALUE_NONACTIVE_THUMB_GAP = 7;
+
+/** The thumb gap size for an active slider at its minimum value. */
+const MIN_VALUE_ACTIVE_THUMB_GAP = 10;
+
 /**
  * Provider Expression that allows md-slider to register as a ControlValueAccessor.
  * This allows it to support [(ngModel)] and [formControl].
@@ -87,7 +93,8 @@ export class MdSliderChange {
     '[class.md-slider-sliding]': '_isSliding',
     '[class.md-slider-thumb-label-showing]': 'thumbLabel',
     '[class.md-slider-vertical]': 'vertical',
-    '[class.md-slider-min-value]': 'value === min',
+    '[class.md-slider-min-value]': '_isMinValue',
+    '[class.md-slider-hide-last-tick]': '_isMinValue && _thumbGap && invertAxis',
   },
   templateUrl: 'slider.html',
   styleUrls: ['slider.css'],
@@ -249,12 +256,23 @@ export class MdSlider implements ControlValueAccessor {
     return (this.direction == 'rtl' && !this.vertical) ? !this.invertAxis : this.invertAxis;
   }
 
+  /** Whether the slider is at its minimum value. */
+  get _isMinValue() {
+    return this.percent === 0;
+  }
+
   /**
    * The amount of space to leave between the slider thumb and the track fill & track background
    * elements.
    */
-  private get _thumbGap() {
-    return this.disabled ? DISABLED_THUMB_GAP : 0;
+  get _thumbGap() {
+    if (this.disabled) {
+      return DISABLED_THUMB_GAP;
+    }
+    if (this._isMinValue && !this.thumbLabel) {
+      return this._isActive ? MIN_VALUE_ACTIVE_THUMB_GAP : MIN_VALUE_NONACTIVE_THUMB_GAP;
+    }
+    return 0;
   }
 
   /** CSS styles for the track background element. */
@@ -297,11 +315,20 @@ export class MdSlider implements ControlValueAccessor {
     // ticks 180 degrees so we're really cutting off the end edge abd not the start.
     let sign = !this.vertical && this.direction == 'rtl' ? '-' : '';
     let rotate = !this.vertical && this.direction == 'rtl' ? ' rotate(180deg)' : '';
-    return {
+    let styles: { [key: string]: string } = {
       'backgroundSize': backgroundSize,
       // Without translateZ ticks sometimes jitter as the slider moves on Chrome & Firefox.
       'transform': `translateZ(0) translate${axis}(${sign}${tickSize / 2}%)${rotate}`
     };
+
+    if (this._isMinValue && this._thumbGap) {
+      let side = this.vertical ?
+          (this.invertAxis ? 'Bottom' : 'Top') :
+          (this.invertAxis ? 'Right' : 'Left');
+      styles[`padding${side}`] = `${this._thumbGap}px`;
+    }
+
+    return styles;
   }
 
   get thumbContainerStyles(): { [key: string]: string } {