fix: improve checkbox border styles and interaction overlay sizing #354

MaxLee-dev · 2025-11-20T00:58:28Z

Summary

Remove border when checkbox is checked or indeterminate for cleaner visual appearance
Add explicit border styles for disabled, readonly, and invalid states to ensure proper visual feedback
Fix interaction overlay sizing by changing from 100% to inherit to properly respect parent dimensions

Changes

Checkbox Component (`checkbox.css.ts`)

Removed border in checked/indeterminate states
Added explicit border for disabled state using border.normal color
Added explicit border for readonly state using border.normal color
Updated invalid state to use full border shorthand instead of just borderColor

Interaction Mixin (`interactions.css.ts`)

Changed ::before pseudo-element dimensions from 100% to inherit for better sizing behavior

- Remove border when checkbox is checked or indeterminate - Add explicit borders for disabled, readonly, and invalid states - Fix interaction overlay sizing to use inherit instead of 100% 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

changeset-bot · 2025-11-20T00:58:32Z

🦋 Changeset detected

Latest commit: 15bbda1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@vapor-ui/core	Patch
figma-plugin	Patch
website	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-11-20T00:58:35Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
vapor-ui	Ready	Preview	Comment	Nov 20, 2025 1:05am

gemini-code-assist · 2025-11-20T00:58:41Z

Summary of Changes

Hello @MaxLee-dev, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refines the visual presentation and behavior of the checkbox component. It streamlines the appearance of checked and indeterminate states by removing their borders, while simultaneously enhancing clarity by explicitly defining borders for disabled, readonly, and invalid states. Additionally, it addresses a sizing issue with the interaction overlay, ensuring it correctly adapts to its parent dimensions.

Highlights

Checkbox Border Styles: Removed borders for checked and indeterminate states to achieve a cleaner visual appearance.
Checkbox State Borders: Introduced explicit border styles for disabled, readonly, and invalid checkbox states to ensure consistent visual feedback.
Interaction Overlay Sizing: Corrected the sizing of the interaction overlay by changing its width and height properties from 100% to inherit for better responsiveness.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

이번 PR은 체크박스의 상태별 테두리 스타일을 개선하고 상호작용 오버레이의 크기 문제를 수정한 점이 인상적입니다. 전반적으로 코드 품질을 높이는 좋은 변경이라고 생각합니다.

checkbox.css.ts 파일에서 disabled, readonly, invalid 상태의 테두리 두께를 1px로 지정하셨는데, 기존 베이스 스타일에 정의된 0.0625rem과 단위를 통일하면 코드의 일관성과 유지보수성을 더욱 높일 수 있을 것입니다. 이 부분에 대한 수정 제안을 리뷰 코멘트로 남겼습니다.

interactions.css.ts 파일에서 오버레이 크기를 100%에서 inherit으로 변경한 것은 부모 요소의 크기를 정확하게 따르도록 하는 올바른 수정으로 보입니다.

좋은 수정 감사합니다.

gemini-code-assist · 2025-11-20T00:59:23Z

packages/core/src/components/checkbox/checkbox.css.ts

+                '&[data-disabled]': {
+                    border: `1px solid ${vars.color.border.normal}`,
+                    opacity: 0.32,
+                    pointerEvents: 'none',
+                },

-                '&[data-readonly]': { backgroundColor: vars.color.gray['200'] },
+                '&[data-readonly]': {
+                    border: `1px solid ${vars.color.border.normal}`,
+                    backgroundColor: vars.color.gray['200'],
+                },
                '&[data-readonly]:active::before': { opacity: 0.08 },

-                '&[data-invalid]': { borderColor: vars.color.border.danger },
+                '&[data-invalid]': { border: `1px solid ${vars.color.border.danger}` },


일관성을 위해 1px 대신 베이스 스타일에 정의된 0.0625rem 단위를 사용하는 것이 좋겠습니다. 이렇게 하면 전체 컴포넌트에서 테두리 두께가 일관되게 유지되며, 루트 폰트 크기 변경에 따른 확장성도 확보할 수 있습니다. ¹

Suggested change

'&[data-disabled]': {

border: `1px solid ${vars.color.border.normal}`,

opacity: 0.32,

pointerEvents: 'none',

},

'&[data-readonly]': { backgroundColor: vars.color.gray['200'] },

'&[data-readonly]': {

border: `1px solid ${vars.color.border.normal}`,

backgroundColor: vars.color.gray['200'],

},

'&[data-readonly]:active::before': { opacity: 0.08 },

'&[data-invalid]': { borderColor: vars.color.border.danger },

'&[data-invalid]': { border: `1px solid ${vars.color.border.danger}` },

