fix(react-button): apply hover styles only on devices that support it #31700
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
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| FluentProviderWithTheme | virtual-rerender | 36 | 33 | 10 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 639 | 626 | 5000 | |
| Button | mount | 305 | 308 | 5000 | |
| Field | mount | 1130 | 1159 | 5000 | |
| FluentProvider | mount | 722 | 720 | 5000 | |
| FluentProviderWithTheme | mount | 80 | 87 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 36 | 33 | 10 | Possible regression |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 73 | 69 | 10 | |
| MakeStyles | mount | 857 | 869 | 50000 | |
| Persona | mount | 1782 | 1718 | 5000 | |
| SpinButton | mount | 1457 | 1444 | 5000 | |
| SwatchPicker | mount | 1620 | 1636 | 5000 |
📊 Bundle size report
Unchanged fixtures
|
fabricteam
reviewed
Jun 13, 2024
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵 fluentuiv9 Open the Visual Regressions report to inspect the affected screenshots
Card Converged 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Card Converged.appearance - High Contrast.normal.chromium.png | 0 | Removed |
| Card Converged.appearance.normal.chromium.png | 0 | Removed |
Card Converged - Interactive 9 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Card Converged - Interactive.appearance interactive - Filled - High Contrast.click.chromium.png | 0 | Added |
| Card Converged - Interactive.appearance interactive - Filled - High Contrast.hover.chromium.png | 0 | Added |
| Card Converged - Interactive.appearance interactive - Filled - High Contrast.normal.chromium.png | 0 | Added |
| Card Converged - Interactive.appearance interactive - Filled Alternative - High Contrast.click.chromium.png | 0 | Added |
| Card Converged - Interactive.appearance interactive - Filled Alternative - High Contrast.hover.chromium.png | 0 | Added |
| Card Converged - Interactive.appearance interactive - Filled Alternative - High Contrast.normal.chromium.png | 0 | Added |
| Card Converged - Interactive.appearance interactive - Outline - Dark Mode.click.chromium.png | 0 | Removed |
| Card Converged - Interactive.appearance interactive - Outline - Dark Mode.hover.chromium.png | 0 | Removed |
| Card Converged - Interactive.appearance interactive - Outline - Dark Mode.normal.chromium.png | 0 | Removed |
Card Converged - Selectable 8 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Card Converged - Selectable.appearance selectable - Subtle - Dark Mode.click.chromium.png | 0 | Removed |
| Card Converged - Selectable.appearance selectable - Subtle - Dark Mode.hover.chromium.png | 0 | Removed |
| Card Converged - Selectable.appearance selectable - Subtle - Dark Mode.normal.chromium.png | 0 | Removed |
| Card Converged - Selectable.appearance selectable - Subtle - Dark Mode.selected.chromium.png | 0 | Removed |
| Card Converged - Selectable.appearance selectable - Subtle - High Contrast.click.chromium.png | 0 | Removed |
| Card Converged - Selectable.appearance selectable - Subtle - High Contrast.hover.chromium.png | 0 | Removed |
| Card Converged - Selectable.appearance selectable - Subtle - High Contrast.normal.chromium.png | 0 | Removed |
| Card Converged - Selectable.appearance selectable - Subtle - High Contrast.selected.chromium.png | 0 | Removed |
SwatchPicker Converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| SwatchPicker Converged.Shape.default.chromium.png | 0 | Added |
mainframev
force-pushed
the
fix/button-hover-mobile
branch
from
5f0ae01 to
b5037aa
Compare
layershifter
requested changes
Jun 17, 2024
+1 this. While I really like these newer selectors that, in theory, allow us to better support multiple input modes my past experience has been that they are not uniformly implemented and need lots of testing. As part of further discussion I'd propose we have a device support/testing matrix for features like this. |
|
@layershifter @spmonahan thank you guys! As suggested, let's discuss more in detail on tech sync 👍🏻 |
microsoft-github-policy-service
bot
added
Needs: Attention
and removed
Needs: Author Feedback
labels
mainframev
force-pushed
the
fix/button-hover-mobile
branch
from
b5037aa to
6ad0204
Compare
1 task
|
Closing in favor of feature request #31858. |
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.
We have a "sticky hover" issue on pointer devices due to the lack of differentiation between pointer and hover devices. This problem also exists in v8.
I approached it with the help of media-query any-hover. Hover effect is wrapped into that query, left
hover:activeoutside, so there will be a visual indication after tap on mobile devices.Browser support
Support is solid
Devices
While the any-hover media query generally helps distinguish between pointer and hover devices, we must be aware of devices with multiple input methods (e.g., pointer devices connected to keyboards and mouse, or laptops with touchscreens). The
any-hover: hoverquery targets any available input method capable of hover, whereashover: hoverapplies only to the primary input.Previous similar issues I found
Previous Behavior
Screen.Recording.2024-06-13.at.13.06.45.mov
New Behavior
Screen.Recording.2024-06-13.at.13.06.10.mov
RPReplay_Final1718277613.MP4
Related Issue(s)