Add matchAnchorWidth to Popover

packages/boundless-popover/index.js

@@ -99,6 +99,11 @@ export default class Popover extends React.PureComponent {
          */
         autoReposition: PropTypes.bool,
 
+        /**
+         *  if popover element should match the anchor
+         */
+        matchAnchorWidth: PropTypes.bool,
+
         /**
          * a DOM element or React reference (ref) to one for positioning purposes, the caret component will
          * be automatically positioned to center on this provided anchor; by default it will center
@@ -148,6 +153,7 @@ export default class Popover extends React.PureComponent {
         ...Dialog.defaultProps,
         anchor: undefined,
         autoReposition: true,
+        matchAnchorWidth: false,
         captureFocus: false,
         caretAnchor: undefined,
         caretComponent: DEFAULT_CARET_COMPONENT,
@@ -373,19 +379,16 @@ export default class Popover extends React.PureComponent {
     }
 
     align = () => {
-        const anchor = this.props.anchor instanceof HTMLElement
-                       ? this.props.anchor
-                       : findDOMNode(this.props.anchor);
+        const anchor = findDOMNode(this.props.anchor);
 
-        // eslint-disable-next-line no-nested-ternary
         const caretAnchor = this.props.caretAnchor
-                            ? this.props.caretAnchor instanceof HTMLElement
-                              ? this.props.caretAnchor
-                              : findDOMNode(this.props.caretAnchor)
+                            ? findDOMNode(this.props.caretAnchor)
                             : anchor;
 
         this.cacheViewportCartography(anchor, caretAnchor);
 
+        if (this.props.matchAnchorWidth) { this.matchAnchorWidth(); }
+
         const preset = this.getValidAlignmentPreset();
         const frag = Popover.getAlignmentClassFragment;
 
@@ -411,6 +414,11 @@ export default class Popover extends React.PureComponent {
         this.$caret.style[longitudinal ? 'top' : 'left'] = '0px';
     }
 
+    matchAnchorWidth = () => {
+      const dialog = this.dialog.$dialog;
+      dialog.style.width = `${this.anchorRect.width}px`;
+    }
+
     componentDidMount() {
         this.align();
         window.addEventListener('resize', this.align, true);

packages/boundless-popover/index.spec.js

@@ -408,6 +408,16 @@ describe('Popover component', () => {
             expect(popoverNode.classList.contains('b-popover-anchor-y-start')).toBeTruthy();
             expect(popoverNode.classList.contains('b-popover-self-y-start')).toBeTruthy();
         });
+
+        it('updates the width of the Dialog if matchAnchorWidth is true', () => {
+          sandbox.stub(anchor, 'getBoundingClientRect').returns({
+              width: 50,
+          });
+
+          render(<Popover {...baseProps} anchor={anchor} matchAnchorWidth />);
+
+          expect($('.b-dialog').style.width).toBe('50px');
+        });
     });
 
     describe('passthrough to Dialog', () => {
@@ -422,6 +432,8 @@ describe('Popover component', () => {
         it('passes down nested children', () => {
             expect($('.b-dialog').textContent).toContain('bar');
         });
+
+
     });
 
     describe('passthrough to Portal', () => {