[Datepicker] Redesign as per material spec

Redesign the current Datepicker as per material design spec.
This PR deals with the following:
- [ ] Fixes left pane length
- [ ] Fixes Font weight of left pane date
- [ ] Action buttons are part of calender
- [ ] Action buttons in the year container
- [ ] Vertical Spacing in calendar Month reduced
- [ ] Aligned left and right arrows with days of week
- [ ] Flex design in calender toolbar
- [ ] Incorporated flex design for the overall calender and datepicker
- [ ] Fix both dialog and inline calendar
- [ ] Changed year Selector in Year Container as per Material Spec.

Closes #3603

src/date-picker/calendar-action-buttons.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import FlatButton from '../flat-button';
+
+const CalendarActionButton = React.createClass({
+  propTypes: {
+    autoOk: React.PropTypes.bool,
+    cancelLabel: React.PropTypes.string,
+    okLabel: React.PropTypes.string,
+    onCancelTouchTap: React.PropTypes.func,
+    onOKTouchTap: React.PropTypes.func,
+    wordings: React.PropTypes.object,
+  },
+
+  getDefaultProps: function() {
+    return {
+      okLabel: 'OK',
+      cancelLabel: 'Cancel',
+    };
+  },
+
+  render() {
+    const {
+      cancelLabel,
+      okLabel,
+      wordings,
+    } = this.props;
+
+    const styles = {
+      buttonGroup: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        height: 40,
+      },
+      flatButtons: {
+        alignSelf: 'flex-end',
+      },
+    };
+
+    const actions = [
+      <FlatButton
+        key={0}
+        label={wordings ? wordings.cancel : cancelLabel}
+        primary={true}
+        style={styles.flatButtons}
+        onTouchTap={this.props.onCancelTouchTap}
+      />,
+    ];
+
+    if (!this.props.autoOk) {
+      actions.push(
+        <FlatButton
+          key={1}
+          label={wordings ? wordings.ok : okLabel}
+          primary={true}
+          disabled={this.refs.calendar !== undefined && this.refs.calendar.isSelectedDateDisabled()}
+          style={styles.flatButtons}
+          onTouchTap={this.props.onOKTouchTap}
+        />
+      );
+    }
+
+    return (
+      <div style={styles.buttonGroup} >
+      {actions}
+      </div>
+    );
+  },
+
+});
+
+export default CalendarActionButton;

src/date-picker/calendar-month.jsx

