Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add disabled state to dropdown trigger button #338

Merged
merged 4 commits into from
Jan 16, 2025
Merged

Add disabled state to dropdown trigger button #338

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
19dfd25
feat(dropdown): Add disabled state to be passed through to trigger bu…
tho-dan Jan 10, 2025
122388c
chore: add prop, block toggling when disabled, ensure readability, fi…
tho-dan Jan 13, 2025
222c2dd
chore: make example component consistent with docs code block
tho-dan Jan 13, 2025
3c27fc7
chore: elaborate on disabled state in conjunction with custom triggers
tho-dan Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions docs/components/dropdown.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import FwbDropdownExamplePlacement from './dropdown/examples/FwbDropdownExampleP
import FwbDropdownExampleAlignment from './dropdown/examples/FwbDropdownExampleAlignment.vue'
import FwbDropdownExampleListGroup from './dropdown/examples/FwbDropdownExampleListGroup.vue'
import FwbDropdownExampleColors from './dropdown/examples/FwbDropdownExampleColors.vue'
import FwbDropdownExampleDisabled from './dropdown/examples/FwbDropdownExampleDisabled.vue'
import FwbDropdownExampleTrigger from './dropdown/examples/FwbDropdownExampleTrigger.vue'
import FwbDropdownExampleCloseInside from './dropdown/examples/FwbDropdownExampleCloseInside.vue'
</script>
Expand Down Expand Up @@ -239,6 +240,25 @@ import { FwbDropdown } from 'flowbite-vue'
</script>
```

## Dropdown - Disabled
Please note that this has to be manually implemented when using a custom trigger (see below)

<fwb-dropdown-example-disabled />
```vue
<template>
<fwb-dropdown text="Normal state">
Access this content by clicking the dropdown's trigger button
</fwb-dropdown>
<fwb-dropdown text="Disabled state" disabled>
You cannot access this content, since the dropdown's trigger button is disabled
</fwb-dropdown>
</template>

<script setup>
import { FwbDropdown } from 'flowbite-vue'
</script>
```
tho-dan marked this conversation as resolved.
Show resolved Hide resolved

tho-dan marked this conversation as resolved.
Show resolved Hide resolved

## Dropdown - trigger

Expand Down
27 changes: 27 additions & 0 deletions docs/components/dropdown/examples/FwbDropdownExampleDisabled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<template>
<div class="vp-raw flex gap-2 flex-wrap">
<fwb-dropdown
text="Normal State"
>
<div class="w-52">
<p class="p-4">
Access this content by clicking the dropdown's trigger button
</p>
</div>
</fwb-dropdown>
<fwb-dropdown
text="Disabled State"
disabled
>
<div class="w-52">
<p class="p-4">
You cannot access this content, since the dropdown's trigger button is disabled
</p>
</div>
</fwb-dropdown>
</div>
</template>

<script setup>
import { FwbDropdown } from '../../../../src/index'
</script>
3 changes: 2 additions & 1 deletion src/components/FwbDropdown/FwbDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div class="inline-flex items-center">
<fwb-slot-listener @click="onToggle">
<slot name="trigger">
<fwb-button :color="color">
<fwb-button :disabled="disabled" :color="color">

Check warning on line 9 in src/components/FwbDropdown/FwbDropdown.vue

View workflow job for this annotation

GitHub Actions / lint (18.x) 

':color' should be on a new line
tho-dan marked this conversation as resolved.
Show resolved Hide resolved
tho-dan marked this conversation as resolved.
Show resolved Hide resolved
{{ text }}
<template #suffix>
<svg
Expand Down Expand Up @@ -66,6 +66,7 @@
transition?: string
closeInside?: boolean
alignToEnd?: boolean
disabled?: boolean
}>(),
{
placement: 'bottom',
Expand Down
Loading