refactor(datepicker): align preview range appearance with Material Design spec

src/material/datepicker/_datepicker-theme.scss

@@ -84,6 +84,20 @@ $mat-calendar-weekday-table-font-size: 11px !default;
     }
   }
 
+  .mat-calendar-body-in-preview {
+    $divider-color: mat-color($foreground, divider);
+
+    @if type-of($divider-color) == color {
+      // The divider color is set under the assumption that it'll be used
+      // for a solid border, but because we're using a dashed border for the
+      // preview range, we need to bump its opacity to ensure that it's visible.
+      color: rgba($divider-color, min(opacity($divider-color) * 2, 1));
+    }
+    @else {
+      color: $divider-color;
+    }
+  }
+
   .mat-calendar-body-today:not(.mat-calendar-body-selected) {
     // Note: though it's not text, the border is a hint about the fact that this is today's date,
     // so we use the hint color.

src/material/datepicker/calendar-body.html

@@ -44,6 +44,9 @@
       [class.mat-calendar-body-comparison-start]="_isComparisonStart(item.compareValue)"
       [class.mat-calendar-body-comparison-end]="_isComparisonEnd(item.compareValue)"
       [class.mat-calendar-body-in-comparison-range]="_isInComparisonRange(item.compareValue)"
+      [class.mat-calendar-body-preview-start]="_isPreviewStart(item.compareValue)"
+      [class.mat-calendar-body-preview-end]="_isPreviewEnd(item.compareValue)"
+      [class.mat-calendar-body-in-preview]="_isInPreview(item.compareValue)"
       [attr.aria-label]="item.ariaLabel"
       [attr.aria-disabled]="!item.enabled || null"
       [attr.aria-selected]="_isSelected(item)"
@@ -57,5 +60,6 @@
         [class.mat-calendar-body-today]="todayValue === item.compareValue">
         {{item.displayValue}}
       </div>
+      <div class="mat-calendar-body-cell-preview"></div>
   </td>
 </tr>

src/material/datepicker/calendar-body.scss

@@ -10,6 +10,7 @@ $mat-calendar-body-cell-min-size: 32px !default;
 $mat-calendar-body-cell-content-margin: 5% !default;
 $mat-calendar-body-cell-content-border-width: 1px !default;
 $mat-calendar-body-cell-radius: 999px !default;
+$mat-calendar-body-preview-cell-border: dashed 1px;
 
 $mat-calendar-body-min-size: 7 * $mat-calendar-body-cell-min-size !default;
 $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-margin * 2 !default;
@@ -38,30 +39,36 @@ $mat-calendar-range-end-body-cell-size:
   cursor: pointer;
 }
 