@@ -72,9 +72,14 @@ const CalendarMonth = React.createClass({
 
   render() {
     const styles = {
-      lineHeight: '32px',
+      lineHeight: '25px',
       textAlign: 'center',
-      padding: '16px 14px 0 14px',
+      padding: '0px 0px 0 0px',
+      display: 'flex',
+      flexDirection: 'column',
+      alignContent: 'space-between',
+      justifyContent: 'space-between',
+      paddingLeft: 10,
     };
 
     return (

src/date-picker/calendar-toolbar.jsx

@@ -12,17 +12,24 @@ const styles = {
     position: 'relative',
     padding: 0,
     backgroundColor: 'inherit',
+    display: 'flex',
+    justifyContent: 'space-between',
+    height: 40,
   },
   title: {
-    position: 'absolute',
+    position: 'relative',
     top: 17,
     lineHeight: '14px',
     fontSize: 14,
-    height: 14,
+    height: 16,
     width: '100%',
     fontWeight: '500',
     textAlign: 'center',
   },
+  button: {
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
 };
 
 const CalendarToolbar = React.createClass({
@@ -55,7 +62,7 @@ const CalendarToolbar = React.createClass({
   getInitialState() {
     return {
       muiTheme: this.context.muiTheme || getMuiTheme(),
-      transitionDirection: 'up',
+      transitionDirection: 'right',
     };
   },
 
@@ -72,7 +79,7 @@ const CalendarToolbar = React.createClass({
     this.setState({muiTheme: newMuiTheme});
 
     if (nextProps.displayDate !== this.props.displayDate) {
-      const direction = nextProps.displayDate > this.props.displayDate ? 'up' : 'down';
+      const direction = nextProps.displayDate > this.props.displayDate ? 'right' : 'left';
       this.setState({
         transitionDirection: direction,
       });
@@ -104,12 +111,6 @@ const CalendarToolbar = React.createClass({
 
     return (
       <Toolbar style={styles.root} noGutter={true}>
-        <SlideInTransitionGroup
-          style={styles.title}
-          direction={this.state.transitionDirection}
-        >
-          <div key={dateTimeFormatted}>{dateTimeFormatted}</div>
-        </SlideInTransitionGroup>
         <ToolbarGroup key={0} float="left">
           <IconButton
             style={styles.button}
@@ -119,6 +120,12 @@ const CalendarToolbar = React.createClass({
             {nextButtonIcon}
           </IconButton>
         </ToolbarGroup>
+        <SlideInTransitionGroup
+          style={styles.title}
+          direction={this.state.transitionDirection}
+        >
+          <div key={dateTimeFormatted}>{dateTimeFormatted}</div>
+        </SlideInTransitionGroup>
         <ToolbarGroup key={1} float="right">
           <IconButton
             style={styles.button}

src/date-picker/calendar-year.jsx

@@ -12,6 +12,7 @@ const CalendarYear = React.createClass({
     minDate: React.PropTypes.object,
     onYearTouchTap: React.PropTypes.func,
     selectedDate: React.PropTypes.object.isRequired,
+    wordings: React.PropTypes.object,
   },
 
   contextTypes: {
@@ -97,7 +98,7 @@ const CalendarYear = React.createClass({
       height: 'inherit',
       lineHeight: '36px',
       textAlign: 'center',
-      padding: '8px 14px 0 14px',
+     /* padding: '0px 14px 0 14px',*/
       backgroundColor: backgroundColor,
       overflowX: 'hidden',
       overflowY: 'scroll',

src/date-picker/calendar.jsx

@@ -7,7 +7,7 @@ import CalendarMonth from './calendar-month';
 import CalendarYear from './calendar-year';
 import CalendarToolbar from './calendar-toolbar';
 import DateDisplay from './date-display';
-import SlideInTransitionGroup from '../transition-groups/slide-in';
+import CalendarActionButton from './calendar-action-buttons';
 import ClearFix from '../clearfix';
 import getMuiTheme from '../styles/getMuiTheme';
 
@@ -17,16 +17,20 @@ const Calendar = React.createClass({
 
   propTypes: {
     DateTimeFormat: React.PropTypes.func.isRequired,
+    autoOk: React.PropTypes.bool,
     disableYearSelection: React.PropTypes.bool,
     firstDayOfWeek: React.PropTypes.number,
     initialDate: React.PropTypes.object,
     locale: React.PropTypes.string.isRequired,
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
     mode: React.PropTypes.oneOf(['portrait', 'landscape']),
+    onCancelTouchTap: React.PropTypes.func,
     onDayTouchTap: React.PropTypes.func,
+    onOKTouchTap: React.PropTypes.func,
     open: React.PropTypes.bool,
     shouldDisableDate: React.PropTypes.func,
+    wordings: React.PropTypes.object,
   },
 
   contextTypes: {
@@ -54,6 +58,7 @@ const Calendar = React.createClass({
       selectedDate: this.props.initialDate,
       transitionDirection: 'left',
       transitionEnter: true,
+      open: true,
     };
   },
 
@@ -229,7 +234,6 @@ const Calendar = React.createClass({
       }
     }
   },
-
   render() {
     const {
       prepareStyles,
@@ -244,53 +248,73 @@ const Calendar = React.createClass({
         fontSize: 12,
       },
       calendarContainer: {
-        width: isLandscape ? 320 : '100%',
-        height: weekCount === 5 ? 284 :
-          weekCount === 6 ? 324 : 244,
+        width: isLandscape ? 300 : 'auto',
+        height: weekCount === 5 ? 280 :
+          weekCount === 6 ? 310 : 244,
         float: isLandscape ? 'right' : 'none',
-        transition: Transitions.easeOut('150ms', 'height'),
-        overflow: 'hidden',
+        transition: Transitions.easeOut(),
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
       },
       yearContainer: {
-        width: 280,
+        width: isLandscape ? 300 : 300,
         overflow: 'hidden',
-        height: yearCount < 6 ? yearCount * 56 + 10 :
-          weekCount === 5 ? 284 :
-          weekCount === 6 ? 324 : 244,
+        height: yearCount < 6 ? yearCount * 56 + 100 :
+          weekCount === 5 ? 280 :
+          weekCount === 6 ? 300 : 244,
         float: isLandscape ? 'right' : 'none',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
       },
       dateDisplay: {
-        width: isLandscape ? 120 : '',
+        width: isLandscape ? 130 : '',
         height: isLandscape ?
-          weekCount === 5 ? 238 :
+          weekCount === 5 ? 240 :
           weekCount === 6 ? 278 :
           198 : 'auto',
         float: isLandscape ? 'left' : 'none',
+        fontWeight: 'bolder',
       },
       weekTitle: {
-        padding: '0 14px',
-        lineHeight: '12px',
+        padding: '0 0px',
+        lineHeight: '30px',
         opacity: '0.5',
-        height: 12,
+        height: 25,
         fontWeight: '500',
         margin: 0,
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingLeft: 0,
       },
       weekTitleDay: {
         listStyle: 'none',
         float: 'left',
         width: 37,
         textAlign: 'center',
-        margin: '0 2px',
+        margin: '0 0px',
+      },
+      buttonGroup: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        height: 40,
+      },
+      flatButtons: {
+        alignSelf: 'flex-end',
       },
     };
 
     const weekTitleDayStyle = prepareStyles(styles.weekTitleDay);
     const {
       DateTimeFormat,
+      autoOk,
       locale,
       firstDayOfWeek,
+      wordings,
     } = this.props;
-
     return (
       <ClearFix style={styles.root}>
         <EventListener
@@ -330,24 +354,33 @@ const Calendar = React.createClass({
                 </li>
               ))}
             </ClearFix>
-            <SlideInTransitionGroup direction={this.state.transitionDirection}>
-              <CalendarMonth
-                key={this.state.displayDate.toDateString()}
-                ref="calendar"
-                displayDate={this.state.displayDate}
-                onDayTouchTap={this._handleDayTouchTap}
-                selectedDate={this.state.selectedDate}
-                minDate={this.props.minDate}
-                maxDate={this.props.maxDate}
-                shouldDisableDate={this.props.shouldDisableDate}
-                firstDayOfWeek={this.props.firstDayOfWeek}
-              />
-            </SlideInTransitionGroup>
+            <CalendarMonth
+              key={this.state.displayDate.toDateString()}
+              ref="calendar"
+              displayDate={this.state.displayDate}
+              onDayTouchTap={this._handleDayTouchTap}
+              selectedDate={this.state.selectedDate}
+              minDate={this.props.minDate}
+              maxDate={this.props.maxDate}
+              shouldDisableDate={this.props.shouldDisableDate}
+              firstDayOfWeek={this.props.firstDayOfWeek}
+            />
+            <CalendarActionButton
+              autoOk={this.props.autoOk}
+              onCancelTouchTap={this.props.onCancelTouchTap}
+              onOKTouchTap={this.props.onOKTouchTap}
+            />
           </div>
         }
         {!this.state.displayMonthDay &&
           <div style={prepareStyles(styles.yearContainer)}>
             {this._yearSelector()}
+            <CalendarActionButton
+              autoOk={autoOk}
+              onCancelTouchTap={this.props.onCancelTouchTap}
+              onOKTouchTap={this.props.onOKTouchTap}
+              wordings={wordings}
+            />
           </div>
         }
       </ClearFix>