monadical/greyhaven-design-system
14
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(htmx-css): ToggleGroup support + padding/primary parity

Browse Source 
Generator (scripts/generate-htmx-css.ts): track `viaVariants` per slot so
slots that compose another component's variant system (e.g. ToggleGroupItem
via toggleVariants) inherit the referenced CVA's base + variant rules under
their own selector. Previously toggle-group-item's CSS contained only its
override classes, shipping with no padding/height/hover/active state.

Toggle (components/ui/toggle.tsx):
  - data-[state=on] now uses bg-primary (orange) instead of bg-accent (grey),
    matching every other "commit" affordance in the palette.
  - Horizontal padding aligned with Button: px-4/px-3/px-6 per size, plus
    has-[>svg]:px-* for icon-only toggles.

ToggleGroup (components/ui/toggle-group.tsx): drop min-w-0 flex-1 shrink-0
from the item override. Items now size to content instead of being clamped
into equal narrow columns where longer labels overflowed the bg box.

Showcase: add ToggleGroup section to the React page (component-matrix.tsx)
and 1:1 HTMX mirror (public/htmx.html) with a new JS bridge branch for
single/multi-select. compare-all.sh extended with the new section; 22/22
pass at ≥99.97%.

Docs: GAPS.md captures the generator gap, overflow root cause, color
rationale, and padding parity with before/after numbers.
This commit is contained in:
Mathieu Virbel
2026-04-24 14:43:55 -06:00
parent 928fdd8f75
commit 90930d8f78
9 changed files with 391 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
components/design-system/component-matrix.tsx
View File

@@ -7,6 +7,7 @@ import { Checkbox } from "@/components/ui/checkbox"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import {
Select,
SelectContent,
@@ -455,6 +456,69 @@ export function ComponentMatrix() {
</div>
</div>
{/* Toggle Group */}
<div id="sub-toggle-group">
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
Toggle Group
</h4>
<div className="border border-border rounded-md p-6 bg-card">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-4">
<div>
<p className="font-sans text-xs text-muted-foreground mb-2">Single, outline</p>
<ToggleGroup type="single" variant="outline" defaultValue="light" aria-label="Theme">
<ToggleGroupItem value="system" aria-label="System">System</ToggleGroupItem>
<ToggleGroupItem value="light" aria-label="Light">Light</ToggleGroupItem>
<ToggleGroupItem value="dark" aria-label="Dark">Dark</ToggleGroupItem>
</ToggleGroup>
</div>
<div>
<p className="font-sans text-xs text-muted-foreground mb-2">Single, default</p>
<ToggleGroup type="single" defaultValue="grid" aria-label="Layout">
<ToggleGroupItem value="list" aria-label="List">List</ToggleGroupItem>
<ToggleGroupItem value="grid" aria-label="Grid">Grid</ToggleGroupItem>
<ToggleGroupItem value="board" aria-label="Board" disabled>Board</ToggleGroupItem>
</ToggleGroup>
</div>
<div>
<p className="font-sans text-xs text-muted-foreground mb-2">Multiple</p>
<ToggleGroup type="multiple" variant="outline" defaultValue={["bold"]} aria-label="Text formatting">
<ToggleGroupItem value="bold" aria-label="Bold">Bold</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Italic">Italic</ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Underline">Underline</ToggleGroupItem>
</ToggleGroup>
</div>
</div>
<div className="space-y-4">
<div>
<p className="font-sans text-xs text-muted-foreground mb-2">Small</p>
<ToggleGroup type="single" variant="outline" size="sm" defaultValue="light" aria-label="Theme (sm)">
<ToggleGroupItem value="system">System</ToggleGroupItem>
<ToggleGroupItem value="light">Light</ToggleGroupItem>
<ToggleGroupItem value="dark">Dark</ToggleGroupItem>
</ToggleGroup>
</div>
<div>
<p className="font-sans text-xs text-muted-foreground mb-2">Default</p>
<ToggleGroup type="single" variant="outline" defaultValue="light" aria-label="Theme (default)">
<ToggleGroupItem value="system">System</ToggleGroupItem>
<ToggleGroupItem value="light">Light</ToggleGroupItem>
<ToggleGroupItem value="dark">Dark</ToggleGroupItem>
</ToggleGroup>
</div>
<div>
<p className="font-sans text-xs text-muted-foreground mb-2">Large</p>
<ToggleGroup type="single" variant="outline" size="lg" defaultValue="light" aria-label="Theme (lg)">
<ToggleGroupItem value="system">System</ToggleGroupItem>
<ToggleGroupItem value="light">Light</ToggleGroupItem>
<ToggleGroupItem value="dark">Dark</ToggleGroupItem>
</ToggleGroup>
</div>
</div>
</div>
</div>
</div>
{/* Tooltips */}
<div>
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">