Styled options

src/Option.js

@@ -1,4 +1,5 @@
 var React = require('react');
+var classes = require('classnames');
 
 var Option = React.createClass({
 	propTypes: {
@@ -14,15 +15,18 @@ var Option = React.createClass({
 	render: function() {
 		var obj = this.props.option;
 		var renderedLabel = this.props.renderFunc(obj);
+		var optionClasses = classes(this.props.className, obj.className);
 
 		return obj.disabled ? (
-			<div className={this.props.className}>{renderedLabel}</div>
+			<div className={optionClasses}>{renderedLabel}</div>
 		) : (
-			<div className={this.props.className}
-				onMouseEnter={this.props.mouseEnter}
-				onMouseLeave={this.props.mouseLeave}
-				onMouseDown={this.props.mouseDown}
-				onClick={this.props.mouseDown}>
+			<div className={optionClasses}
+				 style={obj.style}
+				 onMouseEnter={this.props.mouseEnter}
+				 onMouseLeave={this.props.mouseLeave}
+				 onMouseDown={this.props.mouseDown}
+				 onClick={this.props.mouseDown}
+				 title={obj.title}>
 				{ obj.create ? this.props.addLabelText.replace('{label}', obj.label) : renderedLabel }
 			</div>
 		);

src/SingleValue.js

@@ -1,13 +1,20 @@
 var React = require('react');
+var classes = require('classnames');
 
 var SingleValue = React.createClass({
 	propTypes: {
 		placeholder: React.PropTypes.string,       // this is default value provided by React-Select based component
 		value: React.PropTypes.object              // selected option
 	},
 	render: function() {
+
+		var classNames = classes('Select-placeholder', this.props.value && this.props.value.className);
 		return (
-			<div className="Select-placeholder">{this.props.placeholder}</div>
+			<div
+				className={classNames}
+				style={this.props.value && this.props.value.style}
+				title={this.props.value && this.props.value.title}
+				>{this.props.placeholder}</div>
 		);
 	}
 });

src/Value.js

@@ -1,4 +1,5 @@
 var React = require('react');
+var classes = require('classnames');
 
 var Value = React.createClass({
 
@@ -30,22 +31,33 @@ var Value = React.createClass({
 		}
 
 		if(!this.props.onRemove && !this.props.optionLabelClick) {
-			return <div className="Select-value">{label}</div>;
+			return (
+				<div
+					className={classes('Select-value', this.props.option.className)}
+					style={this.props.option.style}
+					title={this.props.option.title}
+				>{label}</div>
+			);
 		}
 
 		if (this.props.optionLabelClick) {
+
 			label = (
-				<a className="Select-item-label__a"
+				<a className={classes('Select-item-label__a', this.props.option.className)}
 					onMouseDown={this.blockEvent}
 					onTouchEnd={this.props.onOptionLabelClick}
-					onClick={this.props.onOptionLabelClick}>
+					onClick={this.props.onOptionLabelClick}
+					style={this.props.option.style}
+					title={this.props.option.title}>
 					{label}
 				</a>
 			);
 		}
 
 		return (
-			<div className="Select-item">
+			<div className={classes('Select-item', this.props.option.className)}
+				 style={this.props.option.style}
+				 title={this.props.option.title}>
 				<span className="Select-item-icon"
 					onMouseDown={this.blockEvent}
 					onClick={this.handleOnRemove}

test/Select-test.js

@@ -907,6 +907,124 @@ describe('Select', function() {
 		});
 	});
 
+	describe('with styled options', function () {
+
+		beforeEach(function () {
+
+			options = [
+				{ value: 'one', label: 'One', className: 'extra-one', title: 'Eins' },
+				{ value: 'two', label: 'Two', className: 'extra-two', title: 'Zwei' },
+				{ value: 'three', label: 'Three', style: { fontSize: 25 } }
+			];
+
+			wrapper = createControlWithWrapper({
+				options: options
+			});
+		});
+
+		it('uses the given className for an option', function () {
+
+			clickArrowToOpen();
+			expect(React.findDOMNode(instance).querySelectorAll('.Select-option')[0], 'to have attributes',
+				{
+					class: 'extra-one'
+				});
+		});
+
+		it('uses the given style for an option', function () {
+
+			clickArrowToOpen();
+			expect(React.findDOMNode(instance).querySelectorAll('.Select-option')[2], 'to have attributes',
+				{
+					style: { 'font-size': '25px' }
+				});
+		});
+
+		it('uses the given title for an option', function () {
+
+			clickArrowToOpen();
+			expect(React.findDOMNode(instance).querySelectorAll('.Select-option')[1], 'to have attributes',
+				{
+					title: 'Zwei'
+				});
+		});
+
+		it('uses the given className for a single selection', function () {
+
+			typeSearchText('tw');
+			pressEnterToAccept();
+			expect(React.findDOMNode(instance), 'queried for first', DISPLAYED_SELECTION_SELECTOR,
+				'to have attributes', {
+					class: 'extra-two'
+				});
+		});
+
+		it('uses the given style for a single selection', function () {
+
+			typeSearchText('th');
+			pressEnterToAccept();
+			expect(React.findDOMNode(instance), 'queried for first', DISPLAYED_SELECTION_SELECTOR,
+				'to have attributes', {
+					style: {
+						'font-size': '25px'
+					}
+				});
+		});
+
+		it('uses the given title for a single selection', function () {
+
+			typeSearchText('tw');
+			pressEnterToAccept();
+			expect(React.findDOMNode(instance), 'queried for first', DISPLAYED_SELECTION_SELECTOR,
+				'to have attributes', {
+					title: 'Zwei'
+				});
+		});
+
+		describe('with multi', function () {
+
+			beforeEach(function () {
+
+				wrapper.setPropsForChild({ multi: true });
+			});
+
+
+			it('uses the given className for a selected value', function () {
+
+				typeSearchText('tw');
+				pressEnterToAccept();
+				expect(React.findDOMNode(instance), 'queried for first', '.Select-item',
+					'to have attributes', {
+						class: 'extra-two'
+					});
+			});
+
+			it('uses the given style for a selected value', function () {
+
+				typeSearchText('th');
+				pressEnterToAccept();
+				expect(React.findDOMNode(instance), 'queried for first', '.Select-item',
+					'to have attributes', {
+						style: {
+							'font-size': '25px'
+						}
+					});
+			});
+
+			it('uses the given title for a selected value', function () {
+
+				typeSearchText('tw');
+				pressEnterToAccept();
+				expect(React.findDOMNode(instance), 'queried for first', '.Select-item',
+					'to have attributes', {
+						title: 'Zwei'
+					});
+			});
+
+		});
+
+	});
+
 	describe('with allowCreate=true', function () {
 
 		beforeEach(function () {