Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Checkbox group component #502

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

Shubhdeep12
Copy link
Contributor

@Shubhdeep12 Shubhdeep12 commented Oct 17, 2024

closes #310

  • To create Checkbox group component
  • To add examples for Checkbox group
  • To add docs for Checkbox group
  • Tests for Checkbox group [IN-PROGRESS]

Copy link

netlify bot commented Oct 17, 2024

Deploy Preview for kobalte ready!

Name Link
🔨 Latest commit ea44978
🔍 Latest deploy log https://app.netlify.com/sites/kobalte/deploys/67224e38edd23d0008ea11d9
😎 Deploy Preview https://deploy-preview-502--kobalte.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 84
Accessibility: 100
Best Practices: 100
SEO: 82
PWA: 60
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@Shubhdeep12 Shubhdeep12 marked this pull request as ready for review October 18, 2024 06:39
@Shubhdeep12 Shubhdeep12 changed the title Added checkbox-group core component feat: Checkbox group component Oct 19, 2024
@Shubhdeep12 Shubhdeep12 marked this pull request as draft October 19, 2024 08:04
Copy link
Member

@jer3m01 jer3m01 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for taking time to submit this PR!

However a few changes are needed; most of these components are the same as Checkbox but duplicated and renamed.
These can be re-exported and renamed instead of having a duplicate of each, an example of this can be seen in DropdownMenu which re-exports Menu (example).
This most likely applies to -item-control, -item-description, -item-indicator, -item and -item-label.

For the behavior of the CheckboxGroup.Item it would be better to return a wrapped Checkbox.Root rather than a copy with modified behavior.
I'd suggest inject the group status inside the normal checkbox through checked={checkboxGroupContext.value().includes(<self value>)} and onChange={(checked) => checkboxGroupContext.setSelected(<self value>, checked)} (pseudo code, replace with actual implementation).
Example here.

Also it seems like the HTML forms example is broken.

Let me know if anything needs to be clarified.
Thanks again for the PR.

@Shubhdeep12
Copy link
Contributor Author

Thanks for the information and review @jer3m01
Yeah I found these issues. Some of them are fixed locally and working on others.
Will update here once this is ready to review.
Thanks.

@Shubhdeep12
Copy link
Contributor Author

Shubhdeep12 commented Oct 24, 2024

Hi @jer3m01, the component is almost complete. However, I’m stuck on some issues:

  1. there are two test cases with a FIXME tag where we're controlling the checkboxes using .ItemControl. It's not working as expected—input.checked isn’t returning true when it should.
  2. In the HTML form example, I’m a bit confused. We’re correctly passing the name attribute to each checkbox input, and each one has a different value. Ideally, FormData should return name: [checkedValue1, checkedValue2], but it’s only storing the first checked value

I’d appreciate it if you could take a look and let me know if I missed anything.
thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Component]: CheckboxGroup
2 participants