Skip to content

Commit 53f6097

Browse files
robbandersonclaude
robbanderson
and
claude
committed
feat(apollo-wind): update ButtonGroup and ToggleGroup for Future themes
- ButtonGroup: border-subtle color and 8px radius scoped to future themes - Button: muted-foreground text at rest, foreground on hover, border-subtle for outline variant — all scoped to future-dark and future-light only - Toggle: align base classes with shadcn (focus ring, transition, whitespace), add future:text-muted-foreground, future:hover:text-foreground, future:data-[state=on]:text-foreground - ToggleGroup: add spacing prop for connected/spaced modes, data-[spacing=0] border collapse logic, border-border-subtle for default variant, fix data-variant/data-size defaulting so selectors resolve correctly - ButtonGroup stories: update CanvasModeToolbar to use ToggleGroup component properly, fix WithText to use outline buttons, add future:rounded-lg to outer container, fix CanvasPublishToolbar label color Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 7ed0dc2 commit 53f6097

5 files changed

Lines changed: 45 additions & 34 deletions

File tree

‎packages/apollo-wind/src/components/ui/button-group.stories.tsx‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -221,16 +221,16 @@ export const Sizes = {
221221
export const WithText = {
222222
args: {},
223223
render: () => (
224-
<div className="flex items-center gap-2 rounded-md border p-1">
224+
<div className="flex items-center gap-2 rounded-md border p-1 future:rounded-lg">
225225
<ButtonGroupText>Page</ButtonGroupText>
226226
<ButtonGroup>
227-
<Button variant="ghost" size="sm">
227+
<Button variant="outline" size="sm">
228228
1
229229
</Button>
230-
<Button variant="ghost" size="sm">
230+
<Button variant="outline" size="sm">
231231
2
232232
</Button>
233-
<Button variant="ghost" size="sm">
233+
<Button variant="outline" size="sm">
234234
3
235235
</Button>
236236
</ButtonGroup>
@@ -258,19 +258,9 @@ export const CanvasModeToolbar = {
258258
args: {},
259259
render: () => (
260260
<div className="flex items-center gap-1 rounded-lg border bg-background p-1">
261-
<ToggleGroup type="single" defaultValue="build" className="gap-0">
262-
<ToggleGroupItem
263-
value="build"
264-
className="h-8 rounded-md px-3 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
265-
>
266-
Build
267-
</ToggleGroupItem>
268-
<ToggleGroupItem
269-
value="evaluate"
270-
className="h-8 rounded-md px-3 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
271-
>
272-
Evaluate
273-
</ToggleGroupItem>
261+
<ToggleGroup type="single" defaultValue="build" size="sm">
262+
<ToggleGroupItem value="build">Build</ToggleGroupItem>
263+
<ToggleGroupItem value="evaluate">Evaluate</ToggleGroupItem>
274264
</ToggleGroup>
275265

276266
<Separator orientation="vertical" className="mx-1 h-6" />
@@ -295,7 +285,7 @@ export const CanvasPublishToolbar = {
295285
args: {},
296286
render: () => (
297287
<div className="flex items-center gap-3 rounded-lg border bg-background p-1 pl-3">
298-
<Label htmlFor="toolbar-active" className="text-sm font-medium">
288+
<Label htmlFor="toolbar-active" className="text-sm font-medium future:text-muted-foreground">
299289
Active
300290
</Label>
301291
<Switch id="toolbar-active" />

‎packages/apollo-wind/src/components/ui/button-group.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
1818
className={cn(
1919
'inline-flex',
2020
orientation === 'horizontal'
21-
? '[&>button]:rounded-none [&>button]:border-r-0 [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:last-child]:border-r'
22-
: 'flex-col [&>button]:rounded-none [&>button]:border-b-0 [&>button:first-child]:rounded-t-md [&>button:last-child]:rounded-b-md [&>button:last-child]:border-b',
21+
? '[&>button]:rounded-none [&>button]:border-r-0 [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:last-child]:border-r future:[&>button:first-child]:rounded-l-lg future:[&>button:last-child]:rounded-r-lg'
22+
: 'flex-col [&>button]:rounded-none [&>button]:border-b-0 [&>button:first-child]:rounded-t-md [&>button:last-child]:rounded-b-md [&>button:last-child]:border-b future:[&>button:first-child]:rounded-t-lg future:[&>button:last-child]:rounded-b-lg',
2323
className
2424
)}
2525
{...props}

‎packages/apollo-wind/src/components/ui/button.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,13 @@ const buttonVariants = cva(
1111
variant: {
1212
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
1313
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
14-
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
15-
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
16-
ghost: 'hover:bg-accent hover:text-accent-foreground',
17-
link: 'text-primary underline-offset-4 hover:underline',
14+
outline:
15+
'border border-input bg-background hover:bg-accent hover:text-accent-foreground future:border-border-subtle future:text-muted-foreground future:hover:text-foreground',
16+
secondary:
17+
'bg-secondary text-secondary-foreground hover:bg-secondary/80 future:text-muted-foreground future:hover:text-foreground',
18+
ghost:
19+
'hover:bg-accent hover:text-accent-foreground future:text-muted-foreground future:hover:text-foreground',
20+
link: 'text-primary underline-offset-4 hover:underline future:text-muted-foreground future:hover:text-foreground',
1821
},
1922
size: {
2023
lg: 'h-11 px-8',

‎packages/apollo-wind/src/components/ui/toggle-group.tsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,34 @@ import * as React from 'react';
44
import { toggleVariants } from '@/components/ui/toggle';
55
import { cn } from '@/lib';
66

7-
const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
7+
const ToggleGroupContext = React.createContext<
8+
VariantProps<typeof toggleVariants> & { spacing?: number }
9+
>({
810
size: 'default',
911
variant: 'default',
12+
spacing: 0,
1013
});
1114

1215
const ToggleGroup = React.forwardRef<
1316
React.ElementRef<typeof ToggleGroupPrimitive.Root>,
1417
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
15-
VariantProps<typeof toggleVariants>
16-
>(({ className, variant, size, children, ...props }, ref) => (
18+
VariantProps<typeof toggleVariants> & { spacing?: number }
19+
>(({ className, variant, size, spacing = 0, children, ...props }, ref) => (
1720
<ToggleGroupPrimitive.Root
1821
ref={ref}
19-
className={cn('flex items-center justify-center gap-1', className)}
22+
data-variant={variant ?? 'default'}
23+
data-size={size ?? 'default'}
24+
data-spacing={spacing}
25+
style={{ '--gap': spacing } as React.CSSProperties}
26+
className={cn(
27+
'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
28+
className
29+
)}
2030
{...props}
2131
>
22-
<ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
32+
<ToggleGroupContext.Provider value={{ variant, size, spacing }}>
33+
{children}
34+
</ToggleGroupContext.Provider>
2335
</ToggleGroupPrimitive.Root>
2436
));
2537

@@ -35,11 +47,16 @@ const ToggleGroupItem = React.forwardRef<
3547
return (
3648
<ToggleGroupPrimitive.Item
3749
ref={ref}
50+
data-variant={context.variant ?? variant ?? 'default'}
51+
data-size={context.size ?? size ?? 'default'}
52+
data-spacing={context.spacing ?? 0}
3853
className={cn(
3954
toggleVariants({
4055
variant: context.variant || variant,
4156
size: context.size || size,
4257
}),
58+
'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
59+
'data-[variant=default]:border data-[variant=default]:border-border-subtle data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=default]:border-l-0 data-[spacing=0]:data-[variant=default]:first:border-l data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
4360
className
4461
)}
4562
{...props}

‎packages/apollo-wind/src/components/ui/toggle.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,18 @@ import * as React from 'react';
77
import { cn } from '@/lib';
88

99
const toggleVariants = cva(
10-
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2 cursor-pointer',
10+
'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4 cursor-pointer future:text-muted-foreground future:hover:text-foreground future:data-[state=on]:text-foreground',
1111
{
1212
variants: {
1313
variant: {
1414
default: 'bg-transparent',
15-
outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
15+
outline:
16+
'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
1617
},
1718
size: {
18-
default: 'h-10 px-3 min-w-10',
19-
sm: 'h-9 px-2.5 min-w-9',
20-
lg: 'h-11 px-5 min-w-11',
19+
default: 'h-9 min-w-9 px-2',
20+
sm: 'h-8 min-w-8 px-1.5',
21+
lg: 'h-10 min-w-10 px-2.5',
2122
xs: 'h-6 px-2 min-w-6 text-xs',
2223
},
2324
},

0 commit comments

Comments
 (0)