Datetime selector prototype

src-docs/src/routes.js

@@ -61,6 +61,9 @@ import { ColorPickerExample }
 import { ContextMenuExample }
   from './views/context_menu/context_menu_example';
 
+import { DateTimeExample }
+  from './views/date_time/date_time_example';
+
 import { DescriptionListExample }
   from './views/description_list/description_list_example';
 
@@ -213,6 +216,7 @@ const components = [
   CodeExample,
   ColorPickerExample,
   ContextMenuExample,
+  DateTimeExample,
   DescriptionListExample,
   ErrorBoundaryExample,
   ExpressionExample,

src-docs/src/views/date_time/calendar_demo_arrays.js

@@ -0,0 +1,90 @@
+
+export const EXAMPLE_CAL_RANGE = [
+  { numberedDay: 26 },
+  { numberedDay: 27 },
+  { numberedDay: 28 },
+  { numberedDay: 29 },
+  { numberedDay: 30 },
+  { numberedDay: 1, isInTheCurrentMonth: true },
+  { numberedDay: 2, isInTheCurrentMonth: true },
+  { numberedDay: 3, isInTheCurrentMonth: true },
+  { numberedDay: 4, isInTheCurrentMonth: true },
+  { numberedDay: 5, isInTheCurrentMonth: true },
+  { numberedDay: 6, isInTheCurrentMonth: true },
+  { numberedDay: 7, isInTheCurrentMonth: true, isToday: true },
+  { numberedDay: 8, isInTheCurrentMonth: true, isSelected: true, isStartDate: true },
+  { numberedDay: 9, isInTheCurrentMonth: true, isSelected: true },
+  { numberedDay: 10, isInTheCurrentMonth: true, isSelected: true },
+  { numberedDay: 11, isInTheCurrentMonth: true, isSelected: true },
+  { numberedDay: 12, isInTheCurrentMonth: true, isSelected: true },
+  { numberedDay: 13, isInTheCurrentMonth: true, isSelected: true },
+  { numberedDay: 14, isInTheCurrentMonth: true, isSelected: true, isEndDate: true },
+  { numberedDay: 15, isInTheCurrentMonth: true },
+  { numberedDay: 16, isInTheCurrentMonth: true },
+  { numberedDay: 17, isInTheCurrentMonth: true },
+  { numberedDay: 18, isInTheCurrentMonth: true },
+  { numberedDay: 19, isInTheCurrentMonth: true },
+  { numberedDay: 20, isInTheCurrentMonth: true },
+  { numberedDay: 21, isInTheCurrentMonth: true },
+  { numberedDay: 22, isInTheCurrentMonth: true },
+  { numberedDay: 23, isInTheCurrentMonth: true },
+  { numberedDay: 24, isInTheCurrentMonth: true },
+  { numberedDay: 25, isInTheCurrentMonth: true },
+  { numberedDay: 26, isInTheCurrentMonth: true },
+  { numberedDay: 27, isInTheCurrentMonth: true },
+  { numberedDay: 28, isInTheCurrentMonth: true },
+  { numberedDay: 29, isInTheCurrentMonth: true },
+  { numberedDay: 30, isInTheCurrentMonth: true },
+  { numberedDay: 31, isInTheCurrentMonth: true },
+  { numberedDay: 1 },
+  { numberedDay: 2 },
+  { numberedDay: 3 },
+  { numberedDay: 4 },
+  { numberedDay: 5 },
+  { numberedDay: 6 },
+];
+
+export const EXAMPLE_CAL_SINGLE_DATE = [
+  { numberedDay: 26 },
+  { numberedDay: 27 },
+  { numberedDay: 28 },
+  { numberedDay: 29 },
+  { numberedDay: 30 },
+  { numberedDay: 1, isInTheCurrentMonth: true },
+  { numberedDay: 2, isInTheCurrentMonth: true },
+  { numberedDay: 3, isInTheCurrentMonth: true },
+  { numberedDay: 4, isInTheCurrentMonth: true },
+  { numberedDay: 5, isInTheCurrentMonth: true },
+  { numberedDay: 6, isInTheCurrentMonth: true },
+  { numberedDay: 7, isInTheCurrentMonth: true, isToday: true },
+  { numberedDay: 8, isInTheCurrentMonth: true },
+  { numberedDay: 9, isInTheCurrentMonth: true },
+  { numberedDay: 10, isInTheCurrentMonth: true },
+  { numberedDay: 11, isInTheCurrentMonth: true },
+  { numberedDay: 12, isInTheCurrentMonth: true },
+  { numberedDay: 13, isInTheCurrentMonth: true },
+  { numberedDay: 14, isInTheCurrentMonth: true, isStartDate: true },
+  { numberedDay: 15, isInTheCurrentMonth: true },
+  { numberedDay: 16, isInTheCurrentMonth: true },
+  { numberedDay: 17, isInTheCurrentMonth: true },
+  { numberedDay: 18, isInTheCurrentMonth: true },
+  { numberedDay: 19, isInTheCurrentMonth: true },
+  { numberedDay: 20, isInTheCurrentMonth: true },
+  { numberedDay: 21, isInTheCurrentMonth: true },
+  { numberedDay: 22, isInTheCurrentMonth: true },
+  { numberedDay: 23, isInTheCurrentMonth: true },
+  { numberedDay: 24, isInTheCurrentMonth: true },
+  { numberedDay: 25, isInTheCurrentMonth: true },
+  { numberedDay: 26, isInTheCurrentMonth: true },
+  { numberedDay: 27, isInTheCurrentMonth: true },
+  { numberedDay: 28, isInTheCurrentMonth: true },
+  { numberedDay: 29, isInTheCurrentMonth: true },
+  { numberedDay: 30, isInTheCurrentMonth: true },
+  { numberedDay: 31, isInTheCurrentMonth: true },
+  { numberedDay: 1 },
+  { numberedDay: 2 },
+  { numberedDay: 3 },
+  { numberedDay: 4 },
+  { numberedDay: 5 },
+  { numberedDay: 6 },
+];

src-docs/src/views/date_time/calendar_inline.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {
+  EuiCalendar,
+} from '../../../../src/components';
+
+import { EXAMPLE_CAL_RANGE } from './calendar_demo_arrays';
+
+export default () => (
+  <EuiCalendar days={EXAMPLE_CAL_RANGE} />
+);

src-docs/src/views/date_time/date_time.js

@@ -0,0 +1,37 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiDateTime,
+} from '../../../../src/components';
+
+import { EXAMPLE_CAL_SINGLE_DATE } from './calendar_demo_arrays';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isPopoverOpen: false,
+    };
+  }
+
+  closePopover() {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  }
+
+  render() {
+    return (
+      <EuiDateTime
+        isPopoverOpen={this.state.isPopoverOpen}
+        closePopover={this.closePopover.bind(this)}
+        days={EXAMPLE_CAL_SINGLE_DATE}
+        value="12/18/2017 01:02:03 PM"
+        hasTimeSelector
+      />
+    );
+  }
+}

