From d468c9f1b3d23a166f6074e6797f615a3029cfcf Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sat, 21 Nov 2015 14:46:24 +0100
Subject: [PATCH] Add floating label for pickers. Fixes #137

---
 components/date_picker/index.jsx              |  8 ++---
 components/date_picker/readme.md              |  5 ++--
 components/time_picker/index.jsx              |  3 +-
 components/time_picker/readme.md              |  3 +-
 .../modules/examples/datepicker_example_1.txt | 15 ++++++----
 .../modules/examples/timepicker_example_1.txt |  2 +-
 spec/components/pickers.jsx                   | 30 ++++++++++++++-----
 7 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/components/date_picker/index.jsx b/components/date_picker/index.jsx
index 1490edee..82a6b07a 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/index.jsx
@@ -7,17 +7,13 @@ import time from '../utils/time';
 
 class DatePicker extends React.Component {
   static propTypes = {
+    label: React.PropTypes.string,
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
     onChange: React.PropTypes.func,
-    placeholder: React.PropTypes.string,
     value: React.PropTypes.object
   };
 
-  static defaultProps = {
-    placeholder: 'Choose a date'
-  };
-
   state = {
     active: false
   };
@@ -45,7 +41,7 @@ class DatePicker extends React.Component {
         <Input
           className={style.input}
           onMouseDown={this.handleInputMouseDown}
-          placeholder={this.props.placeholder}
+          label={this.props.label}
           readOnly={true}
           type='text'
           value={date}
diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md
index e8acc2af..b48d65f6 100644
--- a/components/date_picker/readme.md
+++ b/components/date_picker/readme.md
@@ -25,8 +25,8 @@ class DatePickerTest extends React.Component {
   render () {
     return (
       <section>
-        <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
-        <DatePicker minDate={min_datetime} value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
+        <DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
+        <DatePicker label='Expiration date' minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
       </section>
     );
   }
@@ -37,6 +37,7 @@ class DatePickerTest extends React.Component {
 
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
+| `label`         | `String`        |             | The text string to use for the floating label element in the input component.|
 | `maxDate`         | `Date`    |                 | Date object with the maximum selectable date. |
 | `minDate`         | `Date`    |                 | Date object with the minimum selectable date. |
 | `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
diff --git a/components/time_picker/index.jsx b/components/time_picker/index.jsx
index 6efd6e58..f92e3dc5 100644
--- a/components/time_picker/index.jsx
+++ b/components/time_picker/index.jsx
@@ -9,6 +9,7 @@ class TimePicker extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
+    label: React.PropTypes.string,
     onChange: React.PropTypes.func,
     value: React.PropTypes.object
   };
@@ -43,8 +44,8 @@ class TimePicker extends React.Component {
       <div data-react-toolbox='time-picker'>
         <Input
           className={style.input}
+          label={this.props.label}
           onMouseDown={this.handleInputMouseDown}
-          placeholder='Pick up time'
           readOnly={true}
           type='text'
           value={formattedTime}
diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md
index 7d2a7068..e4d487fb 100644
--- a/components/time_picker/readme.md
+++ b/components/time_picker/readme.md
@@ -11,7 +11,7 @@ selectedTime.setHours(17);
 selectedTime.setMinutes(28);
 
 const TimePickerTest = () => (
-  <TimePicker value={selectedTime} />
+  <TimePicker label='Finishing time' value={selectedTime} />
 );
 ```
 
@@ -21,5 +21,6 @@ const TimePickerTest = () => (
 |:-----|:-----|:-----|:-----|
 | `className`  | `String`    |     `''`            | Sets a class to give customized styles.|
 | `format`    | `String`  | `24hr`          | Format to display the clock. It can be `24hr` or `ampm`.|
+| `label`         | `String`        |             | The text string to use for the floating label element in the input component.|
 | `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
 | `value`     | `Date`    |   | Datetime object with currrently selected time |
diff --git a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
index 77abdfb7..e44e507c 100644
--- a/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
@@ -18,12 +18,17 @@ class DatePickerTest extends React.Component {
   render () {
     return (
       <section>
-        <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
-        <DatePicker 
-          maxDate={max_datetime}
+        <DatePicker
+          label='Birthdate'
+          onChange={this.handleChange.bind(this, 'date1')}
+          value={this.state.date1}
+        />
+
+        <DatePicker
+          label='Expiration date'
           minDate={min_datetime}
-          value={this.state.date2} 
-          onChange={this.handleChange.bind(this, 'date2')} 
+          onChange={this.handleChange.bind(this, 'date2')}
+          value={this.state.date2}
         />
       </section>
     );
diff --git a/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt b/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
index 599fd668..b29784a4 100644
--- a/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
@@ -3,7 +3,7 @@ selectedTime.setHours(17);
 selectedTime.setMinutes(28);
 
 const TimePickerTest = () => (
-  <TimePicker value={selectedTime} />
+  <TimePicker label='Finishing time' value={selectedTime} />
 );
 
 return <TimePickerTest />
diff --git a/spec/components/pickers.jsx b/spec/components/pickers.jsx
index b1ec213d..02c5dd0c 100644
--- a/spec/components/pickers.jsx
+++ b/spec/components/pickers.jsx
@@ -27,16 +27,32 @@ class PickersTest extends React.Component {
         <h5>Pickers</h5>
         <p>Date pickers and time pickers with Material flavour.</p>
 
-        <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
         <DatePicker
-          maxDate={max_datetime}
-          minDate={min_datetime}
-          value={this.state.date2}
-          onChange={this.handleChange.bind(this, 'date2')}
+          label='Birthdate'
+          onChange={this.handleChange.bind(this, 'date1')}
+          value={this.state.date1}
         />
 
-        <TimePicker value={this.state.time1} onChange={this.handleChange.bind(this, 'time1')} />
-        <TimePicker value={this.state.time2} format='ampm' onChange={this.handleChange.bind(this, 'time2')} />
+        <DatePicker
+          label='Expiration date'
+          maxDate={max_datetime}
+          minDate={min_datetime}
+          onChange={this.handleChange.bind(this, 'date2')}
+          value={this.state.date2}
+        />
+
+        <TimePicker
+          label='Start time'
+          onChange={this.handleChange.bind(this, 'time1')}
+          value={this.state.time1}
+        />
+
+        <TimePicker
+          format='ampm'
+          label='Finishing time'
+          onChange={this.handleChange.bind(this, 'time2')}
+          value={this.state.time2}
+        />
       </section>
     );
   }