From 1098b592868444f9029fadbd74bd32e33cb7dfe8 Mon Sep 17 00:00:00 2001
From: Ty <ty@dice.fm>
Date: Wed, 21 Oct 2015 13:46:48 +0100
Subject: [PATCH] TimePicker style and textFieldStyle props

---
 .../pages/components/time-picker.jsx          | 26 +++++++++++++++++++
 .../components/raw-code/time-picker-code.txt  | 12 +++++++++
 src/time-picker/time-picker.jsx               | 12 ++++++++-
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/docs/src/app/components/pages/components/time-picker.jsx b/docs/src/app/components/pages/components/time-picker.jsx
index 29729437f5f1c0..c231ed1207353f 100644
--- a/docs/src/app/components/pages/components/time-picker.jsx
+++ b/docs/src/app/components/pages/components/time-picker.jsx
@@ -49,6 +49,18 @@ let TimePickerPage = React.createClass({
             header: 'default: false',
             desc: 'It\'s technically more correct to refer to "12 noon" and "12 midnight" rather than "12 a.m." and "12 p.m." and it avoids real confusion between different locales. By default (for compatibility reasons) TimePicker uses (12 a.m./12 p.m.) To use (noon/midnight) set pedantic={true}.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of TimePicker\'s root element.',
+          },
+          {
+            name: 'textFieldStyle',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of TimePicker\'s TextField element.',
+          },
         ],
       },
       {
@@ -137,6 +149,20 @@ let TimePickerPage = React.createClass({
             format="24hr"
             hintText="AutoOk"
             autoOk={true} />
+
+          <TimePicker
+            ref="pickerTextfieldStyle"
+            format="24hr"
+            hintText="Override text field style"
+            textFieldStyle={{ fontSize: 'x-large' }} />
+
+          <TimePicker
+            ref="pickerStyle"
+            format="24hr"
+            hintText="Override style"
+            textFieldStyle={{ width: '80%' }}
+            style={{ padding: '5px', borderRadius: '5px', backgroundColor: '#d1d1d1' }} />
+
         </CodeExample>
       </ComponentDoc>
     );
diff --git a/docs/src/app/components/raw-code/time-picker-code.txt b/docs/src/app/components/raw-code/time-picker-code.txt
index 3b99da56d9692a..54061ebef9ca7f 100644
--- a/docs/src/app/components/raw-code/time-picker-code.txt
+++ b/docs/src/app/components/raw-code/time-picker-code.txt
@@ -12,3 +12,15 @@
 <TimePicker
   hintText="AutoOk"
   autoOk={true} />
+
+//Override TextField/Input Style
+<TimePicker
+  format="24hr"
+  hintText="Override text field style"
+  textFieldStyle={{ fontSize: 'x-large' }} />
+
+//Override Container/Root Element Style
+<TimePicker
+  hintText="Override style"
+  textFieldStyle={{ width: '80%' }}
+  style={{ padding: '5px', borderRadius: '5px', backgroundColor: '#d1d1d1' }} />
diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx
index 9b78a57d4d28ba..a8fab683100d21 100644
--- a/src/time-picker/time-picker.jsx
+++ b/src/time-picker/time-picker.jsx
@@ -24,6 +24,12 @@ const TimePicker = React.createClass({
     onChange: React.PropTypes.func,
     onShow: React.PropTypes.func,
     onDismiss: React.PropTypes.func,
+    style: React.PropTypes.object,
+    textFieldStyle: React.PropTypes.object,
+  },
+
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
   },
 
   windowListeners: {
@@ -36,6 +42,7 @@ const TimePicker = React.createClass({
       format: 'ampm',
       pedantic: false,
       autoOk: false,
+      style: {},
     };
   },
 
@@ -84,6 +91,8 @@ const TimePicker = React.createClass({
       onTouchTap,
       onShow,
       onDismiss,
+      style,
+      textFieldStyle,
       ...other,
     } = this.props;
 
@@ -94,9 +103,10 @@ const TimePicker = React.createClass({
     }
 
     return (
-      <div>
+      <div style={this.prepareStyles(style)}>
         <TextField
           {...other}
+          style={textFieldStyle}
           ref="input"
           defaultValue={defaultInputValue}
           onFocus={this._handleInputFocus}