src-docs/src/views/date_time/date_time_example.js

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+} from '../../../../src/components';
+
+import DateTime from './date_time';
+const dateTimeSource = require('!!raw-loader!./date_time');
+const dateTimeHtml = renderToHtml(DateTime);
+
+import DateWithoutSelector from './date_without_time_selector';
+const dateWithoutSelectorSource = require('!!raw-loader!./date_without_time_selector');
+const dateWithoutSelectorHtml = renderToHtml(DateTime);
+
+import CalendarInline from './calendar_inline';
+const calendarInlineSource = require('!!raw-loader!./calendar_inline');
+const calendarInlineHtml = renderToHtml(CalendarInline);
+
+export const DateTimeExample = {
+  title: 'DateTime',
+  sections: [
+    {
+      title: 'DateTime',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: dateTimeSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: dateTimeHtml,
+      }],
+      text: (
+        <p>
+          Description needed: how to use the <EuiCode>EuiDateTime</EuiCode> component.
+        </p>
+      ),
+      demo: <DateTime />,
+    },
+    {
+      title: 'DateTime without time selector',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: dateWithoutSelectorSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: dateWithoutSelectorHtml,
+      }],
+      text: (
+        <p>
+          Description needed: how to use the <EuiCode>EuiDateTime</EuiCode> component.
+        </p>
+      ),
+      demo: <DateWithoutSelector />,
+    },
+    {
+      title: 'Calendar',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: calendarInlineSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: calendarInlineHtml,
+      }],
+      text: (
+        <p>
+          The <EuiCode>EuiCalendar</EuiCode> component should be usable as its own inline element.
+        </p>
+      ),
+      demo: <CalendarInline />,
+    },
+  ],
+};

