fix(TetherContent): Fixes className prop typo, removes arrow & position relative hack

eddywashere · eddywashere · commit d9e7621ed55e · 2016-11-28T00:09:24.000-08:00
diff --git a/src/TetherContent.js b/src/TetherContent.js
@@ -2,10 +2,10 @@ import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import isFunction from 'lodash.isfunction';
 import Tether from 'tether';
-import { mapToCssModules } from './utils';
 
 const propTypes = {
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
   arrow: PropTypes.string,
   disabled: PropTypes.bool,
   isOpen: PropTypes.bool.isRequired,
@@ -101,15 +101,9 @@ class TetherContent extends React.Component {
     document.addEventListener('click', this.handleDocumentClick, true);
 
     this._element = document.createElement('div');
+    this._element.className = this.props.className;
     document.body.appendChild(this._element);
     this.renderIntoSubtree();
-
-    if (this.props.arrow) {
-      const arrow = document.createElement('div');
-      arrow.className = mapToCssModules(this.props.arrow + '-arrow', this.props.cssModule);
-      this._element.appendChild(arrow);
-    }
-
     this._tether = new Tether(this.getTetherConfig());
     this.props.tetherRef(this._tether);
     this._tether.position();
@@ -136,9 +130,7 @@ class TetherContent extends React.Component {
     const { children, style } = this.props;
     return React.cloneElement(
       children,
-      {
-        style: { position: 'relative', ...style }
-      }
+      { style }
     );
   }
 
diff --git a/src/__tests__/TetherContent.spec.js b/src/__tests__/TetherContent.spec.js
@@ -24,6 +24,16 @@ describe('TetherContent', () => {
     expect(instance._element).toBe(undefined);
   });
 
+  it('should renderChildren with className', () => {
+    state = true;
+    spyOn(TetherContent.prototype, 'componentDidMount').and.callThrough();
+    spyOn(TetherContent.prototype, 'renderChildren').and.callThrough();
+    const wrapper = mount(<TetherContent className="foo" tether={tetherConfig} isOpen={state} toggle={toggle}><p>Content</p></TetherContent>);
+    const instance = wrapper.instance();
+
+    expect(instance._element.className.indexOf('foo') > -1).toBe(true);
+  });
+
   it('should renderChildren when isOpen is true', () => {
     state = true;
     spyOn(TetherContent.prototype, 'componentDidMount').and.callThrough();
@@ -37,16 +47,6 @@ describe('TetherContent', () => {
     expect(instance._element.className.indexOf('tether') > -1).toBe(true);
   });
 
-  it('should render an arrow dom node when prop is true', () => {
-    state = true;
-    const wrapper = mount(<TetherContent tether={tetherConfig} isOpen={state} arrow="tooltip" toggle={toggle}><p>Content</p></TetherContent>);
-    const instance = wrapper.instance();
-
-    expect(instance._element.textContent).toBe('Content');
-    expect(instance._tether.enabled).toBe(true);
-    expect(instance._element.innerHTML.indexOf('<div class="tooltip-arrow"></div>') > -1).toBe(true);
-  });
-
   it('should not call props.toggle when disabled ', () => {
     state = true;
     let props = jasmine.createSpyObj('props', ['toggle']);
