alice.pds.demo.boltless.dev
This repository has no description
web/components: remove unrelevant comments from ButtonGroup and add clip overflow to prevent button spill
author
eti
committer
dawn
date
(Jul 31, 2026, 10:57 PM +0300)
commit
0c5bca7b
0c5bca7b7c48f6d1bbd6f2a177074eb2509e6a9b
parent
b43abb12
b43abb1212d88e6e10dca1c921bc2b99e45295f5
change-id
nslkwrpl
nslkwrpllkrnwyuywuluutsznwouzotu
+1
-23
+1
-23
web/src/lib/components/ui/ButtonGroup.svelte
+1
-23
web/src/lib/components/ui/ButtonGroup.svelte
···
5
5
export const buttonGroup = tv({
6
6
base: "inline-flex items-center",
7
7
variants: {
8
-
// joined groups are the segmented control from Figma, built the way the appview's
9
-
// .btn-group is: the group alone draws the outer border and the recessed surface,
10
-
// its segments drop their own top/bottom border entirely (border-y-0) and stretch
11
-
// to fill the inner box. that matters because a segment's y-border is the same
12
-
// token as the group's, so keeping both stacks two 1px lines into one 2px-looking
13
-
// edge above and below the selected segment. horizontally the segments keep their
14
-
// border and it's pulled onto the neighbour's (-ml-px) so each seam collapses to a
15
-
// single divider, and the outer ones onto the group's own edge.
16
-
//
17
-
// the recessed surface has to stay darker than the selected segment's
18
-
// bg-background-default, and no single token does that in both modes — subtle is
19
-
// below default in light (#f9fafb vs #fff) but above it in dark (#374151 vs
20
-
// #1f2937) — so dark falls back to canvas (#111827), i.e. the appview's gray-900.
21
8
spaced: {
22
9
true: "gap-2",
23
10
false: [
24
-
"items-stretch gap-0 rounded-sm border border-border-default bg-background-subtle dark:bg-background-canvas",
11
+
"items-stretch gap-0 rounded-sm overflow-hidden border border-border-default bg-background-subtle dark:bg-background-canvas",
25
12
"*:relative *:border-y-0",
26
13
"[&>*:first-child]:-ml-px [&>*:last-child]:-mr-px",
27
14
"[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]",
···
37
24
38
25
export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
39
26
40
-
/**
41
-
* Recipe for using ButtonGroup as a tab/segment switcher (e.g. Open/Closed issue filters,
42
-
* Write/Preview editor tabs). Per Figma, the selected segment reads as a raised, lighter
43
-
* surface (`default` + its inset shadow) while unselected segments are flat `ghost`
44
-
* buttons — never the plain `default` variant, which reads as the *hovered* state of an
45
-
* unselected segment. Figma also gives an unselected segment the same foreground as a
46
-
* selected one, where `ghost` on its own is muted, so the recipe overrides the colour
47
-
* here rather than changing `ghost` everywhere it's used.
48
-
*/
49
27
export function segmentProps(selected: boolean): {
50
28
variant: ButtonVariants["variant"];
51
29
insetShadow: boolean;