HELP-7947 popover trigger refs (#330)

* added trigger
 props to Container component instead of trying to clone it to children

* 3.2.35

Author: KitoC

lib/components/Popover/Popover.stories.js

@@ -5,6 +5,7 @@ import Box from "../Box";
 import Grid from "../Grid";
 import Flex from "../Flex";
 import StyledLink from "../StyledLink";
+import Spacer from "../Spacer";
 
 export default {
   title: "Components/Popover",
@@ -95,20 +96,22 @@ export const textAlignment = () => (
 );
 
 export const DisplayInlineBlock = () => (
-  <>
-    <Popover text="Description that explains child element" inlineBlock>
-      <Button>Inline Block Set</Button>
-    </Popover>
-    <Popover text="Description that explains child element" inlineBlock>
-      <Button>Inline Block Set</Button>
-    </Popover>
-    <Popover text="Description that explains child element">
-      <Button>Not Inline</Button>
-    </Popover>
-    <Popover direction="top" text="Description that explains child element">
-      <Button>Not Inline</Button>
-    </Popover>
-  </>
+  <Flex flexDirection="column">
+    <Spacer mt="r">
+      <Popover text="Description that explains child element" inlineBlock>
+        <Button>Inline Block Set</Button>
+      </Popover>
+      <Popover text="Description that explains child element" inlineBlock>
+        <Button>Inline Block Set</Button>
+      </Popover>
+      <Popover text="Because it is display: block, the triggering container is wider than the button">
+        <Button>Not Inline</Button>
+      </Popover>
+      <Popover direction="top" text="Description that explains child element">
+        <Button>Not Inline</Button>
+      </Popover>
+    </Spacer>
+  </Flex>
 );
 
 export const tooltipExample = () => (

lib/components/Popover/index.js

@@ -1,4 +1,4 @@
-import React, { cloneElement, useState } from "react";
+import React, { useState } from "react";
 import {
   useFloating,
   autoUpdate,
@@ -18,12 +18,12 @@ import themeGet from "@styled-system/theme-get";
 import styled from "styled-components";
 import Icon from "../Icon";
 import { PropTypes } from "prop-types";
-import Box from "../Box";
 import {
   getFloatingUiRootElement,
   getFloatingUiZIndex,
   isRenderedInReactSelectMenu
 } from "../../utils/floatingUiHelpers";
+import { layout, space } from "styled-system";
 
 const DIRECTIONS_MAP = {
   topLeft: "top-start",
@@ -36,6 +36,15 @@ const DIRECTIONS_MAP = {
   bottomRight: "bottom-end"
 };
 
+const Container = styled.div`
+  ${space}
+  ${layout}
+
+  display: ${(props) =>
+    props.inlineBlock ? "inline-block !important" : "block !important"};
+  position: relative;
+`;
+
 const TooltipControl = styled.div`
   border: none;
   background: none;
@@ -267,6 +276,7 @@ export default function Popover({
   enableSelectAll,
   variant,
   ariaLabel,
+  inlineBlock,
   ...props
 }) {
   const [visible, setVisible] = useState(false);
@@ -310,32 +320,6 @@ export default function Popover({
     tabIndex: "0"
   };
 
-  let triggerComponent = null;
-
-  if (variant === "tooltip") {
-    triggerComponent = (
-      <TooltipControl {...triggerProps} active={visible} tabIndex="0">
-        <Icon
-          transform="grow-4"
-          icon={["fas", "question-circle"]}
-          fontSize="2"
-        />
-      </TooltipControl>
-    );
-  } else if (children?.type?.$$typeof === Symbol.for("react.forward_ref")) {
-    triggerComponent = cloneElement(children, triggerProps);
-  } else {
-    triggerComponent = (
-      <div
-        {...triggerProps}
-        style={{ display: "inline-block" }}
-        data-testid={`${children?.props?.["data-testid"] || "popover"}-trigger`}
-      >
-        {children}
-      </div>
-    );
-  }
-
   const directionClass =
     context.placement === DIRECTIONS_MAP[direction]
       ? direction
@@ -363,7 +347,23 @@ export default function Popover({
   const containsLinks = refs.floating?.current?.querySelectorAll("a").length;
 
   return (
-    <Box {...props} aria-describedby={context.floatingId}>
+    <Container
+      inlineBlock={inlineBlock}
+      data-testid={`${children?.props?.["data-testid"] || "popover"}-trigger`}
+      {...props}
+      {...triggerProps}
+      aria-describedby={context.floatingId}
+    >
+      {variant === "tooltip" && (
+        <TooltipControl {...triggerProps} active={visible} tabIndex="0">
+          <Icon
+            transform="grow-4"
+            icon={["fas", "question-circle"]}
+            fontSize="2"
+          />
+        </TooltipControl>
+      )}
+
       {text &&
         (visible ? (
           <FloatingPortal
@@ -395,8 +395,8 @@ export default function Popover({
            **/
         ))}
 
-      {triggerComponent}
-    </Box>
+      {children}
+    </Container>
   );
 }
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.34",
+  "version": "3.2.35",
   "engines": {
     "node": "20.12.2"
   },