[fixed] Split buttons with React 0.13

Adds a span with an   and letter-spacing shrunkedn to hide the space. For some reason with React 0.13 that span does not have content which causes it to render really small.
kyletsang · Mar 24, 2015 · d282621 · d282621
1 parent 549da6e
commit d282621
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/SplitButton.jsx b/src/SplitButton.jsx
@@ -56,6 +56,7 @@ var SplitButton = React.createClass({
         id={null}>
         <span className="sr-only">{this.props.dropdownTitle}</span>
         <span className="caret" />
+        <span style={{letterSpacing: '-.3em'}}>&nbsp;</span>
       </Button>
     );
 

diff --git a/test/SplitButtonSpec.jsx b/test/SplitButtonSpec.jsx
@@ -29,10 +29,12 @@ describe('SplitButton', function () {
     assert.equal(button.nodeName, 'BUTTON');
     assert.equal(button.type, 'button');
     assert.ok(dropdownButton.className.match(/\bdropdown-toggle\b/));
-    assert.ok(dropdownButton.lastChild.className.match(/\bcaret\b/));
     assert.equal(button.innerText.trim(), 'Title');
-    assert.ok(dropdownButton.firstChild.className.match(/\bsr-only\b/));
-    assert.equal(dropdownButton.firstChild.innerText.trim(), 'Toggle dropdown');
+    assert.ok(dropdownButton.childNodes[0].className.match(/\bsr-only\b/));
+    assert.equal(dropdownButton.childNodes[0].innerText.trim(), 'Toggle dropdown');
+    assert.ok(dropdownButton.childNodes[1].className.match(/\bcaret\b/));
+    assert.equal(dropdownButton.childNodes[2].style.letterSpacing, '-0.3em');
+    assert.equal(dropdownButton.childNodes.length, 3);
   });
 
   it('Should render menu correctly', function () {