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

@@ -0,0 +1,5 @@
+---
+"@comet/admin-icons": patch
+---
+
+Fix icons inside tooltips by forwarding the ref

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) {

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>
+        </>
+    );
+});

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;
     };
 };

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;
 }