refactor(datepicker): move weekdays into table header (#4129)

* fix broken tests

* md-calendar-table --> [md-calendar-body]

* move md-calendar-body to tbody element

* move weekdays into table header

* finishing touches

* fix year view padding

* add some comments

src/lib/datepicker/_datepicker-theme.scss

@@ -15,10 +15,6 @@
     background-color: mat-color($background, card);
   }
 
-  .mat-calendar-header {
-    border-color: mat-color($foreground, divider);
-  }
-
   .mat-calendar-arrow {
     border-top-color: mat-color($foreground, icon);
   }
@@ -28,52 +24,56 @@
     color: mat-color($foreground, icon);
   }
 
-  .mat-calendar-weekday-table {
+  .mat-calendar-table-header {
     color: mat-color($foreground, hint-text);
   }
 
-  .mat-calendar-table-label {
+  .mat-calendar-table-header-divider::after {
+    background: mat-color($foreground, divider);
+  }
+
+  .mat-calendar-body-label {
     color: mat-color($foreground, secondary-text);
   }
 
-  .mat-calendar-table-cell-content {
+  .mat-calendar-body-cell-content {
     color: mat-color($foreground, text);
     border-color: transparent;
 
-    .mat-calendar-table-disabled > &:not(.mat-calendar-table-selected) {
+    .mat-calendar-body-disabled > &:not(.mat-calendar-body-selected) {
       color: mat-color($foreground, disabled-text);
     }
   }
 
-  :not(.mat-calendar-table-disabled):hover,
-  .cdk-keyboard-focused .mat-calendar-table-active {
-    & > .mat-calendar-table-cell-content:not(.mat-calendar-table-selected) {
+  :not(.mat-calendar-body-disabled):hover,
+  .cdk-keyboard-focused .mat-calendar-body-active {
+    & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
       background-color: mat-color($background, hover);
     }
   }
 
-  .mat-calendar-table-selected {
+  .mat-calendar-body-selected {
     background-color: mat-color($primary);
     color: mat-color($primary, default-contrast);
 
-    .mat-calendar-table-disabled > & {
+    .mat-calendar-body-disabled > & {
       background-color: fade-out(mat-color($primary), $mat-datepicker-selected-fade-amount);
     }
   }
 
-  .mat-calendar-table-today {
-    &:not(.mat-calendar-table-selected) {
+  .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.
       border-color: mat-color($foreground, hint-text);
 
-      .mat-calendar-table-disabled > & {
+      .mat-calendar-body-disabled > & {
         border-color:
             fade-out(mat-color($foreground, hint-text), $mat-datepicker-today-fade-amount);
       }
     }
 
-    &.mat-calendar-table-selected {
+    &.mat-calendar-body-selected {
       box-shadow: inset 0 0 0 $mat-datepicker-selected-today-box-shadow-width
                   mat-color($primary, default-contrast);
     }

src/lib/datepicker/calendar-body.html

@@ -0,0 +1,24 @@
+<!-- If there's not enough space in the first row, create a separate label row. -->
+<tr *ngIf="_firstRowOffset < labelMinRequiredCells">
+  <td class="mat-calendar-body-label" [attr.colspan]="numCols" >{{label}}</td>
+</tr>
+
+<!-- Create the first row separately so we can include a special spacer cell. -->
+<tr *ngFor="let row of rows; let rowIndex = index">
+  <td *ngIf="rowIndex === 0 && _firstRowOffset"
+      class="mat-calendar-body-label"
+      [attr.colspan]="_firstRowOffset">
+    {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}
+  </td>
+  <td *ngFor="let item of row; let colIndex = index"
+      class="mat-calendar-body-cell"
+      [class.mat-calendar-body-disabled]="!item.enabled"
+      [class.mat-calendar-body-active]="_isActiveCell(rowIndex, colIndex)"
+      (click)="_cellClicked(item)">
+    <div class="mat-calendar-body-cell-content"
+         [class.mat-calendar-body-selected]="selectedValue === item.value"
+         [class.mat-calendar-body-today]="todayValue === item.value">
+      {{item.displayValue}}
+    </div>
+  </td>
+</tr>

src/lib/datepicker/calendar-body.scss

@@ -0,0 +1,64 @@
+$mat-calendar-body-font-size: 13px !default;
+$mat-calendar-body-header-font-size: 14px !default;
+$mat-calendar-body-label-padding-start: 5% !default;
+$mat-calendar-body-label-translation: -6px !default;
+$mat-calendar-body-cell-min-size: 32px !default;
+$mat-calendar-body-cell-size: 100% / 7 !default;
+$mat-calendar-body-cell-content-margin: 5% !default;
+$mat-calendar-body-cell-content-border-width: 1px !default;
+
+$mat-calendar-body-min-size: 7 * $mat-calendar-body-cell-min-size !default;
+$mat-calendar-body-cell-padding: $mat-calendar-body-cell-size / 2 !default;
+$mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-margin * 2 !default;
+
+
+.mat-calendar-body {
+  font-size: $mat-calendar-body-font-size;
+  min-width: $mat-calendar-body-min-size;
+}
+
+.mat-calendar-body-label {
+  padding: $mat-calendar-body-cell-padding 0
+           $mat-calendar-body-cell-padding $mat-calendar-body-cell-padding;
+  height: 0;
+  line-height: 0;
+  transform: translateX($mat-calendar-body-label-translation);
+  text-align: left;
+  font-size: $mat-calendar-body-header-font-size;
+  font-weight: bold;
+}
+
+.mat-calendar-body-cell {
+  position: relative;
+  width: $mat-calendar-body-cell-size;
+  height: 0;
+  line-height: 0;
+  padding: $mat-calendar-body-cell-padding 0;
+  text-align: center;
+}
+
+.mat-calendar-body-cell-content {
+  position: absolute;
+  top: $mat-calendar-body-cell-content-margin;
+  left: $mat-calendar-body-cell-content-margin;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  width: $mat-calendar-body-cell-content-size;
+  height: $mat-calendar-body-cell-content-size;
+
+  border-width: $mat-calendar-body-cell-content-border-width;
+  border-style: solid;
+  border-radius: 50%;
+}
+
+[dir='rtl'] {
+  .mat-calendar-body-label {
+    padding: 0 $mat-calendar-body-cell-padding 0 0;
+    transform: translateX(-$mat-calendar-body-label-translation);
+    text-align: right;
+  }
+}

src/lib/datepicker/calendar-table.ts → src/lib/datepicker/calendar-body.ts

@@ -23,13 +23,16 @@ export class MdCalendarCell {
  */
 @Component({
   moduleId: module.id,
-  selector: 'md-calendar-table',
-  templateUrl: 'calendar-table.html',
-  styleUrls: ['calendar-table.css'],
+  selector: '[md-calendar-body]',
+  templateUrl: 'calendar-body.html',
+  styleUrls: ['calendar-body.css'],
+  host: {
+    'class': 'mat-calendar-body',
+  },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MdCalendarTable {
+export class MdCalendarBody {
   /** The label for the table. (e.g. "Jan 2017"). */
   @Input() label: string;