From 08e0da096a1ff9a969177424b1594716c6f8d7c9 Mon Sep 17 00:00:00 2001
From: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
Date: Thu, 8 Feb 2024 10:33:23 +0100
Subject: [PATCH] Fix icons in tooltips (#1663)

It wasn't possible to use Comet icons as children of tooltips. This was
due to missing ref-forwarding.
---
 .changeset/perfect-actors-kick.md                  |  5 +++++
 packages/admin/admin-icons/generate-icons.ts       |  6 +++---
 .../src/admin/tooltip/IconWithTooltip.tsx          | 14 ++++++++++++++
 .../admin/cms-admin/src/contentScope/Controls.tsx  |  4 +++-
 .../admin/cms-admin/src/contentScope/Select.tsx    |  4 +++-
 5 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/perfect-actors-kick.md
 create mode 100644 packages/admin/admin-stories/src/admin/tooltip/IconWithTooltip.tsx

diff --git a/.changeset/perfect-actors-kick.md b/.changeset/perfect-actors-kick.md
new file mode 100644
index 0000000000..4cd2ce548b
--- /dev/null
+++ b/.changeset/perfect-actors-kick.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin-icons": patch
+---
+
+Fix icons inside tooltips by forwarding the ref
diff --git a/packages/admin/admin-icons/generate-icons.ts b/packages/admin/admin-icons/generate-icons.ts
index 4128b6f443..da4d50d87f 100644
--- a/packages/admin/admin-icons/generate-icons.ts
+++ b/packages/admin/admin-icons/generate-icons.ts
@@ -93,13 +93,13 @@ const writeComponent = async (icon: Icon, pathData: string) => {
                     */`
                 : ""
         };
-        export function ${icon.componentName}(props: SvgIconProps): JSX.Element {
+        export const ${icon.componentName} = React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
             return (
-                <SvgIcon {...props} viewBox="0 0 16 16">
+                <SvgIcon {...props} ref={ref} viewBox="0 0 16 16">
                     <path d="${pathData}" />
                 </SvgIcon>
             );
-        }
+        });
     `);
 
     if (icon.componentName != null && component != null) {
diff --git a/packages/admin/admin-stories/src/admin/tooltip/IconWithTooltip.tsx b/packages/admin/admin-stories/src/admin/tooltip/IconWithTooltip.tsx
new file mode 100644
index 0000000000..f124863eda
--- /dev/null
+++ b/packages/admin/admin-stories/src/admin/tooltip/IconWithTooltip.tsx
@@ -0,0 +1,14 @@
+import { Tooltip } from "@comet/admin";
+import { Add } from "@comet/admin-icons";
+import { storiesOf } from "@storybook/react";
+import * as React from "react";
+
+storiesOf("@comet/admin", module).add("Icon with Tooltip", () => {
+    return (
+        <>
+            <Tooltip title="Add something">
+                <Add />
+            </Tooltip>
+        </>
+    );
+});
diff --git a/packages/admin/cms-admin/src/contentScope/Controls.tsx b/packages/admin/cms-admin/src/contentScope/Controls.tsx
index 3470d0ab9d..bf5ce2f86f 100644
--- a/packages/admin/cms-admin/src/contentScope/Controls.tsx
+++ b/packages/admin/cms-admin/src/contentScope/Controls.tsx
@@ -7,7 +7,9 @@ import ContentScopeSelect from "./Select";
 export type ContentScopeControlsConfig<S extends ContentScopeInterface = ContentScopeInterface> = {
     [P in keyof S]?: {
         label?: string;
-        icon?: (props: SvgIconProps) => JSX.Element;
+        icon?:
+            | React.ComponentType<SvgIconProps>
+            | React.ForwardRefExoticComponent<React.PropsWithoutRef<SvgIconProps> & React.RefAttributes<SVGSVGElement>>;
         searchable?: boolean;
     };
 };
diff --git a/packages/admin/cms-admin/src/contentScope/Select.tsx b/packages/admin/cms-admin/src/contentScope/Select.tsx
index 68d1091402..f2b9dd1fbf 100644
--- a/packages/admin/cms-admin/src/contentScope/Select.tsx
+++ b/packages/admin/cms-admin/src/contentScope/Select.tsx
@@ -13,7 +13,9 @@ export interface ContentScopeSelectProps {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     onChange: (newValue: any) => void;
     defaultLabel?: string;
-    icon?: (p: SvgIconProps) => JSX.Element;
+    icon?:
+        | React.ComponentType<SvgIconProps>
+        | React.ForwardRefExoticComponent<React.PropsWithoutRef<SvgIconProps> & React.RefAttributes<SVGSVGElement>>;
     disabled?: boolean;
     searchable?: boolean;
 }