Disclosure Hover States

[a-christensen]

Hey DSYS!

Thanks for your great ideas for the disclosure hover states. I explored the two main options we talked about and would love to get your thoughts.

1. Button State - This version uses the "primary" blue as the text color (which is accessible) and adds a color-background-primary-lightest to make the hover state resemble our buttons. There is not currently a "primary" blue for text so we would need to discuss adding that to our styles if we decide this version is the best.

2. Arrow Move - This version explores having the arrow move right by $space-40 on hover. The thought is that the arrow would remain in this position on click while it transitions to a down arrow and only move back to its original position when the user mouses away. This would help reduce any animation weirdness. Check out a rough demo (note: design isn't exact).

Please take a look and add your thoughts, either casting a vote for one version or suggesting another approach/consideration. After we agree on a hover state, I can build out the remaining themes and examples for this component.

Thanks so much for the help!

[richbachman]

Hi @a-christensen

Thanks for putting these together! I'll share with the team for feedback.

[a-christensen]

Thanks, Rich! I really appreciate it.

[a-christensen]

I just added a demo video of the arrow animation so it's easier to conceptualize. Looking forward to hearing everyone's thoughts! :)

[kate-porter]

@a-christensen thanks so much for putting these options together! I LOVE both of these options.

What would you think of trying a blend of both? I feel like a text color change and the arrow animation could be really nice together. And the arrow animation feels maybe a liiittle dramatic - what would you think of moving it to the right by maybe $space-30 or $space-20?

Also, might I ask what you used to demo the animation? It's so cool!

[a-christensen]

Thanks for the feedback, Katie! I'm happy to try a blended version of both and include smaller spacing. My main concern was that when movement was the only indicator of hover, it could be easily missed if the disclosure was nearly full-width and the user was hovering on the opposite end of component. But the text color change would help a lot and so the movement wouldn't need to be so exaggerated. Thanks for the suggestions and I will add updates to this discussion.

I used Principle https://principleformac.com/ to do the animation. I used that app back in the day when I was working on mobile designs.

[kate-porter]

Amazing! I played with principle awhile ago but haven't used it in awhile. I'm gonna have to play with it again as we start doing more animation design for Paste. :)

[a-christensen]

Check out some additional variations of the arrow animations.

1. Arrow movement with $space-30
2. Arrow movement with $space-20
3. Arrow movement with $space-20 and text color change to the primary blue (I'm open to other color suggestions here as well. We could go back to the link text color since we wouldn't need the color change to be accessible. I'm hesitant to do any gray options since we're using gray for the disabled state)

[a-christensen]

@katieporter Check these out when you get the chance and let me know your thoughts :)

[kate-porter]

Ohhh I like option #3! What do you think?

And yeah agreed on the blue text vs. gray. I think going back to the link text color would be a good option so we don't need to add a new token. The link text is the same color as the primary blue in the Default theme, anyway, so we'd be adding a new token that we'd really only need in the Console theme which doesn't feel worth it.

[corinne-nagel]

OMG @a-christensen Love option 3, this is looking so great!

[a-christensen]

Yayyy! Thanks for the feedback, crew. Here's an updated version of $space-20 w/ color change to link text for comparison. This might be the best so we don't have to create any new text styles.

[kate-porter]

Love it! 🙌