src-docs/src/views/date_time/date_without_time_selector.js

@@ -0,0 +1,39 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiDateTime,
+  EuiFormRow,
+} from '../../../../src/components';
+
+import { EXAMPLE_CAL_SINGLE_DATE } from './calendar_demo_arrays';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isPopoverOpen: false,
+    };
+  }
+
+  closePopover() {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  }
+
+  render() {
+    return (
+      <EuiFormRow label="Date with time selector">
+        <EuiDateTime
+          isPopoverOpen={this.state.isPopoverOpen}
+          closePopover={this.closePopover.bind(this)}
+          days={EXAMPLE_CAL_SINGLE_DATE}
+          value="12/18/2017"
+        />
+      </EuiFormRow>
+    );
+  }
+}

src/components/flex/_flex_grid.scss

@@ -5,6 +5,7 @@
 
   > .euiFlexItem {
     flex-grow: 0;
+    align-items: stretch;
 
     &.euiFlexItem--flexGrowZero {
       flex-grow: 0 !important;
@@ -14,6 +15,7 @@
 }
 
 $gutterTypes: (
+  gutterNone: 0px,
   gutterSmall: $euiSizeS,
   gutterMedium: $euiSize,
   gutterLarge: $euiSizeL,
@@ -42,7 +44,6 @@ $fractions: (
   @each $fraction, $percentage in $fractions {
     .euiFlexGrid--#{$gutterName} {
       margin: -$halfGutterSize;
-      align-items: stretch;
 
       &.euiFlexGrid--#{$fraction} {
         > .euiFlexItem {

src/components/flex/flex_grid.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 const gutterSizeToClassNameMap = {
-  none: null,
+  none: 'euiFlexGrid--gutterNone',
   s: 'euiFlexGrid--gutterSmall',
   m: 'euiFlexGrid--gutterMedium',
   l: 'euiFlexGrid--gutterLarge',
@@ -50,4 +50,3 @@ EuiFlexGrid.defaultProps = {
   gutterSize: 'l',
   columns: 0,
 };
-

src/components/form/_index.scss

@@ -81,6 +81,7 @@ $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%);
 }
 
 @import 'checkbox/index';
+@import 'date_time/index';
 @import 'field_number/index';
 @import 'field_password/index';
 @import 'field_search/index';

src/components/form/date_time/_date_time.scss

@@ -0,0 +1,37 @@
+.euiDateTime {
+  max-width: $euiFormMaxWidth;
+  position: relative;
+
+  .euiDateTime__dateColumn {
+    padding: $euiSize;
+  }
+
+  .euiDateTime__timeColumn {
+    background: $euiColorLightestShade;
+    border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
+    border-left: $euiBorderThin;
+    padding: $euiSize 0 $euiSize $euiSizeS;
+  }
+
+  .euiDateTime__panel {
+    visibility: hidden;
+    opacity: 0;
+    border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    right: -1px;
+    z-index: $euiZContentMenu;
+    transition:
+      transition $euiAnimSpeedNormal $euiAnimSlightResistance,
+      opacity $euiAnimSpeedNormal $euiAnimSlightResistance
+    ;
+  }
+
+  &.euiDateTime-isOpen {
+    .euiDateTime__panel {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}

src/components/form/date_time/_index.scss

@@ -0,0 +1,3 @@
+@import 'date_time';
+@import 'calendar/index';
+@import 'time_selector/index';

src/components/form/date_time/calendar/_calendar.scss

@@ -0,0 +1,5 @@
+.euiCalendar {
+  width: ($euiSizeXL * 7) + ($euiSizeXS * 13);
+  position: relative;
+
+}

src/components/form/date_time/calendar/_calendar_grid.scss

@@ -0,0 +1,6 @@
+.euiCalendarGrid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  margin: 0 (-$euiSizeXS);
+}