add classname and listClassnale props to Picklist Base

Author: ivansfdc

components/SLDSPicklistBase/index.jsx

@@ -31,6 +31,8 @@ module.exports = React.createClass( {
       options: [],
       initialFocus: false,
       modal: false,
+      className:'',
+      listClassName:'',
       onClick () {
         console.log('onClick should be defined');
       },
@@ -151,6 +153,7 @@ module.exports = React.createClass( {
             ref='list'
             options={this.props.options}
             label={this.props.label}
+            className={this.props.listClassName}
             highlightedIndex={this.state.highlightedIndex}
             selectedIndex={this.state.selectedIndex}
             onSelect={this.handleSelect} 
@@ -207,7 +210,7 @@ module.exports = React.createClass( {
           <button 
             id={this.props.id}
             ref="button"
-            className="slds-button slds-button--neutral slds-picklist__label" 
+            className={'slds-button slds-button--neutral slds-picklist__label '+this.props.className }
             aria-haspopup="true"
             onBlur={this.handleBlur}
             onFocus={this.handleFocus}

components/SLDSPicklistBase/list.jsx

@@ -22,9 +22,10 @@ module.exports = React.createClass({
   getDefaultProps () {
     return {
       options:[],
-      label:"Menu",
+      label:'Menu',
       selectedIndex:-1,
       highlightedIndex:0,
+      className:'',
       onListBlur:()=>{
         console.log("onListBlur should be overwritten");
       },
@@ -146,7 +147,7 @@ module.exports = React.createClass({
     return (
       <div 
         ref="scroll"
-        className="slds-wrap slds-grow slds-scrollable--y"
+        className={'slds-wrap slds-grow slds-scrollable--y '+this.props.className}
         style={{
           maxHeight:260
         }}

demo/pages/HomePage.jsx

@@ -81,7 +81,7 @@ export default class HomePage extends Component {
               <div className="slds-p-vertical--large">
                 <SLDSPicklistBase 
                     options={[
-                      {label:'A Option',value:'A0'},
+                      {label:'A Option Option Super Super Long',value:'A0'},
                       {label:'B Option',value:'B0'},
                       {label:'C Option',value:'C0'},
                       {label:'D Option',value:'D0'},
@@ -90,7 +90,7 @@ export default class HomePage extends Component {
                       {label:'B2 Option',value:'B1'},
                       {label:'C2 Option',value:'C1'},
                       {label:'D2 Option',value:'D1'},
-                      {label:'E2 Option',value:'E1'},
+                      {label:'E2 Option Super Super Long',value:'E1'},
 
 
                     ]}