fix(Tooltip/Popover): fix className/add innerClassName

TheSharpieOne · TheSharpieOne · commit a2a33e3ec232 · 2017-09-20T07:18:35.000-04:00
diff --git a/docs/lib/Components/PopoversPage.js b/docs/lib/Components/PopoversPage.js
@@ -37,6 +37,9 @@ export default class PopoversPage extends React.Component {
   ]).isRequired,
   // Where to inject the popper DOM node, default to body
   container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
+  className: PropTypes.string,
+  // Apply class to the inner-popover
+  innerClassName: PropTypes.string,
   disabled: PropTypes.bool,
   placementPrefix: PropTypes.string,
   delay: PropTypes.oneOfType([
diff --git a/docs/lib/Components/TooltipsPage.js b/docs/lib/Components/TooltipsPage.js
@@ -47,6 +47,9 @@ export default class TooltipsPage extends React.Component {
     PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
     PropTypes.number
   ]),
+  className: PropTypes.string,
+  // Apply class to the inner-tooltip
+  innerClassName: PropTypes.string,
   // optionally hide tooltip when hovering over tooltip content - default true
   autohide: PropTypes.bool,
   // convenience attachments for popover
diff --git a/src/Popover.js b/src/Popover.js
@@ -20,6 +20,7 @@ const propTypes = {
   isOpen: PropTypes.bool,
   disabled: PropTypes.bool,
   className: PropTypes.string,
+  innerClassName: PropTypes.string,
   placementPrefix: PropTypes.string,
   cssModule: PropTypes.object,
   toggle: PropTypes.func,
@@ -153,12 +154,13 @@ class Popover extends React.Component {
     const attributes = omit(this.props, Object.keys(propTypes));
     const classes = mapToCssModules(classNames(
       'popover-inner',
-      this.props.className
+      this.props.innerClassName
     ), this.props.cssModule);
 
     const popperClasses = mapToCssModules(classNames(
       'popover',
-      'show'
+      'show',
+      this.props.className
     ), this.props.cssModule);
 
     return (
diff --git a/src/Tooltip.js b/src/Tooltip.js
@@ -20,6 +20,7 @@ const propTypes = {
   isOpen: PropTypes.bool,
   disabled: PropTypes.bool,
   className: PropTypes.string,
+  innerClassName: PropTypes.string,
   cssModule: PropTypes.object,
   toggle: PropTypes.func,
   autohide: PropTypes.bool,
@@ -178,12 +179,13 @@ class Tooltip extends React.Component {
     const attributes = omit(this.props, Object.keys(propTypes));
     const classes = mapToCssModules(classNames(
       'tooltip-inner',
-      this.props.className
+      this.props.innerClassName
     ), this.props.cssModule);
 
     const popperClasses = mapToCssModules(classNames(
       'tooltip',
-      'show'
+      'show',
+      this.props.className
     ), this.props.cssModule);
 
     return (
diff --git a/src/__tests__/Popover.spec.js b/src/__tests__/Popover.spec.js
@@ -142,7 +142,7 @@ describe('Popover', () => {
 
   it('should allow custom classes to be added to the popover-inner', () => {
     const wrapper = mount(
-      <Popover isOpen placement={placement} target="innerTarget" className="popover-special">
+      <Popover isOpen placement={placement} target="innerTarget" innerClassName="popover-special">
         <PopoverHeader>Title</PopoverHeader>
         <PopoverBody>Content</PopoverBody>
       </Popover>
@@ -153,6 +153,19 @@ describe('Popover', () => {
     wrapper.unmount();
   });
 
+  it('should allow custom classes to be added to the popover', () => {
+    const wrapper = mount(
+      <Popover isOpen placement={placement} target="innerTarget" className="popover-special">
+        <PopoverHeader>Title</PopoverHeader>
+        <PopoverBody>Content</PopoverBody>
+      </Popover>
+    );
+
+    expect(document.getElementsByClassName('popover')[0].className.indexOf('popover-special') > -1).toBe(true);
+
+    wrapper.unmount();
+  });
+
   it('should not handle outside of target clicks when isOpen is false', () => {
     const wrapper = mount(
       <Popover target="innerTarget" isOpen={isOpen} toggle={toggle}>
diff --git a/src/__tests__/Tooltip.spec.js b/src/__tests__/Tooltip.spec.js
@@ -171,6 +171,30 @@ describe('Tooltip', () => {
     wrapper.detach();
   });
 
+  it('should allow custom classes to be added to the tooltip-inner', () => {
+    const wrapper = mount(
+      <Tooltip isOpen target="target" innerClassName="tooltip-special">
+        Tooltip Content
+      </Tooltip>
+    );
+
+    expect(document.getElementsByClassName('tooltip-inner')[0].className.indexOf('tooltip-special') > -1).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('should allow custom classes to be added to the tooltip', () => {
+    const wrapper = mount(
+      <Tooltip isOpen target="target" className="tooltip-special">
+        Tooltip Content
+      </Tooltip>
+    );
+
+    expect(document.getElementsByClassName('tooltip')[0].className.indexOf('tooltip-special') > -1).toBe(true);
+
+    wrapper.unmount();
+  });
+
   it('should not call props.toggle when disabled ', () => {
     const props = createSpyObj('props', ['toggle']);
     const event = createSpyObj('event', ['preventDefault']);
