[datetime] caption & examples alignment

packages/datetime/src/_datepicker.scss

@@ -62,7 +62,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     position: absolute;
     top: -$datepicker-header-margin;
     cursor: pointer;
-    padding: ($pt-input-height - $pt-icon-size-standard) / 2;
+    padding: $datepicker-header-margin + 1;
 
     &--prev {
       left: -$datepicker-header-margin;
@@ -157,6 +157,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
   .pt-datepicker-caption {
     display: table-caption;
     border-bottom: 1px solid $pt-divider-black;
+    padding: 0 $pt-grid-size;
     text-align: center;
 
     select {
@@ -167,7 +168,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
       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;
+      padding-left: $pt-grid-size / 2;
       line-height: $pt-input-height;
       color: $pt-text-color;
       font-weight: 600;
@@ -195,15 +196,16 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
   .pt-datepicker-caption-select {
     display: inline-block;
     position: relative;
+
+    &:first-child {
+      margin-right: $pt-grid-size;
+    }
   }
 
   .pt-datepicker-caption-caret {
     position: absolute;
-    top: $pt-grid-size * 0.2;
-    // override library-imposed left offset
-    // stylelint-disable declaration-no-important
+    top: 2px;
     right: 0;
-    left: auto !important;
     color: $pt-text-color-muted;
     pointer-events: none;
   }
@@ -219,6 +221,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
 }
 
 .pt-datepicker-caption-measure {
+  padding-left: $pt-grid-size / 2;
   font-weight: 600;
 }
 

packages/datetime/src/datePickerCaption.tsx

@@ -21,17 +21,14 @@ export interface IDatePickerCaptionProps extends CaptionElementProps {
 
 export interface IDatePickerCaptionState {
     monthWidth: number;
-    yearWidth: number;
 }
 
 export class DatePickerCaption extends React.PureComponent<IDatePickerCaptionProps, IDatePickerCaptionState> {
     public state: IDatePickerCaptionState = {
         monthWidth: 0,
-        yearWidth: 0,
     };
 
     private displayedMonthText: string;
-    private displayedYearText: string;
 
     private containerElement: HTMLElement;
 
@@ -77,7 +74,6 @@ export class DatePickerCaption extends React.PureComponent<IDatePickerCaptionPro
         }
 
         this.displayedMonthText = months[displayMonth];
-        this.displayedYearText = displayYear.toString();
 
         const monthSelect = (
             <div className={Classes.DATEPICKER_CAPTION_SELECT} key="month">
@@ -104,11 +100,7 @@ export class DatePickerCaption extends React.PureComponent<IDatePickerCaptionPro
                 >
                     {yearOptionElements}
                 </select>
-                <Icon
-                    className={Classes.DATEPICKER_CAPTION_CARET}
-                    icon="caret-down"
-                    style={{ left: this.state.yearWidth }}
-                />
+                <Icon className={Classes.DATEPICKER_CAPTION_CARET} icon="caret-down" />
             </div>
         );
 
@@ -124,7 +116,7 @@ export class DatePickerCaption extends React.PureComponent<IDatePickerCaptionPro
     }
 
     public componentDidMount() {
-        this.positionArrows();
+        requestAnimationFrame(() => this.positionArrows());
     }
 
     public componentDidUpdate() {
@@ -138,8 +130,7 @@ export class DatePickerCaption extends React.PureComponent<IDatePickerCaptionPro
         // that we're measuring the width of text as sized within this component.
         const textClass = "pt-datepicker-caption-measure";
         const monthWidth = Utils.measureTextWidth(this.displayedMonthText, textClass, this.containerElement);
-        const yearWidth = Utils.measureTextWidth(this.displayedYearText, textClass, this.containerElement);
-        this.setState({ monthWidth, yearWidth });
+        this.setState({ monthWidth });
     }
 
     private handleMonthSelectChange = (e: React.FormEvent<HTMLSelectElement>) => {

packages/docs-app/src/examples/datetime-examples/common/momentDate.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the terms of the LICENSE file distributed with this project.
+ */
+
+import { Classes, Icon, Intent, IProps, Tag } from "@blueprintjs/core";
+import { DateRange } from "@blueprintjs/datetime";
+import * as classNames from "classnames";
+import * as moment from "moment";
+import * as React from "react";
+
+const FORMAT = "dddd, LL";
+
+export const MomentDate: React.SFC<{ date: Date; format?: string }> = ({ date, format = FORMAT }) => {
+    const m = moment(date);
+    if (m.isValid()) {
+        return (
+            <Tag className={Classes.LARGE} intent={Intent.PRIMARY}>
+                {m.format(format)}
+            </Tag>
+        );
+    } else {
+        return <Tag className={classNames(Classes.LARGE, Classes.MINIMAL)}>no date</Tag>;
+    }
+};
+
+export const MomentDateRange: React.SFC<{ range: DateRange; format?: string } & IProps> = ({
+    className,
+    range: [start, end],
+    format = FORMAT,
+}) => (
+    <div className={classNames("docs-date-range", className)}>
+        <MomentDate date={start} format={format} />
+        <Icon icon="arrow-right" />
+        <MomentDate date={end} format={format} />
+    </div>
+);

packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx

@@ -4,12 +4,13 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-import { Switch, Tag } from "@blueprintjs/core";
+import { Switch } from "@blueprintjs/core";
 import { DateInput, IDateFormatProps, TimePickerPrecision } from "@blueprintjs/datetime";
 import { BaseExample, handleBooleanChange, handleNumberChange } from "@blueprintjs/docs-theme";
 import * as React from "react";
 
 import { FORMATS, FormatSelect } from "./common/formatSelect";
+import { MomentDate } from "./common/momentDate";
 import { PrecisionSelect } from "./common/precisionSelect";
 
 export interface IDateInputExampleState {
@@ -55,7 +56,7 @@ export class DateInputExample extends BaseExample<IDateInputExampleState> {
                     popoverProps={{ popoverClassName: "barbarbar" }}
                     inputProps={{ className: "bazbazbaz" }}
                 />{" "}
-                {date && <Tag>{date.toLocaleString()}</Tag>}
+                <MomentDate date={date} />
             </div>
         );
     }

packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx

@@ -4,28 +4,12 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-import { Classes, Intent, Switch, Tag } from "@blueprintjs/core";
+import { Classes, Switch } from "@blueprintjs/core";
 import { BaseExample, handleBooleanChange } from "@blueprintjs/docs-theme";
-import * as classNames from "classnames";
-import * as moment from "moment";
 import * as React from "react";
 
 import { DatePicker } from "@blueprintjs/datetime";
-
-const FORMAT = "dddd, LL";
-
-export const Moment: React.SFC<{ date: Date; format?: string }> = ({ date, format = FORMAT }) => {
-    const m = moment(date);
-    if (m.isValid()) {
-        return (
-            <Tag className={Classes.LARGE} intent={Intent.PRIMARY}>
-                {m.format(format)}
-            </Tag>
-        );
-    } else {
-        return <Tag className={classNames(Classes.LARGE, Classes.MINIMAL)}>no date</Tag>;
-    }
-};
+import { MomentDate } from "./common/momentDate";
 
 export interface IDatePickerExampleState {
     date?: Date;
@@ -54,7 +38,7 @@ export class DatePickerExample extends BaseExample<IDatePickerExampleState> {
                     reverseMonthAndYearMenus={this.state.reverseMonthAndYearMenus}
                     showActionsBar={this.state.showActionsBar}
                 />
-                <Moment date={this.state.date} />
+                <MomentDate date={this.state.date} />
             </div>
         );
     }

packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx

@@ -4,12 +4,13 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-import { Classes, Icon, Switch, Tag } from "@blueprintjs/core";
+import { Classes, IPopoverProps, Switch } from "@blueprintjs/core";
 import { DateRange, DateRangeInput, IDateFormatProps } from "@blueprintjs/datetime";
 import { BaseExample, handleBooleanChange } from "@blueprintjs/docs-theme";
 import * as React from "react";
 
 import { FORMATS, FormatSelect } from "./common/formatSelect";
+import { MomentDateRange } from "./common/momentDate";
 
 export interface IDateRangeInputExampleState {
     allowSingleDayRange: boolean;
@@ -20,6 +21,8 @@ export interface IDateRangeInputExampleState {
     range: DateRange;
     reverseMonthAndYearMenus: boolean;
     selectAllOnFocus: boolean;
+
+    isPopoverOpen: boolean;
 }
 
 export class DateRangeInputExample extends BaseExample<IDateRangeInputExampleState> {
@@ -29,11 +32,17 @@ export class DateRangeInputExample extends BaseExample<IDateRangeInputExampleSta
         contiguousCalendarMonths: true,
         disabled: false,
         format: FORMATS[0],
+        isPopoverOpen: false,
         range: [null, null],
         reverseMonthAndYearMenus: false,
         selectAllOnFocus: false,
     };
 
+    private popoverProps: Partial<IPopoverProps> = {
+        popoverWillClose: () => this.setState({ isPopoverOpen: false }),
+        popoverWillOpen: () => this.setState({ isPopoverOpen: true }),
+    };
+
     private toggleContiguous = handleBooleanChange(contiguous => {
         this.setState({ contiguousCalendarMonths: contiguous });
     });
@@ -46,13 +55,16 @@ export class DateRangeInputExample extends BaseExample<IDateRangeInputExampleSta
     private toggleSingleDay = handleBooleanChange(allowSingleDayRange => this.setState({ allowSingleDayRange }));
 
     protected renderExample() {
-        const { format, range: [start, end], ...spreadProps } = this.state;
+        const { format, range, ...spreadProps } = this.state;
         return (
             <div>
-                <DateRangeInput {...spreadProps} {...format} onChange={this.handleRangeChange} />{" "}
-                <Tag>{start == null ? "null" : start.toLocaleDateString()}</Tag>
-                <Icon icon="arrow-right" />
-                <Tag>{end == null ? "null" : end.toLocaleDateString()}</Tag>
+                <DateRangeInput
+                    {...spreadProps}
+                    {...format}
+                    onChange={this.handleRangeChange}
+                    popoverProps={this.popoverProps}
+                />{" "}
+                <MomentDateRange className={this.state.isPopoverOpen ? Classes.INLINE : ""} range={range} />
             </div>
         );
     }

packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx

@@ -4,13 +4,13 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-import { Classes, Icon, Switch } from "@blueprintjs/core";
+import { Classes, Switch } from "@blueprintjs/core";
 import { BaseExample, handleBooleanChange, handleNumberChange } from "@blueprintjs/docs-theme";
 import * as moment from "moment";
 import * as React from "react";
 
 import { DateRange, DateRangePicker } from "@blueprintjs/datetime";
-import { Moment } from "./datePickerExample";
+import { MomentDateRange } from "./common/momentDate";
 
 export interface IDateRangePickerExampleState {
     allowSingleDayRange?: boolean;
@@ -77,8 +77,6 @@ export class DateRangePickerExample extends BaseExample<IDateRangePickerExampleS
     });
 
     protected renderExample() {
-        const [start, end] = this.state.dateRange;
-
         const minDate = MIN_DATE_OPTIONS[this.state.minDateIndex].value;
         const maxDate = MAX_DATE_OPTIONS[this.state.maxDateIndex].value;
 
@@ -94,11 +92,7 @@ export class DateRangePickerExample extends BaseExample<IDateRangePickerExampleS
                     reverseMonthAndYearMenus={this.state.reverseMonthAndYearMenus}
                     shortcuts={this.state.shortcuts}
                 />
-                <div>
-                    <Moment date={start} />
-                    <Icon icon="arrow-right" iconSize={20} />
-                    <Moment date={end} />
-                </div>
+                <MomentDateRange range={this.state.dateRange} />
             </div>
         );
     }

packages/docs-app/src/examples/datetime-examples/dateTimePickerExample.tsx

@@ -9,7 +9,7 @@ import { BaseExample } from "@blueprintjs/docs-theme";
 import * as React from "react";
 
 import { DateTimePicker, TimePickerPrecision } from "@blueprintjs/datetime";
-import { Moment } from "./datePickerExample";
+import { MomentDate } from "./common/momentDate";
 
 export class DateTimePickerExample extends BaseExample<{ date: Date }> {
     public state = { date: null as Date };
@@ -24,7 +24,7 @@ export class DateTimePickerExample extends BaseExample<{ date: Date }> {
                     onChange={this.handleDateChange}
                 />
                 <div>
-                    <Moment date={this.state.date} format="LLLL" />
+                    <MomentDate date={this.state.date} format="LLLL" />
                 </div>
             </div>
         );

packages/docs-app/src/styles/_examples.scss

@@ -354,6 +354,18 @@
   max-width: 280px;
 }
 
+.docs-date-range {
+  @include pt-flex-container(row, $pt-grid-size / 2);
+  align-items: center;
+  margin-top: $pt-grid-size;
+
+  // move inline when popover opens (for Date*Input)
+  &.pt-inline {
+    display: inline-flex;
+    margin: 0;
+  }
+}
+
 .docs-wiggle {
   animation: docs-wiggle-rotate $pt-transition-duration $pt-transition-ease infinite;
 }