Fluksio/app
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Button icon-touch/sm-touch sizes replace the repeated touch-target classes

Browse Source
This commit is contained in:
stroblme
2026-10-12 22:02:35 +02:00
parent 59272299f5
commit 237b9d96c6
8 changed files with 49 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Common/OverviewToolbar.tsx
+8 -12
View File
@@ -22,10 +22,6 @@ import {
} from "@/components/ui/tooltip"
import useCustomToast from "@/hooks/useCustomToast"
import { transitions } from "@/lib/motion"
import { cn } from "@/lib/utils"
/** The icon buttons here and in the flow dock are the same touch target. */
const ICON = "size-11 text-muted-foreground md:size-8"
/**
* The bar over the flows and dashboards lists: find one, publish what is
@@ -113,8 +109,8 @@ export function OverviewToolbar({
<Button
ref={trigger}
variant="ghost"
size="icon"
className={ICON}
size="icon-touch"
className="text-muted-foreground"
aria-label={searchLabel}
onClick={() => setOpen(true)}
>
@@ -130,8 +126,8 @@ export function OverviewToolbar({
{selectedCount > 0 ? (
<Button
variant="ghost"
size="icon"
className={cn(ICON, "text-destructive")}
size="icon-touch"
className="text-destructive"
aria-label={`Delete ${selectedCount} selected`}
data-testid="delete-selected"
onClick={onDeleteSelected}
@@ -142,8 +138,8 @@ export function OverviewToolbar({
<DialogTrigger asChild>
<Button
variant="ghost"
size="icon"
className={ICON}
size="icon-touch"
className="text-muted-foreground"
aria-label={createLabel}
data-testid={createTestId}
>
@@ -164,8 +160,8 @@ export function OverviewToolbar({
<span>
<Button
variant="ghost"
size="icon"
className={ICON}
size="icon-touch"
className="text-muted-foreground"
disabled={draftCount === 0 || publishing}
onClick={onPublishAll}
aria-label="Publish all changes"
frontend/src/components/Dashboard/DashboardEditor.tsx
+13 -14
View File
@@ -616,8 +616,8 @@ export function DashboardEditor({
</span>
<Button
variant="outline"
size="sm"
className="h-11 shrink-0 md:h-8"
size="sm-touch"
className="shrink-0"
onClick={reflow}
data-testid="reflow-canvas"
>
@@ -630,8 +630,8 @@ export function DashboardEditor({
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="size-11 text-muted-foreground md:size-8"
size="icon-touch"
className="text-muted-foreground"
onClick={() => setPaletteOpen(true)}
aria-label="Add widget"
data-testid="add-widget"
@@ -646,9 +646,9 @@ export function DashboardEditor({
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
size="icon-touch"
className={cn(
"size-11 text-muted-foreground md:size-8",
"text-muted-foreground",
settingsOpen && "text-primary",
)}
onClick={() => {
@@ -675,8 +675,8 @@ export function DashboardEditor({
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="size-11 text-muted-foreground md:size-8"
size="icon-touch"
className="text-muted-foreground"
onClick={() => setDiscardOpen(true)}
aria-label="Discard the unpublished changes"
data-testid="discard-dashboard"
@@ -697,8 +697,8 @@ export function DashboardEditor({
<span>
<Button
variant="ghost"
size="icon"
className="size-11 text-muted-foreground md:size-8"
size="icon-touch"
className="text-muted-foreground"
onClick={() => void publishDashboard()}
disabled={
!hasDraft || publish.isPending || save.isPending
@@ -736,8 +736,8 @@ export function DashboardEditor({
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="size-11 text-muted-foreground md:size-8"
size="icon-touch"
className="text-muted-foreground"
aria-label="Open the panel view"
data-testid="open-view"
asChild
@@ -756,8 +756,7 @@ export function DashboardEditor({
<Button
variant={edit ? "brand" : "secondary"}
size="sm"
className="h-11 gap-1.5 md:h-8"
size="sm-touch"
onClick={() => setEdit(!edit)}
data-testid="toggle-edit"
>
frontend/src/components/Dashboard/PanelsDialog.tsx
+2 -5
View File
@@ -274,11 +274,8 @@ function PanelRow({
</span>
<Button
variant={confirmRemove ? "destructive" : "ghost"}
size="icon"
className={cn(
"size-11 shrink-0 md:size-8",
!confirmRemove && "text-muted-foreground",
)}
size="icon-touch"
className={cn("shrink-0", !confirmRemove && "text-muted-foreground")}
aria-label={removeLabel}
title={removeLabel}
data-testid={`remove-panel-${panel.id}`}
frontend/src/components/Flow/FlowDock.tsx
+16 -21
View File
@@ -148,8 +148,8 @@ export function FlowDock({
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="size-11 text-muted-foreground md:size-8"
size="icon-touch"
className="text-muted-foreground"
onClick={onAddNode}
aria-label="Add node"
data-testid="add-node"
@@ -171,8 +171,8 @@ export function FlowDock({
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="hidden text-muted-foreground md:inline-flex md:size-8"
size="icon-touch"
className="hidden text-muted-foreground md:inline-flex"
onClick={() => fitView({ ...FIT_VIEW, duration: 300 })}
aria-label="Fit the flow to the screen"
>
@@ -190,9 +190,8 @@ export function FlowDock({
/>
<Button
variant="ghost"
size="sm"
size="sm-touch"
className={cn(
"h-11 gap-1.5 md:h-8",
faults.length > 0
? "text-destructive"
: issuesOpen
@@ -220,11 +219,8 @@ export function FlowDock({
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className={cn(
"size-11 text-muted-foreground md:size-8",
paused && "text-primary",
)}
size="icon-touch"
className={cn("text-muted-foreground", paused && "text-primary")}
onClick={onTogglePause}
disabled={!enabled}
aria-label={paused ? "Resume flow" : "Pause flow"}
@@ -247,8 +243,8 @@ export function FlowDock({
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="size-11 text-muted-foreground md:size-8"
size="icon-touch"
className="text-muted-foreground"
onClick={onStep}
disabled={stepping}
aria-label="Step the flow"
@@ -266,8 +262,7 @@ export function FlowDock({
<span>
<Button
variant="brand"
size="sm"
className="h-11 gap-1.5 md:h-8"
size="sm-touch"
onClick={onRun}
disabled={running || !enabled}
data-testid="run-flow"
@@ -295,8 +290,8 @@ export function FlowDock({
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="size-11 text-muted-foreground md:size-8"
size="icon-touch"
className="text-muted-foreground"
onClick={onEditFlow}
aria-label="Flow settings"
data-testid="edit-flow"
@@ -314,8 +309,8 @@ export function FlowDock({
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="size-11 text-muted-foreground md:size-8"
size="icon-touch"
className="text-muted-foreground"
onClick={onDiscard}
aria-label="Discard the unpublished changes"
data-testid="discard-draft"
@@ -338,8 +333,8 @@ export function FlowDock({
<span>
<Button
variant="ghost"
size="icon"
className="size-11 text-muted-foreground md:size-8"
size="icon-touch"
className="text-muted-foreground"
onClick={onPublish}
disabled={!hasDraft || publishing || saving || !connected}
aria-label="Publish this flow"
frontend/src/components/Flow/LogsPanel.tsx
+2 -5
View File
@@ -57,11 +57,8 @@ export function LogsTrigger({
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className={cn(
"size-11 text-muted-foreground md:size-8",
open && "text-primary",
)}
size="icon-touch"
className={cn("text-muted-foreground", open && "text-primary")}
onClick={() => onOpenChange(!open)}
aria-pressed={open}
aria-label="Logs"
frontend/src/components/ui/button.tsx
+4
View File
@@ -30,6 +30,10 @@ const buttonVariants = cva(
icon: "size-9",
"icon-sm": "size-8",
"icon-lg": "size-10",
// Touch targets: 44px below `md`, 32px above (DESIGN-GUIDELINES.md →
// Responsive).
"icon-touch": "size-11 md:size-8",
"sm-touch": "h-11 md:h-8 rounded-full gap-1.5 px-3 has-[>svg]:px-2.5",
},
},
defaultVariants: {
frontend/src/routes/_layout/dashboards/index.tsx
+2 -2
View File
@@ -143,8 +143,8 @@ function Dashboards() {
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="size-11 text-muted-foreground md:size-8"
size="icon-touch"
className="text-muted-foreground"
aria-label="Panels"
data-testid="open-panels"
onClick={() => setPanelsOpen(true)}
frontend/src/routes/panel.index.tsx
+2 -2
View File
@@ -160,8 +160,8 @@ function PairPanel() {
{started?.code && navigator.clipboard ? (
<Button
variant="ghost"
size="icon"
className="size-11 shrink-0 text-muted-foreground md:size-8"
size="icon-touch"
className="shrink-0 text-muted-foreground"
aria-label="Copy the code"
onClick={() => copy(started.code)}
>