Skip to content

Commit df34619

Browse files
lepturelepture
committed
fix: update select, combobox, radio styles
1 parent c9ad099 commit df34619

File tree

13 files changed

+354
-159
lines changed

13 files changed

+354
-159
lines changed

‎docs/content/components/select.md‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ radix: https://www.radix-ui.com/themes/docs/components/select
77
reka: https://reka-ui.com/docs/components/select
88
---
99

10-
<Example name="select/Overview.vue" />
10+
<Example name="select/Overview.vue" variant="hide" />
1111

1212
## API Reference
1313

@@ -24,3 +24,20 @@ The root element of a select, it contains all the parts of a select.
2424
### SelectContent
2525

2626
<PropsTable name="SelectContent" />
27+
28+
## Examples
29+
30+
### Size
31+
32+
<Example name="select/Size.vue" variant="hide" />
33+
34+
### Variant
35+
36+
The trigger field supports three variants: `soft`, `surface`, and `ghost`.
37+
38+
<Example name="select/TriggerVariant.vue" variant="hide" />
39+
40+
The content popup supports three variants: `soft` and `solid`.
41+
42+
<Example name="select/ContentVariant.vue" variant="hide" />
43+

‎docs/examples/select/ContentVariant.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script setup lang="ts">
2+
import {
3+
SelectRoot,
4+
SelectTrigger,
5+
SelectContent,
6+
SelectGroup,
7+
SelectLabel,
8+
SelectItem,
9+
SelectSeparator,
10+
} from '#components'
11+
</script>
12+
13+
<template>
14+
<div class="flex items-center gap-4">
15+
<SelectRoot>
16+
<SelectTrigger placeholder="Select..." />
17+
<SelectContent variant="soft">
18+
<SelectGroup>
19+
<SelectLabel>Fruits</SelectLabel>
20+
<SelectItem value="orange">Orange</SelectItem>
21+
<SelectItem value="apple">Apple</SelectItem>
22+
<SelectItem value="grape" disabled>Grape</SelectItem>
23+
</SelectGroup>
24+
<SelectSeparator />
25+
<SelectGroup>
26+
<SelectLabel>Vegetables</SelectLabel>
27+
<SelectItem value="carrot">Carrot</SelectItem>
28+
<SelectItem value="potato">Potato</SelectItem>
29+
</SelectGroup>
30+
</SelectContent>
31+
</SelectRoot>
32+
33+
<SelectRoot>
34+
<SelectTrigger placeholder="Select..." />
35+
<SelectContent variant="solid">
36+
<SelectGroup>
37+
<SelectLabel>Fruits</SelectLabel>
38+
<SelectItem value="orange">Orange</SelectItem>
39+
<SelectItem value="apple">Apple</SelectItem>
40+
<SelectItem value="grape" disabled>Grape</SelectItem>
41+
</SelectGroup>
42+
<SelectSeparator />
43+
<SelectGroup>
44+
<SelectLabel>Vegetables</SelectLabel>
45+
<SelectItem value="carrot">Carrot</SelectItem>
46+
<SelectItem value="potato">Potato</SelectItem>
47+
</SelectGroup>
48+
</SelectContent>
49+
</SelectRoot>
50+
</div>
51+
</template>

‎docs/examples/select/Overview.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212

1313
<template>
1414
<SelectRoot default-value="apple">
15-
<SelectTrigger />
15+
<SelectTrigger placeholder="Select..." />
1616
<SelectContent>
1717
<SelectGroup>
1818
<SelectLabel>Fruits</SelectLabel>

