Skip to content

Commit cb8e797

Browse files
adenvtadenvt
authored
Merge pull request #1433 from privy-open-source/fix/refine-dropdown
feat(dropdown): refine style and component
2 parents 8651303 + d861321 commit cb8e797

File tree

5 files changed

+215
-20
lines changed

5 files changed

+215
-20
lines changed

‎src/components/dropdown/DropdownItem.vue

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ const tagName = computed(() => {
7676

7777
<style lang="postcss">
7878
.dropdown__item {
79-
@apply px-4 py-2 block cursor-pointer text-subtle w-full select-none text-left;
80-
@apply dark:text-dark-subtle;
79+
@apply px-4 py-2 block cursor-pointer text-default w-full select-none text-left;
80+
@apply dark:text-dark-default;
8181
8282
&:is(a) {
8383
@apply no-underline hover:no-underline hover:text-default;
@@ -97,8 +97,7 @@ const tagName = computed(() => {
9797
}
9898
9999
&:disabled {
100-
@apply bg-default/50 border-subtle pointer-events-none text-subtlest;
101-
@apply dark:bg-dark-default/50 dark:border-dark-subtle dark:text-dark-subtlest;
100+
@apply opacity-50 pointer-events-none;
102101
}
103102
}
104103
</style>

‎src/components/dropdown/DropdownText.spec.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { render } from '@testing-library/vue'
2+
import DropdownText from './DropdownText.vue'
3+
4+
it('should render properly without any props', () => {
5+
const screen = render({
6+
components: { DropdownText },
7+
template : `
8+
<DropdownText>
9+
Text
10+
</DropdownText>
11+
`,
12+
})
13+
14+
const dropdownText = screen.queryByTestId('dropdown-text')
15+
const text = screen.queryByText('Text')
16+
17+
expect(dropdownText).toBeInTheDocument()
18+
expect(dropdownText).toHaveClass('dropdown__item--text')
19+
expect(text).toBeInTheDocument()
20+
})

‎src/components/dropdown/DropdownText.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div
3+
data-testid="dropdown-text"
4+
class="dropdown__item dropdown__item--text">
5+
<slot />
6+
</div>
7+
</template>
8+
<style lang="postcss">
9+
.dropdown__item {
10+
&--text {
11+
@apply cursor-text text-subtle hover:text-subtle;
12+
@apply dark:text-dark-subtle dark:hover:text-dark-subtle;
13+
14+
&:has(.checkbox, .radio) {
15+
@apply py-0 px-0;
16+
17+
.checkbox,
18+
.radio {
19+
@apply py-2 px-4;
20+
}
21+
}
22+
23+
&:not(:has(.checkbox, .radio)) {
24+
@apply hover:bg-transparent;
25+
@apply dark:hover:bg-transparent;
26+
}
27+
28+
.checkbox,
29+
.radio {
30+
@apply flex;
31+
}
32+
}
33+
}
34+
</style>

‎src/components/dropdown/index.md

Lines changed: 157 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ description: Base dropdown button, suit for action menus
88
import pInput from "../input/Input.vue"
99
import pDropdown from "./Dropdown.vue"
1010
import pDropdownItem from "./DropdownItem.vue"
11+
import pDropdownText from "./DropdownText.vue"
1112
import pDropdownHeader from './DropdownHeader.vue'
1213
import pAccordionItem from '../accordion/AccordionItem.vue'
1314
import Banner from '../banner/Banner.vue'
@@ -21,6 +22,7 @@ description: Base dropdown button, suit for action menus
2122
const show = ref(false)
2223
const selected = ref('')
2324
const sample = ref(false)
25+
const radio = ref('')
2426
</script>
2527

2628
# Dropdown
@@ -41,7 +43,7 @@ description: Base dropdown button, suit for action menus
4143
```vue
4244
<template>
4345
<p-dropdown text="Click Here">
44-
<p-dropdown-item>Item Text</p-dropdown-item>
46+
<p-dropdown-item active>Item Text</p-dropdown-item>
4547
<p-dropdown-item>Item Text</p-dropdown-item>
4648
<p-dropdown-item>Item Text</p-dropdown-item>
4749
</p-dropdown>
@@ -209,34 +211,29 @@ You can combine placement with suffix `*-start` and `*-end` to set popup positio
209211

210212
### Variant, Color and Size
211213

212-
Every props in [Button][button] like `variant`, `color`, `size`, `pill` and `icon` also works in here.
214+
Every props in [Button][button] like `variant`, `color`, `size` and `icon` also works in here.
213215
Check out [Button][button] for more information.
214216

215217
<preview>
216218
<p-dropdown
217219
text="Button"
218-
variant="outline"
219-
color="secondary"
220-
size="lg"
221-
pill
222-
icon>
223-
<p-dropdown-item>Item Text</p-dropdown-item>
224-
<p-dropdown-item>Item Text</p-dropdown-item>
220+
variant="link"
221+
color="info">
222+
<p-dropdown-item active>Item Text</p-dropdown-item>
225223
<p-dropdown-item>Item Text</p-dropdown-item>
224+
<p-dropdown-item disabled>Item Text</p-dropdown-item>
226225
</p-dropdown>
227226
</preview>
228227

229228
```vue
230229
<template>
231230
<p-dropdown
232231
text="Button"
233-
variant="outline"
234-
color="secondary"
235-
size="lg"
236-
pill>
237-
<p-dropdown-item>Item Text</p-dropdown-item>
238-
<p-dropdown-item>Item Text</p-dropdown-item>
232+
variant="link"
233+
color="info">
234+
<p-dropdown-item active>Item Text</p-dropdown-item>
239235
<p-dropdown-item>Item Text</p-dropdown-item>
236+
<p-dropdown-item disabled>Item Text</p-dropdown-item>
240237
</p-dropdown>
241238
</template>
242239
```
@@ -308,6 +305,123 @@ You can also completely change dropdown's activator button to something else via
308305
</template>
309306
```
310307

308+
### Custom dropdown item
309+
310+
#### With checkbox
311+
<preview>
312+
<p-dropdown
313+
text="Label">
314+
<p-dropdown-text>
315+
<p-checkbox>Checklist Label</p-checkbox>
316+
</p-dropdown-text>
317+
<p-dropdown-text>
318+
<p-checkbox>Checklist Label</p-checkbox>
319+
</p-dropdown-text>
320+
<p-dropdown-text>
321+
<p-checkbox>Checklist Label</p-checkbox>
322+
</p-dropdown-text>
323+
</p-dropdown>
324+
</preview>
325+
326+
```vue
327+
<template>
328+
<p-dropdown
329+
text="Label">
330+
<p-dropdown-text>
331+
<p-checkbox>Checklist Label</p-checkbox>
332+
</p-dropdown-text>
333+
<p-dropdown-text>
334+
<p-checkbox>Checklist Label</p-checkbox>
335+
</p-dropdown-text>
336+
<p-dropdown-text>
337+
<p-checkbox>Checklist Label</p-checkbox>
338+
</p-dropdown-text>
339+
</p-dropdown>
340+
</template>
341+
```
342+
343+
344+
#### With radio
345+
<preview>
346+
<p-dropdown
347+
text="Label">
348+
<p-dropdown-text>
349+
<p-radio v-model="radio" value="list 1">Checklist Label</p-radio>
350+
</p-dropdown-text>
351+
<p-dropdown-text>
352+
<p-radio v-model="radio" value="list 2">Checklist Label</p-radio>
353+
</p-dropdown-text>
354+
<p-dropdown-text>
355+
<p-radio v-model="radio" value="list 3">Checklist Label</p-radio>
356+
</p-dropdown-text>
357+
</p-dropdown>
358+
</preview>
359+
360+
```vue
361+
<template>
362+
<p-dropdown
363+
text="Label">
364+
<p-dropdown-text>
365+
<p-radio v-model="radio" value="list 1">Checklist Label</p-radio>
366+
</p-dropdown-text>
367+
<p-dropdown-text>
368+
<p-radio v-model="radio" value="list 2">Checklist Label</p-radio>
369+
</p-dropdown-text>
370+
<p-dropdown-text>
371+
<p-radio v-model="radio" value="list 3">Checklist Label</p-radio>
372+
</p-dropdown-text>
373+
</p-dropdown>
374+
</template>
375+
```
376+
377+
#### With radio option
378+
<preview>
379+
<p-dropdown
380+
text="Label">
381+
<p-dropdown-text>
382+
<p-radio v-model="radio" appearance="option" value="list 1">Checklist Label</p-radio>
383+
</p-dropdown-text>
384+
<p-dropdown-text>
385+
<p-radio v-model="radio" appearance="option" value="list 2">Checklist Label</p-radio>
386+
</p-dropdown-text>
387+
<p-dropdown-text>
388+
<p-radio v-model="radio" appearance="option" value="list 3">Checklist Label</p-radio>
389+
</p-dropdown-text>
390+
</p-dropdown>
391+
</preview>
392+
393+
```vue
394+
<template>
395+
<p-dropdown
396+
text="Label">
397+
<p-dropdown-text>
398+
<p-radio
399+
v-model="option"
400+
appearance="option"
401+
value="list 1">
402+
Checklist Label
403+
</p-radio>
404+
</p-dropdown-text>
405+
<p-dropdown-text>
406+
<p-radio
407+
v-model="option"
408+
appearance="option"
409+
value="list 2">
410+
Checklist Label
411+
</p-radio>
412+
</p-dropdown-text>
413+
<p-dropdown-text>
414+
<p-radio
415+
v-model="option"
416+
appearance="option"
417+
value="list 3">
418+
Checklist Label
419+
</p-radio>
420+
</p-dropdown-text>
421+
</p-dropdown>
422+
</template>
423+
```
424+
311425
## Disabled State
312426

313427
<preview>
@@ -330,6 +444,34 @@ You can also completely change dropdown's activator button to something else via
330444
</template>
331445
```
332446

447+
## Dropdown Text
448+
<preview>
449+
<p-dropdown
450+
text="Label">
451+
<p-dropdown-text>
452+
But I must explain to you how all this mistaken idea of denouncing pleasure
453+
<span class="block mt-2">And this is more example text</span>
454+
</p-dropdown-text>
455+
<p-dropdown-item>Item Text</p-dropdown-item>
456+
<p-dropdown-item>Item Text</p-dropdown-item>
457+
</p-dropdown>
458+
</preview>
459+
460+
```vue
461+
<template>
462+
<p-dropdown
463+
text="Label">
464+
<p-dropdown-text>
465+
But I must explain to you how all
466+
this mistaken idea of denouncing pleasure
467+
<span class="block mt-2">And this is more example text</span>
468+
</p-dropdown-text>
469+
<p-dropdown-item>Item Text</p-dropdown-item>
470+
<p-dropdown-item>Item Text</p-dropdown-item>
471+
</p-dropdown>
472+
</template>
473+
```
474+
333475
## Dropdown Header
334476
<preview>
335477
<p-dropdown

‎src/components/radio/Radio.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ defineSlots<{
175175
* checked radio
176176
*/
177177
&&--checked {
178-
&:not(.radio--checkbox) {
178+
&:not(.radio--checkbox, .radio--option) {
179179
.radio__icon {
180180
@apply bg-default;
181181
@apply dark:bg-dark-inverse;

0 commit comments

Comments
 (0)