[DatePicker] reuse existing components in caption (#2792)

* HTMLSelect: add iconProps, fix dark icon color

* use HTMLSelect in caption

massive reduction in styles

* DatePickerNavbar renders prev/next Buttons

use Button for another reduction in styles

* cache month widths

* DatePicker uses single handleMonthChange for all DayPicker events

caption (month/year select) and navbar (prev/next buttons) now all use the same logic for changes!

* add DPNavbar to DRP

* fix & refactor caption & DP tests

assertSelectedDays() helper in DP tests replaces getSelectedDays()

* add $datepicker-padding variable

* adjust paddings to use standard buttons in navbar

* month icon won't exceed select bounds

* dateinput tests

* renames

* replace borders with Divider elements

also remove all negative margins

* copyright, test helper

* use Divider component

* fix DRP tests

* adjust month select icon position

* margin only on caption

* fix R15 tests

packages/core/src/components/html-select/_html-select.scss

@@ -49,6 +49,7 @@ Styleguide select
 
   .#{$ns}-icon {
     @extend %pt-select-arrow;
+    @include pt-icon-colors();
   }
 
   &.#{$ns}-minimal select {

packages/core/src/components/html-select/htmlSelect.tsx

@@ -9,7 +9,7 @@ import * as React from "react";
 import { DISABLED, FILL, HTML_SELECT, LARGE, MINIMAL } from "../../common/classes";
 import { IOptionProps } from "../../common/props";
 import { IElementRefProps } from "../html/html";
-import { Icon } from "../icon/icon";
+import { Icon, IIconProps } from "../icon/icon";
 
 export interface IHTMLSelectProps
     extends IElementRefProps<HTMLSelectElement>,
@@ -20,6 +20,9 @@ export interface IHTMLSelectProps
     /** Whether this element should fill its container. */
     fill?: boolean;
 
+    /** Props to spread to the `<Icon>` element. */
+    iconProps?: Partial<IIconProps>;
+
     /** Whether to use large styles. */
     large?: boolean;
 
