From bbac897d430460139a724ba7fd35e41a0052e939 Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Sat, 3 Mar 2018 15:19:03 -0800 Subject: [PATCH 1/4] stop measuring year in DatePickerCaption (right aligned) --- packages/datetime/src/datePickerCaption.tsx | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/datetime/src/datePickerCaption.tsx b/packages/datetime/src/datePickerCaption.tsx index 006d3d7204..e64945f7a6 100644 --- a/packages/datetime/src/datePickerCaption.tsx +++ b/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 { 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 @@ -104,11 +100,7 @@ export class DatePickerCaption extends React.PureComponent {yearOptionElements} - + ); @@ -124,7 +116,7 @@ export class DatePickerCaption extends React.PureComponent this.positionArrows()); } public componentDidUpdate() { @@ -138,8 +130,7 @@ export class DatePickerCaption extends React.PureComponent) => { From 2abf781abec47c81021f0f4b2597e3c966bff438 Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Sat, 3 Mar 2018 15:19:19 -0800 Subject: [PATCH 2/4] fix alignment of icons in caption --- packages/datetime/src/_datepicker.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/datetime/src/_datepicker.scss b/packages/datetime/src/_datepicker.scss index c8112335d1..b0c172e360 100644 --- a/packages/datetime/src/_datepicker.scss +++ b/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; &--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 { @@ -199,11 +200,8 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default; .pt-datepicker-caption-caret { position: absolute; - top: $pt-grid-size * 0.2; - // override library-imposed left offset - // stylelint-disable declaration-no-important + top: 3px; right: 0; - left: auto !important; color: $pt-text-color-muted; pointer-events: none; } @@ -219,6 +217,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default; } .pt-datepicker-caption-measure { + padding-left: $pt-grid-size; font-weight: 600; } From 1d491114416fe33385231d073c32374797fa67cd Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Sat, 3 Mar 2018 15:20:00 -0800 Subject: [PATCH 3/4] MomentDate/Range components for datetime examples --- .../datetime-examples/common/momentDate.tsx | 38 +++++++++++++++++++ .../datetime-examples/dateInputExample.tsx | 5 ++- .../datetime-examples/datePickerExample.tsx | 22 ++--------- .../dateRangeInputExample.tsx | 24 +++++++++--- .../dateRangePickerExample.tsx | 12 ++---- .../dateTimePickerExample.tsx | 4 +- packages/docs-app/src/styles/_examples.scss | 12 ++++++ 7 files changed, 79 insertions(+), 38 deletions(-) create mode 100644 packages/docs-app/src/examples/datetime-examples/common/momentDate.tsx diff --git a/packages/docs-app/src/examples/datetime-examples/common/momentDate.tsx b/packages/docs-app/src/examples/datetime-examples/common/momentDate.tsx new file mode 100644 index 0000000000..78f5844c36 --- /dev/null +++ b/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 ( + + {m.format(format)} + + ); + } else { + return no date; + } +}; + +export const MomentDateRange: React.SFC<{ range: DateRange; format?: string } & IProps> = ({ + className, + range: [start, end], + format = FORMAT, +}) => ( +
+ + + +
+); diff --git a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx index 0ad42103d5..76cfdda2ee 100644 --- a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx +++ b/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 { popoverProps={{ popoverClassName: "barbarbar" }} inputProps={{ className: "bazbazbaz" }} />{" "} - {date && {date.toLocaleString()}} + ); } diff --git a/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx b/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx index ec6c950c3e..3717a40507 100644 --- a/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx +++ b/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 ( - - {m.format(format)} - - ); - } else { - return no date; - } -}; +import { MomentDate } from "./common/momentDate"; export interface IDatePickerExampleState { date?: Date; @@ -54,7 +38,7 @@ export class DatePickerExample extends BaseExample { reverseMonthAndYearMenus={this.state.reverseMonthAndYearMenus} showActionsBar={this.state.showActionsBar} /> - + ); } diff --git a/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx index 2422749964..fa9ba61fbd 100644 --- a/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx +++ b/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 { @@ -29,11 +32,17 @@ export class DateRangeInputExample extends BaseExample = { + 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 this.setState({ allowSingleDayRange })); protected renderExample() { - const { format, range: [start, end], ...spreadProps } = this.state; + const { format, range, ...spreadProps } = this.state; return (
- {" "} - {start == null ? "null" : start.toLocaleDateString()} - - {end == null ? "null" : end.toLocaleDateString()} + {" "} +
); } diff --git a/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx index 8cefdcbacc..e555e7a8f4 100644 --- a/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx +++ b/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 -
- - - -
+ ); } diff --git a/packages/docs-app/src/examples/datetime-examples/dateTimePickerExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateTimePickerExample.tsx index 2f71aeb686..c1122aae13 100644 --- a/packages/docs-app/src/examples/datetime-examples/dateTimePickerExample.tsx +++ b/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} />
- +
); diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss index fe454a2727..0c314dde84 100644 --- a/packages/docs-app/src/styles/_examples.scss +++ b/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; } From 2d7818d22a26792d1e7096525cbe8b8405095fce Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Tue, 6 Mar 2018 15:17:17 -0800 Subject: [PATCH 4/4] adjustments after fixing regressions --- packages/datetime/src/_datepicker.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/datetime/src/_datepicker.scss b/packages/datetime/src/_datepicker.scss index b0c172e360..986ce89819 100644 --- a/packages/datetime/src/_datepicker.scss +++ b/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: $datepicker-header-margin; + padding: $datepicker-header-margin + 1; &--prev { left: -$datepicker-header-margin; @@ -168,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; @@ -196,11 +196,15 @@ $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: 3px; + top: 2px; right: 0; color: $pt-text-color-muted; pointer-events: none; @@ -217,7 +221,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default; } .pt-datepicker-caption-measure { - padding-left: $pt-grid-size; + padding-left: $pt-grid-size / 2; font-weight: 600; }