feat(Popover): add tetherRef to Popover (#183)

TheSharpieOne · eddywashere · commit 00d08ad3eae4 · 2016-10-17T20:20:16.000-07:00
This will pass any additional props provided to popover down to the
inner div as well as the tetherRef to the TetherContent.
diff --git a/docs/lib/Components/PopoversPage.js b/docs/lib/Components/PopoversPage.js
@@ -34,6 +34,8 @@ export default class PopoversPage extends React.Component {
   // target div ID, popover is attached to this element
   tether: PropTypes.object,
   // optionally overide tether config http://tether.io/#options
+  tetherRef: PropType.function,
+  // function which is passed a reference to the instance of tether for manually \`position()\`ing
   placement: PropTypes.oneOf([
     'top',
     'bottom',
diff --git a/src/Popover.js b/src/Popover.js
@@ -1,4 +1,6 @@
 import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+import omit from 'lodash.omit';
 import TetherContent from './TetherContent';
 import { getTetherAttachments, tetherAttachements } from './utils';
 
@@ -7,7 +9,8 @@ const propTypes = {
   target: PropTypes.string.isRequired,
   isOpen: PropTypes.bool,
   tether: PropTypes.object,
-  children: PropTypes.node,
+  tetherRef: PropTypes.func,
+  className: PropTypes.string,
   toggle: PropTypes.func
 };
 
@@ -50,16 +53,22 @@ class Popover extends React.Component {
 
     let tetherConfig = this.getTetherConfig();
 
+    const classes = classNames(
+      'popover-inner',
+      this.props.className
+    );
+
+    const attributes = omit(this.props, Object.keys(propTypes));
+
     return (
       <TetherContent
         arrow="popover"
         tether={tetherConfig}
+        tetherRef={this.props.tetherRef}
         isOpen={this.props.isOpen}
         toggle={this.props.toggle}
       >
-        <div className="popover-inner">
-          {this.props.children}
-        </div>
+        <div {...attributes} className={classes} />
       </TetherContent>
     );
   }
diff --git a/src/__tests__/Popover.spec.js b/src/__tests__/Popover.spec.js
@@ -134,4 +134,17 @@ describe('Popover', () => {
 
     wrapper.unmount();
   });
+
+  it('should allow custom classes to be added to the popover-inner', () => {
+    const wrapper = mount(
+      <Popover isOpen placement={placement} target="popover-target" className="popover-special">
+        <PopoverTitle>Title</PopoverTitle>
+        <PopoverContent>Content</PopoverContent>
+      </Popover>
+    );
+
+    expect(document.getElementsByClassName('popover-inner')[0].className.indexOf('popover-special') > -1).toBe(true);
+
+    wrapper.unmount();
+  });
 });
