Merge pull request #353 from salesforce-ux/timeDatePicker

Add hover style & flippable prop to Timepicker and Datepicker

Author: tweettypography

RELEASENOTES.md

@@ -2,6 +2,11 @@
 # React Components: design-system-react
 # Release notes
 
+## Release 0.0.34
+**BREAKING CHANGES**
+- Flippable prop on Timepicker and Datepicker used to default to true. Now, it defaults to false and you must explicitly add it.
+
+
 ## Release 0.0.33
 
 **MAJOR CHANGES**

components/date-picker/index.jsx

@@ -20,6 +20,10 @@ import {KEYS,EventUtil} from '../../utilities';
 const displayName = 'Datepicker';
 const propTypes = {
   abbrWeekDayLabels: React.PropTypes.array,
+  /**
+   * If true, allows popover to appear above input field based on available space with scroll position.
+   */
+  flippable: React.PropTypes.bool,
   /**
    * Date formatting function
    */
@@ -142,7 +146,7 @@ module.exports = React.createClass({
   popover() {
     if(this.state && this.state.isOpen){
       const date = this.state.strValue?this.parseDate(this.state.strValue):this.state.value;
-      return <Popover className='slds-dropdown' targetElement={this.refs.date} onClose={this.handleClose}>
+      return <Popover className='slds-dropdown' flippable={this.props.flippable} targetElement={this.refs.date} onClose={this.handleClose}>
         <DatePicker
           onChange={this.handleChange}
           selected={this.state.selected}
@@ -207,15 +211,17 @@ module.exports = React.createClass({
             <input
               id={this.inputRefName()}
               ref='date'
-              className='slds-input'
+              className='slds-input slds-button--neutral slds-text-align--left'
               type='text'
               placeholder={this.props.placeholder}
               value={this.state.strValue}
               onKeyDown={this.handleKeyDown}
               onChange={this.handleInputChange}
               onClick={this.handleClick}
               onBlur={this.handleBlur}
-              onFocus={this.handleFocus}/>
+              onFocus={this.handleFocus}
+              style={{cursor: 'pointer'}}
+            />
           </div>
         </div>
         {this.popover()}

components/time-picker/index.jsx

@@ -21,6 +21,10 @@ import {KEYS,EventUtil} from '../../utilities';
 const displayName = 'Timepicker';
 const propTypes = {
   constrainToScrollParent: React.PropTypes.bool,
+  /**
+   * If true, allows dropdown to appear above input field based on available space with scroll position.
+   */
+  flippable: React.PropTypes.bool,
 
   /**
    * Time formatting function
@@ -200,12 +204,12 @@ module.exports = React.createClass({
     return (
       !this.props.disabled && this.state.isOpen?
         <Popover
-          className="slds-dropdown slds-dropdown--left "
+          className="slds-dropdown slds-dropdown--left"
           closeOnTabKey={true}
           constrainToScrollParent={this.props.constrainToScrollParent}
           inheritTargetWidth={this.props.inheritTargetWidth}
           dropClass="slds-picklist"
-          flippable={true}
+          flippable={this.props.flippable}
           onClose={this.handleCancel.bind(this)}
           targetElement={this.refs.triggerbutton}>
           {this.getPopoverContent()}
@@ -255,15 +259,17 @@ module.exports = React.createClass({
             <input
               name='date'
               ref='date'
-              className='slds-input'
+              className='slds-input slds-button--neutral slds-text-align--left'
               type='text'
               placeholder={this.props.placeholder}
               value={this.state.strValue}
               onKeyDown={this.handleKeyDown}
               onChange={this.handleInputChange}
               onClick={this.handleClick}
               onBlur={this.handleBlur}
-              onFocus={this.handleFocus}/>
+              onFocus={this.handleFocus}
+              style={{cursor: 'pointer'}}
+            />
           </div>
         </div>
         {this.props.modal?this.getModalPopover():this.getSimplePopover()}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-system-react",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "Salesforce Lightning Design System React components",
   "license": "BSD-3-Clause",
   "scripts": {

stories/date-picker/index.jsx

@@ -0,0 +1,16 @@
+/* eslint-disable indent */
+
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+import { DATE_PICKER } from '../../utilities/constants';
+import Datepicker from '../../components/date-picker';
+
+const getDatepicker = props => (
+	<Datepicker {...props} />
+);
+
+storiesOf(DATE_PICKER, module)
+	.addDecorator(getStory => <div className="slds-p-around--medium">{getStory()}</div>)
+	.add('Base', () => getDatepicker({ onDateChange: action('onDateChange') }))
+

stories/index.js

@@ -5,8 +5,10 @@ export default from './button';
 export default from './card';
 export default from './context-bar';
 export default from './data-table';
+export default from './date-picker';
 export default from './forms/input';
 export default from './forms/input/inline';
 export default from './icon';
 export default from './lookup';
 export default from './spinner';
+export default from './time-picker';

stories/time-picker/index.jsx

@@ -0,0 +1,16 @@
+/* eslint-disable indent */
+
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+import { TIME_PICKER } from '../../utilities/constants';
+import Timepicker from '../../components/time-picker';
+
+const getTimepicker = props => (
+	<Timepicker {...props} />
+);
+
+storiesOf(TIME_PICKER, module)
+	.addDecorator(getStory => <div className="slds-p-around--medium">{getStory()}</div>)
+	.add('Base', () => getTimepicker({ stepInMinutes: 30, onDateChange: action('onDateChange') }))
+

utilities/constants.js

@@ -34,3 +34,4 @@ export const LOOKUP = 'SLDSLookup';
 export const MEDIA_OBJECT = 'SLDSMediaObject';
 export const MENU_DROPDOWN = 'SLDSMenuDropdown';
 export const SPINNER = 'SLDSSpinner';
+export const TIME_PICKER = 'SLDSTimepicker';