From b4bd3b66e71a41b165105253fed0511bdf1a669b Mon Sep 17 00:00:00 2001
From: M03M <muhammad_martinez@yahoo.com>
Date: Tue, 17 Mar 2015 14:23:45 -0500
Subject: [PATCH 1/3] Made EnhancedButton's onKeyboardFocus prop optional.

---
 src/js/date-picker/calendar.jsx           |  1 -
 src/js/date-picker/date-picker-dialog.jsx |  2 +-
 src/js/date-picker/date-picker.jsx        |  1 +
 src/js/date-picker/day-button.jsx         |  6 +++++-
 src/js/enhanced-button.jsx                | 11 +++++------
 src/js/flat-button.jsx                    |  2 +-
 src/js/floating-action-button.jsx         |  2 +-
 src/js/icon-button.jsx                    |  2 +-
 src/js/raised-button.jsx                  |  2 +-
 9 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/js/date-picker/calendar.jsx b/src/js/date-picker/calendar.jsx
index 195cf11599f2f3..491e047b3fff22 100644
--- a/src/js/date-picker/calendar.jsx
+++ b/src/js/date-picker/calendar.jsx
@@ -160,7 +160,6 @@ var Calendar = React.createClass({
 
   _setSelectedDate: function(d) {
     var newDisplayDate = DateTime.getFirstDayOfMonth(d);
-
     if (newDisplayDate !== this.state.displayDate) {
       this._setDisplayDate(newDisplayDate, d);
     } else {
diff --git a/src/js/date-picker/date-picker-dialog.jsx b/src/js/date-picker/date-picker-dialog.jsx
index 723c40fae1f7d4..bf9e1d3ef96253 100644
--- a/src/js/date-picker/date-picker-dialog.jsx
+++ b/src/js/date-picker/date-picker-dialog.jsx
@@ -54,7 +54,7 @@ var DatePickerDialog = React.createClass({
         fontSize: '14px',
         color: CustomVariables.datePickerCalendarTextColor
       },
-
+      
       dialogContents: {
         width: this.props.mode === 'landscape' ? '560px' : '280px'
       }
diff --git a/src/js/date-picker/date-picker.jsx b/src/js/date-picker/date-picker.jsx
index bf294e6efd6e6a..ff25f8ff456f22 100644
--- a/src/js/date-picker/date-picker.jsx
+++ b/src/js/date-picker/date-picker.jsx
@@ -68,6 +68,7 @@ var DatePicker = React.createClass({
           onTouchTap={this._handleInputTouchTap} />
         <DatePickerDialog
           ref="dialogWindow"
+          mode={this.props.mode}
           initialDate={this.state.dialogDate}
           onAccept={this._handleDialogAccept}
           onShow={onShow}
diff --git a/src/js/date-picker/day-button.jsx b/src/js/date-picker/day-button.jsx
index 731332dce1e9a7..5852da618bf258 100644
--- a/src/js/date-picker/day-button.jsx
+++ b/src/js/date-picker/day-button.jsx
@@ -42,7 +42,11 @@ var DayButton = React.createClass({
 
   _handleTouchTap: function(e) {
     if (this.props.onTouchTap) this.props.onTouchTap(e, this.props.date);
-  }
+  },
+
+  _handleKeyboardFocus: function(e, keyboardFocused) {
+    if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, keyboardFocused, this.props.date);
+  } 
 
 });
 
diff --git a/src/js/enhanced-button.jsx b/src/js/enhanced-button.jsx
index 329eb07acf4164..9fe5106604f2bf 100644
--- a/src/js/enhanced-button.jsx
+++ b/src/js/enhanced-button.jsx
@@ -22,7 +22,8 @@ var EnhancedButton = React.createClass({
     touchRippleOpacity: React.PropTypes.number,
     onBlur: React.PropTypes.func,
     onFocus: React.PropTypes.func,
-    onTouchTap: React.PropTypes.func
+    onTouchTap: React.PropTypes.func,
+    onKeyboardFocus: React.PropTypes.func,
   },
 
   windowListeners: {
@@ -141,8 +142,7 @@ var EnhancedButton = React.createClass({
     this.setState({
       isKeyboardFocused: false
     });
-    this.props.onKeyboardFocus(false);
-
+    if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, false);
     if (this.props.onBlur) this.props.onBlur(e);
   },
 
@@ -156,7 +156,7 @@ var EnhancedButton = React.createClass({
         this.setState({
           isKeyboardFocused: true
         });
-        this.props.onKeyboardFocus(true);
+        if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, true);
       }
     }.bind(this), 150);
     
@@ -173,8 +173,7 @@ var EnhancedButton = React.createClass({
     this.setState({
       isKeyboardFocused: false
     });
-    this.props.onKeyboardFocus(false);
-
+    if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, false);
     if (this.props.onTouchTap) this.props.onTouchTap(e);
   }
 
diff --git a/src/js/flat-button.jsx b/src/js/flat-button.jsx
index e123e6f7ab0006..a5ab90560a0bba 100644
--- a/src/js/flat-button.jsx
+++ b/src/js/flat-button.jsx
@@ -120,7 +120,7 @@ var FlatButton = React.createClass({
     if (this.props.onMouseOut) this.props.onMouseOut(e);
   },
 
-  _handleKeyboardFocus: function(keyboardFocused) {
+  _handleKeyboardFocus: function(e, keyboardFocused) {
 
     if (keyboardFocused && !this.props.disabled) {
       this.getDOMNode().style.backgroundColor = ColorManipulator.fade(ColorManipulator.lighten(this._main().color, 0.4), 0.15);
diff --git a/src/js/floating-action-button.jsx b/src/js/floating-action-button.jsx
index 6489a801786045..3501ab3be9af0c 100644
--- a/src/js/floating-action-button.jsx
+++ b/src/js/floating-action-button.jsx
@@ -209,7 +209,7 @@ var RaisedButton = React.createClass({
     if (this.props.onTouchEnd) this.props.onTouchEnd(e);
   },
 
-  _handleKeyboardFocus: function(keyboardFocused) {
+  _handleKeyboardFocus: function(e, keyboardFocused) {
     if (keyboardFocused && !this.props.disabled) {
       this.setState({ zDepth: this.state.initialZDepth + 1 });
       this.refs.overlay.getDOMNode().style.backgroundColor = ColorManipulator.fade(this._icon().color, 0.4);
diff --git a/src/js/icon-button.jsx b/src/js/icon-button.jsx
index c0320ccfa56aeb..bec9516aacf14f 100644
--- a/src/js/icon-button.jsx
+++ b/src/js/icon-button.jsx
@@ -154,7 +154,7 @@ var IconButton = React.createClass({
     if (this.props.onMouseOver) this.props.onMouseOver(e);
   },
 
-  _handleKeyboardFocus: function(keyboardFocused) {
+  _handleKeyboardFocus: function(e, keyboardFocused) {
     if (keyboardFocused && !this.props.disabled) {
       this._showTooltip();
       if (this.props.onFocus) this.props.onFocus(e);
diff --git a/src/js/raised-button.jsx b/src/js/raised-button.jsx
index 9e442b2a3952be..a85b4da265e526 100644
--- a/src/js/raised-button.jsx
+++ b/src/js/raised-button.jsx
@@ -188,7 +188,7 @@ var RaisedButton = React.createClass({
     if (this.props.onTouchEnd) this.props.onTouchEnd(e);
   },
 
-  _handleKeyboardFocus: function(keyboardFocused) {
+  _handleKeyboardFocus: function(e, keyboardFocused) {
     if (keyboardFocused && !this.props.disabled) {
       this.setState({ zDepth: this.state.initialZDepth + 1 });
       var amount = (this.props.primary || this.props.secondary) ? 0.4 : 0.08;

From 1b6e69666de6baff77127d9f7ed8cf231a6bf8c8 Mon Sep 17 00:00:00 2001
From: M03M <muhammad_martinez@yahoo.com>
Date: Tue, 17 Mar 2015 14:32:42 -0500
Subject: [PATCH 2/3] Refactored css for date picker day button

---
 src/js/date-picker/day-button.jsx             | 54 +++++++++++++++----
 src/less/components/components.less           |  1 -
 .../components/date-picker/date-picker.less   |  2 -
 .../components/date-picker/day-button.less    | 35 ------------
 src/less/variables/custom-variables.less      |  4 +-
 5 files changed, 45 insertions(+), 51 deletions(-)
 delete mode 100644 src/less/components/date-picker/date-picker.less
 delete mode 100644 src/less/components/date-picker/day-button.less

diff --git a/src/js/date-picker/day-button.jsx b/src/js/date-picker/day-button.jsx
index 5852da618bf258..72235a7859a8dc 100644
--- a/src/js/date-picker/day-button.jsx
+++ b/src/js/date-picker/day-button.jsx
@@ -1,11 +1,13 @@
 var React = require('react');
-var Classable = require('../mixins/classable');
+var StylePropable = require('../mixins/style-propable');
+var Transition = require('../styles/mixins/transitions');
+var CustomVariables = require('../styles/variables/custom-variables');
 var DateTime = require('../utils/date-time');
 var EnhancedButton = require('../enhanced-button');
 
 var DayButton = React.createClass({
 
-  mixins: [Classable],
+  mixins: [StylePropable],
 
   propTypes: {
     date: React.PropTypes.object,
@@ -21,22 +23,52 @@ var DayButton = React.createClass({
       selected,
       ...other
     } = this.props;
-    var classes = this.getClasses('mui-date-picker-day-button', { 
-      'mui-is-current-date': DateTime.isEqualDate(this.props.date, new Date()),
-      'mui-is-selected': this.props.selected
-    });
+
+    var styles = {
+      root: {
+        position: 'relative',
+        float: 'left',
+        width: 36,
+        padding: '4px 2px',
+      },
+
+      label: {
+        position: 'relative',
+      },
+
+      select: {
+        position: 'absolute',
+        height: 32,
+        width: 32,
+        opacity: 0,
+        borderRadius: '50%',
+        transform: 'scale(0)',
+        transition: Transition.easeOut(),
+        backgroundColor: CustomVariables.datePickerSelectColor,
+      },
+    };
+
+    if (this.props.selected) {
+      styles.label.color = CustomVariables.datePickerSelectTextColor;
+      styles.select.opacity = 1;
+      styles.select.transform = 'scale(1)';
+      if (DateTime.isEqualDate(this.props.date, new Date())) {
+        styles.root.color = CustomVariables.datePickerColor;
+      }
+    }
 
     return this.props.date ? (
       <EnhancedButton {...other}
-        className={classes}
+        style={styles.root}
         disableFocusRipple={true}
         disableTouchRipple={true}
-        onTouchTap={this._handleTouchTap}>
-        <div className="mui-date-picker-day-button-select" />
-        <span className="mui-date-picker-day-button-label">{this.props.date.getDate()}</span>
+        onTouchTap={this._handleTouchTap}
+        onKeyboardFocus={this._handleKeyboardFocus}>
+        <div style={styles.select}/>
+        <span style={styles.label}>{this.props.date.getDate()}</span>
       </EnhancedButton>
     ) : (
-      <span className={classes} />
+      <span style={styles.root} />
     );
   },
 
diff --git a/src/less/components/components.less b/src/less/components/components.less
index 04cad2f5119629..e3aae64c969f1a 100644
--- a/src/less/components/components.less
+++ b/src/less/components/components.less
@@ -1,3 +1,2 @@
-@import "date-picker/date-picker.less";
 @import "paper.less";
 @import "toolbar.less";
\ No newline at end of file
diff --git a/src/less/components/date-picker/date-picker.less b/src/less/components/date-picker/date-picker.less
deleted file mode 100644
index 2586ca17089146..00000000000000
--- a/src/less/components/date-picker/date-picker.less
+++ /dev/null
@@ -1,2 +0,0 @@
-
-@import "day-button.less";
diff --git a/src/less/components/date-picker/day-button.less b/src/less/components/date-picker/day-button.less
deleted file mode 100644
index 61e7fc3292be9d..00000000000000
--- a/src/less/components/date-picker/day-button.less
+++ /dev/null
@@ -1,35 +0,0 @@
-.mui-date-picker-day-button {
-  position: relative;
-  float: left;
-  width: 36px;
-  padding: 4px 2px;
-
-  .mui-date-picker-day-button-select {
-    position: absolute;
-    background-color: @date-picker-select-color;
-    height: 32px;
-    width: 32px;
-    opacity: 0;
-    border-radius: 50%;
-    transform: scale(0);
-    .ease-out();
-  }
-
-  .mui-date-picker-day-button-label {
-    position: relative;
-  }
-
-  &.mui-is-selected {
-    .mui-date-picker-day-button-label {
-      color: @date-picker-select-text-color;
-    }
-    .mui-date-picker-day-button-select {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  &.mui-is-current-date {
-    color: @date-picker-color;
-  }
-}
\ No newline at end of file
diff --git a/src/less/variables/custom-variables.less b/src/less/variables/custom-variables.less
index e0ade7eb1b0264..38059fc68e5e81 100644
--- a/src/less/variables/custom-variables.less
+++ b/src/less/variables/custom-variables.less
@@ -30,8 +30,8 @@
 //Disabled Colors
 @disabled-color: fade(@body-text-color, 30%);
 
-//Date Picker
-@date-picker-color: @primary-1-color;
+// //Date Picker
+ @date-picker-color: @primary-1-color;
 @date-picker-text-color: @white;
 @date-picker-calendar-text-color: @body-text-color;
 @date-picker-select-color: @primary-2-color;

From 5d2b7d162385c7da25ceb030f41de9ed139c2627 Mon Sep 17 00:00:00 2001
From: M03M <muhammad_martinez@yahoo.com>
Date: Tue, 17 Mar 2015 14:35:13 -0500
Subject: [PATCH 3/3] Forgot to remove unused datepicker variables.

---
 src/less/variables/custom-variables.less | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/less/variables/custom-variables.less b/src/less/variables/custom-variables.less
index 38059fc68e5e81..dfbfa79b0f4bca 100644
--- a/src/less/variables/custom-variables.less
+++ b/src/less/variables/custom-variables.less
@@ -30,13 +30,6 @@
 //Disabled Colors
 @disabled-color: fade(@body-text-color, 30%);
 
-// //Date Picker
- @date-picker-color: @primary-1-color;
-@date-picker-text-color: @white;
-@date-picker-calendar-text-color: @body-text-color;
-@date-picker-select-color: @primary-2-color;
-@date-picker-select-text-color: @white;
-
 // buttons
 @button-height: 36px;
 @button-min-width: 88px;