added trigger

props to Container component instead of trying to clone it to children
orchestrated-io · Aug 23, 2024 · 4130c27 · 4130c27
1 parent c92ab50
commit 4130c27
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 45 deletions.
diff --git a/lib/components/Popover/Popover.stories.js b/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 = () => (

diff --git a/lib/components/Popover/index.js b/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>
   );
 }