Add pickers classNames to customize appereance

Author: javivelasco

components/date_picker/DatePicker.jsx

@@ -7,6 +7,7 @@ import time from '../utils/time';
 
 class DatePicker extends React.Component {
   static propTypes = {
+    className: React.PropTypes.string,
     error: React.PropTypes.string,
     label: React.PropTypes.string,
     maxDate: React.PropTypes.object,
@@ -50,6 +51,7 @@ class DatePicker extends React.Component {
         />
         <DatePickerDialog
           active={this.state.active}
+          className={this.props.className}
           maxDate={this.props.maxDate}
           minDate={this.props.minDate}
           onDismiss={this.handleDismiss}

components/date_picker/readme.md

@@ -33,6 +33,7 @@ class DatePickerTest extends React.Component {
 
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
+| `className`         | `String`        |             | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
 | `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. |

components/time_picker/TimePicker.jsx

@@ -54,6 +54,7 @@ class TimePicker extends React.Component {
         />
         <TimePickerDialog
           active={this.state.active}
+          className={this.props.className}
           format={format}
           onDismiss={this.handleDismiss}
           onSelect={this.handleSelect}

components/time_picker/TimePickerDialog.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import style from './style';
 import time from '../utils/time';
 import Clock from './Clock';
@@ -7,6 +8,7 @@ import Dialog from '../dialog';
 class TimePickerDialog extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
+    className: React.PropTypes.string,
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     onDismiss: React.PropTypes.func,
     onSelect: React.PropTypes.func,
@@ -77,7 +79,7 @@ class TimePickerDialog extends React.Component {
   render () {
     const display = `display-${this.state.display}`;
     const format = `format-${time.getTimeMode(this.state.displayTime)}`;
-    const className = `${style.dialog} ${style[display]} ${style[format]}`;
+    const className = ClassNames([style.dialog, style[display], style[format]], this.props.className);
     return (
       <Dialog active={this.props.active} className={className} actions={this.actions}>
         <header className={style.header}>

components/time_picker/readme.md

@@ -26,7 +26,7 @@ class TimePickerTest extends React.Component {
 
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`  | `String`    |     `''`            | Sets a class to give customized styles.|
+| `className`         | `String`        |             | This class will be placed at the top of the `TimePickerDialog` component so you can provide custom 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.|