Add disabled state to dropdown trigger button #338
Conversation
WalkthroughThis pull request introduces a disabled state functionality for the Dropdown component. The changes include adding a new Changes
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
docs/components/dropdown/examples/FwbDropdownExampleDisabled.vue (1)
2-2: Consider adding responsive behavior to the flex layout.The current layout might stack items incorrectly on smaller screens.
- <div class="vp-raw flex gap-2 flex-wrap"> + <div class="vp-raw flex flex-col sm:flex-row gap-2 flex-wrap">docs/components/dropdown.md (1)
243-244: Enhance the disabled state documentation.The note about manual implementation with custom triggers is important but could be more detailed.
-Please note that this has to be manually implemented when using a custom trigger (see below) +When using a custom trigger (see below), you'll need to manually implement the disabled state by: +1. Adding the disabled prop to your trigger element +2. Preventing click events when disabled
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/components/dropdown.md(2 hunks)docs/components/dropdown/examples/FwbDropdownExampleDisabled.vue(1 hunks)src/components/FwbDropdown/FwbDropdown.vue(2 hunks)
🧰 Additional context used
🪛 GitHub Check: lint (18.x)
src/components/FwbDropdown/FwbDropdown.vue
[warning] 9-9:
':color' should be on a new line
🪛 Markdownlint (0.37.0)
docs/components/dropdown.md
260-260: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build-pkg (20.x)
🔇 Additional comments (3)
docs/components/dropdown/examples/FwbDropdownExampleDisabled.vue (2)
3-11: LGTM! Clear example of normal state.The implementation effectively demonstrates the default behavior with clear, descriptive content.
12-21: LGTM! Clear example of disabled state.The disabled state is well-implemented with appropriate descriptive content explaining the state.
src/components/FwbDropdown/FwbDropdown.vue (1)
69-69: LGTM! Proper type definition for disabled prop.The disabled prop is correctly added to the props interface with an optional boolean type.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/components/dropdown.md (1)
244-244: Enhance the custom trigger note.The note about custom trigger implementation could be more specific. Consider expanding it to:
"Please note that when using a custom trigger (via the
triggerslot), you'll need to manually implement the disabled state by passing thedisabledprop to your trigger element and handling the disabled state in your click handlers."
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/components/dropdown.md(3 hunks)src/components/FwbDropdown/FwbDropdown.vue(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/FwbDropdown/FwbDropdown.vue
🧰 Additional context used
📓 Learnings (2)
📓 Common learnings
Learnt from: Sqrcz
PR: themesberg/flowbite-vue#338
File: src/components/FwbDropdown/FwbDropdown.vue:9-9
Timestamp: 2025-01-11T13:26:22.708Z
Learning: In Vue components with disabled states, ensure click handlers respect the disabled prop by adding early returns (e.g., `if (props.disabled) return`). The disabled attribute alone on elements isn't sufficient as the click handler can still execute.
Learnt from: Sqrcz
PR: themesberg/flowbite-vue#338
File: docs/components/dropdown.md:243-261
Timestamp: 2025-01-11T13:26:22.855Z
Learning: The `disabled` prop in the FwbDropdown component is a boolean prop that defaults to `false` and controls whether the dropdown trigger button is disabled.
docs/components/dropdown.md (2)
Learnt from: Sqrcz
PR: themesberg/flowbite-vue#338
File: docs/components/dropdown.md:243-261
Timestamp: 2025-01-11T13:26:22.855Z
Learning: The `disabled` prop in the FwbDropdown component is a boolean prop that defaults to `false` and controls whether the dropdown trigger button is disabled.
Learnt from: Sqrcz
PR: themesberg/flowbite-vue#338
File: src/components/FwbDropdown/FwbDropdown.vue:9-9
Timestamp: 2025-01-11T13:26:22.708Z
Learning: In Vue components with disabled states, ensure click handlers respect the disabled prop by adding early returns (e.g., `if (props.disabled) return`). The disabled attribute alone on elements isn't sufficient as the click handler can still execute.
🪛 Markdownlint (0.37.0)
docs/components/dropdown.md
260-260: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🔇 Additional comments (4)
docs/components/dropdown.md (4)
6-6: LGTM!The import statement follows the established pattern and is correctly placed.
247-260: Fix code fence and add language specifier.Add language and highlighting to the code fence.
🧰 Tools
🪛 Markdownlint (0.37.0)
260-260: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
330-330: LGTM!The
disabledprop is correctly documented in the API section with appropriate type and default value.
243-261: Verify click handler implementation.Based on previous learnings, ensure that the click handlers in the
FwbDropdowncomponent respect the disabled prop by adding early returns.Let's verify the implementation:
✅ Verification successful
Implementation correctly handles disabled state ✓
The
FwbDropdowncomponent properly implements the disabled state by:
- Adding early return in the click handler (
if (props.disabled) return)- Passing the disabled prop to the button component
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if click handlers respect the disabled prop # Search for click handlers in the dropdown component ast-grep --pattern 'onClick($$$) { $$$ }' # Search for disabled prop usage in click handlers rg -A 5 'onClick.*disabled'Length of output: 75
Script:
#!/bin/bash # First locate the FwbDropdown component file fd "FwbDropdown.vue" # Then examine its contents for click handlers and disabled prop rg -l "disabled.*prop|@click|v-on:click|onClick" $(fd "FwbDropdown.vue")Length of output: 222
Script:
#!/bin/bash # Get the full content focusing on click handlers and disabled prop cat src/components/FwbDropdown/FwbDropdown.vue | grep -A 10 -B 10 "@click\|v-on:click\|onClick\|disabled"Length of output: 2515
🧰 Tools
🪛 Markdownlint (0.37.0)
260-260: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/components/dropdown.md (1)
243-261: LGTM with a suggestion for enhancement!The documentation clearly explains the disabled state functionality and provides a good example. The note about custom triggers is particularly valuable for implementers.
Consider adding a brief explanation of the visual and behavioral differences between normal and disabled states to help users understand what to expect.
Add a description like:
## Dropdown - Disabled +When disabled, the dropdown trigger button appears grayed out and becomes non-interactive, preventing users from opening the dropdown menu. + Please note that when using a custom trigger...🧰 Tools
🪛 Markdownlint (0.37.0)
260-260: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/components/dropdown.md(3 hunks)
🧰 Additional context used
📓 Learnings (2)
📓 Common learnings
Learnt from: Sqrcz
PR: themesberg/flowbite-vue#338
File: src/components/FwbDropdown/FwbDropdown.vue:9-9
Timestamp: 2025-01-11T13:26:22.708Z
Learning: In Vue components with disabled states, ensure click handlers respect the disabled prop by adding early returns (e.g., `if (props.disabled) return`). The disabled attribute alone on elements isn't sufficient as the click handler can still execute.
Learnt from: Sqrcz
PR: themesberg/flowbite-vue#338
File: docs/components/dropdown.md:243-261
Timestamp: 2025-01-11T13:26:22.855Z
Learning: The `disabled` prop in the FwbDropdown component is a boolean prop that defaults to `false` and controls whether the dropdown trigger button is disabled.
docs/components/dropdown.md (2)
Learnt from: Sqrcz
PR: themesberg/flowbite-vue#338
File: docs/components/dropdown.md:243-261
Timestamp: 2025-01-11T13:26:22.855Z
Learning: The `disabled` prop in the FwbDropdown component is a boolean prop that defaults to `false` and controls whether the dropdown trigger button is disabled.
Learnt from: Sqrcz
PR: themesberg/flowbite-vue#338
File: src/components/FwbDropdown/FwbDropdown.vue:9-9
Timestamp: 2025-01-11T13:26:22.708Z
Learning: In Vue components with disabled states, ensure click handlers respect the disabled prop by adding early returns (e.g., `if (props.disabled) return`). The disabled attribute alone on elements isn't sufficient as the click handler can still execute.
🪛 Markdownlint (0.37.0)
docs/components/dropdown.md
260-260: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🔇 Additional comments (2)
docs/components/dropdown.md (2)
6-6: LGTM!The import statement follows the established naming convention and is properly placed with other example imports.
330-330: Props table update looks good!The disabled prop is properly documented in the API section with correct type and default value.
Introduce a disabled state for the dropdown trigger button, allowing users to indicate when the dropdown is not accessible. Update documentation and examples to reflect this new feature.
Summary by CodeRabbit
New Features
Documentation
Improvements
disabledprop.