fix: Checkbox が className を受け取れるようにする#17
Open
ryoshin0830 wants to merge 2 commits into
Open
Conversation
{...props} の後に固定の className を当てていたため、利用側から渡した
className が上書きされて消えていた。Radio と同じ clsx マージに揃える。
Closes pepabo#16
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Checkbox コンポーネントに渡した className が固定 className によって上書きされて消えてしまう問題(Radio と挙動不一致)を解消し、今後の回帰を防ぐためのテストを追加する PR です。
Changes:
- Checkbox のルート要素(
AriaCheckbox)に指定するclassNameをclsxでマージするよう修正 react-dom/serverの SSR 出力を使ってclassNameマージ挙動を検証するテストを追加
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/Checkbox/index.tsx | 固定クラスと利用側 className を clsx でマージして上書き消失を防止 |
| src/Checkbox/Checkbox.test.tsx | SSR マークアップで className マージ挙動の回帰テストを追加 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+8
to
+11
| const html = renderToStaticMarkup(<Checkbox className="my-card">ラベル</Checkbox>) | ||
|
|
||
| expect(html).toContain('aria-checkbox') | ||
| expect(html).toContain('my-card') |
Comment on lines
+15
to
+18
| const html = renderToStaticMarkup(<Checkbox>ラベル</Checkbox>) | ||
|
|
||
| expect(html).toContain('aria-checkbox') | ||
| expect(html).not.toContain('undefined') |
HTML 全文への部分一致だと、クラスが別の要素に付いた場合や無関係な 文字列にも反応し得るため、ルートの label の class 属性を取り出して 検証する。レビュー指摘への対応。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
nacal
reviewed
Jul 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
Checkbox に
classNameを渡してもルートの label に反映されず消えてしまう問題を修正します。Closes #16
変更内容
{...props}の後に固定で当てていたclassName="aria-checkbox"を、Radio(src/Radio/Radio.tsx)と同じclsxマージに変更react-dom/serverの SSR 出力で class 属性を検証。依存追加なし・node 環境で動作)変更前後
確認
npx vitest run… 2 passed(修正前は 1 failed で、class="aria-checkbox"のみになり渡した class が消えることを確認済み)npm run lint/npm run build… PASSスコープ外
::after)が padding で位置ずれする問題も Radio/Checkbox のクリック領域について理想を考えて実現する #15 側の課題として別対応