feat(DateInput): restyle

e2e/__tests__/root-test.js

@@ -20,13 +20,13 @@ const SUITES = [
   baisy.suite('Components/DateInput', 'common'),
   baisy.suite('Components/DateInput', 'common')
     .setStateName('open date')
-    .setHeight(300)
+    .setHeight(400)
     .setEnhancer(async (iframe) => {
       await (await iframe.waitForXPath('//input')).click();
     }),
   baisy.suite('Components/DateInput', 'common')
     .setStateName('open datetime')
-    .setHeight(400)
+    .setHeight(500)
     .setEnhancer(async (iframe) => {
       await (await iframe.waitForXPath('(//input)[2]')).click();
     }),

src/components/DateInput/DateInput.js

@@ -2,26 +2,190 @@
 
 import React from 'react';
 import DatePicker from 'react-datepicker';
-import { injectGlobal } from 'emotion';
 import 'react-datepicker/dist/react-datepicker-cssmodules.css';
 
+import { createComponentTheme } from '../../utils';
 import { DateInputValue } from './DateInputValue';
 import { Dropdown } from '../Dropdown';
 import * as utils from './DateInput.utils';
 
-injectGlobal`
+const getGlobalCSS = ({ COLORS }: *) => `
+  .react-datepicker {
+    border: 1px solid ${COLORS.LIGHT_GRAY1};
+    box-shadow: 0 2px 10px 0 rgba(208,215,221,0.5);
+    display: flex;
+    padding-bottom: 32px;
+  }
+
+  .react-datepicker__time-list-item {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  .react-datepicker__header,
+  .react-datepicker__today-button {
+    background-color: ${COLORS.LIGHT_GRAY5};
+  }
+
+  .react-datepicker__month-container {
+    width: 224px;
+  }
+
+  .react-datepicker__month {
+    margin: 0;
+  }
+
+  .react-datepicker__day-name {
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    font-family: Poppins;
+    color: ${COLORS.PRIMARY_TEXT_COLOR};
+  }
+
+  .react-datepicker__day {
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    font-family: Poppins;
+    color: ${COLORS.PRIMARY_TEXT_COLOR};
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+
+  .react-datepicker__day--selected {
+    border-radius: 24px;
+    background-color: ${COLORS.LIGHT_BLUE};
+    color: ${COLORS.LIGHT_PRIMARY_TEXT_COLOR};
+  }
+
+  .react-datepicker__day:hover {
+    border-radius: 24px;
+  }
+
+  .react-datepicker__time-list-item--selected {
+    background-color: ${COLORS.LIGHT_BLUE} !important;
+  }
+
+  .react-datepicker__week {
+    display: flex;
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+
+  .react-datepicker__time-list {
+    max-height: 224px !important;
+    height: auto !important;
+  }
+
+  .react-datepicker__time-container {
+    position: initial;
+    border: none;
+    border-left: 1px solid ${COLORS.LIGHT_GRAY1};
+    border-radius: 0;
+  }
+
+  .react-datepicker__header--time {
+    border-bottom: 1px solid ${COLORS.LIGHT_GRAY1};
+  }
+
+  .react-datepicker-time__header {
+    font-size: 12px;
+    font-family: Poppins;
+    color: ${COLORS.PRIMARY_TEXT_COLOR};
+    font-weight: 600;
+  }
+
+  .react-datepicker__day--today {
+    font-size: 12px;
+    font-family: Poppins;
+    color: ${COLORS.PRIMARY_TEXT_COLOR};
+    font-weight: 600;
+  }
+
+  .react-datepicker__today-button {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 32px;
+    font-size: 12px;
+    font-family: Poppins;
+    color: ${COLORS.PRIMARY_TEXT_COLOR};
+    font-weight: 600;
+    border-top: 1px solid ${COLORS.LIGHT_GRAY1};
+  }
+
+  .react-datepicker__header {
+    padding: 0;
+    height: 64px;
+  }
+
+  .react-datepicker__day-names {
+    height: 32px;
+    font-size: 12px;
+    display: flex;
+    border-bottom: 1px solid ${COLORS.LIGHT_GRAY1};
+  }
+
+  .react-datepicker__current-month {
+    font-size: 13px;
+    font-weight: 600;
+    font-family: Poppins;
+    color: ${COLORS.PRIMARY_TEXT_COLOR};
+  }
+
   .react-datepicker__time-list-item {
+    align-items: center;
     display: flex;
+    font-size: 12px;
+    height: 32px !important;
     justify-content: center;
+    padding: 0 !important;
+  }
+
+  .react-datepicker__header--time,
+  .react-datepicker__current-month {
     align-items: center;
+    display: flex;
+    height: 32px;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .react-datepicker__navigation--previous {
+    border-right-color: ${COLORS.PRIMARY_TEXT_COLOR};
+    outline: none;
+  }
+
+  .react-datepicker__navigation--next {
+    border-left-color: ${COLORS.PRIMARY_TEXT_COLOR};
+    outline: none;
   }
 `;
 
+const name = 'dateInput';
+
+const theme = createComponentTheme(name, (options: *) => ({
+  globals: getGlobalCSS(options),
+}));
+
 type DateInputProps = {|
   onChange: (value: ?string) => void,
   value: ?string,
   withTime?: boolean,
   stretch?: boolean,
+  clearable?: boolean,
 |};
 
 type DateInputState = {|
@@ -125,7 +289,7 @@ class DateInput extends React.Component<DateInputProps, DateInputState> {
   render() {
     const collectedProps = this.collectProps();
 
-    const { value, withTime, stretch, onChange, ...rest } = this.props;
+    const { value, withTime, stretch, onChange, clearable, ...rest } = this.props;
 
     const { textValue, isOpen } = this.state;
     const mask = withTime ? utils.DATETIME_MASK : utils.DATE_MASK;
@@ -139,14 +303,14 @@ class DateInput extends React.Component<DateInputProps, DateInputState> {
         { ...rest }
       >
         <Dropdown.Head onClick={ this.open }>
-          <DateInputValue mask={ mask } value={ textValue } onChange={ this.onChangeText } onBlur={ this.onBlur } />
+          <DateInputValue mask={ mask } value={ textValue } onChange={ this.onChangeText } onBlur={ this.onBlur } clearable={ clearable } />
         </Dropdown.Head>
         <Dropdown.Body withPortal preventOverflow>
-          <DatePicker { ...collectedProps } />
+          <DatePicker { ...collectedProps } todayButton="Today" />
         </Dropdown.Body>
       </Dropdown>
     );
   }
 }
 
-export { DateInput };
+export { DateInput, theme };

src/components/DateInput/DateInput.stories.js

@@ -12,10 +12,10 @@ export default (asStory) => {
             <DateInput withTime />
           </StateContainer>
           <StateContainer value="2018-11-07">
-            <DateInput />
+            <DateInput clearable />
           </StateContainer>
           <StateContainer value="2018-11-29T21:00:00.000Z">
-            <DateInput withTime />
+            <DateInput withTime clearable />
           </StateContainer>
         </Column>
       ));

src/components/DateInput/DateInputValue.js

@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react';
-import 'react-datepicker/dist/react-datepicker.css';
 
 import { Input } from '../Input';
 
@@ -10,6 +9,7 @@ type DateInputValueProps = {|
   onBlur: () => void,
   value: ?string,
   mask: string,
+  clearable?: boolean,
 |};
 
 const DateInputValue = ({ value, onChange, ...props }: DateInputValueProps) => (

src/components/DateInput/index.js

@@ -1,3 +1,3 @@
 // @flow
 
-export { DateInput } from './DateInput';
+export { DateInput, theme } from './DateInput';

src/components/theme.js

@@ -35,6 +35,7 @@ import { theme as textAreaTheme } from './TextArea';
 import { theme as textTheme } from './Text';
 import { theme as tooltipTheme } from './Tooltip';
 import { theme as menuTheme } from './Menu';
+import { theme as dateInputTheme } from './DateInput';
 
 
 export const theme = {
@@ -73,4 +74,5 @@ export const theme = {
   ...textTheme,
   ...tooltipTheme,
   ...menuTheme,
+  ...dateInputTheme,
 };