Merge pull request 'ui/cubes: scene add tooltip descriptions to toolbar' (#4866) from api-modules-unify into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4866

pkgs/clan-app/ui/src/components/Form/HostFileInput.module.css

@@ -5,3 +5,14 @@
 .horizontal_button {
   @apply grow max-w-[18rem];
 }
+
+/* Vendored from tooltip */
+.tooltipContent {
+  @apply z-50 px-2 py-0.5 bg-inv-4 rounded-[0.125rem] leading-none;
+
+  max-width: min(calc(100vw - 16px), 380px);
+
+  &.inverted {
+    @apply bg-def-2;
+  }
+}

pkgs/clan-app/ui/src/components/Form/HostFileInput.tsx

@@ -87,7 +87,7 @@ export const HostFileInput = (props: HostFileInputProps) => {
         {value() && (
           <Tooltip placement="top">
             <Tooltip.Portal>
-              <Tooltip.Content class="tooltip-content">
+              <Tooltip.Content class={styles.tooltipContent}>
                 <Typography
                   hierarchy="body"
                   size="xs"

pkgs/clan-app/ui/src/components/Form/Label.tsx

@@ -55,23 +55,14 @@ export const Label = (props: LabelProps) => {
             <Tooltip
               placement="top"
               inverted={props.inverted}
-              trigger={
-                <Icon
-                  icon="Info"
-                  color="tertiary"
-                  inverted={props.inverted}
-                  size={props.size == "default" ? "0.85em" : "0.75rem"}
-                />
-              }
+              description={props.tooltip}
             >
-              <Typography
-                hierarchy="body"
-                size="xs"
-                weight="medium"
-                inverted={!props.inverted}
-              >
-                {props.tooltip}
-              </Typography>
+              <Icon
+                icon="Info"
+                color="tertiary"
+                inverted={props.inverted}
+                size={props.size == "default" ? "0.85em" : "0.75rem"}
+              />
             </Tooltip>
           )}
         </props.labelComponent>

pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx

@@ -2,8 +2,6 @@ import { Meta, StoryObj } from "@kachurun/storybook-solid";
 import { Toolbar, ToolbarProps } from "@/src/components/Toolbar/Toolbar";
 import { Divider } from "@/src/components/Divider/Divider";
 import { ToolbarButton } from "./ToolbarButton";
-import { Tooltip } from "../Tooltip/Tooltip";
-import { Typography } from "../Typography/Typography";
 
 const meta: Meta<ToolbarProps> = {
   title: "Components/Toolbar",
@@ -18,11 +16,24 @@ export const Default: Story = {
   args: {
     children: (
       <>
-        <ToolbarButton name="select" icon="Cursor" />
-        <ToolbarButton name="new-machine" icon="NewMachine" />
+        <ToolbarButton
+          name="select"
+          icon="Cursor"
+          description="Select my thing"
+        />
+        <ToolbarButton
+          name="new-machine"
+          icon="NewMachine"
+          description="Select this thing"
+        />
         <Divider orientation="vertical" />
-        <ToolbarButton name="modules" icon="Modules" selected={true} />
-        <ToolbarButton name="ai" icon="AI" />
+        <ToolbarButton
+          name="modules"
+          icon="Modules"
+          selected={true}
+          description="Add service"
+        />
+        <ToolbarButton name="ai" icon="AI" description="Call your AI Manager" />
       </>
     ),
   },
@@ -40,49 +51,22 @@ export const WithTooltip: Story = {
   args: {
     children: (
       <>
-        <Tooltip
-          trigger={<ToolbarButton name="select" icon="Cursor" />}
-          placement="top"
-        >
-          <div class="mb-1 p-1 text-fg-inv-1">
-            <Typography hierarchy="label" size="s" color="inherit">
-              Select an object
-            </Typography>
-          </div>
-        </Tooltip>
-        <Divider orientation="vertical" />
-        <Tooltip
-          trigger={<ToolbarButton name="new-machine" icon="NewMachine" />}
-          placement="top"
-        >
-          <div class="mb-1 p-1 text-fg-inv-1">
-            <Typography hierarchy="label" size="s" color="inherit">
-              Create a new machine
-            </Typography>
-          </div>
-        </Tooltip>
-        <Tooltip
-          trigger={
-            <ToolbarButton name="modules" icon="Modules" selected={true} />
-          }
-          placement="top"
-        >
-          <div class="mb-1 p-1 text-fg-inv-1">
-            <Typography hierarchy="label" size="s" color="inherit">
-              Manage Services
-            </Typography>
-          </div>
-        </Tooltip>
-        <Tooltip
-          trigger={<ToolbarButton name="ai" icon="AI" />}
-          placement="top"
-        >
-          <div class="mb-1 p-1 text-fg-inv-1">
-            <Typography hierarchy="label" size="s" color="inherit">
-              Chat with AI
-            </Typography>
-          </div>
-        </Tooltip>
+        <ToolbarButton name="select" icon="Cursor" description="Select" />
+
+        <ToolbarButton
+          name="new-machine"
+          icon="NewMachine"
+          description="Select"
+        />
+
+        <ToolbarButton
+          name="modules"
+          icon="Modules"
+          selected={true}
+          description="Select"
+        />
+
+        <ToolbarButton name="ai" icon="AI" description="Select" />
       </>
     ),
   },

pkgs/clan-app/ui/src/components/Toolbar/ToolbarButton.tsx

@@ -3,22 +3,26 @@ import cx from "classnames";
 import { Button } from "@kobalte/core/button";
 import Icon, { IconVariant } from "@/src/components/Icon/Icon";
 import type { JSX } from "solid-js";
+import { Tooltip } from "../Tooltip/Tooltip";
 
 export interface ToolbarButtonProps
   extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
   icon: IconVariant;
+  description: JSX.Element;
   selected?: boolean;
 }
 
 export const ToolbarButton = (props: ToolbarButtonProps) => {
   return (
-    <Button
-      class={cx(styles.toolbar_button, {
-        [styles["selected"]]: props.selected,
-      })}
-      {...props}
-    >
-      <Icon icon={props.icon} inverted={!props.selected} />
-    </Button>
+    <Tooltip description={props.description} gutter={10} placement="top">
+      <Button
+        class={cx(styles.toolbar_button, {
+          [styles["selected"]]: props.selected,
+        })}
+        {...props}
+      >
+        <Icon icon={props.icon} inverted={!props.selected} />
+      </Button>
+    </Tooltip>
   );
 };

pkgs/clan-app/ui/src/components/Tooltip/Tooltip.module.css

@@ -1,4 +1,4 @@
-div.tooltip-content {
+.tooltipContent {
   @apply z-50 px-2 py-0.5 bg-inv-4 rounded-[0.125rem] leading-none;
 
   max-width: min(calc(100vw - 16px), 380px);

pkgs/clan-app/ui/src/components/Tooltip/Tooltip.tsx

@@ -1,31 +1,40 @@
-import "./Tooltip.css";
 import {
   Tooltip as KTooltip,
   TooltipRootProps as KTooltipRootProps,
 } from "@kobalte/core/tooltip";
 import cx from "classnames";
 import { JSX } from "solid-js";
+import styles from "./Tooltip.module.css";
+import { Typography } from "../Typography/Typography";
 
 export interface TooltipProps extends KTooltipRootProps {
   inverted?: boolean;
-  trigger: JSX.Element;
   children: JSX.Element;
+  description: JSX.Element;
   animation?: "bounce";
 }
 
 export const Tooltip = (props: TooltipProps) => {
   return (
     <KTooltip {...props}>
-      <KTooltip.Trigger>{props.trigger}</KTooltip.Trigger>
+      <KTooltip.Trigger>{props.children}</KTooltip.Trigger>
       <KTooltip.Portal>
         <KTooltip.Content
-          class={cx("tooltip-content", {
-            inverted: props.inverted,
+          class={cx(styles.tooltipContent, {
+            [styles.inverted]: props.inverted,
             "animate-bounce": props.animation == "bounce",
           })}
         >
           {props.placement == "bottom" && <KTooltip.Arrow />}
-          {props.children}
+          <Typography
+            hierarchy="body"
+            size="s"
+            weight="medium"
+            color="primary"
+            inverted={!props.inverted}
+          >
+            {props.description}
+          </Typography>
           {props.placement == "top" && <KTooltip.Arrow />}
         </KTooltip.Content>
       </KTooltip.Portal>

pkgs/clan-app/ui/src/routes/Onboarding/Creating.tsx

@@ -1,14 +1,15 @@
 import { Tooltip } from "@/src/components/Tooltip/Tooltip";
-import { Typography } from "@/src/components/Typography/Typography";
 
 import "./Creating.css";
 
 export const Creating = () => (
   <div class="creating">
-    <Tooltip open={true} placement="top" trigger={<div />}>
-      <Typography hierarchy="body" size="xs" weight="medium" inverted={true}>
-        Your Clan is being created
-      </Typography>
+    <Tooltip
+      open={true}
+      placement="top"
+      description={"Your Clan is being created"}
+    >
+      <div></div>
     </Tooltip>
 
     <div class="scene">

pkgs/clan-app/ui/src/scene/cubes.tsx

@@ -530,12 +530,14 @@ export function CubeScene(props: {
       <div class="toolbar-container">
         <Toolbar>
           <ToolbarButton
+            description="Select machine"
             name="Select"
             icon="Cursor"
             onClick={() => setWorldMode("view")}
             selected={worldMode() === "view"}
           />
           <ToolbarButton
+            description="Create new machine"
             name="new-machine"
             icon="NewMachine"
             disabled={positionMode() === "circle"}
@@ -544,6 +546,7 @@ export function CubeScene(props: {
           />
           <Divider orientation="vertical" />
           <ToolbarButton
+            description="Add new Service"
             name="modules"
             icon="Modules"
             onClick={() => {
@@ -558,7 +561,11 @@ export function CubeScene(props: {
               renderLoop.requestRender();
             }}
           />
-          <ToolbarButton name="delete" icon="Trash" />
+          {/* <ToolbarButton
+            description="Delete Machine"
+            name="delete"
+            icon="Trash"
+          /> */}
         </Toolbar>
       </div>
     </>