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. |
|
Caution Review failedThe pull request is closed. 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
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (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
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)
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/FwbToggle/FwbToggle.vue(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Sqrcz
PR: themesberg/flowbite-vue#389
File: src/components/FwbToggle/FwbToggle.vue:0-0
Timestamp: 2025-07-18T12:11:01.004Z
Learning: In FwbToggle component, the actual toggle ball/thumb is rendered via CSS pseudo-elements (after:) on the toggle background span, not through the span with toggleBallClasses. The toggleBallClasses only contain text styling for the label.
Learnt from: Sqrcz
PR: themesberg/flowbite-vue#389
File: src/components/FwbToggle/FwbToggle.vue:0-0
Timestamp: 2025-07-18T12:11:01.004Z
Learning: In the FwbToggle component, the `toggleBallClasses` variable name is misleading - it doesn't style the actual toggle ball/thumb, but rather the label text container. The visual toggle ball is rendered through other means (likely CSS on the toggle track or pseudo-elements).
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.
src/components/FwbToggle/FwbToggle.vue (4)
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.
Learnt from: Sqrcz
PR: themesberg/flowbite-vue#389
File: src/components/FwbToggle/FwbToggle.vue:0-0
Timestamp: 2025-07-18T12:11:01.004Z
Learning: In the FwbToggle component, the `toggleBallClasses` variable name is misleading - it doesn't style the actual toggle ball/thumb, but rather the label text container. The visual toggle ball is rendered through other means (likely CSS on the toggle track or pseudo-elements).
Learnt from: Sqrcz
PR: themesberg/flowbite-vue#389
File: src/components/FwbToggle/FwbToggle.vue:0-0
Timestamp: 2025-07-18T12:11:01.004Z
Learning: In FwbToggle component, the actual toggle ball/thumb is rendered via CSS pseudo-elements (after:) on the toggle background span, not through the span with toggleBallClasses. The toggleBallClasses only contain text styling for the label.
🪛 GitHub Check: lint (18.x)
src/components/FwbToggle/FwbToggle.vue
[failure] 11-11:
Trailing spaces not allowed
🪛 GitHub Actions: Node.js CI
src/components/FwbToggle/FwbToggle.vue
[error] 11-11: ESLint error: Trailing spaces not allowed (@stylistic/no-trailing-spaces)
🔇 Additional comments (1)
src/components/FwbToggle/FwbToggle.vue (1)
10-13: LGTM! Conditional rendering correctly fixes the gap problem.The conditional rendering approach is correct. Based on the retrieved learnings, the
toggleBallClassesvariable contains text styling for the label container, not the actual toggle ball/thumb. The visual toggle ball is rendered via CSS pseudo-elements on the toggle background span (line 9), so conditionally rendering this span when no label is present appropriately prevents the gap issue without affecting toggle functionality.
If there is no label with conditional rendering, label span was removed #388
Please check and give feedback. @Sqrcz @zoltanszogyenyi @cogor
Summary by CodeRabbit