‎docs/examples/select/Size.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script setup lang="ts">
2+
import {
3+
SelectRoot,
4+
SelectTrigger,
5+
SelectContent,
6+
SelectGroup,
7+
SelectLabel,
8+
SelectItem,
9+
SelectSeparator,
10+
} from '#components'
11+
</script>
12+
13+
<template>
14+
<div class="flex items-center gap-4">
15+
<SelectRoot size="1">
16+
<SelectTrigger placeholder="Select..." />
17+
<SelectContent>
18+
<SelectGroup>
19+
<SelectLabel>Fruits</SelectLabel>
20+
<SelectItem value="orange">Orange</SelectItem>
21+
<SelectItem value="apple">Apple</SelectItem>
22+
<SelectItem value="grape" disabled>Grape</SelectItem>
23+
</SelectGroup>
24+
<SelectSeparator />
25+
<SelectGroup>
26+
<SelectLabel>Vegetables</SelectLabel>
27+
<SelectItem value="carrot">Carrot</SelectItem>
28+
<SelectItem value="potato">Potato</SelectItem>
29+
</SelectGroup>
30+
</SelectContent>
31+
</SelectRoot>
32+
33+
<SelectRoot size="2">
34+
<SelectTrigger placeholder="Select..." />
35+
<SelectContent>
36+
<SelectGroup>
37+
<SelectLabel>Fruits</SelectLabel>
38+
<SelectItem value="orange">Orange</SelectItem>
39+
<SelectItem value="apple">Apple</SelectItem>
40+
<SelectItem value="grape" disabled>Grape</SelectItem>
41+
</SelectGroup>
42+
<SelectSeparator />
43+
<SelectGroup>
44+
<SelectLabel>Vegetables</SelectLabel>
45+
<SelectItem value="carrot">Carrot</SelectItem>
46+
<SelectItem value="potato">Potato</SelectItem>
47+
</SelectGroup>
48+
</SelectContent>
49+
</SelectRoot>
50+
51+
<SelectRoot size="3">
52+
<SelectTrigger placeholder="Select..." />
53+
<SelectContent>
54+
<SelectGroup>
55+
<SelectLabel>Fruits</SelectLabel>
56+
<SelectItem value="orange">Orange</SelectItem>
57+
<SelectItem value="apple">Apple</SelectItem>
58+
<SelectItem value="grape" disabled>Grape</SelectItem>
59+
</SelectGroup>
60+
<SelectSeparator />
61+
<SelectGroup>
62+
<SelectLabel>Vegetables</SelectLabel>
63+
<SelectItem value="carrot">Carrot</SelectItem>
64+
<SelectItem value="potato">Potato</SelectItem>
65+
</SelectGroup>
66+
</SelectContent>
67+
</SelectRoot>
68+
</div>
69+
</template>

‎docs/examples/select/TriggerVariant.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script setup lang="ts">
2+
import {
3+
SelectRoot,
4+
SelectTrigger,
5+
SelectContent,
6+
SelectGroup,
7+
SelectLabel,
8+
SelectItem,
9+
SelectSeparator,
10+
} from '#components'
11+
</script>
12+
13+
<template>
14+
<div class="flex items-center gap-4">
15+
<SelectRoot>
16+
<SelectTrigger placeholder="Select..." variant="soft" />
17+
<SelectContent>
18+
<SelectGroup>
19+
<SelectLabel>Fruits</SelectLabel>
20+
<SelectItem value="orange">Orange</SelectItem>
21+
<SelectItem value="apple">Apple</SelectItem>
22+
<SelectItem value="grape" disabled>Grape</SelectItem>
23+
</SelectGroup>
24+
<SelectSeparator />
25+
<SelectGroup>
26+
<SelectLabel>Vegetables</SelectLabel>
27+
<SelectItem value="carrot">Carrot</SelectItem>
28+
<SelectItem value="potato">Potato</SelectItem>
29+
</SelectGroup>
30+
</SelectContent>
31+
</SelectRoot>
32+
33+
<SelectRoot>
34+
<SelectTrigger placeholder="Select..." variant="surface" />
35+
<SelectContent>
36+
<SelectGroup>
37+
<SelectLabel>Fruits</SelectLabel>
38+
<SelectItem value="orange">Orange</SelectItem>
39+
<SelectItem value="apple">Apple</SelectItem>
40+
<SelectItem value="grape" disabled>Grape</SelectItem>
41+
</SelectGroup>
42+
<SelectSeparator />
43+
<SelectGroup>
44+
<SelectLabel>Vegetables</SelectLabel>
45+
<SelectItem value="carrot">Carrot</SelectItem>
46+
<SelectItem value="potato">Potato</SelectItem>
47+
</SelectGroup>
48+
</SelectContent>
49+
</SelectRoot>
50+
51+
<SelectRoot>
52+
<SelectTrigger placeholder="Select..." variant="ghost" />
53+
<SelectContent>
54+
<SelectGroup>
55+
<SelectLabel>Fruits</SelectLabel>
56+
<SelectItem value="orange">Orange</SelectItem>
57+
<SelectItem value="apple">Apple</SelectItem>
58+
<SelectItem value="grape" disabled>Grape</SelectItem>
59+
</SelectGroup>
60+
<SelectSeparator />
61+
<SelectGroup>
62+
<SelectLabel>Vegetables</SelectLabel>
63+
<SelectItem value="carrot">Carrot</SelectItem>
64+
<SelectItem value="potato">Potato</SelectItem>
65+
</SelectGroup>
66+
</SelectContent>
67+
</SelectRoot>
68+
</div>
69+
</template>

