feat(select-fancy): add a select fancy react component

Select fancy component is based on the css styled select fancy. Includes
disabled state.

[Finishes #99532442]

spec/pivotal-ui-react/select-fancy/select-fancy_spec.js

@@ -0,0 +1,58 @@
+require('../spec_helper');
+
+describe('SelectFancy', function() {
+ var SelectFancy, subject;
+ beforeEach(function() {
+ SelectFancy = require('../../../src/pivotal-ui-react/select-fancy/select-fancy').SelectFancy;
+ subject = React.render((<SelectFancy className="foo myClass" id="myId"/>), root);
+ });
+
+ afterEach(function() {
+ React.unmountComponentAtNode(root);
+ });
+
+ it('renders a select fancy component with class', function() {
+ expect('.select-fancy').toHaveClass('foo');
+ expect('.select-fancy').toHaveClass('myClass');
+
+ expect('select').toHaveClass('form-control');
+ expect('select').toHaveAttr('id', 'myId');
+ });
+
+ describe('when a name is provided', function() {
+ beforeEach(function() {
+ subject.setProps({name: 'my-select'});
+ });
+
+ it('renders the select with a name', function() {
+ expect('select').toHaveAttr('name', 'my-select');
+ });
+ });
+
+ describe('when event handlers are provided', function() {
+ var changeSpy;
+ beforeEach(function() {
+ changeSpy = jasmine.createSpy('change');
+ subject.setProps({onChange: changeSpy});
+ });
+
+ it('adds the handlers to the search input', function() {
+ $('select').simulate('change');
+ expect(changeSpy).toHaveBeenCalled();
+ });
+ });
+
+ describe('when the disabled prop is truthy', function() {
+ beforeEach(function() {
+ subject.setProps({disabled: true});
+ });
+
+ it('adds the disabled class to the select-fancy wrapper', function() {
+ expect('.select-fancy').toHaveClass('disabled');
+ });
+
+ it('disables the select', function() {
+ expect('select:disabled').toExist();
+ });
+ });
+});

src/pivotal-ui-react/select-fancy/package.json

@@ -0,0 +1,10 @@
+{
+ "version": "1.10.0",
+ "description": "A React component that provides a styled select fancy",
+ "homepage": "https://styleguide.pivotal.io/react.html#select-fancy",
+ "dependencies": {
+ "classnames": "^1.2.0",
+ "pui-css-forms": "1.10.0",
+ "pui-react-helpers": "0.0.2"
+ }
+}

src/pivotal-ui-react/select-fancy/select-fancy.js

@@ -0,0 +1,42 @@
+import classnames from 'classnames';
+import {mergeProps} from 'pui-react-helpers';
+import React from 'react';
+
+/**
+ * @component SelectFancy
+ * @description A select with a fancy style
+ *
+ * @property disabled {Boolean} Whether to disable the select.
+ *
+ * @example ```js
+ * var SelectFancy = require('pui-react-select-fancy').SelectFancy;
+ * var MyComponent = React.createClass({
+ * render() {
+ * return (
+ * <SelectFancy name="my-select">
+ * <option>Fancy Option 1</option>
+ * <option>Fancy Option 2</option>
+ * </SelectFancy>
+ * }
+ * });
+ * ```
+ *
+ * @see [Pivotal UI React](https://styleguide.pivotal.io/react.html#form_select_fancy)
+ * @see [Pivotal UI CSS](https://styleguide.pivotal.io/forms.html#02_form_fancy_select)
+ */
+
+const types = React.PropTypes;
+
+var SelectFancy = React.createClass({
+ propTypes: {
+ disabled: types.bool
+ },
+
+ render() {
+ const {disabled} = this.props;
+ const {className, style, ...props} = mergeProps(this.props, {className: classnames('select-fancy', {disabled})});
+ return (<div {...{className, style}}><select {...props} className="form-control"/></div>);
+ }
+});
+
+module.exports = {SelectFancy};

src/pivotal-ui/components/forms/forms.scss

@@ -694,6 +694,32 @@ This is a fancy select!
  background-color: $gray-9;
  }
  }
+
+ .form-inline.inline-labels .form-group & select {
+ width: 100% !important; // Fancy select needs to override the size when inline because it is in a wrapping element
+ }
+
+ &.disabled {
+ box-shadow: none;
+ background-color: $gray-10;
+
+ select {
+ &[disabled] {
+ color: $gray-5;
+ background-color: transparent;
+ cursor: default; // Bootstrap fix https://github.com/twbs/bootstrap-sass/issues/881
+ }
+ }
+
+ &:hover {
+ color: $gray-8;
+ background-color: $gray-10;
+ }
+
+ &:after {
+ display: none;
+ }
+ }
 }
 
 /*doc
@@ -1288,6 +1314,37 @@ var SearchInput = require('pui-react-forms').SearchInput;
 
 */
 
+/*doc
+---
+title: Select Fancy
+name: form_select_fancy
+parent: form_react
+---
+
+A `SelectFancy` component can be used on its own as a select. It accepts standard
+select properties (such as `value`).
+
+```react_example
+<form style={{width: 200}}>
+ <UI.SelectFancy>
+ <option>Fancy Option 1</option>
+ <option>Fancy Option 2</option>
+ </UI.SelectFancy>
+</form>
+```
+
+To disable the select, add the disabled prop.
+
+```react_example
+<form style={{width: 200}}>
+ <UI.SelectFancy disabled={true}>
+ <option>Fancy Option 1</option>
+ <option>Fancy Option 2</option>
+ </UI.SelectFancy>
+</form>
+```
+*/
+
 
 /*doc
 ---

src/pivotal-ui/javascripts/components.js

@@ -1,6 +1,7 @@
 import alpha from 'pui-react-alpha';
 import sortableTable from 'pui-react-sortable-table';
 import streamList from 'pui-react-stream-list';
+import selectFancy from 'pui-react-select-fancy';
 
 module.exports = {
  DefaultH1: require('pui-react-typography').DefaultH1,
@@ -122,6 +123,7 @@ module.exports = {
 
  PortalSource: require('pui-react-portals').PortalSource,
  PortalDestination: require('pui-react-portals').PortalDestination,
+ ...selectFancy,
  ...sortableTable,
  ...streamList,
  ...alpha};