fix: showing tooltip content when no children (#779)

* Prevent showing tooltip content when no children

* Add changset

* Add change:add script

* Improve stop showing when not children

* Fix problerm with box shadow

* Prevent showing tooltip when no children

* Remove comment

.changeset/hungry-ghosts-help.md

@@ -0,0 +1,5 @@
+---
+"@saleor/macaw-ui": patch
+---
+
+Prevent Tooltip to show empty content tooltip when there is no children or empty string

README.md

@@ -112,6 +112,12 @@ You can run build in watch mode (useful for real-time development with e.g Dashb
 pnpm watch
 ```
 
+When you finish woking, you can add new changeset
+
+```sh
+pnpm change:add
+```
+
 ## License
 
 Distributed under the Creative Common Attribution 4.0 International License

package.json

@@ -51,7 +51,8 @@
     "publish:ci-prod": "pnpm publish && pnpm changeset tag && git push --follow-tags",
     "publish:ci-dev": "pnpm changeset version --snapshot pr && pnpm publish --tag dev --no-git-checks",
     "prepare": "is-ci || husky install",
-    "chromatic": "chromatic --exit-zero-on-changes"
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "change:add": "changeset add"
   },
   "name": "@saleor/macaw-ui",
   "description": "Saleor's UI component library",

src/components/Tooltip/Content.tsx

@@ -3,8 +3,7 @@ import {
   Portal as RadixTooltipPortal,
   Content as RadixTooltipContent,
 } from "@radix-ui/react-tooltip";
-import { classNames } from "~/utils";
-import { content } from "./Tooltip.css";
+import { Box } from "../Box";
 
 export interface TooltipContentProps {
   children: ReactNode;
@@ -26,13 +25,27 @@ export const Content = ({
   return (
     <RadixTooltipPortal>
       <RadixTooltipContent
-        className={classNames(content, className)}
+        asChild
+        className={className}
         sideOffset={sideOffset}
         avoidCollisions={avoidCollisions}
         data-macaw-ui-component="Tooltip.Content"
         {...props}
       >
-        {children}
+        <Box
+          borderStyle={children ? "solid" : "none"}
+          borderWidth={1}
+          borderRadius={3}
+          borderColor="default1"
+          padding={children ? 2 : 0}
+          fontSize={1}
+          lineHeight={1}
+          color="default1"
+          backgroundColor="default1"
+          boxShadow="defaultOverlay"
+        >
+          {children}
+        </Box>
       </RadixTooltipContent>
     </RadixTooltipPortal>
   );

src/components/Tooltip/Tooltip.css.ts

@@ -1,19 +1,4 @@
 import { style } from "@vanilla-extract/css";
-import { sprinkles } from "~/theme";
-
-export const content = sprinkles({
-  borderStyle: "solid",
-  borderWidth: 1,
-  borderColor: "default1",
-  backgroundColor: "default1",
-  padding: 2,
-  borderRadius: 3,
-  fontSize: 1,
-  lineHeight: 1,
-  letterSpacing: 1,
-  color: "default1",
-  boxShadow: "defaultOverlay",
-});
 
 export const arrow = style({
   transform: "translateY(-1px)",

src/components/Tooltip/Tooltip.stories.tsx

@@ -91,3 +91,17 @@ export const WithHeading: Story = {
     ],
   },
 };
+
+export const WithoutContent: Story = {
+  args: {
+    open: true,
+    children: [
+      // eslint-disable-next-line react/jsx-key
+      <Tooltip.Trigger>
+        <Button>With heading</Button>
+      </Tooltip.Trigger>,
+      // eslint-disable-next-line react/jsx-key
+      <Tooltip.Content>{null}</Tooltip.Content>,
+    ],
+  },
+};