Merge branch 'master' of github.com:salesforce-ux/design-system-react

# Conflicts:
#	package.json

Author: interactivellama

components/date-picker/index.jsx

@@ -11,15 +11,16 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Popover from '../popover';
+import Dialog from '../utilities/dialog';
 import DatePicker from './date-picker-base/index';
 import InputIcon from '../icon/input-icon';
 
 // This component's `checkProps` which issues warnings to developers about properties
 // when in development mode (similar to React's built in development tools)
 import checkProps from './check-props';
 
-import {KEYS,EventUtil} from '../../utilities';
+import EventUtil from '../../utilities/EventUtil';
+import KEYS from '../../utilities/KEYS';
 
 import { DATEPICKER } from '../../utilities/constants';
 
@@ -173,18 +174,18 @@ module.exports = React.createClass({
     );
   },
 
-  getSeparateMenu() {
+  getDialog() {
     return (
       !this.props.disabled && this.state.isOpen?
-        <Popover
+        <Dialog
           closeOnTabKey={true}
           constrainToScrollParent={this.props.constrainToScrollParent}
           inheritTargetWidth={this.props.inheritTargetWidth}
           flippable={true}
           onClose={this.handleClose}
           targetElement={this.refs.date}>
           {this.getDatePicker()}
-        </Popover>:null
+        </Dialog>:null
     );
   },
 
@@ -282,7 +283,7 @@ module.exports = React.createClass({
             />
           </div>
         </div>
-        {isInline ? this.getInlineMenu() : this.getSeparateMenu()}
+        {isInline ? this.getInlineMenu() : this.getDialog()}
       </div>
     );
   }

components/index.js

@@ -96,6 +96,9 @@ export InputIcon from './icon/input-icon';
 export SLDSLookup from './lookup';
 export Lookup from './lookup';
 
+export SLDSMediaObject from './media-object';
+export MediaObject from './media-object';
+
 export SLDSMenuDropdown from './menu-dropdown';
 export Dropdown from './menu-dropdown';
 

components/lookup/index.jsx

@@ -25,14 +25,15 @@ import escapeRegExp from 'lodash.escaperegexp';
 import checkProps from './check-props';
 
 // Children
-import Popover from '../popover';
+import Dialog from '../utilities/dialog';
 import Button from '../button';
 import Icon from '../icon';
 import InputIcon from '../icon/input-icon';
 import Input from '../forms/input';
 
 // ### Event Helpers
-import { KEYS, EventUtil } from '../../utilities';
+import EventUtil from '../../utilities/EventUtil';
+import KEYS from '../../utilities/KEYS';
 
 import Menu from './menu';
 import DefaultFooter from './menu/default-footer';
@@ -473,9 +474,10 @@ class Lookup extends React.Component {
 	renderSeparateMenu() {
 		return (
 			this.state.isOpen ?
-				<Popover
+				<Dialog
 					className="slds-lookup__menu slds-show"
 					closeOnTabKey={true}
+					contentsClassName='slds-lookup__menu slds-show'
 					inheritTargetWidth={true}
 					onClose={this.handleCancel.bind(this)}
 					flippable={this.props.flippable}
@@ -484,7 +486,7 @@ class Lookup extends React.Component {
 					verticalAlign="bottom"
 				>
 					{this.renderMenuContent()}
-				</Popover> : null
+				</Dialog> : null
 		);
 	}
 

components/media-object/index.jsx

@@ -8,7 +8,6 @@ Neither the name of salesforce.com, inc. nor the names of its contributors may b
 
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
-/* eslint-disable indent */
 
 // ### React
 // React is an external dependency of the project.
@@ -33,7 +32,7 @@ export const cssClasses = {
 };
 
 /**
- * A media object should be used when text and a figure next to each other is needed.
+ * When you need text and a figure next to each other, use a media object.
  */
 const MediaObject = React.createClass({
 	// ### Display Name
@@ -42,11 +41,11 @@ const MediaObject = React.createClass({
 	// ### Prop Types
 	propTypes: {
 		/**
-		 * Allows truncation in nested flexbox containers. Often the body may need to be truncated.
+		 * Often the body may need to be truncated for correct layout. This is only applicable if using the component within a flexbox container.
 		 */
 		canTruncate: PropTypes.bool,
 		/**
-		 * Class names to be added to the Media Object.
+		 * Class names to be added to the component's HTML tag with `slds-media` class.
 		 */
 		className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
 		/**
@@ -63,35 +62,24 @@ const MediaObject = React.createClass({
 		verticalCenter: PropTypes.bool
 	},
 
-	_renderMediaFigure () {
-		// icon should be size small
-		return (
-			<div className={cssClasses.figure}>
-				{this.props.figure}
-			</div>
-		);
-	},
-
 	render () {
-		let mediaFigure = null;
-		if (this.props.figure) {
-			mediaFigure = this._renderMediaFigure();
-		}
-
 		return (
-			<div className={
+			<div
+				className={
 					classnames(
 						cssClasses.base,
 						{
 							'slds-media--center': this.props.verticalCenter,
 							'slds-has-flexi-truncate': this.props.canTruncate
-							}, this.props.className)}>
-				{mediaFigure}
+						}, this.props.className)}
+			>
+				{this.props.figure ? <div className={cssClasses.figure}>
+					{this.props.figure} </div> : null}
 				<div className={cssClasses.body}>
 					{this.props.body}
 				</div>
 			</div>
-		)
+		);
 	}
 });
 

components/menu-dropdown/button-trigger.jsx

@@ -64,7 +64,7 @@ const Trigger = React.createClass({
 		 */
 		isOpen: PropTypes.bool,
 		/**
-		* The dropdown menu which is typically a `Popover` component.
+		* By Default the dropdown menu is inside a `Dialog` component.
 		*/
 		menu: PropTypes.node,
 		/**

components/menu-dropdown/menu-dropdown.jsx

@@ -34,7 +34,7 @@ import isFunction from 'lodash.isfunction';
 import shortid from 'shortid';
 
 // ### Children
-import Popover from '../popover';
+import Dialog from '../utilities/dialog';
 import List from '../menu-list/list';
 import ListItem from '../menu-list/list-item';
 import ListItemLabel from '../menu-list/list-item-label';
@@ -51,7 +51,8 @@ import checkProps from './check-props';
 // #### KeyboardNavigable
 import KeyboardNavigable from '../../utilities/keyboard-navigable';
 
-import { KEYS, EventUtil } from '../../utilities';
+import EventUtil from '../../utilities/EventUtil';
+import KEYS from '../../utilities/KEYS';
 import { MENU_DROPDOWN, MENU_DROPDOWN_TRIGGER, LIST } from '../../utilities/constants';
 
 // The overlay is an optional way to allow the dropdown to close on outside
@@ -128,9 +129,13 @@ const MenuDropdown = React.createClass({
 		 */
 		children: PropTypes.node,
 		/**
-		 * CSS classes to be added to dropdown menu container. By default, It will be added to the `Popover` component.
+		 * CSS classes to be added to dropdown menu.
 		 */
 		className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
+		/**
+		 * By default, these class names will be added to the absolutely-positioned `Dialog` component.
+		 */
+		containerClassName: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
 		/**
 		 * This prop is passed onto the triggering `Button`. Prevent dropdown menu from opening. Also applies disabled styling to trigger button.
 		 */
@@ -310,6 +315,9 @@ const MenuDropdown = React.createClass({
 	},
 
 	componentWillUnmount () {
+        if (currentOpenDropdown === this) {
+            currentOpenDropdown = undefined;
+        }
 		this.isUnmounting = true;
 		this.renderOverlay(false);
 	},
@@ -631,7 +639,7 @@ const MenuDropdown = React.createClass({
 		);
 	},
 
-	renderSeparatedMenu (customContent, isOpen, outsideClickIgnoreClass) {
+	renderDialog (customContent, isOpen, outsideClickIgnoreClass) {
 		let positionClassName;
 		let marginTop;
 		let offset = this.props.offset;
@@ -653,13 +661,14 @@ const MenuDropdown = React.createClass({
 
 		return (
 			isOpen ?
-				<Popover
-					className={classNames('slds-dropdown',
+				<Dialog
+					className={classNames(this.props.containerClassName)}
+					closeOnTabKey
+					constrainToScrollParent={this.props.constrainToScrollParent}
+					contentsClassName={classNames('slds-dropdown',
 						'ignore-react-onclickoutside',
 						positionClassName,
 						this.props.className)}
-					closeOnTabKey
-					constrainToScrollParent={this.props.constrainToScrollParent}
 					flippable={!this.props.hasStaticAlignment}
 					horizontalAlign={this.props.align}
 					inheritTargetWidth={this.props.inheritTargetWidth}
@@ -674,8 +683,7 @@ const MenuDropdown = React.createClass({
 					targetElement={this.triggerContainer}
 				>
 					{this.renderMenuContent(customContent)}
-				</Popover> : null
-		);
+				</Dialog> : null		);
 	},
 
 	renderOverlay (isOpen) {
@@ -778,7 +786,7 @@ const MenuDropdown = React.createClass({
 				triggerRef={this.saveRefToTrigger}
 				menu={isInline ?
 					this.renderInlineMenu(customContent, isOpen) :
-					this.renderSeparatedMenu(customContent, isOpen, outsideClickIgnoreClass)
+					this.renderDialog(customContent, isOpen, outsideClickIgnoreClass)
 				}
 			/>
 		);

components/menu-list/list-item.jsx

@@ -147,23 +147,18 @@ const ListItem = React.createClass({
 							{
 								'slds-has-divider--top-space': this.props.divider === 'top',
 								'slds-has-divider--bottom-space': this.props.divider === 'bottom'
-							},
-							this.props.className
+							}
 						)}
 						onMouseDown={this.handleMouseDown}
 						role="separator"
 					>
-						<span className="slds-text-title--caps">{this.props.label}</span>
+						<span className={classNames('slds-text-title--caps', this.props.className)}>{this.props.label}</span>
 					</li>
 				);
 			}
 			case 'divider': {
 				return (
-					<li
-						className={classNames('slds-has-divider', this.props.className)}
-						onMouseDown={this.handleMouseDown}
-						role="separator"
-					></li>
+					<li className="slds-has-divider" onMouseDown={this.handleMouseDown} role="separator"></li>
 				);
 			}
 			case 'link':
@@ -172,12 +167,13 @@ const ListItem = React.createClass({
 				return (
 					<li
 						aria-selected={this.props.isSelected}
-						className={classNames('slds-dropdown__item', { 'slds-is-selected': this.props.isSelected }, this.props.className)}
+						className={classNames('slds-dropdown__item', { 'slds-is-selected': this.props.isSelected })}
 						id={this.props.id}
 						onMouseDown={this.handleMouseDown}
 						role="presentation"
 					>
 						<a
+							className={this.props.className}
 							href={this.props.href}
 							ref="link"
 							data-index={this.props.index}

components/menu-picklist/index.jsx

@@ -32,7 +32,7 @@ import classNames from 'classnames';
 import shortid from 'shortid';
 
 // ### Children
-import Popover from '../popover';
+import Dialog from '../utilities/dialog';
 import Icon from '../icon';
 import List from '../menu-list/list';
 import ListItemLabel from '../menu-list/list-item-label';
@@ -42,7 +42,8 @@ import ListItemLabel from '../menu-list/list-item-label';
 // #### KeyboardNavigable
 import KeyboardNavigable from '../../utilities/keyboard-navigable';
 
-import { KEYS, EventUtil } from '../../utilities';
+import EventUtil from '../../utilities/EventUtil';
+import KEYS from '../../utilities/KEYS';
 import { MENU_PICKLIST } from '../../utilities/constants';
 
 /**
@@ -314,21 +315,21 @@ const MenuPicklist = React.createClass({
 		);
 	},
 
-	renderSeparateMenu () {
+	renderDialog () {
 		return (
 			!this.props.disabled && this.state.isOpen && this.button
-			? <Popover
-				className="slds-dropdown slds-dropdown--left"
+			? <Dialog
 				closeOnTabKey
 				constrainToScrollParent={this.props.constrainToScrollParent}
+				contentsClassName="slds-dropdown slds-dropdown--left"
 				flippable
 				onClose={this.handleCancel}
 				onKeyDown={this.handleKeyDown}
 				targetElement={this.button}
 				inheritTargetWidth={this.props.inheritTargetWidth}
 			>
 				{this.renderMenuContent()}
-			</Popover>
+			</Dialog>
 			: null
 		);
 	},
@@ -372,7 +373,7 @@ const MenuPicklist = React.createClass({
 					<span className="slds-truncate">{this.renderPlaceholder()}</span>
 					<Icon name="down" category="utility" />
 				</button>
-				{isInline ? this.renderInlineMenu() : this.renderSeparateMenu()}
+				{isInline ? this.renderInlineMenu() : this.renderDialog()}
 			</div>
 		);
 	},