Skip to content

Commit

Permalink
fix(checkbox): fix layout (#790)
Browse files Browse the repository at this point in the history
  • Loading branch information
@reme3d2y
reme3d2y committed Aug 9, 2021
1 parent b075725 commit 8aa18b4
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 95 deletions.
126 changes: 56 additions & 70 deletions packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,12 @@ Object {
<label
class="component s start my-checkbox checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand All @@ -39,13 +38,12 @@ Object {
<label
class="component s start checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand All @@ -59,13 +57,12 @@ Object {
<label
class="component s start checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand Down Expand Up @@ -96,13 +93,12 @@ Object {
<label
class="component s start my-checkbox checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand All @@ -116,13 +112,12 @@ Object {
<label
class="component s start checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand All @@ -136,13 +131,12 @@ Object {
<label
class="component s start checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand Down Expand Up @@ -230,13 +224,12 @@ Object {
<label
class="component s start my-checkbox checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand All @@ -250,13 +243,12 @@ Object {
<label
class="component s start checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand All @@ -270,13 +262,12 @@ Object {
<label
class="component s start checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand Down Expand Up @@ -311,13 +302,12 @@ Object {
<label
class="component s start my-checkbox checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand All @@ -331,13 +321,12 @@ Object {
<label
class="component s start checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand All @@ -351,13 +340,12 @@ Object {
<label
class="component s start checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand Down Expand Up @@ -449,13 +437,12 @@ Object {
<label
class="component s start my-checkbox checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand Down Expand Up @@ -486,13 +473,12 @@ Object {
<label
class="component s start my-checkbox checkbox"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand Down
17 changes: 8 additions & 9 deletions packages/checkbox/src/Component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,16 +122,15 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
})}
ref={mergeRefs([labelRef, ref])}
>
<input
type='checkbox'
onChange={handleChange}
disabled={disabled || inactive}
checked={checked}
data-test-id={dataTestId}
{...restProps}
/>
<span className={styles.box}>
<input
type='checkbox'
onChange={handleChange}
disabled={disabled || inactive}
checked={checked}
data-test-id={dataTestId}
{...restProps}
/>

{checked && <CheckedIcon className={styles.checkedIcon} />}

{indeterminate && !checked && <span className={styles.indeterminateLine} />}
Expand Down
30 changes: 14 additions & 16 deletions packages/checkbox/src/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,12 @@ Object {
<label
class="component s start"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand All @@ -36,13 +35,12 @@ Object {
<label
class="component s start"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
</span>
/>
<span
class="content"
>
Expand Down Expand Up @@ -121,12 +119,12 @@ Object {
<label
class="component s start indeterminate"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
<span
class="indeterminateLine"
/>
Expand All @@ -152,12 +150,12 @@ Object {
<label
class="component s start indeterminate"
>
<input
type="checkbox"
/>
<span
class="box"
>
<input
type="checkbox"
/>
<span
class="indeterminateLine"
/>
Expand Down

0 comments on commit 8aa18b4

Please sign in to comment.