Skip to content

Commit 78c5855

Browse files
lepturelepture
committed
fix: add more variants for toggle group
1 parent cd53110 commit 78c5855

File tree

7 files changed

+124
-33
lines changed

7 files changed

+124
-33
lines changed

‎.vitepress/config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,9 @@ export default defineConfig({
9090
{
9191
text: 'Addons',
9292
items: [
93+
{ text: 'SocialButton', link: '/addons/social-button' },
9394
{ text: 'Turnstile', link: '/addons/turnstile' },
9495
{ text: 'Iconify', link: '/addons/iconify' },
95-
{ text: 'SocialButton', link: '/addons/social-button' },
9696
],
9797
},
9898
],

‎docs/content/components/toggle-group.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,7 @@ reka: https://reka-ui.com/docs/components/toggle-group
2727
### Variant
2828

2929
<Example name="toggle-group/Variant.vue" />
30+
31+
### Color
32+
33+
<Example name="toggle-group/Color.vue" />

‎docs/examples/toggle-group/Color.vue‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
import { Icon, ToggleGroupRoot, ToggleGroupItem } from '#components'
4+
5+
const selected = ref<string>('left')
6+
</script>
7+
8+
<template>
9+
<div class="flex items-center gap-2">
10+
<ToggleGroupRoot v-model="selected" variant="surface" color="green">
11+
<ToggleGroupItem value="left">
12+
<Icon icon="lucide:align-left" />
13+
</ToggleGroupItem>
14+
<ToggleGroupItem value="center">
15+
<Icon icon="lucide:align-center" />
16+
</ToggleGroupItem>
17+
<ToggleGroupItem value="right">
18+
<Icon icon="lucide:align-right" />
19+
</ToggleGroupItem>
20+
</ToggleGroupRoot>
21+
22+
<ToggleGroupRoot v-model="selected" variant="surface" color="red">
23+
<ToggleGroupItem value="left">
24+
<Icon icon="lucide:align-left" />
25+
</ToggleGroupItem>
26+
<ToggleGroupItem value="center">
27+
<Icon icon="lucide:align-center" />
28+
</ToggleGroupItem>
29+
<ToggleGroupItem value="right">
30+
<Icon icon="lucide:align-right" />
31+
</ToggleGroupItem>
32+
</ToggleGroupRoot>
33+
34+
<ToggleGroupRoot v-model="selected" variant="surface" color="gray">
35+
<ToggleGroupItem value="left">
36+
<Icon icon="lucide:align-left" />
37+
</ToggleGroupItem>
38+
<ToggleGroupItem value="center">
39+
<Icon icon="lucide:align-center" />
40+
</ToggleGroupItem>
41+
<ToggleGroupItem value="right">
42+
<Icon icon="lucide:align-right" />
43+
</ToggleGroupItem>
44+
</ToggleGroupRoot>
45+
</div>
46+
</template>

‎docs/examples/toggle-group/Variant.vue‎

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,68 @@
22
import { ref } from 'vue'
33
import { Icon, ToggleGroupRoot, ToggleGroupItem } from '#components'
44
5-
const selected = ref<string[]>(['left'])
5+
const selected = ref<string>('blog')
66
</script>
77

88
<template>
9-
<div class="flex items-center gap-2">
9+
<div class="flex items-podcast gap-2">
1010
<ToggleGroupRoot v-model="selected" variant="solid">
11-
<ToggleGroupItem value="left">
12-
<Icon icon="lucide:align-left" />
11+
<ToggleGroupItem value="blog">
12+
<Icon icon="lucide:file-text" />
1313
</ToggleGroupItem>
14-
<ToggleGroupItem value="center">
15-
<Icon icon="lucide:align-center" />
14+
<ToggleGroupItem value="podcast">
15+
<Icon icon="lucide:podcast" />
1616
</ToggleGroupItem>
17-
<ToggleGroupItem value="right">
18-
<Icon icon="lucide:align-right" />
17+
<ToggleGroupItem value="photo">
18+
<Icon icon="lucide:file-image" />
1919
</ToggleGroupItem>
2020
</ToggleGroupRoot>
21+
22+
<ToggleGroupRoot v-model="selected" variant="surface">
23+
<ToggleGroupItem value="blog">
24+
<Icon icon="lucide:file-text" />
25+
</ToggleGroupItem>
26+
<ToggleGroupItem value="podcast">
27+
<Icon icon="lucide:podcast" />
28+
</ToggleGroupItem>
29+
<ToggleGroupItem value="photo">
30+
<Icon icon="lucide:file-image" />
31+
</ToggleGroupItem>
32+
</ToggleGroupRoot>
33+
2134
<ToggleGroupRoot v-model="selected" variant="soft">
22-
<ToggleGroupItem value="left">
23-
<Icon icon="lucide:align-left" />
35+
<ToggleGroupItem value="blog">
36+
<Icon icon="lucide:file-text" />
2437
</ToggleGroupItem>
25-
<ToggleGroupItem value="center">
26-
<Icon icon="lucide:align-center" />
38+
<ToggleGroupItem value="podcast">
39+
<Icon icon="lucide:podcast" />
2740
</ToggleGroupItem>
28-
<ToggleGroupItem value="right">
29-
<Icon icon="lucide:align-right" />
41+
<ToggleGroupItem value="photo">
42+
<Icon icon="lucide:file-image" />
3043
</ToggleGroupItem>
3144
</ToggleGroupRoot>
45+
46+
<ToggleGroupRoot v-model="selected" variant="outline">
47+
<ToggleGroupItem value="blog">
48+
<Icon icon="lucide:file-text" />
49+
</ToggleGroupItem>
50+
<ToggleGroupItem value="podcast">
51+
<Icon icon="lucide:podcast" />
52+
</ToggleGroupItem>
53+
<ToggleGroupItem value="photo">
54+
<Icon icon="lucide:file-image" />
55+
</ToggleGroupItem>
56+
</ToggleGroupRoot>
57+
3258
<ToggleGroupRoot v-model="selected" variant="ghost">
33-
<ToggleGroupItem value="left">
34-
<Icon icon="lucide:align-left" />
59+
<ToggleGroupItem value="blog">
60+
<Icon icon="lucide:file-text" />
3561
</ToggleGroupItem>
36-
<ToggleGroupItem value="center">
37-
<Icon icon="lucide:align-center" />
62+
<ToggleGroupItem value="podcast">
63+
<Icon icon="lucide:podcast" />
3864
</ToggleGroupItem>
39-
<ToggleGroupItem value="right">
40-
<Icon icon="lucide:align-right" />
65+
<ToggleGroupItem value="photo">
66+
<Icon icon="lucide:file-image" />
4167
</ToggleGroupItem>
4268
</ToggleGroupRoot>
4369
</div>

‎docs/examples/turnstile/Overview.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@ const token = ref('')
66
</script>
77

88
<template>
9-
<Turnstile sitekey="0x4AAAAAABmL8cu5eZ3JKoY-" v-model="token" />
9+
<Turnstile v-model="token" sitekey="0x4AAAAAABmL8cu5eZ3JKoY-" />
1010
</template>

‎src/components/toggle/ToggleGroupItem.vue‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,15 @@ const forwarded = useForwardProps(props)
2626
width: var(--toggle-item-size);
2727
height: var(--toggle-item-size);
2828
}
29-
.ui-ToggleGroupRoot:where(.r-variant-solid) :where(.ui-ToggleGroupItem:first-child) {
29+
.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:first-child) {
3030
border-top-left-radius: var(--toggle-radius);
3131
border-bottom-left-radius: var(--toggle-radius);
3232
}
33-
.ui-ToggleGroupRoot:where(.r-variant-solid) :where(.ui-ToggleGroupItem:last-child) {
33+
.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:last-child) {
3434
border-top-right-radius: var(--toggle-radius);
3535
border-bottom-right-radius: var(--toggle-radius);
3636
}
37-
.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem),
38-
.ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem) {
37+
.ui-ToggleGroupRoot:where(.r-variant-soft, .r-variant-ghost) :where(.ui-ToggleGroupItem) {
3938
border-radius: var(--toggle-radius);
4039
}
4140
@@ -57,20 +56,27 @@ const forwarded = useForwardProps(props)
5756
background-color: var(--accent-a4);
5857
}
5958
60-
/** solid & ghost */
59+
/** solid, surface ghost */
6160
@media (hover: hover) {
62-
.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-ghost) :where(.ui-ToggleGroupItem:hover) {
61+
.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline, .r-variant-ghost) :where(.ui-ToggleGroupItem:hover) {
6362
background-color: var(--accent-a3);
6463
}
6564
}
66-
.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-ghost) :where(.ui-ToggleGroupItem:focus-visible) {
65+
:where(.ui-ToggleGroupRoot.r-variant-surface, .r-variant-outline) .ui-ToggleGroupItem + .ui-ToggleGroupItem {
66+
box-shadow: -1px 0 0 0 var(--gray-a4);
67+
}
68+
69+
.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outoine, .r-variant-ghost) :where(.ui-ToggleGroupItem:focus-visible) {
6770
outline: 2px solid var(--focus-8);
6871
outline-offset: 2px;
6972
}
7073
.ui-ToggleGroupRoot:where(.r-variant-solid) :where(.ui-ToggleGroupItem[data-disabled]) {
7174
color: var(--gray-a8);
7275
background-color: var(--gray-a3);
7376
}
77+
.ui-ToggleGroupRoot:where(.r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem[data-disabled]) {
78+
color: var(--gray-a8);
79+
}
7480
.ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem[data-disabled]) {
7581
color: var(--gray-a8);
7682
background-color: transparent;
@@ -80,6 +86,13 @@ const forwarded = useForwardProps(props)
8086
color: var(--accent-contrast);
8187
box-shadow: var(--shadow-1);
8288
}
89+
.ui-ToggleGroupRoot:where(.r-variant-surface) :where(.ui-ToggleGroupItem[data-state="on"]) {
90+
background-color: var(--accent-a3);
91+
color: var(--accent-a11);
92+
}
93+
.ui-ToggleGroupRoot:where(.r-variant-outline) :where(.ui-ToggleGroupItem[data-state="on"]) {
94+
color: var(--accent-a11);
95+
}
8396
.ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem[data-state="on"]) {
8497
background-color: var(--accent-a4);
8598
}

