Skip to content

Commit

Permalink
fix: hover issue on checkbox on mobile screen
Browse files Browse the repository at this point in the history 
affects: @medly-components/core, @medly-components/forms
  • Loading branch information
@gmukul01
gmukul01 committed Jul 15, 2024
1 parent 321c222 commit daff85e
Show file tree
Hide file tree
Showing 6 changed files with 202 additions and 124 deletions.
12 changes: 7 additions & 5 deletions packages/core/src/components/Checkbox/Checkbox.styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,15 +127,17 @@ export const CheckboxWithLabelWrapper = styled('label').attrs(({ theme }) => ({
${getSelectorLabelPositionStyle}
&&&:hover {
&&&:active {
${StyledCheckbox} {
${({ disabled }) => !disabled && getEventStyle('hovered')};
${({ disabled }) => !disabled && getEventStyle('pressed')};
}
}
&&&:active {
${StyledCheckbox} {
${({ disabled }) => !disabled && getEventStyle('pressed')};
@media (hover: hover) {
&&&:hover {
${StyledCheckbox} {
${({ disabled }) => !disabled && getEventStyle('hovered')};
}
}
}
`;
136 changes: 82 additions & 54 deletions packages/core/src/components/Checkbox/__snapshots__/checkbox.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,16 +145,18 @@ exports[`Checkbox component should render correctly with bottom labelPosition 1`
cursor: pointer;
}
.c0.c0.c0:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
border-color: #3872D2;
}
.c0.c0.c0:active .c5 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
border-color: #3061B3;
}
@media (hover:hover) {
.c0.c0.c0:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
border-color: #3872D2;
}
}
<div>
<label
Expand Down Expand Up @@ -348,16 +350,18 @@ exports[`Checkbox component should render correctly with checked false and activ
cursor: pointer;
}
.c2.c2.c2:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.35);
border-color: #D73A43;
}
.c2.c2.c2:active .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.5);
border-color: #3061B3;
}
@media (hover:hover) {
.c2.c2.c2:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.35);
border-color: #D73A43;
}
}
<div>
<span
class="c0 c1"
Expand Down Expand Up @@ -549,6 +553,10 @@ exports[`Checkbox component should render correctly with checked false and disab
cursor: not-allowed;
}
@media (hover:hover) {
}
<div>
<span
class="c0 c1"
Expand Down Expand Up @@ -743,16 +751,18 @@ exports[`Checkbox component should render correctly with checked false and hasEr
cursor: pointer;
}
.c2.c2.c2:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.35);
border-color: #D73A43;
}
.c2.c2.c2:active .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.5);
border-color: #3061B3;
}
@media (hover:hover) {
.c2.c2.c2:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.35);
border-color: #D73A43;
}
}
<div>
<span
class="c0 c1"
Expand Down Expand Up @@ -950,18 +960,20 @@ exports[`Checkbox component should render correctly with checked false and indet
cursor: pointer;
}
.c2.c2.c2:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.35);
border-color: #B73139;
background-color: #B73139;
}
.c2.c2.c2:active .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.5);
border-color: #97292F;
background-color: #97292F;
}
@media (hover:hover) {
.c2.c2.c2:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.35);
border-color: #B73139;
background-color: #B73139;
}
}
<div>
<span
class="c0 c1"
Expand Down Expand Up @@ -1154,18 +1166,20 @@ exports[`Checkbox component should render correctly with checked true and active
cursor: pointer;
}
.c2.c2.c2:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.35);
border-color: #B73139;
background-color: #B73139;
}
.c2.c2.c2:active .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.5);
border-color: #97292F;
background-color: #97292F;
}
@media (hover:hover) {
.c2.c2.c2:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.35);
border-color: #B73139;
background-color: #B73139;
}
}
<div>
<span
class="c0 c1"
Expand Down Expand Up @@ -1358,6 +1372,10 @@ exports[`Checkbox component should render correctly with checked true and disabl
cursor: not-allowed;
}
@media (hover:hover) {
}
<div>
<span
class="c0 c1"
Expand Down Expand Up @@ -1553,18 +1571,20 @@ exports[`Checkbox component should render correctly with checked true and hasErr
cursor: pointer;
}
.c2.c2.c2:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.35);
border-color: #B73139;
background-color: #B73139;
}
.c2.c2.c2:active .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.5);
border-color: #97292F;
background-color: #97292F;
}
@media (hover:hover) {
.c2.c2.c2:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.35);
border-color: #B73139;
background-color: #B73139;
}
}
<div>
<span
class="c0 c1"
Expand Down Expand Up @@ -1763,18 +1783,20 @@ exports[`Checkbox component should render correctly with checked true and indete
cursor: pointer;
}
.c2.c2.c2:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.35);
border-color: #B73139;
background-color: #B73139;
}
.c2.c2.c2:active .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.5);
border-color: #97292F;
background-color: #97292F;
}
@media (hover:hover) {
.c2.c2.c2:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(215,58,67,0.35);
border-color: #B73139;
background-color: #B73139;
}
}
<div>
<span
class="c0 c1"
Expand Down Expand Up @@ -1970,16 +1992,18 @@ exports[`Checkbox component should render correctly with left labelPosition 1`]
cursor: pointer;
}
.c0.c0.c0:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
border-color: #3872D2;
}
.c0.c0.c0:active .c5 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
border-color: #3061B3;
}
@media (hover:hover) {
.c0.c0.c0:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
border-color: #3872D2;
}
}
<div>
<label
Expand Down Expand Up @@ -2175,16 +2199,18 @@ exports[`Checkbox component should render correctly with right labelPosition 1`]
cursor: pointer;
}
.c0.c0.c0:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
border-color: #3872D2;
}
.c0.c0.c0:active .c5 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
border-color: #3061B3;
}
@media (hover:hover) {
.c0.c0.c0:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
border-color: #3872D2;
}
}
<div>
<label
Expand Down Expand Up @@ -2376,16 +2402,18 @@ exports[`Checkbox component should render correctly with top labelPosition 1`] =
cursor: pointer;
}
.c0.c0.c0:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
border-color: #3872D2;
}
.c0.c0.c0:active .c5 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
border-color: #3061B3;
}
@media (hover:hover) {
.c0.c0.c0:hover .c5 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
border-color: #3872D2;
}
}
<div>
<label
Expand Down
42 changes: 31 additions & 11 deletions packages/core/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,11 +224,6 @@ exports[`CheckboxGroup component should render properly 1`] = `
cursor: pointer;
}
.c5.c5.c5:hover .c10 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
border-color: #3872D2;
}
.c5.c5.c5:active .c10 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
border-color: #3061B3;
Expand Down Expand Up @@ -258,18 +253,27 @@ exports[`CheckboxGroup component should render properly 1`] = `
cursor: pointer;
}
.c14.c14.c14:hover .c10 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
border-color: #3061B3;
background-color: #3061B3;
}
.c14.c14.c14:active .c10 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
border-color: #275093;
background-color: #275093;
}
@media (hover:hover) {
.c5.c5.c5:hover .c10 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
border-color: #3872D2;
}
}
@media (hover:hover) {
.c14.c14.c14:hover .c10 {
box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
border-color: #3061B3;
background-color: #3061B3;
}
}
<div>
<div
aria-describedby="Cars-helper-text"
Expand Down Expand Up @@ -751,6 +755,10 @@ exports[`CheckboxGroup component should render properly with disabled state 1`]
cursor: not-allowed;
}
@media (hover:hover) {
}
<div>
<div
aria-describedby="Cars-helper-text"
Expand Down Expand Up @@ -1249,6 +1257,10 @@ exports[`CheckboxGroup component should render properly with fullWidth 1`] = `
cursor: not-allowed;
}
@media (hover:hover) {
}
<div>
<div
aria-describedby="Cars-helper-text"
Expand Down Expand Up @@ -1562,6 +1574,14 @@ exports[`CheckboxGroup component should show indeterminate state when any one op
fill: #ffffff;
}
@media (hover:hover) {
}
@media (hover:hover) {
}
<svg
class="c0 c1"
fill="none"
Expand Down
Loading

0 comments on commit daff85e

Please sign in to comment.