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

Remove animations on actionlist checkmark #2527

Merged
merged 3 commits into from
Jan 31, 2024

Conversation

keithamus
Copy link
Member

Authors: Please fill out this form carefully and completely.

Reviewers: By approving this Pull Request you are approving the code change, as well as its deployment and mitigation plans.
Please read this description carefully. If you feel there is anything unclear or missing, please ask for updates.

What are you trying to accomplish?

Checkmarks are animated when they get selected/deselected, but also the way CSS animations work, the animation is also run whenever the element moves from display:none to a display where it is laid out.

This means whenever the menu is opened all the checkboxes animate in, which looks... weird.

Screenshots

a.video.showing.the.menu.being.opened.and.closed.where.the.checkmarks.animate.in.each.time.mp4

Integration

List the issues that this change affects.

A user pointed this out on a public forum: https://ruby.social/@joeldrapper/111796664357341563

Risk Assessment

  • Low risk the change is small, highly observable, and easily rolled back.
  • Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
  • High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

I delete the animation

Anything you want to highlight for special attention from reviewers?

Accessibility

  • Fixes axe scan violation - This change fixes an existing axe scan violation.
  • No new axe scan violation - This change does not introduce any new axe scan violations.
  • New axe violation - This change introduces a new axe scan violation. Please describe why the violation cannot be resolved below.

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews (Lookbook)
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@keithamus keithamus requested a review from a team as a code owner January 22, 2024 12:49
Copy link

changeset-bot bot commented Jan 22, 2024

🦋 Changeset detected

Latest commit: 36985fb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/view-components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@langermank
Copy link
Contributor

@keithamus is there a way we can maintain the checkmark animation generally, but for this specific scenario (a menu opens that always has things checked) remove it? I'd love to pair with you on this before we completely remove it.

@keithamus
Copy link
Member Author

keithamus commented Jan 22, 2024

I think the solution would be to add a class to the button or checkbox that is active once the checkbox is checked, and remains applied for the duration of the animation (or longer), and apply the animation to that class.

Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

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

🤘🏻

@langermank langermank marked this pull request as draft January 22, 2024 21:53
Copy link
Contributor

@langermank langermank left a comment

Choose a reason for hiding this comment

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

I just wanna say I don't think its the animations fault 😆 I think its a nice animation. And something weird is happening with the menu. But agree snappy is good and you'll rarely see the animation since most menus close on selection.

So long old friend 👋

@jonrohan jonrohan marked this pull request as ready for review January 31, 2024 17:54
@jonrohan jonrohan requested a review from a team January 31, 2024 17:54
@jonrohan jonrohan enabled auto-merge (squash) January 31, 2024 17:54
@jonrohan jonrohan merged commit 1d20198 into main Jan 31, 2024
28 of 30 checks passed
@jonrohan jonrohan deleted the remove-animations-on-action-list-checkmark branch January 31, 2024 17:57
@primer primer bot mentioned this pull request Jan 31, 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.

4 participants