feat(DateInput): add calendar icon

e2e/__tests__/date-input.test.js

@@ -14,22 +14,16 @@ const SUITES = [
   baisy.suite('Components/DateInput', 'common', 'open datetime')
     .setRootHeight(600)
     .setEnhancer(async (iframe) => {
-      const input = await iframe.waitForXPath('(//input)[5]');
+      const icon = await iframe.waitForXPath('((//input)[5]/../..//i)[last()]');
 
-      await input.click();
-
-      await (await iframe.waitForXPath('//input')).click();
-      await input.click();
+      await icon.click();
     }),
   baisy.suite('Components/DateInput', 'common', 'open month picker')
     .setRootHeight(600)
     .setEnhancer(async (iframe) => {
-      const input = await iframe.waitForXPath('(//input)[7]');
+      const icon = await iframe.waitForXPath('((//input)[7]/../..//i)[last()]');
 
-      await input.click();
-
-      await (await iframe.waitForXPath('//input')).click();
-      await input.click();
+      await icon.click();
     }),
   baisy.suite('Components/DateInputField', 'common'),
 ];

src/components/DateInput/DateInput.js

@@ -6,8 +6,10 @@ import 'react-datepicker/dist/react-datepicker.css';
 
 import { DateInputValue } from './DateInputValue';
 import { Dropdown } from '../Dropdown';
-import * as utils from './DateInput.utils';
+import { Icon } from '../Icon';
 
+import { DateInputTag, DateInputCalendarTag } from './DateInput.theme';
+import * as utils from './DateInput.utils';
 
 type DateInputProps = {
   onChange: (value: ?string) => void,
@@ -119,6 +121,12 @@ class DateInput extends React.Component<DateInputProps, DateInputState> {
     };
   }
 
+  toggle = () => {
+    const { isOpen } = this.state;
+
+    this.setState({ isOpen: !isOpen });
+  };
+
   open = () => {
     const { isOpen } = this.state;
 
@@ -140,33 +148,39 @@ class DateInput extends React.Component<DateInputProps, DateInputState> {
     const mask = isMonthPicker ? utils.YEAR_MONTH_MASK : withTime ? utils.DATETIME_MASK : utils.DATE_MASK;
 
     return (
-      <Dropdown
-        isOpen={ isOpen && !disabled }
-        stretch={ stretch }
-        onCloseDropdown={ this.close }
-        onOpenDropdown={ this.open }
-        { ...rest }
-      >
-        <Dropdown.Head onClick={ this.open }>
-          <DateInputValue
-            placeholder={ placeholder }
-            mask={ mask }
-            value={ textValue }
-            onChange={ this.onChangeText }
-            onBlur={ this.onBlur }
-            clearable={ clearable }
-            disabled={ disabled }
-            autoFocus={ autoFocus }
-          />
-        </Dropdown.Head>
-        <Dropdown.Body withPortal={ withPortal } modifiers={{
-          preventOverflow: {
-            boundariesElement: 'viewport',
-          },
-        }}>
-          <DatePicker { ...collectedProps } />
-        </Dropdown.Body>
-      </Dropdown>
+      <DateInputTag stretch={ stretch }>
+        <DateInputValue
+          placeholder={ placeholder }
+          mask={ mask }
+          value={ textValue }
+          onChange={ this.onChangeText }
+          onBlur={ this.onBlur }
+          clearable={ clearable }
+          disabled={ disabled }
+          autoFocus={ autoFocus }
+        />
+        <Dropdown
+          isOpen={ isOpen && !disabled }
+          stretch={ stretch }
+          onCloseDropdown={ this.close }
+          onOpenDropdown={ this.open }
+          css={{ flex: 0 }}
+          { ...rest }
+        >
+          <Dropdown.Head onClick={ this.toggle }>
+            <DateInputCalendarTag>
+              <Icon name="Calendar" />
+            </DateInputCalendarTag>
+          </Dropdown.Head>
+          <Dropdown.Body withPortal={ withPortal } placement="bottom-end" modifiers={{
+            preventOverflow: {
+              boundariesElement: 'viewport',
+            },
+          }}>
+            <DatePicker { ...collectedProps } />
+          </Dropdown.Body>
+        </Dropdown>
+      </DateInputTag>
     );
   }
 }

