Fix merge error in Modal

Author: donnieberg

components/SLDSLookup/Menu/index.js

@@ -8,17 +8,16 @@
    */
 
 import React, { Component } from 'react';
-import {Icon} from "../../SLDSIcons";
-import {KEYS} from '../../utils';
 import Item from './Item';
+import {Icon} from "../../SLDSIcons";
 
 class Menu extends React.Component {
   constructor(props){
     super(props);
     this.state = {};
   }
 
-  componentDidUpdate(){
+  componentDidUpdate(prevProps, prevState){
     let list = React.findDOMNode(this.refs.list).children.length;
     this.props.getListLength(list);
   }
@@ -49,6 +48,26 @@ class Menu extends React.Component {
     });
   }
 
+  renderEmptyState(){
+    let className = 'slds-lookup__item';
+    return (
+      <li
+        className={className}
+        role="presentaion">
+        <a
+          href='#'
+          id='add-item'
+          tabIndex="-1"
+          role="option"
+          onClick={this.props.addItem}
+          onMouseDown={this.props.addItem}>
+        <Icon name="add" category="utility" size="x-small" className="slds-icon-text-default" />
+        New {this.props.type}
+        </a>
+      </li>
+    );
+  }
+
   render(){
     return (
       <div
@@ -59,6 +78,7 @@ class Menu extends React.Component {
       role="presentation"
       ref="list">
       {this.renderItems()}
+      {this.renderEmptyState()}
       </ul>
       </div>
     )

components/SLDSLookup/index.jsx

@@ -9,8 +9,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 import React, { Component } from 'react';
 import Menu from './Menu';
-import {InputIcon, ButtonIcon} from "./../SLDSIcons";
-import {Icon} from "../SLDSIcons";
+import {Icon, InputIcon, ButtonIcon} from "./../SLDSIcons";
 import {KEYS,EventUtil} from '../utils';
 import escapeRegExp from 'lodash.escaperegexp';
 
@@ -36,6 +35,12 @@ class SLDSLookup extends React.Component {
     };
   }
 
+  componentDidUpdate(prevProps, prevState){
+    if(prevState.selectedIndex && !this.state.selectIndex){
+      if(this.refs.lookup) React.findDOMNode(this.refs.lookup).focus();
+    }
+  }
+
   //=================================================
   // Using down/up keys, set Focus on list item and assign it to aria-activedescendant attribute in input.
   // Need to keep track of filtered list length to be able to increment/decrement the focus index so it's contained to the number of available list items.
@@ -72,7 +77,7 @@ class SLDSLookup extends React.Component {
   handleDeleteSelected() {
     this.setState({
       selectedIndex: null,
-      isOpen: false
+      isOpen: true,
     });
   }
 
@@ -144,7 +149,10 @@ class SLDSLookup extends React.Component {
         setFocus={this.setFocus.bind(this)}
         getListLength={this.getListLength.bind(this)}
         listLength={this.state.listLength}
-        focusIndex={this.state.focusIndex}/>;
+        focusIndex={this.state.focusIndex}
+        addItem={this.props.addItem}
+        type={this.props.type}
+        />;
     }else{
       return null;
     }
@@ -181,6 +189,7 @@ class SLDSLookup extends React.Component {
             <InputIcon name="search"/>
             <input
               id="lookup"
+              ref="lookup"
               className={inputClasses}
               type="text"
               aria-label="lookup"

components/SLDSModal/index.jsx

@@ -42,7 +42,8 @@ const customStyles = {
 module.exports = React.createClass( {
 
   propTypes: {
-    size: React.PropTypes.oneOf(['medium', 'large'])
+    size: React.PropTypes.oneOf(['medium', 'large']),
+    prompt: React.PropTypes.oneOf(['', 'success', 'warning', 'error', 'wrench', 'offline', 'info'])
   },
 
   getDefaultProps () {
@@ -53,6 +54,7 @@ module.exports = React.createClass( {
       footer:[],
       returnFocusTo:null,
       size:'medium',
+      prompt:'', //if prompt !== '', it renders modal as prompt
       directional: false
     };
   },
@@ -106,48 +108,38 @@ module.exports = React.createClass( {
     }
   },
 
+  isPrompt(){
+    return this.props.prompt !== '';
+  },
+
   getModal() {
     const modalClass = {
       'slds-modal': true,
       'slds-fade-in-open':this.state.revealed,
       'slds-modal--large':this.props.size === 'large'
     };
 
-    const footerClass = {
-      'slds-modal__footer': true,
-      'slds-modal__footer--directional': this.props.directional
-    };
-
     return <div
             className={cx(modalClass)}
             style={{pointerEvents:'inherit'}}
-            onClick={this.closeModal}
+            onClick={this.isPrompt() ? undefined : this.closeModal}
           >
           <div
             role='dialog'
             className='slds-modal__container'
             onClick={this.handleModalClick}
             >
-            <div className='slds-modal__header'>
-              <h2 className='slds-text-heading--medium'>{this.props.title}</h2>
-              <SLDSButton
-                label='Close'
-                variant='icon'
-                iconName='close'
-                iconSize='large'
-                inverse={true}
-                className='slds-modal__close'
-                onClick={this.closeModal} />
-            </div>
+
+            {this.headerComponent()}
 
             <div className='slds-modal__content'>
 
               {this.props.children}
 
+              {this.isPrompt() ? this.props.footer : null}
             </div>
-            <div className={cx(footerClass)}>
-              {this.props.footer}
-            </div>
+
+            {this.footerComponent()}
 
           </div>
 
@@ -171,6 +163,49 @@ module.exports = React.createClass( {
     );
   },
 
+  footerComponent() {
+    let footer;
+
+    const footerClass = {
+      'slds-modal__footer': true,
+      'slds-modal__footer--directional': this.props.directional
+    };
+
+    const hasFooter = this.props.footer && this.props.footer.length > 0;
+
+    if (!this.isPrompt() && hasFooter ) {
+      footer = (<div className={cx(footerClass)}>{this.props.footer}</div>);
+    }
+
+    return footer;
+  },
+
+  headerComponent() {
+    let headingClasses = [], headerClasses = ['slds-modal__header'];
+    let closeButton;
+
+    if (this.isPrompt()) {
+      headerClasses.push(`slds-theme--${this.props.prompt}`);
+      headingClasses.push('slds-text-heading--small');
+    } else {
+      headingClasses.push('slds-text-heading--medium')
+      closeButton =(<SLDSButton
+          label='Close'
+          variant='icon'
+          iconName='close'
+          iconSize='large'
+          inverse={true}
+          className='slds-modal__close'
+          onClick={this.closeModal} />);
+    }
+
+    return (
+      <div className={cx(headerClasses)}>
+        <h2 className={cx(headingClasses)}>{this.props.title}</h2>
+        {closeButton}
+     </div>);
+  },
+
   componentDidUpdate (prevProps, prevState) {
 
 

demo/pages/HomePage/LookupBaseSection.jsx

@@ -36,6 +36,10 @@ module.exports = React.createClass( {
     return {};
   },
 
+  addItem(){
+    alert('Add item clicked');
+  },
+
 
   render() {
     return (
@@ -53,7 +57,7 @@ module.exports = React.createClass( {
               </PrismCode>
 
               <div className="slds-p-vertical--large">
-                <SLDSLookup items={items} label="Contacts" />
+                <SLDSLookup items={items} label="Accounts" type="account" addItem={this.addItem} />
               </div>
 
             </div>

demo/pages/HomePage/ModalSection.jsx

@@ -97,8 +97,8 @@ Utilize our detailed guidelines to confidently design excellent apps that fit ri
                   isOpen={this.state.modalIsOpen}
                   title={<span>Lightning Design System: Style with Ease</span>}
                   footer={[
-                    <SLDSButton label='Cancel' variant='neutral' onClick={this.closeModal} />,
-                    <SLDSButton label='Save' variant='brand' onClick={this.handleSubmitModal} />
+                    <SLDSButton key='cancelBtn' label='Cancel' variant='neutral' onClick={this.closeModal} />,
+                    <SLDSButton key='saveBtn' label='Save' variant='brand' onClick={this.handleSubmitModal} />
                   ]}
                   onRequestClose={this.closeModal}>
                   {this.getModalContent()}

demo/pages/HomePage/index.jsx

@@ -59,14 +59,14 @@ module.exports = React.createClass( {
         </div>
         <main className='stage-main slds-grid slds-wrap slds-grow' role='main'>
           <div className='region region--main slds-grow slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--8-of-12 slds-col-rule--right slds-p-around--large'>
+            <LookupBaseSection />
 
             <ButtonSection />
 
             <PicklistBaseSection />
 
             <ModalSection />
 
-            <LookupBaseSection />
 
             <DatePickerSingleSelectSection />
 

tests/SLDSButton/button.test.jsx

@@ -34,9 +34,7 @@ describe('SLDSButton: ',  function(){
       let brand = TestUtils.findRenderedDOMComponentWithClass(button, 'slds-button--brand');
       expect(brand).to.not.equal(undefined);
     });
-
-  })
-
+  });
 
   describe('component icon props render', function() {
     it('renders icon svg', function() {