‎src/components/toggle/ToggleGroupRoot.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import type { ColorType, RadiusType } from '../types'
88
export interface ToggleGroupRootProps extends _ToggleGroupRootProps {
99
/**
1010
* The visual variant to apply.
11-
* @default "soft"
11+
* @default "solid"
1212
*/
13-
variant?: 'solid' | 'soft' | 'ghost'
13+
variant?: 'solid' | 'soft' | 'surface' | 'outline' | 'ghost'
1414
/** Overrides the accent color inherited from the Theme. */
1515
color?: ColorType
1616
/**
@@ -33,7 +33,7 @@ const emits = defineEmits<ToggleGroupRootEmits>()
3333
3434
const props = withDefaults(defineProps<ToggleGroupRootProps>(), {
3535
size: '2',
36-
variant: 'soft',
36+
variant: 'solid',
3737
})
3838
3939
const forwarded = useForwardPropsEmitsWithout(props, emits, ['color', 'size', 'variant', 'highContrast', 'radius'])
@@ -80,7 +80,9 @@ const resetClass = buildPropsClass(props, ['size', 'variant', 'highContrast'])
8080
--toggle-group-height: var(--space-7);
8181
--toggle-group-soft-padding: 3px;
8282
}
83-
.ui-ToggleGroupRoot:where(.r-variant-solid) {
83+
.ui-ToggleGroupRoot:where(.r-variant-solid),
84+
.ui-ToggleGroupRoot:where(.r-variant-outline),
85+
.ui-ToggleGroupRoot:where(.r-variant-surface) {
8486
border-radius: var(--toggle-radius);
8587
background-color: var(--color-panel-solid);
8688
box-shadow: var(--shadow-2);

0 commit comments

Comments
 (0)