-.mat-calendar-body-cell {
-  // We use ::before to apply a background to the body cell, because we need to apply a border
-  // radius to the start/end which means that part of the element will be cut off, making
-  // hovering through all the cells look glitchy. We can't do it on the cell itself, because
-  // it's the one that has the event listener and it can't be on the cell content, because
-  // it always has a border radius.
-  &::before, &::after {
-    content: '';
-    position: absolute;
-    top: $mat-calendar-body-cell-content-margin;
-    left: 0;
-    z-index: 0;
+// We use ::before to apply a background to the body cell, because we need to apply a border
+// radius to the start/end which means that part of the element will be cut off, making hovering
+// through all the cells look glitchy. We can't do it on the cell itself, because it's the one
+// that has the event listener and it can't be on the cell content, because it always has a
+// border radius. Note that this and the selectors below can be much simpler if we were to use
+// two separate elements for the main and comparison ranges, like we're doing for the preview
+// range. We don't follow the simpler approach, because the range colors usually have some
+// kind of opacity, which means that they'll start mixing when they're layered on top of each
+// other, making the calendar look messy.
+.mat-calendar-body-cell::before,
+.mat-calendar-body-cell::after,
+.mat-calendar-body-cell-preview {
+  content: '';
+  position: absolute;
+  top: $mat-calendar-body-cell-content-margin;
+  left: 0;
+  z-index: 0;
+  box-sizing: border-box;
 
-    // We want the range background to be slightly shorter than the cell so
-    // that there's a gap when the range goes across multiple rows.
-    height: $mat-calendar-body-cell-content-size;
-    width: 100%;
-  }
+  // We want the range background to be slightly shorter than the cell so
+  // that there's a gap when the range goes across multiple rows.
+  height: $mat-calendar-body-cell-content-size;
+  width: 100%;
 }
 
 .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,
 .mat-calendar-body-range-start::after,
 .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,
-.mat-calendar-body-comparison-start::after {
+.mat-calendar-body-comparison-start::after,
+.mat-calendar-body-preview-start .mat-calendar-body-cell-preview {
   // Since the range background isn't a perfect circle, we need to size
   // and offset the start so that it aligns with the main circle.
   left: $mat-calendar-body-cell-content-margin;
@@ -88,7 +95,8 @@ $mat-calendar-range-end-body-cell-size:
 .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,
 .mat-calendar-body-range-end::after,
 .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,
-.mat-calendar-body-comparison-end::after {
+.mat-calendar-body-comparison-end::after,
+.mat-calendar-body-preview-end .mat-calendar-body-cell-preview {
   @include _mat-calendar-body-range-right-radius;
 
   [dir='rtl'] & {
@@ -117,6 +125,29 @@ $mat-calendar-range-end-body-cell-size:
   }
 }
 
+.mat-calendar-body-in-preview .mat-calendar-body-cell-preview {
+  border-top: $mat-calendar-body-preview-cell-border;
+  border-bottom: $mat-calendar-body-preview-cell-border;
+}
+
+.mat-calendar-body-preview-start .mat-calendar-body-cell-preview {
+  border-left: $mat-calendar-body-preview-cell-border;
+
+  [dir='rtl'] & {
+    border-left: 0;
+    border-right: $mat-calendar-body-preview-cell-border;
+  }
+}
+
+.mat-calendar-body-preview-end .mat-calendar-body-cell-preview {
+  border-right: $mat-calendar-body-preview-cell-border;
+
+  [dir='rtl'] & {
+    border-right: 0;
+    border-left: $mat-calendar-body-preview-cell-border;
+  }
+}
+
 .mat-calendar-body-disabled {
   cursor: default;
 }

src/material/datepicker/calendar-body.spec.ts

@@ -122,6 +122,9 @@ describe('MatCalendarBody', () => {
     const comparisonEndClass = 'mat-calendar-body-comparison-end';
     const bridgeStart = 'mat-calendar-body-comparison-bridge-start';
     const bridgeEnd = 'mat-calendar-body-comparison-bridge-end';
+    const previewStartClass = 'mat-calendar-body-preview-start';
+    const inPreviewClass = 'mat-calendar-body-in-preview';
+    const previewEndClass = 'mat-calendar-body-preview-end';
     let fixture: ComponentFixture<RangeCalendarBody>;
     let testComponent: RangeCalendarBody;
     let cells: HTMLElement[];
@@ -405,29 +408,29 @@ describe('MatCalendarBody', () => {
       dispatchMouseEvent(cells[5], 'mouseenter');
       fixture.detectChanges();
 
-      expect(cells[2].classList).toContain(startClass);
-      expect(cells[3].classList).toContain(inRangeClass);
-      expect(cells[4].classList).toContain(inRangeClass);
-      expect(cells[5].classList).toContain(endClass);
+      expect(cells[2].classList).toContain(previewStartClass);
+      expect(cells[3].classList).toContain(inPreviewClass);
+      expect(cells[4].classList).toContain(inPreviewClass);
+      expect(cells[5].classList).toContain(previewEndClass);
 
       // Go a few cells ahead.
       dispatchMouseEvent(cells[7], 'mouseenter');
       fixture.detectChanges();
 
-      expect(cells[5].classList).not.toContain(endClass);
-      expect(cells[5].classList).toContain(inRangeClass);
-      expect(cells[6].classList).toContain(inRangeClass);
-      expect(cells[7].classList).toContain(endClass);
+      expect(cells[5].classList).not.toContain(previewEndClass);
+      expect(cells[5].classList).toContain(inPreviewClass);
+      expect(cells[6].classList).toContain(inPreviewClass);
+      expect(cells[7].classList).toContain(previewEndClass);
 
       // Go back a few cells.
       dispatchMouseEvent(cells[4], 'mouseenter');
       fixture.detectChanges();
 
-      expect(cells[5].classList).not.toContain(inRangeClass);
-      expect(cells[6].classList).not.toContain(inRangeClass);
-      expect(cells[7].classList).not.toContain(endClass);
-      expect(cells[3].classList).toContain(inRangeClass);
-      expect(cells[4].classList).toContain(endClass);
+      expect(cells[5].classList).not.toContain(inPreviewClass);
+      expect(cells[6].classList).not.toContain(inPreviewClass);
+      expect(cells[7].classList).not.toContain(previewEndClass);
+      expect(cells[3].classList).toContain(inPreviewClass);
+      expect(cells[4].classList).toContain(previewEndClass);
     });
 
     it('should preview the selected range after the user selects a start and moves focus away',
@@ -438,29 +441,29 @@ describe('MatCalendarBody', () => {
         dispatchFakeEvent(cells[5], 'focus');
         fixture.detectChanges();
 
-        expect(cells[2].classList).toContain(startClass);
-        expect(cells[3].classList).toContain(inRangeClass);
-        expect(cells[4].classList).toContain(inRangeClass);
-        expect(cells[5].classList).toContain(endClass);
+        expect(cells[2].classList).toContain(previewStartClass);
+        expect(cells[3].classList).toContain(inPreviewClass);
+        expect(cells[4].classList).toContain(inPreviewClass);
+        expect(cells[5].classList).toContain(previewEndClass);
 
         // Go a few cells ahead.
         dispatchFakeEvent(cells[7], 'focus');
         fixture.detectChanges();
 
-        expect(cells[5].classList).not.toContain(endClass);
-        expect(cells[5].classList).toContain(inRangeClass);
-        expect(cells[6].classList).toContain(inRangeClass);
-        expect(cells[7].classList).toContain(endClass);
+        expect(cells[5].classList).not.toContain(previewEndClass);
+        expect(cells[5].classList).toContain(inPreviewClass);
+        expect(cells[6].classList).toContain(inPreviewClass);
+        expect(cells[7].classList).toContain(previewEndClass);
 
         // Go back a few cells.
         dispatchFakeEvent(cells[4], 'focus');
         fixture.detectChanges();
 
-        expect(cells[5].classList).not.toContain(inRangeClass);
-        expect(cells[6].classList).not.toContain(inRangeClass);
-        expect(cells[7].classList).not.toContain(endClass);
-        expect(cells[3].classList).toContain(inRangeClass);
-        expect(cells[4].classList).toContain(endClass);
+        expect(cells[5].classList).not.toContain(inPreviewClass);
+        expect(cells[6].classList).not.toContain(inPreviewClass);
+        expect(cells[7].classList).not.toContain(previewEndClass);
+        expect(cells[3].classList).toContain(inPreviewClass);
+        expect(cells[4].classList).toContain(previewEndClass);
       });
 
     it('should not be able to extend the range before the start', () => {
@@ -471,7 +474,8 @@ describe('MatCalendarBody', () => {
       fixture.detectChanges();
 
       expect(cells[5].classList).toContain(startClass);
-      expect(cells.some(cell => cell.classList.contains(inRangeClass))).toBe(false);
+      expect(cells[5].classList).not.toContain(previewStartClass);
+      expect(cells.some(cell => cell.classList.contains(inPreviewClass))).toBe(false);
     });
 
     it('should be able to show a range, starting before the beginning of the calendar, ' +
@@ -482,10 +486,10 @@ describe('MatCalendarBody', () => {
         dispatchMouseEvent(cells[2], 'mouseenter');
         fixture.detectChanges();
 
-        expect(cells.some(cell => cell.classList.contains(startClass))).toBe(false);
-        expect(cells[0].classList).toContain(inRangeClass);
-        expect(cells[1].classList).toContain(inRangeClass);
-        expect(cells[2].classList).toContain(endClass);
+        expect(cells.some(cell => cell.classList.contains(previewStartClass))).toBe(false);
+        expect(cells[0].classList).toContain(inPreviewClass);
+        expect(cells[1].classList).toContain(inPreviewClass);
+        expect(cells[2].classList).toContain(previewEndClass);
       });
 
     it('should be able to show a range, starting before the beginning of the calendar, ' +
@@ -496,10 +500,10 @@ describe('MatCalendarBody', () => {
         dispatchMouseEvent(cells[2], 'focus');
         fixture.detectChanges();
 
-        expect(cells.some(cell => cell.classList.contains(startClass))).toBe(false);
-        expect(cells[0].classList).toContain(inRangeClass);
-        expect(cells[1].classList).toContain(inRangeClass);
-        expect(cells[2].classList).toContain(endClass);
+        expect(cells.some(cell => cell.classList.contains(previewStartClass))).toBe(false);
+        expect(cells[0].classList).toContain(inPreviewClass);
+        expect(cells[1].classList).toContain(inPreviewClass);
+        expect(cells[2].classList).toContain(previewEndClass);
       });
 
     it('should remove the preview if the user moves their pointer away', () => {
@@ -509,26 +513,26 @@ describe('MatCalendarBody', () => {
       dispatchMouseEvent(cells[4], 'mouseenter');
       fixture.detectChanges();
 
-      expect(cells[2].classList).toContain(startClass);
-      expect(cells[3].classList).toContain(inRangeClass);
-      expect(cells[4].classList).toContain(endClass);
+      expect(cells[2].classList).toContain(previewStartClass);
+      expect(cells[3].classList).toContain(inPreviewClass);
+      expect(cells[4].classList).toContain(previewEndClass);
 
       // Move the pointer away.
       dispatchMouseEvent(cells[4], 'mouseleave');
       fixture.detectChanges();
 
-      expect(cells[2].classList).toContain(startClass);
-      expect(cells[3].classList).not.toContain(inRangeClass);
-      expect(cells[4].classList).not.toContain(endClass);
+      expect(cells[2].classList).not.toContain(previewStartClass);
+      expect(cells[3].classList).not.toContain(inPreviewClass);
+      expect(cells[4].classList).not.toContain(previewEndClass);
 
       // Move the pointer back in to a different cell.
       dispatchMouseEvent(cells[5], 'mouseenter');
       fixture.detectChanges();
 
-      expect(cells[2].classList).toContain(startClass);
-      expect(cells[3].classList).toContain(inRangeClass);
-      expect(cells[4].classList).toContain(inRangeClass);
-      expect(cells[5].classList).toContain(endClass);
+      expect(cells[2].classList).toContain(previewStartClass);
+      expect(cells[3].classList).toContain(inPreviewClass);
+      expect(cells[4].classList).toContain(inPreviewClass);
+      expect(cells[5].classList).toContain(previewEndClass);
     });
 
     it('should remove the preview if the user moves their focus away', () => {
@@ -538,26 +542,26 @@ describe('MatCalendarBody', () => {
       dispatchFakeEvent(cells[4], 'focus');
       fixture.detectChanges();
 
-      expect(cells[2].classList).toContain(startClass);
-      expect(cells[3].classList).toContain(inRangeClass);
-      expect(cells[4].classList).toContain(endClass);
+      expect(cells[2].classList).toContain(previewStartClass);
+      expect(cells[3].classList).toContain(inPreviewClass);
+      expect(cells[4].classList).toContain(previewEndClass);
 
       // Move the pointer away.
       dispatchFakeEvent(cells[4], 'blur');
       fixture.detectChanges();
 
-      expect(cells[2].classList).toContain(startClass);
-      expect(cells[3].classList).not.toContain(inRangeClass);
-      expect(cells[4].classList).not.toContain(endClass);
+      expect(cells[2].classList).not.toContain(previewStartClass);
+      expect(cells[3].classList).not.toContain(inPreviewClass);
+      expect(cells[4].classList).not.toContain(previewEndClass);
 
       // Move the pointer back in to a different cell.
       dispatchFakeEvent(cells[5], 'focus');
       fixture.detectChanges();
 
-      expect(cells[2].classList).toContain(startClass);
-      expect(cells[3].classList).toContain(inRangeClass);
-      expect(cells[4].classList).toContain(inRangeClass);
-      expect(cells[5].classList).toContain(endClass);
+      expect(cells[2].classList).toContain(previewStartClass);
+      expect(cells[3].classList).toContain(inPreviewClass);
+      expect(cells[4].classList).toContain(inPreviewClass);
+      expect(cells[5].classList).toContain(previewEndClass);
     });
 
   });