@@ -47,7 +50,17 @@ export interface IHTMLSelectProps
 /* istanbul ignore next */
 export class HTMLSelect extends React.PureComponent<IHTMLSelectProps> {
     public render() {
-        const { className, disabled, elementRef, fill, large, minimal, options = [], ...htmlProps } = this.props;
+        const {
+            className,
+            disabled,
+            elementRef,
+            fill,
+            iconProps,
+            large,
+            minimal,
+            options = [],
+            ...htmlProps
+        } = this.props;
         const classes = classNames(
             HTML_SELECT,
             {
@@ -70,7 +83,7 @@ export class HTMLSelect extends React.PureComponent<IHTMLSelectProps> {
                     {optionChildren}
                     {htmlProps.children}
                 </select>
-                <Icon icon="double-caret-vertical" />
+                <Icon icon="double-caret-vertical" {...iconProps} />
             </div>
         );
     }

packages/datetime/src/_common.scss

@@ -4,6 +4,8 @@
 @import "~@blueprintjs/core/src/common/variables";
 @import "~@blueprintjs/icons/src/icons";
 
+$datepicker-padding: $pt-grid-size / 2 !default;
+
 $datepicker-min-width: $pt-grid-size * 21 !default;
 $datepicker-day-size: $pt-grid-size * 3 !default;
 $datepicker-header-height: $pt-grid-size * 4 !default;

packages/datetime/src/_datepicker.scss

@@ -23,7 +23,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
   position: relative;
   border-radius: $pt-border-radius;
   background: $datepicker-background-color;
-  padding: $pt-grid-size;
+  padding: $datepicker-padding;
   user-select: none;
 
   .DayPicker {
@@ -39,8 +39,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
 
   .DayPicker-Month {
     display: inline-table;
-    margin: 0 auto;
-    padding: 0 $pt-grid-size / 2;
+    margin: 0 $datepicker-padding $datepicker-padding;
     border-collapse: collapse;
     border-spacing: 0;
     user-select: none;
@@ -51,34 +50,8 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     }
   }
 
-  .DayPicker-NavBar {
-    position: relative;
-  }
-
-  .DayPicker-NavButton {
-    @include pt-icon-colors();
-    position: absolute;
-    top: -$datepicker-header-margin;
-    cursor: pointer;
-    padding: $datepicker-header-margin + 1;
-
-    &--prev {
-      left: -$datepicker-header-margin;
-
-      &::before {
-        @include pt-icon();
-        content: $pt-icon-chevron-left;
-      }
-    }
-
-    &--next {
-      right: -$datepicker-header-margin;
-
-      &::before {
-        @include pt-icon();
-        content: $pt-icon-chevron-right;
-      }
-    }
+  .DayPicker-Caption {
+    display: table-caption;
   }
 
   .DayPicker-Weekdays {
@@ -91,7 +64,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
 
   .DayPicker-Weekday {
     @include calendar-day();
-    padding-top: $pt-grid-size / 2;
+    padding-top: $datepicker-padding;
     font-weight: 600;
 
     // normalize.css adds an underline to abbr[title] elements, remove it here
@@ -151,78 +124,62 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
       color: $pt-text-color-disabled;
     }
   }
+}
 
-  .#{$ns}-datepicker-caption {
-    display: table-caption;
-    border-bottom: 1px solid $pt-divider-black;
-    padding: 0 $pt-grid-size;
-    text-align: center;
-
-    select {
-      margin: -$datepicker-header-margin 0 $datepicker-header-margin;
-      border: 0;
-      background: none;
-      cursor: pointer;
-      height: $pt-input-height;
-      // increase the size of the click target, clearing the caret on the right.
-      padding-right: $pt-icon-size-standard;
-      padding-left: $pt-grid-size / 2;
-      line-height: $pt-input-height;
-      color: $pt-text-color;
-      font-weight: 600;
-
-      // stylelint-disable property-no-vendor-prefix
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      // stylelint-enable property-no-vendor-prefix
-
-      &:focus + .#{$ns}-datepicker-caption-caret {
-        display: inline;
-      }
+.#{$ns}-datepicker-navbar {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: $pt-button-height;
 
-      &::-ms-expand {
-        // IE11 styling to hide the arrow
-        display: none;
-      }
-    }
+  > :first-child {
+    margin-right: auto;
   }
+}
 
-  .#{$ns}-datepicker-caption-select {
-    display: inline-block;
-    position: relative;
+.#{$ns}-datepicker-caption {
+  @include pt-flex-container(row, $fill: ":first-child");
+  justify-content: space-between;
+  margin: 0 ($pt-button-height - $datepicker-padding) $datepicker-padding;
 
-    &:first-child {
-      margin-right: $pt-grid-size;
-    }
+  // HTMLSelect overrides for a narrower appearance
+  select {
+    padding-right: $pt-icon-size-standard;
+    padding-left: $datepicker-padding;
+    font-weight: 600;
 
-    &:hover .#{$ns}-datepicker-caption-caret {
-      fill: $pt-icon-color-hover;
+    + .#{$ns}-icon {
+      right: 2px;
     }
   }
 
-  .#{$ns}-datepicker-caption-caret {
-    position: absolute;
-    top: 2px;
-    right: 0;
-    fill: $pt-icon-color;
-    pointer-events: none;
+  + .#{$ns}-divider {
+    margin: 0;
   }
+}
 
-  .#{$ns}-datepicker-footer {
-    display: flex;
-    justify-content: space-between;
-    margin-top: $pt-grid-size;
-    margin-bottom: -$pt-grid-size / 2;
-    border-top: 1px solid $pt-divider-black;
-    padding-top: $pt-grid-size / 2;
-  }
+.#{$ns}-datepicker-month-select {
+  flex-shrink: 1;
+}
+
+.#{$ns}-datepicker-year-select {
+  flex-shrink: 1;
+  min-width: 60px;
 }
 
 .#{$ns}-datepicker-caption-measure {
