Move className back to dropdown li tag

Adds actual docs to `options` prop with a sample array.

Author: interactivellama

components/menu-dropdown/menu-dropdown.jsx

@@ -255,7 +255,31 @@ const MenuDropdown = React.createClass({
 		 */
 		onClose: PropTypes.func,
 		/**
-		 * An array of menu item.
+		 * An array of menu item objects. `className` and `id` object keys are applied to the `li` DOM node. `divider` key can have a value of `top` or `bottom`. `rightIcon` and `leftIcon` are not actually `Icon` components, but prop objects that get passed to an `Icon` component. The `href` key will be added to the `a` and its default click event will be prevented. Here is a sample:
+		 * ```
+		 * [{
+		 *    className: 'custom-li-class',
+		 *  	divider: 'bottom',
+		 *  	label: 'A Header',
+		 *  	type: 'header'
+		 *  }, {
+		 *  	href: 'http://sfdc.co/',
+		 *  	id: 'custom-li-id',
+		 *  	label: 'Has a value',
+		 *    leftIcon: {
+		 *      name: 'settings',
+		 *      category: 'utility'
+		 *    },
+		 *    rightIcon: {
+		 *        name: 'settings',
+		 *        category: 'utility'
+		 *    },
+		 *  	type: 'item',
+		 *  	value: 'B0'
+		 *  }, {
+		 *    type: 'divider'
+		 * }]
+		 * ```
 		 */
 		options: PropTypes.array,
 		/**

components/menu-list/list-item.jsx

@@ -167,13 +167,15 @@ const ListItem = React.createClass({
 				return (
 					<li
 						aria-selected={this.props.isSelected}
-						className={classNames('slds-dropdown__item', { 'slds-is-selected': this.props.isSelected })}
+						className={classNames('slds-dropdown__item', {
+							'slds-is-selected': this.props.isSelected
+						},
+							this.props.className)}
 						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}

stories/dropdown/index.jsx

@@ -12,10 +12,30 @@ import Button from '../../components/button';
 import Trigger from '../../components/menu-dropdown/button-trigger';
 
 const options = [
-	{ label: 'A Header', divider: 'bottom', className: 'custom-header-class', type: 'header' },
+	{ className: 'custom-li-class',
+		divider: 'bottom',
+		label: 'A Header',
+		type: 'header'
+	},
 	{ label: 'An option that is Super Super Long', value: 'A0' },
 	{ label: 'Custom Class', className: 'custom-item-class', value: 'classssss' },
-	{ label: 'Another option', value: 'B0' },
+	{
+		href: 'http://sfdc.co/',
+		id: 'custom-li-id',
+		label: 'Has a value',
+		leftIcon: {
+			name: 'settings',
+			category: 'utility'
+		},
+		rightIcon: {
+				name: 'settings',
+				category: 'utility'
+		},
+		type: 'item',
+		value: 'B0'
+	}, {
+		type: 'divider'
+	},
 	{ label: 'C Option', value: 'C0' },
 	{ label: 'D Option', value: 'D0' },
 	{ label: 'E Option', value: 'E0' },