Skip to content

Commit

Permalink
fix(Switch): increase hidden input surface to allow click contact (sc…
Browse files Browse the repository at this point in the history 
…aleway#1050)

* fix(Switch): increase hidden input surface to allow click contact

* test: update snaps
  • Loading branch information
@chambo-e
chambo-e authored Dec 23, 2021
1 parent 9223705 commit 8606728
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 30 deletions.
75 changes: 45 additions & 30 deletions src/components/Switch/__tests__/__snapshots__/index.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,10 @@ exports[`Switch renders correctly 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -163,7 +164,7 @@ exports[`Switch renders correctly 1`] = `
role="checkbox"
>
<input
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -325,9 +326,10 @@ exports[`Switch renders correctly labeled 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -343,7 +345,7 @@ exports[`Switch renders correctly labeled 1`] = `
role="checkbox"
>
<input
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -508,9 +510,10 @@ exports[`Switch renders correctly when checked 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -527,7 +530,7 @@ exports[`Switch renders correctly when checked 1`] = `
>
<input
checked=""
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -689,9 +692,10 @@ exports[`Switch renders correctly when checked and labeled 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -708,7 +712,7 @@ exports[`Switch renders correctly when checked and labeled 1`] = `
>
<input
checked=""
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -873,9 +877,10 @@ exports[`Switch renders correctly when checked and labeled on left 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -892,7 +897,7 @@ exports[`Switch renders correctly when checked and labeled on left 1`] = `
>
<input
checked=""
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -1054,9 +1059,10 @@ exports[`Switch renders correctly when checked and labeled on right 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -1073,7 +1079,7 @@ exports[`Switch renders correctly when checked and labeled on right 1`] = `
>
<input
checked=""
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -1235,9 +1241,10 @@ exports[`Switch renders correctly when disabled 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -1253,7 +1260,7 @@ exports[`Switch renders correctly when disabled 1`] = `
role="checkbox"
>
<input
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
disabled=""
id="test"
name="test"
Expand Down Expand Up @@ -1416,9 +1423,10 @@ exports[`Switch renders correctly with custom inside labels 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -1434,7 +1442,7 @@ exports[`Switch renders correctly with custom inside labels 1`] = `
role="checkbox"
>
<input
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -1601,9 +1609,10 @@ exports[`Switch renders correctly with custom label render on left 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -1624,7 +1633,7 @@ exports[`Switch renders correctly with custom label render on left 1`] = `
role="checkbox"
>
<input
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -1786,9 +1795,10 @@ exports[`Switch renders correctly with custom labels on right 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -1804,7 +1814,7 @@ exports[`Switch renders correctly with custom labels on right 1`] = `
role="checkbox"
>
<input
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -1965,9 +1975,10 @@ exports[`Switch renders correctly with custom width 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -1984,7 +1995,7 @@ exports[`Switch renders correctly with custom width 1`] = `
role="checkbox"
>
<input
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -2146,9 +2157,10 @@ exports[`Switch renders correctly with label inside 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -2164,7 +2176,7 @@ exports[`Switch renders correctly with label inside 1`] = `
role="checkbox"
>
<input
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -2329,9 +2341,10 @@ exports[`Switch renders correctly with labels on left 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -2347,7 +2360,7 @@ exports[`Switch renders correctly with labels on left 1`] = `
role="checkbox"
>
<input
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -2509,9 +2522,10 @@ exports[`Switch renders correctly with non default size 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -2527,7 +2541,7 @@ exports[`Switch renders correctly with non default size 1`] = `
role="checkbox"
>
<input
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down Expand Up @@ -2689,9 +2703,10 @@ exports[`Switch renders correctly with non default variant 1`] = `
background-color: #45d6b5;
}
.cache-cujed6 {
.cache-1so18e9 {
position: absolute;
opacity: 0.01;
width: 48px;
}
<label
Expand All @@ -2707,7 +2722,7 @@ exports[`Switch renders correctly with non default variant 1`] = `
role="checkbox"
>
<input
class="cache-cujed6 e1x48wse1"
class="cache-1so18e9 e1x48wse1"
id="test"
name="test"
type="checkbox"
Expand Down
1 change: 1 addition & 0 deletions src/components/Switch/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@ const StyledSwitch = styled('div', {
const StyledCheckbox = styled.input`
position: absolute;
opacity: 0.01;
width: ${({ theme }) => theme.space[6]};
`

const StyledLabel = styled.label<{ width?: number }>`
Expand Down

0 comments on commit 8606728

Please sign in to comment.