fix: The gap problem in the Toggle component #388 #389
Conversation
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughA conditional rendering check was added to the label span in the FwbToggle component. Now, the span is only rendered if the label prop is non-empty, preventing the display of an empty span when no label is provided. Changes
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure 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
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
📒 Files selected for processing (1)
src/components/FwbToggle/FwbToggle.vue(1 hunks)
| <span :class="[toggleClasses, toggleSize, toggleColor]" /> | ||
| <span :class="[toggleBallClasses, toggleBallOrder]">{{ label }}</span> | ||
| <span v-if="label" :class="[toggleBallClasses, toggleBallOrder]">{{ label }}</span> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Conditional rendering on toggle ball span removes the thumb when no label.
The v-if="label" is applied to the span with toggleBallClasses, so the toggle thumb (ball) is not rendered if label is empty. We need to always render the ball and only conditionally render the text label in its own span.
Apply this diff to separate concerns:
- <span :class="[toggleClasses, toggleSize, toggleColor]" />
- <span v-if="label" :class="[toggleBallClasses, toggleBallOrder]">{{ label }}</span>
+ <span :class="[toggleClasses, toggleSize, toggleColor]" />
+ <span :class="[toggleBallClasses, toggleBallOrder]" />
+ <!-- Text label only shown when `label` is provided -->
+ <span v-if="label" class="ml-2 text-sm font-medium text-gray-900">{{ label }}</span>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <span :class="[toggleClasses, toggleSize, toggleColor]" /> | |
| <span :class="[toggleBallClasses, toggleBallOrder]">{{ label }}</span> | |
| <span v-if="label" :class="[toggleBallClasses, toggleBallOrder]">{{ label }}</span> | |
| <span :class="[toggleClasses, toggleSize, toggleColor]" /> | |
| <span :class="[toggleBallClasses, toggleBallOrder]" /> | |
| <!-- Text label only shown when `label` is provided --> | |
| <span v-if="label" class="ml-2 text-sm font-medium text-gray-900">{{ label }}</span> |
🤖 Prompt for AI Agents
In src/components/FwbToggle/FwbToggle.vue around lines 9 to 10, the span element
with toggleBallClasses is conditionally rendered based on the presence of label,
causing the toggle thumb to disappear when label is empty. To fix this, always
render the span with toggleBallClasses for the toggle thumb, and move the label
text into a separate span that is conditionally rendered only if label exists.
If there is no label with conditional rendering, label span was removed #388
Please check and give feedback. @Sqrcz @zoltanszogyenyi @cogor
Summary by CodeRabbit