yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui/toolbar: fix overly specifify css selectors

Browse Source
This commit is contained in:
Johannes Kirschbauer
2025-07-29 18:50:34 +02:00
parent b421698f70
commit 6e71b541aa
2 changed files with 92 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
pkgs/clan-app/ui/src/components/Toolbar/Toolbar.css
View File

@@ -11,20 +11,20 @@ div.toolbar {
& > hr {
@apply h-full min-h-8;
}
}
& > button.toolbar-button {
@apply w-6 h-6 p-1 rounded-[0.25rem];
button.toolbar-button {
@apply w-6 h-6 p-1 rounded-[0.25rem];
&:hover {
@apply bg-inv-1;
}
&:hover {
@apply bg-inv-1;
}
&:active {
@apply bg-inv-4;
}
&:active {
@apply bg-inv-4;
}
&.selected {
@apply bg-bg-semantic-success-4;
}
&.selected {
@apply bg-bg-semantic-success-4;
}
}

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

@@ -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,82 @@ export const Default: Story = {
),
},
};
export const WithTooltip: Story = {
render: (args) => (
<div class="h-[80vh] flex">
<div class="mt-auto">
<Toolbar {...args} />
</div>
</div>
),
args: {
children: (
<>
<Tooltip
trigger={<ToolbarButton name="select" icon="Cursor" />}
placement="top"
>
<div class="p-1 mb-1">
<Typography
hierarchy="label"
size="s"
color="inherit"
class="text-fg-inv-1"
>
Select an object
</Typography>
</div>
</Tooltip>
<Divider orientation="vertical" />
<Tooltip
trigger={<ToolbarButton name="new-machine" icon="NewMachine" />}
placement="top"
>
<div class="p-1 mb-1">
<Typography
hierarchy="label"
size="s"
color="inherit"
class="text-fg-inv-1"
>
Create a new machine
</Typography>
</div>
</Tooltip>
<Tooltip
trigger={
<ToolbarButton name="modules" icon="Modules" selected={true} />
}
placement="top"
>
<div class="p-1 mb-1">
<Typography
hierarchy="label"
size="s"
color="inherit"
class="text-fg-inv-1"
>
Manage Services
</Typography>
</div>
</Tooltip>
<Tooltip
trigger={<ToolbarButton name="ai" icon="AI" />}
placement="top"
>
<div class="p-1 mb-1">
<Typography
hierarchy="label"
size="s"
color="inherit"
class="text-fg-inv-1"
>
Chat with AI
</Typography>
</div>
</Tooltip>
</>
),
},
};