Refactor FwbCheckbox – Improved Styling & Group Support #368
Conversation
WalkthroughThe changes focus on enhancing the documentation and example usage for the Vue Checkbox component in Flowbite. The documentation was reorganized with new and renamed sections, including expanded examples for checked, disabled, grouped, helper text, and link-embedded checkboxes. The Checkbox component itself was refactored to introduce additional props for class and value customization, improved slot support, and a new approach to model binding using Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FwbCheckboxExampleGroup.vue
participant FwbCheckbox.vue
User->>FwbCheckboxExampleGroup.vue: Interacts with checkbox group (fruits/planets)
FwbCheckboxExampleGroup.vue->>FwbCheckbox.vue: Passes v-model, label, value for each checkbox
FwbCheckbox.vue-->>FwbCheckboxExampleGroup.vue: Emits updated values via defineModel binding
FwbCheckboxExampleGroup.vue-->>User: Displays selected values in real-time
sequenceDiagram
participant User
participant FwbCheckboxExampleHelper.vue
participant FwbCheckbox.vue
User->>FwbCheckboxExampleHelper.vue: Toggles checkbox
FwbCheckboxExampleHelper.vue->>FwbCheckbox.vue: Updates v-model
FwbCheckbox.vue-->>User: Renders checkbox with label and helper text slot
Suggested labels
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🪛 markdownlint-cli2 (0.17.2)docs/components/checkbox.md27-27: Fenced code blocks should have a language specified (MD040, fenced-code-language) 64-64: Fenced code blocks should have a language specified (MD040, fenced-code-language) 151-151: Tables should be surrounded by blank lines (MD058, blanks-around-tables) 🔇 Additional comments (13)
🪧 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: 1
🧹 Nitpick comments (6)
docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue (1)
43-43: Consider using numeric values for numeric IDsThe
selectedPlanetsref is initialized with string values (['3']), but your planets object uses numeric keys. For consistency and to avoid potential type comparison issues, consider using numeric values in the array.-const selectedPlanets = ref(['3']) +const selectedPlanets = ref([3])src/components/FwbCheckbox/composables/useCheckboxClasses.ts (2)
35-37: Consider allowing custom helper message classesThe helper message class is computed but doesn't incorporate any custom classes from props. Consider adding a
helperClassprop to allow customization of the helper message styling.export type UseCheckboxClassesProps = { class: Ref<string | Record<string, boolean>> disabled: Ref<boolean> labelClass: Ref<string | Record<string, boolean>> + helperClass: Ref<string | Record<string, boolean>> wrapperClass: Ref<string | Record<string, boolean>> } // Then in the function: const helperMessageClass = computed(() => useMergeClasses([ defaultHelperClasses, + props.helperClass.value, ]))
39-41: Consider adding default wrapper classesThe wrapper class computation doesn't include any default classes. If there are standard styles that should always be applied to the wrapper, consider adding default wrapper classes.
+const defaultWrapperClasses = 'mb-2' const wrapperClass = computed(() => useMergeClasses([ + defaultWrapperClasses, props.wrapperClass.value, ]))docs/components/checkbox.md (2)
31-43: Consider adding a checked disabled state exampleThe disabled example only shows an unchecked disabled checkbox. It would be helpful to also show a checked disabled state to demonstrate both states.
<template> <fwb-checkbox v-model="check" disabled label="Disabled checkbox" /> + <fwb-checkbox v-model="checkedDisabled" disabled label="Checked disabled checkbox" /> </template> <script setup> import { ref } from 'vue' import { FwbCheckbox } from 'flowbite-vue' const check = ref(false) +const checkedDisabled = ref(true) </script>
151-155: Fix markdown table formattingThere should be blank lines before and after the table according to markdown guidelines.
## Checkbox component API + | Name | Type | Default | Description | | ------------ | ---------------- | ------- | ------------------------------- | | wrapperClass | String \| Object | `''` | Added to main component wrapper | | labelClass | String \| Object | `''` | Added to `<label>` element. | | class | String \| Object | `''` | Added to `<input>` element. | +🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
151-151: Tables should be surrounded by blank lines
null(MD058, blanks-around-tables)
src/components/FwbCheckbox/FwbCheckbox.vue (1)
10-11: Maintain consistent HTML formattingFor consistency with other elements in the template, consider keeping the closing bracket on the same line.
- type="checkbox" - > + type="checkbox">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
docs/components/checkbox.md(2 hunks)docs/components/checkbox/examples/FwbCheckboxExample.vue(2 hunks)docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue(2 hunks)docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue(1 hunks)docs/components/checkbox/examples/FwbCheckboxExampleHelper.vue(1 hunks)docs/components/checkbox/examples/FwbCheckboxExampleLink.vue(1 hunks)src/components/FwbCheckbox/FwbCheckbox.vue(1 hunks)src/components/FwbCheckbox/composables/useCheckboxClasses.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/FwbCheckbox/composables/useCheckboxClasses.ts (1)
src/composables/useMergeClasses.ts (1)
useMergeClasses(27-29)
🪛 markdownlint-cli2 (0.17.2)
docs/components/checkbox.md
27-27: Fenced code blocks should have a language specified
null
(MD040, fenced-code-language)
64-64: Fenced code blocks should have a language specified
null
(MD040, fenced-code-language)
151-151: Tables should be surrounded by blank lines
null
(MD058, blanks-around-tables)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: docs-build (20.x)
🔇 Additional comments (11)
docs/components/checkbox/examples/FwbCheckboxExampleLink.vue (1)
2-12: Link integration looks good, wrapper improves VitePress renderingThe implementation of a checkbox with an embedded link is well structured. The "vp-raw" wrapper div helps prevent VitePress styling conflicts, and the text is appropriately split with only the "terms and conditions" part inside the link component.
docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue (2)
2-13: Good enhancement with both disabled statesThe example now demonstrates both unchecked and checked disabled states, which provides a more comprehensive demonstration. The flex column layout with spacing improves visual clarity between the examples.
22-22: Correctly implemented reactive variable for checked stateAdding a second ref variable initialized to true properly supports the new checked-disabled checkbox example.
docs/components/checkbox/examples/FwbCheckboxExample.vue (2)
2-10: Enhanced example with both checkbox statesGood improvement showing both unchecked and checked states in the basic example. The flex column layout with gap spacing provides clear visual separation between the checkboxes.
20-20: Correctly implemented reactive variable for checked stateAdding a second ref variable initialized to true properly supports the new checked checkbox example.
docs/components/checkbox/examples/FwbCheckboxExampleHelper.vue (1)
1-20: Well-implemented helper text example using named slotsThis new example effectively demonstrates how to add contextual information to a checkbox using the named helper slot. The implementation follows Vue best practices and provides a clear illustration of the feature.
docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue (1)
1-54: Good implementation of checkbox groups!This example clearly demonstrates how to use the checkbox component in groups with both array and object data sources. The display of selected values provides helpful visual feedback.
src/components/FwbCheckbox/composables/useCheckboxClasses.ts (1)
1-49: Good refactoring of class compositionThe refactored composable correctly handles reactive classes and disabled state. The usage of
useMergeClassesfor combining default and custom classes is a good approach. The type definitions are comprehensive and will provide good developer experience.docs/components/checkbox.md (1)
4-147: Comprehensive documentation updateThe expanded documentation provides excellent examples covering all the new features: checkbox groups, helper text, links, and the updated component API. The examples are clear and demonstrate the component's flexibility.
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
27-27: Fenced code blocks should have a language specified
null(MD040, fenced-code-language)
64-64: Fenced code blocks should have a language specified
null(MD040, fenced-code-language)
src/components/FwbCheckbox/FwbCheckbox.vue (2)
56-58: Great use of Vue 3's defineModel APIUsing
defineModelis a significant improvement over manual emit handling. It simplifies the component code and offers better type safety.
1-66: Excellent refactoring with improved structure and flexibilityThe refactored component has significantly improved:
- Better DOM structure with a wrapper div
- Enhanced styling flexibility with multiple class props
- Support for checkbox groups with value props
- Helper text slot for additional context
- Simplified model binding with defineModel
These changes align perfectly with the PR objectives of improving styling flexibility and enabling group usage.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/components/checkbox.md (1)
27-27: Improve Markdown formatting for code fences and tables
- Ensure all fenced code blocks declare a language (e.g., use ```vue) to satisfy MD040.
- Surround the props table with blank lines before and after to satisfy MD058 and improve readability.
Also applies to: 64-64, 151-151
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
27-27: Fenced code blocks should have a language specified
null(MD040, fenced-code-language)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/components/checkbox.md(2 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
docs/components/checkbox.md
27-27: Fenced code blocks should have a language specified
null
(MD040, fenced-code-language)
64-64: Fenced code blocks should have a language specified
null
(MD040, fenced-code-language)
151-151: Tables should be surrounded by blank lines
null
(MD058, blanks-around-tables)
🔇 Additional comments (9)
docs/components/checkbox.md (9)
4-5: Imports for new group and helper examples are well-organized
TheFwbCheckboxExampleGroupandFwbCheckboxExampleHelpercomponents have been correctly imported, following the existing ordering.
11-11: Section header renamed to "Checkbox example"
The updated heading accurately reflects the example content.
17-17: Checked state example is now consistent
The second checkbox uses thecheckedref initialized totrue, matching the "Checked state" label.Also applies to: 25-25
29-29: Updated section header to "Disabled state"
This heading aligns with the "Disabled" context and maintains consistency with other sections.
47-55: "Checkbox with link" example demonstrates slot usage correctly
The snippet shows the default slot containing text and an embedded<fwb-a>link, and the necessary imports (FwbA,FwbCheckbox) and reactivecheckref are in place.Also applies to: 60-62
66-66: Added "Checkbox with helper text" section
This new section clearly introduces the helper text feature.
71-75: Helper text example implementation is correct
The#helperslot is used appropriately to display additional information, and the import ofFwbCheckboxis present.Also applies to: 80-80
87-91: Added "Checkbox group" section with description and example component
The header, explanatory text, and<fwb-checkbox-example-group />align to introduce group support clearly.
94-119: Group usage example covers both arrays and objects correctly
The manual Vue snippet shows properv-for,v-model, and reactiverefinitialization for bothfruitsandplanets.
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
docs/components/checkbox.md (1)
149-156:⚠️ Potential issueExtend and format the props API table
The documentation summary mentions new propsnameandvalue, but they’re missing from the table below. Also, adding blank lines around the table improves markdown readability.Proposed diff:
## Checkbox component API ### FwbCheckbox Props + | Name | Type | Default | Description | | ------------ | ---------------- | ----------- | --------------------------------------------------------------- | | wrapperClass | String \| Object | `''` | Added to main component wrapper | | labelClass | String \| Object | `''` | Added to `<label>` element | | class | String \| Object | `''` | Added to `<input>` element | +| name | String | `undefined` | Name attribute for the `<input>` element when part of a group | +| value | any | `undefined` | Value of the checkbox when part of a checkbox group |🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
151-151: Tables should be surrounded by blank lines
null(MD058, blanks-around-tables)
🧹 Nitpick comments (1)
docs/components/checkbox.md (1)
24-26: Clarify reactive variable names
Using bothcheckandcheckedworks functionally, but could be confusing. Consider more descriptive names (e.g.,isCheckedandisDefaultChecked) to make the intent of each ref clearer.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/components/checkbox.md(2 hunks)docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
docs/components/checkbox.md
27-27: Fenced code blocks should have a language specified
null
(MD040, fenced-code-language)
64-64: Fenced code blocks should have a language specified
null
(MD040, fenced-code-language)
151-151: Tables should be surrounded by blank lines
null
(MD058, blanks-around-tables)
🔇 Additional comments (5)
docs/components/checkbox.md (5)
2-6: Approve new example imports
The additions ofFwbCheckboxExampleGroupandFwbCheckboxExampleHelperproperly align with the new examples shown later in the doc. Ensure that those example files exist underdocs/components/checkbox/examples/.
11-18: Enhance the "Checkbox example" section
Renaming the header to "Checkbox example" and adding a second checkbox bound tocheckedaccurately demonstrates both unchecked and checked states. This improves clarity for users.
29-32: Approve "Disabled state" renaming
Changing the section title from "Disabled checkbox" to "Disabled state" keeps the naming convention consistent across examples. TheFwbCheckboxExampleDisabledcomponent is correctly invoked.
45-55: Validate link slot example
The example embedding<fwb-a>within the checkbox label correctly illustrates the new link slot support. The import ofFwbAalongsideFwbCheckboxis present and the syntax is on point.
66-75: Approve helper slot usage
The helper text example clearly conveys how to use thehelperslot for descriptive messaging. The imports and template structure correctly reflect the updated API.
This PR refactors the
FwbCheckboxcomponent to enhance styling flexibility and enable usage within checkbox groups.Summary by CodeRabbit
New Features
Documentation
Style