src/components/DateInput/DateInput.theme.js

@@ -3,7 +3,16 @@ import { css } from '@emotion/core';
 import { createThemeTag } from '../../theme/createThemeTag';
 
 // eslint-disable-next-line
-const [_, theme] = createThemeTag('dateInput', ({ COLORS }: *) => ({
+const [DateInputTag, themeDateInput] = createThemeTag('dateInput', ({ COLORS }: *) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  modifiers: {
+    stretch: {
+      width: '100%',
+    },
+  },
   globals: css`
     .react-datepicker {
       border: 1px solid ${COLORS.PRIMARY_BORDER_COLOR};
@@ -189,4 +198,28 @@ const [_, theme] = createThemeTag('dateInput', ({ COLORS }: *) => ({
   `,
 }));
 
-export { theme };
+const [DateInputCalendarTag, themeDateInputCalendar] = createThemeTag('dateInputCalendar', ({ COLORS, SIZES }: *) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'row',
+    maxHeight: 36,
+    maxWidth: 36,
+    minHeight: 36,
+    minWidth: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: COLORS.PRIMARY_BORDER_COLOR,
+    borderTopRightRadius: SIZES.MAIN_BORDER_RADIUS,
+    borderBottomRightRadius: SIZES.MAIN_BORDER_RADIUS,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    marginLeft: -1,
+  },
+}));
+
+const theme = {
+  ...themeDateInput,
+  ...themeDateInputCalendar,
+};
+
+export { theme, DateInputTag, DateInputCalendarTag };

src/components/DateInput/DateInputValue.js

@@ -14,7 +14,7 @@ type DateInputValueProps = {
 };
 
 const DateInputValue = ({ value, onChange, ...props }: DateInputValueProps) => (
-  <Input onChange={ (val) => onChange({ target: { value: val }}) } value={ value } { ...props } />
+  <Input css={{ '& > input': { borderTopRightRadius: 0, borderBottomRightRadius: 0 }}} onChange={ (val) => onChange({ target: { value: val }}) } value={ value } { ...props } />
 );
 
 export { DateInputValue };

src/components/Dropdown/Dropdown.js

@@ -20,6 +20,7 @@ type DropdownControlledProps = {|
   /** Callback to open dropdown */
   onOpenDropdown?: () => void,
   children: React$Node,
+  css?: Object,
 |}
 
 type DropdownUncontroledProps = {|
@@ -28,6 +29,7 @@ type DropdownUncontroledProps = {|
   /** When true then  plate */
   stretch?: boolean,
   children: React$Node,
+  css?: Object,
 |}
 
 type DropdownContextData = {|

src/components/Dropdown/DropdownBody.js

@@ -17,7 +17,7 @@ type DropdownBodyProps = {
   children: React$Node | ({ closeDropdown: () => void }) => React$Node,
 
   /** Default content position relative target */
-  placement?: 'top' | 'left' | 'bottom' | 'right' | 'auto',
+  placement?: 'top' | 'left' | 'bottom' | 'right' | 'auto' | 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start',
   /** Default content align relative target*/
   pin?: 'left' | 'right',
   /** Set body offset relative target */

src/components/Icon/glyphs/index.js

@@ -4,6 +4,7 @@ import React from 'react';
 import Add from './Add.svg';
 import Alert from './Alert.svg';
 import APIToken from './APIToken.svg';
+import Calendar from './Calendar.svg';
 import Check from './Check.svg';
 import ChevronDown from './ChevronDown.svg';
 import ChevronLeft from './ChevronLeft.svg';
@@ -54,6 +55,7 @@ export {
   Add,
   Alert,
   APIToken,
+  Calendar,
   Check,
   ChevronDown,
   ChevronLeft,