-  padding-left: $pt-grid-size / 2;
+  padding-left: $datepicker-padding;
   font-weight: 600;
 }
 
+.#{$ns}-datepicker-footer {
+  display: flex;
+  justify-content: space-between;
+}
+
 .#{$ns}-dark .#{$ns}-datepicker {
   background: $dark-datepicker-background-color;
 
@@ -259,29 +216,6 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     }
   }
 
-  .#{$ns}-datepicker-caption {
-    border-bottom-color: $pt-dark-divider-black;
-
-    select {
-      color: $pt-dark-text-color;
-    }
-
-    option {
-      background-color: $dark-popover-background-color;
-    }
-
-    // we really need more than 4 compound selector
-    // to target the particular structure of this markup
-    // stylelint-disable-next-line
-    .#{$ns}-datepicker-caption-select:hover .#{$ns}-datepicker-caption-caret {
-      fill: $pt-dark-icon-color-hover;
-    }
-
-    .#{$ns}-datepicker-caption-caret {
-      fill: $pt-dark-icon-color;
-    }
-  }
-
   .#{$ns}-datepicker-footer {
     border-top-color: $pt-dark-divider-black;
   }

packages/datetime/src/_daterangepicker.scss

@@ -9,8 +9,9 @@
   display: flex;
   white-space: nowrap;
 
-  .DayPicker:not(:last-child) {
-    margin-right: $pt-grid-size;
+  // indent first navbar a bit
+  .DayPicker:first-of-type .#{$ns}-datepicker-navbar {
+    left: $datepicker-padding;
   }
 
   .DayPicker-NavButton--interactionDisabled {
@@ -20,7 +21,7 @@
   .#{$ns}-daterangepicker-shortcuts + .DayPicker {
     border-left: 1px solid $pt-divider-black;
     min-width: $datepicker-min-width + $pt-grid-size;
-    padding-left: $pt-grid-size;
+    padding-left: $datepicker-padding;
   }
 
   // ensure min-widths are set correctly for variants of contiguous months, single month, and shortcuts
@@ -32,10 +33,6 @@
     .#{$ns}-daterangepicker-shortcuts + .DayPicker {
       min-width: ($datepicker-min-width + $pt-grid-size) * 2;
     }
-
-    .DayPicker-Month:not(:last-child) {
-      margin-right: $pt-grid-size;
-    }
   }
 
   &.#{$ns}-daterangepicker-single-month {
@@ -122,11 +119,6 @@
 }
 
 .#{$ns}-menu.#{$ns}-daterangepicker-shortcuts {
-  display: inline-block;
-  margin-top: -$pt-grid-size / 2;
-  margin-left: -$pt-grid-size / 2;
-  min-width: $pt-grid-size * 15;
-  padding-top: 0;
-  padding-right: $pt-grid-size / 2;
-  padding-left: 0;
+  min-width: $pt-grid-size * 12;
+  padding: 0;
 }

packages/datetime/src/common/classes.ts

@@ -23,6 +23,7 @@ export const DATEPICKER_DAY_SELECTED = `${DATEPICKER_DAY}--selected`;
 export const DATEPICKER_FOOTER = `${DATEPICKER}-footer`;
 export const DATEPICKER_MONTH_SELECT = `${DATEPICKER}-month-select`;
 export const DATEPICKER_YEAR_SELECT = `${DATEPICKER}-year-select`;
+export const DATEPICKER_NAVBAR = `${DATEPICKER}-navbar`;
 
 export const DATERANGEPICKER = `${NS}-daterangepicker`;
 export const DATERANGEPICKER_CONTIGUOUS = `${DATERANGEPICKER}-contiguous`;