Merge pull request 'ui/toolbar: fix overly specifify css selectors' (#4525) from toolbar into main

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

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

@@ -1,4 +1,4 @@
-div.toolbar {
+.toolbar {
   @apply flex flex-row items-center justify-center gap-1.5 p-1 size-fit rounded-md self-stretch;
 
   border: 0.0625rem solid theme(colors.off.toolbar_border);
@@ -11,8 +11,9 @@ div.toolbar {
   & > hr {
     @apply h-full min-h-8;
   }
+}
 
-  & > button.toolbar-button {
+.toolbar_button {
   @apply w-6 h-6 p-1 rounded-[0.25rem];
 
   &:hover {
@@ -26,5 +27,4 @@ div.toolbar {
   &.selected {
     @apply bg-bg-semantic-success-4;
   }
-  }
 }

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

@@ -2,6 +2,8 @@ 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",
@@ -25,3 +27,63 @@ export const Default: Story = {
     ),
   },
 };
+
+export const WithTooltip: Story = {
+  // @ts-expect-error: args in storybook is not typed correctly. This is a storybook issue.
+  render: (args) => (
+    <div class="flex h-[80vh]">
+      <div class="mt-auto">
+        <Toolbar {...args} />
+      </div>
+    </div>
+  ),
+  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>
+      </>
+    ),
+  },
+};

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

@@ -1,5 +1,5 @@
-import "./Toolbar.css";
 import { JSX } from "solid-js";
+import styles from "./Toolbar.module.css";
 
 export interface ToolbarProps {
   children: JSX.Element;
@@ -7,7 +7,7 @@ export interface ToolbarProps {
 
 export const Toolbar = (props: ToolbarProps) => {
   return (
-    <div class="toolbar" role="toolbar" aria-orientation="horizontal">
+    <div class={styles.toolbar} role="toolbar" aria-orientation="horizontal">
       {props.children}
     </div>
   );

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

@@ -1,4 +1,4 @@
-import "./Toolbar.css";
+import styles from "./Toolbar.module.css";
 import cx from "classnames";
 import { Button } from "@kobalte/core/button";
 import Icon, { IconVariant } from "@/src/components/Icon/Icon";
@@ -13,7 +13,7 @@ export interface ToolbarButtonProps
 export const ToolbarButton = (props: ToolbarButtonProps) => {
   return (
     <Button
-      class={cx("toolbar-button", { selected: props.selected })}
+      class={cx(styles.toolbar_button, { selected: props.selected })}
       {...props}
     >
       <Icon icon={props.icon} inverted={!props.selected} />