Conversation
Preview deployments |
There was a problem hiding this comment.
Pull request overview
Updates the host card catalog “show only” control to use the shared Boxel UI input component, and extends BoxelInput with checkbox-specific styling/documentation so it can be used in the card chooser.
Changes:
- Switch card-search “show only” checkbox to
BoxelInput @type='checkbox'. - Add checkbox styling support to
BoxelInput(including CSS variables) and document it in the Boxel UI usage page. - Add a Percy snapshot to cover the updated checkbox rendering in the operator-mode card catalog integration test.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/host/tests/integration/components/operator-mode-card-catalog-test.gts | Adds a Percy snapshot around the “show only” checkbox state to visually lock in the updated design. |
| packages/host/app/components/card-search/section-header.gts | Replaces the raw checkbox input with BoxelInput checkbox usage in the search sheet header. |
| packages/boxel-ui/addon/src/components/input/usage.gts | Adds Freestyle documentation + example for checkbox usage, including CSS vars. |
| packages/boxel-ui/addon/src/components/input/index.gts | Extends BoxelInput to support checkbox styling and broadens @value type to allow boolean. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Thanks for the feedback @burieberry @backspace . I addressed the feedback and I added tests to ensure the theme works with checkbox inputs. |
backspace
left a comment
backspace
left a comment
There was a problem hiding this comment.
Is the contrast of the checkmark a concern of this? With the StarryNight and many other themes, I think the black checkmark probably should be white, or another high-contrast theme colour.
I'm currently using --primary-foreground from the theme for the checkmark. I'm not sure if we need a dynamic contrast calculation here. What do you think, @burieberry? |
burieberry
left a comment
burieberry
left a comment
There was a problem hiding this comment.
The checkmark color is now updated. However, there's something strange going on with the grid layout and the size of the checkmark. The checkmark size is very small. We can revert to the fixed values and not do scaling.
|
@burieberry I updated the checkmark implementation to prevent it from being too small. I also hid the error icon and error message for the checkbox input because I don't think they are necessary for checkboxes. Here is the screenshot. Screen.Recording.2026-03-12.at.14.14.30.mov |
Previously, the 'show only' checkbox in the card chooser did not use the boxel-ui input component. In this PR, I’ve updated the design of the boxel-ui checkbox to ensure it meets the requirements for use within the card chooser.