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

Dropdown admonition chevrons hover effect is a little too subtle? #80

Open
Tracked by #72
gabalafou opened this issue May 28, 2024 · 8 comments · May be fixed by pydata/pydata-sphinx-theme#1986
Open
Tracked by #72

Comments

@gabalafou
Copy link
Contributor

No description provided.

@gabalafou
Copy link
Contributor Author

I want to leave this up to design whether and how we fix this

@isabela-pf isabela-pf changed the title Dropdown admonition chevrons hover effect is a little too subtle? [M] Dropdown admonition chevrons hover effect is a little too subtle? May 30, 2024
@gabalafou gabalafou added the size: M One to two weeks label May 31, 2024
@gabalafou gabalafou changed the title [M] Dropdown admonition chevrons hover effect is a little too subtle? Dropdown admonition chevrons hover effect is a little too subtle? May 31, 2024
@smeragoel smeragoel self-assigned this May 31, 2024
@Carreau
Copy link
Contributor

Carreau commented Jun 14, 2024

I'm not sure if we can do that better by touching just the arrow, but as generally the full header of the admonition is clickable, I think this should be something similar to the tabs and underline the title on hover.

pydata-sphinx-theme readthedocs io_en_stable_user_guide_web-components html

@Carreau
Copy link
Contributor

Carreau commented Jun 14, 2024

an alternative is that the arrow rotate on click depending on wether the detail is expanded or not, we could rotate the arrow on hover instead:

details.sd-dropdown>.sd-summary-title:hover .sd-summary-chevron-right {
    transform: rotate(90deg);
}

details.sd-dropdown[open]>.sd-summary-title .sd-summary-chevron-right {
    transform: rotate(0deg);
}

details.sd-dropdown[open]>.sd-summary-title:hover .sd-summary-chevron-right {
    transform: rotate(-90deg);
}

@smeragoel
Copy link

smeragoel commented Jul 4, 2024

Thanks @Carreau, those are excellent suggestions and I thought the same. Here are the updated designs:

Figma link to component

image

🎥 Video preview:

In the video I only hovered on the actual text but the hover effect should be triggered while interacting with the whole header

@trallard
Copy link
Member

I am +1 on these more visible designs

@gabalafou
Copy link
Contributor Author

Some thoughts that came out of today's team call:

  • Consistency among the different types of admonitions in the theme is key (Sphinx Design, Sphinx-togglebutton)
  • Just darkening on hover is not enough. But text underline should be enough of a hover effect (Click to expand / Click to collapse).
  • If we cannot add the expand/collapse text easily to the Sphinx Design admonitions, we could just underline the chevron icon and call it a day.
  • Be wary of adding the expand/collapse text via ::before or ::after pseudo-elements. Creates a problem for translatable strings. May also create an accessibility problem: is the pseudo-element text available to screen readers?

@gabalafou gabalafou assigned gabalafou and unassigned gabalafou and smeragoel Aug 22, 2024
@gabalafou
Copy link
Contributor Author

gabalafou commented Aug 22, 2024

Is this still in design? My take is that between the design frames, the discussion and the notes on this issue it's ready to be picked up by dev (me). Am I right or am I wrong?

@smeragoel
Copy link

Thanks for the bump @gabalafou, I missed your last comment.

If we cannot add the expand/collapse text easily to the Sphinx Design admonitions, we could just underline the chevron icon and call it a day.

I can create a hover effect for just the icon if we cannot add text easily, just let me know. I'm personally not in favour of underlining icons 🙈

Other than that, you're right about the issue status, this is ready for dev!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: 👀 In review
Development

Successfully merging a pull request may close this issue.

4 participants