Merge pull request #223 from pivotal-cf/select-fancy

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

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": "http://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](http://styleguide.pivotal.io/react.html#form_select_fancy)
+ * @see [Pivotal UI CSS](http://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

@@ -435,7 +435,7 @@ This is a fancy number input!
       line-height: 20px;
       &:hover {
         color: $blue-2;
-        background-color: $gray-9;
+        background-color: $neutral-9;
         cursor: pointer;
       }
 
@@ -458,7 +458,7 @@ This is a fancy number input!
     border-radius: 4px;
 
     &:hover {
-      background-color: $gray-9;
+      background-color: $neutral-9;
     }
   }
 }
@@ -614,14 +614,14 @@ This is a fancy select!
 */
 
 .fancy-form-element {
-  box-shadow: 0 3px 0 $gray-7;
+  box-shadow: 0 3px 0 $neutral-7;
   background-color: white;
   @include transition-pui();
   border-radius: 4px;
   position: relative;
 
   &:hover {
-    box-shadow: 0 3px 0 $gray-5;
+    box-shadow: 0 3px 0 $neutral-5;
     cursor: pointer;
   }
 
@@ -691,7 +691,33 @@ This is a fancy select!
     border-radius: 4px;
 
     &:hover {
-      background-color: $gray-9;
+      background-color: $neutral-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: $neutral-10;
+
+    select {
+      &[disabled] {
+        color: $neutral-5;
+        background-color: transparent;
+        cursor: default; // Bootstrap fix https://github.com/twbs/bootstrap-sass/issues/881
+      }
+    }
+
+    &:hover {
+      color: $neutral-8;
+      background-color: $neutral-10;
+    }
+
+    &:after {
+      display: none;
     }
   }
 }
@@ -1198,7 +1224,7 @@ A toggle switch is a horizontally styled checkbox which represents true with blu
   + label {
     position: relative;
     display: block;
-    background-color: $gray-7;
+    background-color: $neutral-7;
     transition: background 0.4s;
     cursor: pointer;
     outline: none;
@@ -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};