[fixed] allow totally custom styles via 'bsStyle'

but with validation warning
viktorrusakov · Jul 24, 2015 · 860d168 · 860d168
1 parent ac7ada5
commit 860d168
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/src/BootstrapMixin.js b/src/BootstrapMixin.js
@@ -34,9 +34,13 @@ const BootstrapMixin = {
         classes[prefix + bsSize] = true;
       }
 
-      let bsStyle = this.props.bsStyle && styleMaps.STYLES[this.props.bsStyle];
       if (this.props.bsStyle) {
-        classes[prefix + bsStyle] = true;
+        let bsStyle = styleMaps.STYLES[this.props.bsStyle];
+        if (bsStyle) {
+          classes[prefix + bsStyle] = true;
+        } else {
+          classes[this.props.bsStyle] = true;
+        }
       }
     }
 

diff --git a/test/BootstrapMixinSpec.js b/test/BootstrapMixinSpec.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import BootstrapMixin from '../src/BootstrapMixin';
 import styleMaps from '../src/styleMaps';
+import { shouldWarn } from './helpers';
 
 let Component;
 
@@ -197,14 +198,28 @@ describe('BootstrapMixin', function () {
       assert.equal(instance.prefixClass('title'), 'btn-title');
     });
 
-    it('should return "btn btn-wacky"', function () {
-      styleMaps.addStyle('wacky');
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button' bsStyle='wacky'>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-wacky': true});
+    describe('Custom styles', function () {
+      it('should validate OK custom styles added via "addStyle()"', function () {
+
+        styleMaps.addStyle('wacky');
+
+        let instance = ReactTestUtils.renderIntoDocument(
+          <Component bsClass='button' bsStyle='wacky'>
+            content
+          </Component>
+        );
+        assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-wacky': true});
+      });
+
+      it('should allow custom styles as is but with validation warning', function () {
+        let instance = ReactTestUtils.renderIntoDocument(
+          <Component bsClass='button' bsStyle='my-custom-class'>
+            content
+          </Component>
+        );
+        assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'my-custom-class': true});
+        shouldWarn('Invalid prop `bsStyle` of value `my-custom-class`');
+      });
     });
   });
 });