fix(overlay-trigger): Creates a unique id for overlay prop

If user doesn't provide an id, generate one for them to make Overlays/Tooltips accessible. [finishes #101935698] Signed-off-by: Kenny Wang <kwang@pivotal.io>
pivotal-cf · Aug 26, 2015 · 52523d4 · 52523d4
1 parent f6ac9eb
commit 52523d4
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 14 deletions.
diff --git a/spec/pivotal-ui-react/overlay-trigger/overlay-trigger_spec.js b/spec/pivotal-ui-react/overlay-trigger/overlay-trigger_spec.js
@@ -1,25 +1,28 @@
 require('../spec_helper');
+var Tooltip = require('../../../src/pivotal-ui-react/tooltip/tooltip').Tooltip;
+var OverlayTrigger = require('../../../src/pivotal-ui-react/overlay-trigger/overlay-trigger').OverlayTrigger;
 
 describe('OverlayTrigger', function() {
-  beforeEach(function() {
-    var Tooltip = require('../../../src/pivotal-ui-react/tooltip/tooltip').Tooltip;
-    var OverlayTrigger = require('../../../src/pivotal-ui-react/overlay-trigger/overlay-trigger').OverlayTrigger;
-    var tooltip = (<Tooltip><div className="tooltip-text">Hello World</div></Tooltip>);
-    var launcher = (<div className="launcher">Hover For Tooltip</div>);
-    var overlay = (
-      <OverlayTrigger placement="bottom" overlay={tooltip}>
-        {launcher}
-      </OverlayTrigger>
-    );
-    React.render(overlay, root);
-  });
-
   afterEach(function() {
     React.unmountComponentAtNode(root);
   });
 
   describe('hovering over the launcher', function() {
     beforeEach(function() {
+      var tooltip = (
+        <Tooltip className="tooltip-text"> Hello World </Tooltip>
+      );
+      var launcher = (<div className="launcher">Hover For Tooltip</div>);
+
+      var overlays = (
+        <div>
+          <OverlayTrigger placement="top" overlay={tooltip}>
+            {launcher}
+          </OverlayTrigger>
+        </div>
+      );
+      React.render(overlays, root);
+
       expect('.tooltip-text').not.toExist();
       $('.launcher').simulate('mouseOver');
     });
@@ -28,4 +31,64 @@ describe('OverlayTrigger', function() {
       expect('.tooltip-text').toExist();
     });
   });
+
+  describe('when no id is provided', function() {
+    beforeEach(function() {
+      var tooltip = (
+        <Tooltip className="tooltip-text"> Hello World </Tooltip>
+      );
+      var tooltip2 = (
+        <Tooltip className="tooltip-text">Hello World2 </Tooltip>
+      );
+      var launcher = (<div className="launcher">Hover For Tooltip</div>);
+
+      var overlays = (
+        <div>
+          <OverlayTrigger placement="bottom" overlay={tooltip2}>
+            <OverlayTrigger placement="left" overlay={tooltip}>
+              {launcher}
+            </OverlayTrigger>
+          </OverlayTrigger>
+        </div>
+      );
+      React.render(overlays, root);
+
+      expect('.tooltip-text').not.toExist();
+      $('.launcher').simulate('mouseOver');
+    });
+
+    it('generates an id', function() {
+      expect($('.tooltip')[0].id).not.toEqual('');
+      expect($('.tooltip')[1].id).not.toEqual('');
+    });
+
+    it('id is unique', function() {
+      expect($('.tooltip')[0].id).not.toEqual($('.tooltip')[1].id);
+    });
+  });
+
+  describe('when an id is provided', function() {
+    beforeEach(function() {
+      var tooltip = (
+        <Tooltip id="toiletpaper" className="tooltip-text">Hello World2 </Tooltip>
+      );
+      var launcher = (<div className="launcher">Hover For Tooltip</div>);
+
+      var overlays = (
+        <div>
+          <OverlayTrigger placement="left" overlay={tooltip}>
+            {launcher}
+          </OverlayTrigger>
+        </div>
+      );
+      React.render(overlays, root);
+
+      expect('.tooltip-text').not.toExist();
+      $('.launcher').simulate('mouseOver');
+    });
+
+    it('uses provided id', function() {
+      expect('.tooltip#toiletpaper').toExist();
+    });
+  });
 });
diff --git a/src/pivotal-ui-react/overlay-trigger/overlay-trigger.js b/src/pivotal-ui-react/overlay-trigger/overlay-trigger.js
@@ -1,3 +1,21 @@
+import BsOverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import React from 'react';
+import uniqueid from 'lodash.uniqueid';
+
+const OverlayTrigger = React.createClass({
+  propTypes: {
+    overlay: React.PropTypes.element
+  },
+  render() {
+    let {overlay, ...others} = this.props;
+    if (!overlay.props.id) {
+      overlay = React.cloneElement(overlay, {id: uniqueid('overlay')});
+    }
+    return <BsOverlayTrigger {...others} overlay={overlay}/>;
+  }
+});
+
+
 module.exports = {
   /**
    * @component OverlayTrigger
@@ -22,5 +40,5 @@ module.exports = {
    *
    * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#tooltips_react)
    */
-  OverlayTrigger: require('react-bootstrap').OverlayTrigger
+  OverlayTrigger
 };