‎src/components/combobox/ComboboxInput.vue‎

Lines changed: 20 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@ const onInputKeydown = (event: KeyboardEvent) => {
6969
activeIndex.value = -1
7070
}, 800)
7171
}
72+
} else if (input.value && event.key === 'Enter') {
73+
setTimeout(() => {
74+
input.value = ''
75+
})
7276
}
7377
}
7478
@@ -151,6 +155,8 @@ watch(values, () => {
151155
height: var(--combobox-field-height);
152156
padding: var(--combobox-field-border-width);
153157
border-radius: var(--combobox-field-border-radius);
158+
font-size: var(--combobox-field-font-size);
159+
letter-spacing: var(--combobox-field-letter-spacing);
154160
}
155161
156162
.ui-ComboboxField:where([data-multiple="true"]) {
@@ -196,6 +202,10 @@ watch(values, () => {
196202
text-indent: var(--combobox-field-padding);
197203
height: var(--combobox-input-height);
198204
cursor: auto;
205+
206+
/* Reset size 2 padding bottom */
207+
padding-bottom: 0px;
208+
/* Safari credentials autofill icon */
199209
}
200210
201211
.ui-ComboboxField:where([data-multiple="true"]) :where(.ui-ComboboxInput) {
@@ -229,73 +239,15 @@ watch(values, () => {
229239
margin-left: 0;
230240
margin-right: calc(var(--combobox-field-border-width) * -1);
231241
height: var(--combobox-trigger-height);
242+
243+
gap: var(--combobox-trigger-gap);
244+
padding-left: var(--combobox-trigger-padding-x);
245+
padding-right: var(--combobox-trigger-padding-x);
232246
}
233-
:where(.r-size-1) .ui-ComboboxField {
234-
--combobox-field-height: var(--space-5);
235-
--combobox-field-padding: calc(var(--space-1) * 1.5 - var(--combobox-field-border-width));
236-
--combobox-field-border-radius: max(var(--radius-2), var(--radius-full));
237-
--combobox-field-native-icon-size: var(--space-3);
238-
font-size: var(--font-size-1);
239-
letter-spacing: var(--letter-spacing-1);
240-
}
241-
:where(.r-size-1) .ui-ComboboxField :where(.ui-ComboboxTrigger) {
242-
gap: var(--space-2);
243-
padding-left: var(--space-1);
244-
padding-right: var(--space-1);
245-
}
246-
:where(.r-size-1) .ui-ComboboxField :where(.ui-ComboboxInput) {
247-
/* Reset size 2 padding bottom */
248-
padding-bottom: 0px;
249-
/* Safari credentials autofill icon */
250-
}
251-
:where(.r-size-1) .ui-ComboboxField :where(.ui-ComboboxInput)::-webkit-textfield-decoration-container {
252-
padding-right: 0px;
253-
margin-right: -2px;
254-
}
255-
:where(.r-size-2) .ui-ComboboxField {
256-
--combobox-field-height: var(--space-6);
257-
--combobox-field-padding: calc(var(--space-2) - var(--combobox-field-border-width));
258-
--combobox-field-border-radius: max(var(--radius-2), var(--radius-full));
259-
--combobox-field-native-icon-size: var(--space-4);
260-
font-size: var(--font-size-2);
261-
letter-spacing: var(--letter-spacing-2);
262-
}
263-
:where(.r-size-2) .ui-ComboboxField :where(.ui-ComboboxInput) {
264-
/* Avoid 1px baseline jitter when layout around the text field is subpixel-sized (e.g. vh units). */
265-
/* Works because as of Nov 2023, Chrome computes input text bounding box height as 16.5px on @2x screens. */
266-
padding-bottom: 0.5px;
267-
/* Safari credentials autofill icon */
268-
}
269-
:where(.r-size-2) .ui-ComboboxField :where(.ui-ComboboxInput)::-webkit-textfield-decoration-container {
270-
padding-right: 2px;
271-
margin-right: 0px;
272-
}
273-
:where(.r-size-2) .ui-ComboboxField :where(.ui-ComboboxTrigger) {
274-
gap: var(--space-2);
275-
padding-left: var(--space-2);
276-
padding-right: var(--space-2);
277-
}
278-
:where(.r-size-3) .ui-ComboboxField {
279-
--combobox-field-height: var(--space-7);
280-
--combobox-field-padding: calc(var(--space-3) - var(--combobox-field-border-width));
281-
--combobox-field-border-radius: max(var(--radius-3), var(--radius-full));
282-
--combobox-field-native-icon-size: var(--space-4);
283-
font-size: var(--font-size-3);
284-
letter-spacing: var(--letter-spacing-3);
285-
}
286-
:where(.r-size-3) .ui-ComboboxField :where(.ui-ComboboxInput) {
287-
/* Reset size 2 padding bottom */
288-
padding-bottom: 0px;
289-
/* Safari credentials autofill icon */
290-
}
291-
:where(.r-size-3) .ui-ComboboxField :where(.ui-ComboboxInput)::-webkit-textfield-decoration-container {
292-
padding-right: 5px;
293-
margin-right: 0px;
294-
}
295-
:where(.r-size-3) .ui-ComboboxField :where(.ui-ComboboxTrigger) {
296-
gap: var(--space-3);
297-
padding-left: var(--space-3);
298-
padding-right: var(--space-3);
247+
248+
.ui-ComboboxInput::-webkit-textfield-decoration-container {
249+
padding-right: var(--combobox-decoration-container-padding-right);
250+
margin-right: var(--combobox-decoration-container-margin-right);
299251
}
300252
301253
.ui-ComboboxField:where(.r-variant-surface) {
@@ -312,6 +264,7 @@ watch(values, () => {
312264
box-sizing: border-box;
313265
border: var(--combobox-field-border-width) solid var(--combobox-field-border-color);
314266
color: var(--gray-12);
267+
padding: calc(var(--combobox-field-border-width) - var(--combobox-field-border-width));
315268
}
316269
@supports selector(:has(*)) {
317270
.ui-ComboboxField:where(.r-variant-surface):where(:has(.ui-ComboboxInput:focus)) {
@@ -341,6 +294,7 @@ watch(values, () => {
341294
342295
background-color: var(--accent-a3);
343296
color: var(--accent-12);
297+
padding: var(--combobox-field-border-width);
344298
}
345299
@supports selector(:has(*)) {
346300
.ui-ComboboxField:where(.r-variant-soft):where(:has(.ui-ComboboxInput:focus)) {

0 commit comments

Comments
 (0)