add ability to override default dropzone placeholder #395
Conversation
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughA named slot called Changes
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/FwbFileInput/FwbFileInput.vue(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - sensational-seahorse-8635f8
- GitHub Check: Header rules - sensational-seahorse-8635f8
- GitHub Check: Pages changed - sensational-seahorse-8635f8
| <slot name="dropzonePlaceholder"> | ||
| <span class="font-semibold">Click to upload</span> | ||
| or drag and drop | ||
| </slot> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Well-implemented slot customization with minor naming discrepancy.
The named slot implementation is technically sound and successfully enables dropzone placeholder customization while maintaining backward compatibility. The default content preserves the original functionality.
However, there's a naming inconsistency: the PR objectives mention a slot named "placeholder," but the implementation uses "dropzonePlaceholder." Consider verifying this naming choice aligns with the intended API design.
🏁 Script executed:
#!/bin/bash
# Verify if there are any references to the slot name in documentation or tests
rg -i "dropzonePlaceholder|placeholder.*slot" --type md --type vue --type ts --type jsLength of output: 116
Let’s re-run the search using file globs so .vue files are included:
🏁 Script executed:
#!/bin/bash
# Search for slot references in docs, code, and tests
rg -i "dropzonePlaceholder|placeholder.*slot" --glob "*.vue" --glob "*.md" --glob "*.ts" --glob "*.js"Length of output: 510
Align slot naming and update documentation
There’s an inconsistency between FwbAvatar (uses a placeholder slot) and FwbFileInput (introduces dropzonePlaceholder), and no docs reference the new slot. Please:
• Decide on a consistent API—either rename the slot in FwbFileInput to placeholder
• or update any related docs/tests to mention dropzonePlaceholder
• Ensure all Markdown docs (e.g. under docs/components/) and example usages are updated to reflect the chosen slot name
🤖 Prompt for AI Agents
In src/components/FwbFileInput/FwbFileInput.vue around lines 46 to 49, there is
a slot named "dropzonePlaceholder" which is inconsistent with the "placeholder"
slot used in FwbAvatar and documentation. To fix this, rename the slot from
"dropzonePlaceholder" to "placeholder" in the component code, and update all
related Markdown documentation and example usages under docs/components/ and any
tests to reflect this consistent slot name.
Added support for a customizable placeholder in the dropzone component using a named slot, while preserving default text for backward compatibility.
This allows parent components to inject custom instructional text or UI elements in the dropzone area via the placeholder named slot. If no custom slot is provided, the component falls back to the original default message: "Click to upload or drag and drop."
This enhances flexibility for different use cases (e.g., internationalization, branding, or richer UI) without breaking existing implementations.
Summary by CodeRabbit