[joy] Fix persisting hover state styles on click on mobile #36704
Conversation
This file contains 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
Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
Netlify deploy previewhttps://deploy-preview-36704--material-ui.netlify.app/ Bundle size report |
|
@oliviertassinari this PR is ready for review |
zannager
added
package: base-ui
|
What's the verdict on this? @siriwatknp |
siriwatknp
approved these changes
May 29, 2023
| { '&:hover': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!] }, | ||
| { | ||
| '&:hover': { | ||
| '@media (hover: hover)': theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!], |
There was a problem hiding this comment.
In Material UI, I don't recall why we used the opposite: #15000 (comment). It might have been because of IE 11 support https://caniuse.com/mdn-css_at-rules_media_hover which is no longer relevant. I think that it could be good to normalize on what works best between Joy UI and Material UI. I guess that the approach we use here has the advantage of being clearer to override. cc @DiegoAndai
At first sight, this in Joy UI looks better than in Material UI, e.g. for customization, it's more straightforward:
oliviertassinari
changed the title
oliviertassinari
added
bug 🐛
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.
Fixes button retaining hover effect on mobile devices.
One iteration on #36583
Preview: https://deploy-preview-36704--material-ui.netlify.app/joy-ui/react-button/
This code was written and reviewed by GitStart Community. Growing great engineers, one PR at a time.