'&[data-disabled]': {

border: `0.0625rem solid ${vars.color.border.normal}`,

opacity: 0.32,

pointerEvents: 'none',

},

'&[data-readonly]': {

border: `0.0625rem solid ${vars.color.border.normal}`,

backgroundColor: vars.color.gray['200'],

},

'&[data-readonly]:active::before': { opacity: 0.08 },

'&[data-invalid]': { border: `0.0625rem solid ${vars.color.border.danger}` },

Style Guide References

Footnotes

디자인 토큰은 CSS 변수를 통해 참조하고 하드코딩을 지양해야 합니다. 여기서는 1px이라는 하드코딩된 값 대신, 베이스 스타일에 사용된 0.0625rem과 같이 일관된 단위를 사용하거나 디자인 토큰 변수를 사용하는 것이 좋습니다. ↩

vapor-ui · 2025-11-20T01:04:16Z

✅ All tests passed!

Tests	Passed	Failed	Duration	Report
124	124	0	2m 21s	Open report ↗︎

Click here if you need to update snapshots.

noahchoii · 2025-11-20T05:03:04Z

packages/core/src/components/checkbox/checkbox.css.ts

+                    border: 'none',
                },

                // NOTE: Prevents interaction styles from being applied when hovering over the label of a disabled radio button.
                '&::before': { borderRadius: '0' },

                '&[data-disabled]::before': { opacity: 0 },
-                '&[data-disabled]': { opacity: 0.32, pointerEvents: 'none' },
+                '&[data-disabled]': {
+                    border: `1px solid ${vars.color.border.normal}`,
+                    opacity: 0.32,
+                    pointerEvents: 'none',
+                },

-                '&[data-readonly]': { backgroundColor: vars.color.gray['200'] },
+                '&[data-readonly]': {
+                    border: `1px solid ${vars.color.border.normal}`,
+                    backgroundColor: vars.color.gray['200'],
+                },


How about just changing borderWidth and borderColor separately, as defined in the base? Since borderStyle is a fixed value, there's no need to rewrite it every time!

+) Also, when disabled, there is no border.

'&[data-checked], &[data-indeterminate]': { backgroundColor: vars.color.background.primary[200], borderWidth: 0, }, '&[data-readonly]': { borderWidth: 1, backgroundColor: vars.color.gray[200] } // ...

noahchoii · 2025-11-20T05:12:07Z

packages/core/src/styles/mixins/interactions.css.ts

-                width: '100%',
-                height: '100%',
+                width: 'inherit',
+                height: 'inherit',


It breaks Popover, Button, and the other components' UI.

MaxLee-dev requested review from ZeroChoi2781 and noahchoii as code owners November 20, 2025 00:58

MaxLee-dev self-assigned this Nov 20, 2025

gemini-code-assist bot reviewed Nov 20, 2025

View reviewed changes

vercel bot deployed to Preview November 20, 2025 00:59 View deployment

Improve checkbox border styles and overlay sizing

15bbda1

vercel bot deployed to Preview November 20, 2025 01:05 View deployment

ZeroChoi2781 unassigned MaxLee-dev Nov 20, 2025

noahchoii reviewed Nov 20, 2025

View reviewed changes

MaxLee-dev marked this pull request as draft December 24, 2025 06:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: improve checkbox border styles and interaction overlay sizing #354

fix: improve checkbox border styles and interaction overlay sizing #354

Uh oh!

MaxLee-dev commented Nov 20, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Nov 20, 2025 •

edited

Loading

Uh oh!

vercel bot commented Nov 20, 2025 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Nov 20, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Nov 20, 2025

Uh oh!

vapor-ui commented Nov 20, 2025 •

edited

Loading

Uh oh!

noahchoii Nov 20, 2025

Uh oh!

noahchoii Nov 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fix: improve checkbox border styles and interaction overlay sizing #354

Are you sure you want to change the base?

fix: improve checkbox border styles and interaction overlay sizing #354

Uh oh!

Conversation

MaxLee-dev commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Checkbox Component (checkbox.css.ts)

Interaction Mixin (interactions.css.ts)

Uh oh!

changeset-bot bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot commented Nov 20, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Nov 20, 2025

Choose a reason for hiding this comment

Style Guide References

Footnotes

Uh oh!

vapor-ui commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

noahchoii Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

noahchoii Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

MaxLee-dev commented Nov 20, 2025 •

edited

Loading

Checkbox Component (`checkbox.css.ts`)

Interaction Mixin (`interactions.css.ts`)

changeset-bot bot commented Nov 20, 2025 •

edited

Loading

vercel bot commented Nov 20, 2025 •

edited

Loading

vapor-ui commented Nov 20, 2025 •

edited

Loading