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

PCH Performance Stats: Add Multi-percentage bar hover state #2257

Merged
merged 4 commits into from
Mar 4, 2024

Conversation

vaurdan
Copy link
Contributor

@vaurdan vaurdan commented Mar 1, 2024

Description

Adds a nice tooltip and some CSS animation when hovering a section of the multi percentage bar on the Category panel.

Motivation and context

How has this been tested?

Tested locally with all the new changes validated.

@vaurdan vaurdan added this to the 3.14.0 milestone Mar 1, 2024
@vaurdan vaurdan self-assigned this Mar 1, 2024
@vaurdan vaurdan requested a review from a team as a code owner March 1, 2024 16:02
@vaurdan
Copy link
Contributor Author

vaurdan commented Mar 1, 2024

SonarCloud duplication warning can be safely ignored.

Copy link
Collaborator

@acicovic acicovic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this! Left a comment.

@acicovic
Copy link
Collaborator

acicovic commented Mar 4, 2024

Pushed a commit to bring the Multi-percentage bar animation closer to what we have in the design:

image

Notes:

  • Using !important isn't my favorite thing, but in this context I think it's OK. Happy to go another way if there are better suggestions.
  • I noticed that when the to_rem() was being used for --radius, the border-radius was not being applied. So I removed the function from there.
  • I used opacity instead of brightness, because the second changes the color (for example, the orange would become yellow).

@acicovic acicovic changed the title PCH Performance Stats: Add a tooltip with additional information to the category percentage bar PCH Performance Stats: Add Multi-percentage bar hover state Mar 4, 2024
@vaurdan
Copy link
Contributor Author

vaurdan commented Mar 4, 2024

Amazing, thanks for working on those improvements!

@vaurdan vaurdan merged commit 5bc01d9 into redesign Mar 4, 2024
33 checks passed
@vaurdan vaurdan deleted the add/hover-effect-performance-categories branch March 4, 2024 13:26
@acicovic acicovic self-assigned this Mar 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants