From b05d383190285bb2972f7d8704b14fefd19fbf7b Mon Sep 17 00:00:00 2001 From: BenGSchulz Date: Thu, 22 Oct 2026 14:43:02 -0700 Subject: [PATCH] fix(apollo-wind): build the field header actions on the 3xs Button [MST-16146] FormFieldHeader's row is `min-h-6`, the height of a `3xs` Button, but the AI assist and Insert variable actions, and QuickFormField's field type and compact Required triggers, were hand-built 28px buttons. Every header that carried them grew to 28px, and a layout that hid them had to restate that height to keep the row still. They are now ghost `3xs` Buttons in the muted tone of the field's other icon buttons, with 12px icons, so the header is the 24px row it is meant to be. The 3xs padding is already the collapsed padding, so the collapsed padding override goes. Co-Authored-By: Claude Opus 5.5 --- .../ui/field-actions/ai-assist-action.tsx | 12 ++++--- .../components/ui/field-actions/collapse.ts | 11 ++++-- .../field-actions/insert-variable-action.tsx | 19 +++++----- .../components/field-header.tsx | 36 +++++++++---------- .../quick-form-field.stories.tsx | 12 ++++--- 5 files changed, 50 insertions(+), 40 deletions(-) diff --git a/packages/apollo-wind/src/components/ui/field-actions/ai-assist-action.tsx b/packages/apollo-wind/src/components/ui/field-actions/ai-assist-action.tsx index 3e09221c8d..fda930f1e5 100644 --- a/packages/apollo-wind/src/components/ui/field-actions/ai-assist-action.tsx +++ b/packages/apollo-wind/src/components/ui/field-actions/ai-assist-action.tsx @@ -5,6 +5,7 @@ import { Label } from '@/components/ui/label'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import { Textarea } from '@/components/ui/textarea'; import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; +import { FIELD_ACTION_CLASS } from './collapse'; export interface AiAssistActionStrings { trigger: string; @@ -100,14 +101,17 @@ export function AiAssistAction({ - + + {text.tooltip} diff --git a/packages/apollo-wind/src/components/ui/field-actions/collapse.ts b/packages/apollo-wind/src/components/ui/field-actions/collapse.ts index aad2f6aa4f..65eb95c395 100644 --- a/packages/apollo-wind/src/components/ui/field-actions/collapse.ts +++ b/packages/apollo-wind/src/components/ui/field-actions/collapse.ts @@ -4,7 +4,12 @@ /** Hidden once collapsed, such as an action's text. */ export const COLLAPSED_HIDDEN = '@max-[259px]:hidden'; -/** The tighter padding of an action collapsed to its icon. */ -export const COLLAPSED_ICON_PADDING = '@max-[259px]:px-1.5'; /** Shown only once collapsed. */ -export const COLLAPSED_ONLY = 'hidden @max-[259px]:block'; +export const COLLAPSED_ONLY = 'hidden @max-[259px]:flex'; + +/** + * A header action is a ghost `3xs` Button, the height FormFieldHeader's `min-h-6` row expects, in + * the muted tone of the field's other icon buttons. Its icons are 12px. + */ +export const FIELD_ACTION_CLASS = + 'text-muted-foreground hover:bg-accent hover:text-foreground [&_svg]:size-3'; diff --git a/packages/apollo-wind/src/components/ui/field-actions/insert-variable-action.tsx b/packages/apollo-wind/src/components/ui/field-actions/insert-variable-action.tsx index e838ecf8c7..ea4945d6d4 100644 --- a/packages/apollo-wind/src/components/ui/field-actions/insert-variable-action.tsx +++ b/packages/apollo-wind/src/components/ui/field-actions/insert-variable-action.tsx @@ -1,12 +1,13 @@ import { Braces, ChevronDown } from 'lucide-react'; import { useState } from 'react'; +import { Button } from '@/components/ui/button'; import { type RenderVariablePicker, VariablePicker, type VariablePickerItem, } from '@/components/ui/variable-picker'; import { cn } from '@/lib'; -import { COLLAPSED_HIDDEN, COLLAPSED_ICON_PADDING } from './collapse'; +import { COLLAPSED_HIDDEN, FIELD_ACTION_CLASS } from './collapse'; // Shared, so an omitted `variables` is the same list on every render. const NO_VARIABLES: VariablePickerItem[] = []; @@ -100,21 +101,19 @@ export function InsertVariableAction({ if (variable.value) onInsert?.(variable.value, variable); }} > - + + ); } diff --git a/packages/apollo-wind/src/components/ui/quick-form-field/components/field-header.tsx b/packages/apollo-wind/src/components/ui/quick-form-field/components/field-header.tsx index 63bf4a3cba..d7a3160d88 100644 --- a/packages/apollo-wind/src/components/ui/quick-form-field/components/field-header.tsx +++ b/packages/apollo-wind/src/components/ui/quick-form-field/components/field-header.tsx @@ -1,6 +1,7 @@ import { Asterisk, ChevronDown } from 'lucide-react'; import type { ReactNode } from 'react'; import { useMemo } from 'react'; +import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, @@ -14,11 +15,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp import type { VariablePickerItem } from '@/components/ui/variable-picker'; import { cn } from '@/lib'; import { AiAssistAction } from '../../field-actions/ai-assist-action'; -import { - COLLAPSED_HIDDEN, - COLLAPSED_ICON_PADDING, - COLLAPSED_ONLY, -} from '../../field-actions/collapse'; +import { COLLAPSED_HIDDEN, COLLAPSED_ONLY, FIELD_ACTION_CLASS } from '../../field-actions/collapse'; import { InsertVariableAction } from '../../field-actions/insert-variable-action'; import type { QuickFieldType, QuickFormFieldOption, QuickFormFieldStrings } from '../types'; import { FIELD_TYPE_META, FIELD_TYPE_ORDER } from '../types'; @@ -88,8 +85,7 @@ export function FieldHeader({ const typeMeta = FIELD_TYPE_META[fieldType]; const typeLabel = strings.typeLabels[fieldType] ?? typeMeta.label; const collapsedTextClass = cn(COLLAPSED_HIDDEN, compact && '!hidden'); - const collapsedPaddingClass = cn(COLLAPSED_ICON_PADDING, compact && '!px-1.5'); - const compactOnlyClass = cn(COLLAPSED_ONLY, compact && '!block'); + const compactOnlyClass = cn(COLLAPSED_ONLY, compact && '!flex'); const hasActions = !!onFieldTypeChange || !!onRequiredChange || showFieldActions || headerActions != null; @@ -113,19 +109,18 @@ export function FieldHeader({ - + + {strings.fieldTypeTooltip} @@ -177,16 +172,19 @@ export function FieldHeader({ - + + {strings.requiredTooltip} diff --git a/packages/apollo-wind/src/components/ui/quick-form-field/quick-form-field.stories.tsx b/packages/apollo-wind/src/components/ui/quick-form-field/quick-form-field.stories.tsx index 8eb4afe800..51d971fc9c 100644 --- a/packages/apollo-wind/src/components/ui/quick-form-field/quick-form-field.stories.tsx +++ b/packages/apollo-wind/src/components/ui/quick-form-field/quick-form-field.stories.tsx @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import { Braces, Code2, MessageSquareText, Trash2, Type } from 'lucide-react'; import { useId, useState } from 'react'; +import { Button } from '../button'; import { DropdownMenu, DropdownMenuContent, @@ -74,16 +75,19 @@ type Story = StoryObj; function DeleteFieldButton({ onDelete }: { onDelete?: () => void }) { return ( - + + ); }