Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[joy-ui][button] Fix sticky hover media query issue on mobile #37467

Merged
merged 10 commits into from
Oct 30, 2023
+38 −9
Merged

[joy-ui][button] Fix sticky hover media query issue on mobile #37467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
94a194d
fix: resolve sticky hover effect on buttons on mobile devices
gitstart Jun 1, 2023
bb57a1c
Merge commit '7aa3fab10217d0a4c4ac2bd82d0ef5b80d6b18e9' of https://gi…
gitstart Jun 7, 2023
b075c6a
fix: resolve persisted hover style on mobile for other components
gitstart Jun 7, 2023
d6c7066
Merge commit '0d3aba1c9433dc5dd79dd9af6821c25b48d6f4f7' of https://gi…
gitstart Jun 9, 2023
c4d0971
chore: format code changes
gitstart Jun 9, 2023
7ec7d5e
fix: resolve merge conflicts
gitstart Jun 27, 2023
55706ce
Merge commit '2fa8d6c6b0bf3eb0f918fdbfd2f9505d7c08d146' of https://gi…
gitstart Jun 29, 2023
c7ebd52
update branch
gitstart Aug 9, 2023
b927019
implement fix on only Joy UI
gitstart Sep 22, 2023
4ec2e22
Merge commit '3dae3dbb0062ebee2b9565a645a7137231b6b615' of https://gi…
gitstart Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/mui-joy/src/Checkbox/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,12 @@ const CheckboxCheckbox = styled('span', {
...variantStyle,
backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface,
},
{ '&:hover': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!] },
{
'&:hover': {
'@media (hover: hover)':
theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!],
},
},
{ '&:active': theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!] },
{
[`&.${checkboxClasses.disabled}`]:
Expand Down
6 changes: 5 additions & 1 deletion packages/mui-joy/src/Chip/Chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,11 @@ const ChipAction = styled('button', {
backgroundColor: theme.vars.palette.background.surface,
...theme.variants[ownerState.variant!]?.[ownerState.color!],
},
{ '&:hover': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!] },
{
'&:hover': {
'@media (hover: hover)': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!],
},
},
{ '&:active': theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!] },
{
[`&.${chipClasses.disabled}`]:
Expand Down
8 changes: 6 additions & 2 deletions packages/mui-joy/src/Link/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,9 @@ const LinkRoot = styled('a', {
...(ownerState.underline === 'hover' && {
textDecoration: 'none',
'&:hover': {
textDecorationLine: 'underline',
'@media (hover: hover)': {
textDecorationLine: 'underline',
},
},
}),
...(ownerState.underline === 'always' && {
Expand Down Expand Up @@ -161,7 +163,9 @@ const LinkRoot = styled('a', {
} as const,
ownerState.variant && {
...theme.variants[ownerState.variant]?.[ownerState.color!],
'&:hover': theme.variants[`${ownerState.variant}Hover`]?.[ownerState.color!],
'&:hover': {
'@media (hover: hover)': theme.variants[`${ownerState.variant}Hover`]?.[ownerState.color!],
},
'&:active': theme.variants[`${ownerState.variant}Active`]?.[ownerState.color!],
[`&.${linkClasses.disabled}`]:
theme.variants[`${ownerState.variant}Disabled`]?.[ownerState.color!],
Expand Down
14 changes: 12 additions & 2 deletions packages/mui-joy/src/Radio/Radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,12 @@ const RadioRadio = styled('span', {
...variantStyle,
backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface,
},
{ '&:hover': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!] },
{
'&:hover': {
'@media (hover: hover)':
theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!],
},
},
{ '&:active': theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!] },
{
[`&.${radioClasses.disabled}`]:
Expand Down Expand Up @@ -172,7 +177,12 @@ const RadioAction = styled('span', {
...(ownerState.disableIcon
? [
theme.variants[ownerState.variant!]?.[ownerState.color!],
{ '&:hover': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!] },
{
'&:hover': {
'@media (hover: hover)':
theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!],
},
},
{ '&:active': theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!] },
{
[`&.${radioClasses.disabled}`]:
Expand Down
4 changes: 3 additions & 1 deletion packages/mui-joy/src/Slider/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,9 @@ const SliderRoot = styled('span', {
'--Slider-thumbWidth': 'var(--Slider-thumbSize)',
...getColorVariables(),
'&:hover': {
...getColorVariables({ state: 'Hover' }),
'@media (hover: hover)': {
...getColorVariables({ state: 'Hover' }),
},
},
'&:active': {
...getColorVariables({ state: 'Active' }),
Expand Down
8 changes: 6 additions & 2 deletions packages/mui-joy/src/Switch/Switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,12 +91,16 @@ const SwitchRoot = styled('div', {
'--Switch-thumbOffset': `max((var(--Switch-trackHeight) - var(--Switch-thumbSize)) / 2, 0px)`,
...getColorVariables(),
'&:hover': {
...getColorVariables({ state: 'Hover' }),
'@media (hover: hover)': {
...getColorVariables({ state: 'Hover' }),
},
},
[`&.${switchClasses.checked}`]: {
...getColorVariables(),
'&:hover': {
...getColorVariables({ state: 'Hover' }),
'@media (hover: hover)': {
...getColorVariables({ state: 'Hover' }),
},
},
},
[`&.${switchClasses.disabled}`]: {
Expand Down