cal progress

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

@@ -8,7 +8,6 @@ import {
 
 export default () => (
   <EuiDateTime>
-    <EuiDateTimeInput />
     <EuiCalendar />
   </EuiDateTime>
 );

src-docs/src/views/icon/icons.js

@@ -20,6 +20,7 @@ const iconTypes = [
   'boxesVertical',
   'brush',
   'bullseye',
+  'calendar',
   'check',
   'clock',
   'console',

src/components/form/date_time/_date_time.scss

@@ -1,3 +1,19 @@
 .euiDateTime {
+  max-width: $euiFormMaxWidth;
 
+  .euiDateTime__input {
+    padding-right: $euiSizeXXL;
+    padding-left:$euiSizeM;
+  }
+
+  .euiDateTime__dateColumn {
+    padding: $euiSize;
+  }
+
+  .euiDateTime__timeColumn {
+    background: $euiColorLightestShade;
+    border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
+    border-left: $euiBorderThin;
+    padding: $euiSize 0 $euiSize $euiSizeS;
+  }
 }

src/components/form/date_time/_index.scss

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

src/components/form/date_time/date_time.js

@@ -4,6 +4,16 @@ import React, {
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import {
+  EuiCalendar,
+  EuiFormRow,
+  EuiFieldText,
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTimeSelector,
+} from '../../../components';
+
 export class EuiDateTime extends Component {
   static propTypes = {
     children: PropTypes.node,
@@ -31,7 +41,27 @@ export class EuiDateTime extends Component {
         className={classes}
         {...rest}
       >
-        {children}
+        <EuiFormRow
+          id="asdf"
+          label="Calendar"
+        >
+          <EuiFieldText
+            icon="calendar"
+            iconSide="right"
+            className="euiDateTime__input"
+            value="12/13/2017 01:02:03 PM"
+          />
+        </EuiFormRow>
+        <EuiPanel hasShadow paddingSize="none">
+          <EuiFlexGroup gutterSize="none">
+            <EuiFlexItem grow={false} className="euiDateTime__dateColumn">
+              <EuiCalendar />
+            </EuiFlexItem>
+            <EuiFlexItem className="euiDateTime__timeColumn">
+              <EuiTimeSelector />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
       </div>
     );
   }

src/components/form/date_time/index.js

@@ -2,13 +2,13 @@ export {
   EuiDateTime,
 } from './date_time';
 
-export {
-  EuiDateTimeInput,
-} from './date_time_input';
-
 export {
   EuiCalendar,
   EuiCalendarMonthYearSelector,
   EuiCalendarGrid,
   EuiCalendarGridItem,
 } from './calendar';
+
+export {
+  EuiTimeSelector,
+} from './time_selector';

src/components/form/date_time/time_selector/_index.scss

@@ -0,0 +1 @@
+@import 'time_selector';

src/components/form/date_time/time_selector/_time_selector.scss

@@ -0,0 +1,22 @@
+.euiTimeSelector {
+  @include euiScrollBar;
+  max-height: 256px;
+  overflow-y: auto;
+
+  .euiTimeSelector__button {
+    display: block;
+    font-size: $euiFontSizeXS;
+    color: $euiColorDarkShade;
+    padding: $euiSizeXS / 2 $euiSizeXS;
+    text-align: right;
+    width: 100%;
+    border: $euiBorderThin;
+    border-color: transparent;
+
+    &:focus {
+      background: $euiColorEmptyShade;
+      border-color: $euiColorPrimary;
+      color: $euiColorPrimary;
+    }
+  }
+}

src/components/form/date_time/time_selector/index.js

@@ -0,0 +1,3 @@
+export {
+  EuiTimeSelector,
+} from './time_selector';

src/components/form/date_time/time_selector/time_selector.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const EuiTimeSelector = ({
+  children,
+  className,
+  ...rest,
+}) => {
+  const classes = classNames('euiTimeSelector', className);
+
+  const times = [
+    '12:00 AM',
+    '12:30 AM',
+    '1:00 AM',
+    '1:30 AM',
+    '2:00 AM',
+    '2:30 AM',
+    '3:00 AM',
+    '3:30 AM',
+    '4:00 AM',
+    '4:30 AM',
+    '5:00 AM',
+    '5:30 AM',
+    '6:00 AM',
+    '6:30 AM',
+    '7:00 AM',
+    '7:30 AM',
+    '8:00 AM',
+    '8:30 AM',
+  ]
+
+  const timeListItems = (
+    times.map((time, index) => {
+      return  (
+        <li
+          key={index}
+        >
+          <button className="euiTimeSelector__button">
+            {time}
+          </button>
+        </li>
+      );
+    })
+  );
+
+
+  return (
+    <ul
+      className={classes}
+      {...rest}
+    >
+    {timeListItems}
+    </ul>
+  );
+};
+
+EuiTimeSelector.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};

src/components/form/date_time/date_time_input.test.js → src/components/form/date_time/time_selector/time_selector.test.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test';
 
-import { EuiDateTimeInput } from './date_time_input';
+import { EuiTimeSelector } from './time_selector';
 
-describe('EuiDateTimeInput', () => {
+describe('EuiTimeSelector', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiDateTimeInput {...requiredProps} />
+      <EuiTimeSelector {...requiredProps} />
     );
 
     expect(component)

src/components/form/field_text/field_text.js

@@ -17,6 +17,7 @@ export const EuiFieldText = ({
   value,
   className,
   icon,
+  iconSide,
   isInvalid,
   inputRef,
   fullWidth,
@@ -34,6 +35,7 @@ export const EuiFieldText = ({
       icon={icon}
       fullWidth={fullWidth}
       isLoading={isLoading}
+      iconSide={iconSide}
     >
       <EuiValidatableControl
         isInvalid={isInvalid}
@@ -59,6 +61,7 @@ EuiFieldText.propTypes = {
   placeholder: PropTypes.string,
   value: PropTypes.string,
   icon: PropTypes.string,
+  iconSide: PropTypes.string,
   isInvalid: PropTypes.bool,
   inputRef: PropTypes.func,
   fullWidth: PropTypes.bool,
@@ -69,4 +72,5 @@ EuiFieldText.defaultProps = {
   value: undefined,
   fullWidth: false,
   isLoading: false,
+  iconSide: 'left',
 };

src/components/form/index.js

@@ -4,11 +4,11 @@ export {
 } from './checkbox';
 export {
   EuiDateTime,
-  EuiDateTimeInput,
   EuiCalendar,
   EuiCalendarGrid,
   EuiCalendarGridItem,
   EuiCalendarMonthYearSelector,
+  EuiTimeSelector,
 } from './date_time';
 export { EuiFieldNumber } from './field_number';
 export { EuiFieldPassword } from './field_password';

src/components/icon/icon.js

@@ -6,6 +6,7 @@ import alert from './assets/alert.svg';
 import addDataApp from './assets/app_add_data.svg';
 import advancedSettingsApp from './assets/app_advanced_settings.svg';
 import apmApp from './assets/app_apm.svg';
+import calendar from './assets/calendar.svg';
 import consoleApp from './assets/app_console.svg';
 import dashboardApp from './assets/app_dashboard.svg';
 import devToolsApp from './assets/app_devtools.svg';
@@ -103,6 +104,7 @@ const typeToIconMap = {
   boxesVertical,
   brush,
   bullseye,
+  calendar,
   check,
   clock,
   console,

src/components/index.js

@@ -90,6 +90,7 @@ export {
   EuiSelect,
   EuiSwitch,
   EuiTextArea,
+  EuiTimeSelector,
   EuiValidatableControl,
 } from './form';