fix(datepicker): make touch UI work well on mobile (#3853)

* add keyboard support, break some tests

* add tests

* some finishing touches

* addressed some comments

* separate md-datepicker-content into own component

* fix(datepicker): make touch UI work well on mobile

* use vmin instead of media queries + vw, vh

* fix non-touch styles

* addressed comments

* fix lint error about vmin

* addressed comments

src/lib/datepicker/calendar.scss

@@ -24,6 +24,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
 
 .mat-calendar-body {
   padding: $mat-calendar-padding;
+  outline: none;
 }
 
 .mat-calendar-controls {

src/lib/datepicker/datepicker-content.html

@@ -1,7 +1,5 @@
 <md-calendar cdkTrapFocus
     [id]="datepicker.id"
-    [class.mat-datepicker-content-touch]="datepicker.touchUi"
-    [class.mat-datepicker-content-non-touch]="!datepicker.touchUi"
     [startAt]="datepicker.startAt"
     [minDate]="datepicker._minDate"
     [maxDate]="datepicker._maxDate"

src/lib/datepicker/datepicker-content.scss

@@ -1,21 +1,46 @@
 @import '../core/style/elevation';
 
 
-$md-datepicker-touch-calendar-cell-size: 60px;
-$md-datepicker-non-touch-calendar-cell-size: 40px;
 $md-datepicker-calendar-padding: 8px;
-
-$md-datepicker-touch-calendar-width:
-    $md-datepicker-touch-calendar-cell-size * 7 + $md-datepicker-calendar-padding * 2;
+$md-datepicker-non-touch-calendar-cell-size: 40px;
 $md-datepicker-non-touch-calendar-width:
     $md-datepicker-non-touch-calendar-cell-size * 7 + $md-datepicker-calendar-padding * 2;
 
+// Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
+// these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
+// the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
+// chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need
+// scrollbars at smaller sizes.
+$md-datepicker-touch-width: 67vmin;
+$md-datepicker-touch-height: 80vmin;
+$md-datepicker-touch-min-width: 253px;
+$md-datepicker-touch-min-height: 300px;
+$md-datepicker-touch-max-width: 778px;
+$md-datepicker-touch-max-height: 800px;
 
-.mat-datepicker-content-touch {
-  width: $md-datepicker-touch-calendar-width;
-}
 
-.mat-datepicker-content-non-touch {
+.mat-calendar {
   width: $md-datepicker-non-touch-calendar-width;
   @include mat-elevation(8);
 }
+
+.mat-datepicker-content-touch {
+  display: block;
+  // make sure the dialog scrolls rather than being cropped on ludicrously small screens
+  max-height: 80vh;
+  overflow: auto;
+
+  // TODO(mmalerba): hack to offset the padding of the dialog. Can be removed when we switch away
+  // from using dialog.
+  margin: -24px;
+
+  .mat-calendar {
+    width: $md-datepicker-touch-width;
+    height: $md-datepicker-touch-height;
+    min-width: $md-datepicker-touch-min-width;
+    min-height: $md-datepicker-touch-min-height;
+    max-width: $md-datepicker-touch-max-width;
+    max-height: $md-datepicker-touch-max-height;
+    @include mat-elevation(0);
+  }
+}

src/lib/datepicker/datepicker.ts

@@ -49,6 +49,10 @@ let datepickerUid = 0;
   selector: 'md-datepicker-content',
   templateUrl: 'datepicker-content.html',
   styleUrls: ['datepicker-content.css'],
+  host: {
+    'class': 'mat-datepicker-content',
+    '[class.mat-datepicker-content-touch]': 'datepicker.touchUi',
+  },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

stylelint-config.json

@@ -23,7 +23,7 @@
 
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-whitelist": ["px", "%", "deg", "ms", "em", "vh", "vw"],
+    "unit-whitelist": ["px", "%", "deg", "ms", "em", "vh", "vw", "vmin"],
 
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",