Skip to content

feat: add ChipSelectChip#757

Merged
kurtdoherty merged 1 commit intomainfrom
feat-add-chip-select-option
Sep 9, 2025
Merged

feat: add ChipSelectChip#757
kurtdoherty merged 1 commit intomainfrom
feat-add-chip-select-option

Conversation

@kurtdoherty
Copy link
Contributor

This PR

  • Part 1 of v5 component refactor: Chip Select #424
  • Adds new ChipSelectChip component. This is effectively a styled checkbox. When more than one are used together with the same name and in the same form, they work as a checkbox group.
  • The chip has built-in handling for single-selection, though this only works when the checked state of the chips is uncontrolled. As soon as the checked state is controlled, the consumer bears the burden of ensuring the single-selection behaviour works when required. A future PR will add a helper function for consumers to use that will take care of most of this concern.

note: checkbox inputs were used over radio button because it was non-trivial to implement the required toggling functionality (clicking a chip will check OR uncheck it) on top of radio buttons. This is because radio buttons are not designed to be unchecked when clicked on. Further, radio button groups include special keyboard navigation handling that causes the checked radio to change as the options are navigated using arrow keys; this would only be appropriate in the single-selection context of the chip select. In the end, checkboxes seemed the better fit, with single-selection behaviour being the only "custom" behaviour we need to model.

Screenshot 2025-09-09 at 10 38 12 am Screenshot 2025-09-09 at 10 38 23 am Screenshot 2025-09-09 at 10 38 29 am Screenshot 2025-09-09 at 10 38 36 am Screenshot 2025-09-09 at 10 38 43 am Screenshot 2025-09-09 at 10 38 47 am

@rpt-uk-github
Copy link

rpt-uk-github commented Sep 9, 2025

🎉 Snyk checks have passed. No issues have been found so far.

security/snyk check is complete. No issues have been found. (View Details)

license/snyk check is complete. No issues have been found. (View Details)

code/snyk check is complete. No issues have been found. (View Details)

@codacy-production
Copy link

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation Diff coverage
Report missing for e0c2a491 100.00%
Coverage variation details
Coverable lines Covered lines Coverage
Common ancestor commit (e0c2a49) Report Missing Report Missing Report Missing
Head commit (19749fc) 9131 8443 92.47%

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details
Coverable lines Covered lines Diff coverage
Pull request (#757) 51 51 100.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

Footnotes

  1. Codacy didn't receive coverage data for the commit, or there was an error processing the received data. Check your integration for errors and validate that your coverage setup is correct.

@kurtdoherty kurtdoherty marked this pull request as ready for review September 9, 2025 01:00
@kurtdoherty kurtdoherty merged commit e521f54 into main Sep 9, 2025
6 checks passed
@kurtdoherty kurtdoherty deleted the feat-add-chip-select-option branch September 9, 2025 02:09
@kurtdoherty kurtdoherty linked an issue Sep 9, 2025 that may be closed by this pull request
11 tasks
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.

v5 component refactor: Chip Select

2 participants