Merge pull request #263 from appfolio/updateSelectStyles

gt - Update Select styles
appfolio · Jul 12, 2017 · ed7976e · ed7976e
2 parents ef43a5e + 830b9ff
commit ed7976e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/src/components/Select.js b/src/components/Select.js
@@ -14,8 +14,7 @@ class Select extends Component {
   };
 
   static defaultProps = {
-    defaultValue: '',
-    onChange: noop,
+    onChange: noop
   };
 
   constructor(props) {

diff --git a/src/components/Select.scss b/src/components/Select.scss
@@ -1,11 +1,14 @@
 :global {
   // Import and override react-select's SCSS variables to match BS4:
-  $select-input-border-width: 0.1rem;
-  $select-input-height: 2.4rem !default;
+  $select-input-height: 2.35rem !default;
+  $select-input-internal-height: 2.25rem !default;
 
   // Override react-select styles to match Saffron (TODO move to theme?)
+  $select-input-bg-disabled: #eceeef;
+  $select-input-border-color: #d9d9d9;
+  $select-option-focused-bg: #3179cd;
   $select-option-focused-color: #FFF;
-  $select-option-focused-bg: #00AFDB;
+  $select-text-color: #55595c;
 
   // TODO correct inner padding, colors to match BS styles
 

diff --git a/test/components/Address.spec.js b/test/components/Address.spec.js
@@ -155,7 +155,7 @@ describe('<Address />', () => {
     it('should update state', () => {
       const input = component.find('[name="state"]');
       assert.equal(input.prop('value'), 'NJ');
-      assert.equal(input.prop('defaultValue'), '');
+      assert.equal(input.prop('defaultValue'), null);
 
       input.simulate('change', { label: 'New York', value: 'NY' });
       assert(callback.calledWith(Object.assign({}, addressData, { state: 'NY' })));
@@ -176,7 +176,7 @@ describe('<Address />', () => {
     it('should update country', () => {
       const input = component.find('[name="countryCode"]');
       assert.equal(input.prop('value'), 'US');
-      assert.equal(input.prop('defaultValue'), '');
+      assert.equal(input.prop('defaultValue'), null);
 
       input.simulate('change', { label: 'USA', value: 'US' });
       assert(callback.calledWith(Object.assign({}, addressData, { countryCode: 'US' })));

diff --git a/test/components/Select.spec.js b/test/components/Select.spec.js
@@ -20,7 +20,7 @@ describe('<Select />', () => {
 
       it('should have a blank default', () => {
         assert.equal(component.type(), ReactSelect);
-        assert.equal(component.prop('value'), '');
+        assert.equal(component.prop('value'), null);
       });
 
       it('should clear input', () => {