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.

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

Style ToolTip to make it dark enough in Dark mode #12420

Open
wants to merge 18 commits into
base: main
Choose a base branch
from

Conversation

willibrandon
Copy link
Contributor

@willibrandon willibrandon commented Nov 4, 2024

Fixes #11954

Proposed changes

  • Style the ToolTip using DarkMode_Explorer theme and round the corners with a small radius.

Customer Impact

  • Fixes an issue with ToolTip not being dark enough in Dark mode.

Regression?

  • No

Risk

  • I believe risk is low.

Screenshots

Before

ToolTipDarkModeBefore

After

ToolTipDarkModeExplorerSmallRoundedCorners

Test methodology

  • Run unit and integration tests.
  • Manually tested.
Microsoft Reviewers: Open in CodeFlow

Copy link

codecov bot commented Nov 4, 2024

Codecov Report

Attention: Patch coverage is 4.39560% with 87 lines in your changes missing coverage. Please review.

Project coverage is 75.70903%. Comparing base (c9aa1c9) to head (625896f).
Report is 32 commits behind head on main.

Additional details and impacted files
@@                 Coverage Diff                 @@
##                main      #12420         +/-   ##
===================================================
+ Coverage   75.64273%   75.70903%   +0.06629%     
===================================================
  Files           3147        3153          +6     
  Lines         635806      635800          -6     
  Branches       47012       46982         -30     
===================================================
+ Hits          480941      481358        +417     
+ Misses        151423      151004        -419     
+ Partials        3442        3438          -4     
Flag Coverage Δ
Debug 75.70903% <4.39560%> (+0.06629%) ⬆️
integration 18.26839% <0.00000%> (+0.02931%) ⬆️
production 49.27218% <0.00000%> (+0.09778%) ⬆️
test 97.04151% <11.11111%> (+0.01066%) ⬆️
unit 46.24786% <0.00000%> (+0.11792%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

@dotnet-policy-service dotnet-policy-service bot added the draft draft PR label Nov 4, 2024
@willibrandon willibrandon marked this pull request as ready for review November 4, 2024 05:05
@willibrandon willibrandon requested a review from a team as a code owner November 4, 2024 05:05
@dotnet-policy-service dotnet-policy-service bot removed the draft draft PR label Nov 4, 2024
@lonitra
Copy link
Member

lonitra commented Nov 5, 2024

Overall changes LGTM, @KlausLoeffelmann what do you think of the changes here?

@lonitra lonitra added the 📭 waiting-author-feedback The team requires more information from the author label Nov 5, 2024
@dotnet-policy-service dotnet-policy-service bot removed the 📭 waiting-author-feedback The team requires more information from the author label Nov 6, 2024
@memoarfaa
Copy link

memoarfaa commented Nov 6, 2024

This will disable round corners see
#11907 (comment)_

also treeview,listview,tabs and some other controls has internal tooltips need to be darked.

@willibrandon willibrandon marked this pull request as draft November 7, 2024 01:55
@willibrandon
Copy link
Contributor Author

Marking this PR as a draft as @memoarfaa has pointed out that it could be improved. I need to take a look at the DarkMode_Explorer theme and how it's currently used to style ComboBox and ListView in Dark mode.

@memoarfaa - Have you done work in this area already?

@willibrandon
Copy link
Contributor Author

@memoarfaa - Here's an example with your suggestions applied.

DarkMode_Explorer with rounded corners.

ToolTipDarkModeExplorerRoundedCorners

@willibrandon
Copy link
Contributor Author

DarkMode_Explorer with small rounded corners.

ToolTipDarkModeExplorerSmallRoundedCorners

@willibrandon willibrandon changed the title Disabling ToolTip visual styles to make it dark enough in Dark mode Style ToolTip to make it dark enough in Dark mode Nov 7, 2024
@dotnet-policy-service dotnet-policy-service bot added the draft draft PR label Nov 7, 2024
@willibrandon willibrandon marked this pull request as ready for review November 7, 2024 07:52
@willibrandon
Copy link
Contributor Author

@memoarfaa Thank you for the heads up. I understand there are some other internal tooltips that will need to be darkened and I plan to help out with those when I can. I've implemented your suggestions here and have rounded the corners with a small radius.

@dotnet-policy-service dotnet-policy-service bot removed the draft draft PR label Nov 7, 2024
@willibrandon willibrandon marked this pull request as draft November 8, 2024 03:03
@willibrandon
Copy link
Contributor Author

DarkMode_Explorer with a balloon window.

ToolTipDarkModeExplorerBalloonWindow

@dotnet-policy-service dotnet-policy-service bot added the draft draft PR label Nov 8, 2024
@willibrandon
Copy link
Contributor Author

ListView ToolTip

Before:
ListViewToolTipDarkModeBefore

After:
ListViewToolTipDarkModeAfter

@willibrandon
Copy link
Contributor Author

TreeView ToolTip

Before:
TreeViewToolTipDarkModeBefore

After:
TreeViewToolTipDarkModeAfter

@willibrandon
Copy link
Contributor Author

TabControl ToolTip

Before:
TabControlToolTipDarkModeBefore

After:
TabControlToolTipDarkModeAfter

@willibrandon
Copy link
Contributor Author

@memoarfaa Are you aware of any other tooltips that need to be darkened?
I believe I have exhausted the list of relevant *GETTOOLTIPS messages I see in the docs.

@willibrandon
Copy link
Contributor Author

The tooltips have been styled to be dark when dark mode is enabled, including the balloons, and the corners have been rounded for Windows 11 or greater. I need some guidance on how to unit test and verify the theme being used by the tooltip when the system is in dark mode. If someone could give me a nudge for the test, I would greatly appreciate it.

This pull request is ready for review.

@willibrandon willibrandon marked this pull request as ready for review November 26, 2024 19:37
@dotnet-policy-service dotnet-policy-service bot removed the draft draft PR label Nov 26, 2024
@toehead2001
Copy link
Contributor

Even when not in Dark Mode, I believe it would be advantageous to set the corners to RoundSmall.
It better matches the Windows 11 styling, and just looks better (in my opinion).

Default corners

default

RoundSmall corners

rdSm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Dark Mode] ToolTip is not in dark mode after enabled SystemColorMode.Dark
4 participants