executablebooks / sphinx-design

A sphinx extension for designing beautiful, screen-size responsive web components.
https://sphinx-design.readthedocs.io/en/furo-theme/
MIT License
187 stars 57 forks source link

👌 Improve dropdown title bar #192

Closed chrisjsewell closed 2 months ago

chrisjsewell commented 2 months ago

This PR makes three visible changes:

  1. The "default" behaviour of the right chevron is to go from right-facing (closed) to down-facing (open), instead of down-facing (closed) to up-facing (open). There is also a rotate transition on opening/closing. The old default behaviour can be retained by using the new :chevron: down-up directive option.

  2. The prefix icon (optional), title text, and chevron state icon are now all better aligned

  3. The top/bottom padding is now 0.5em instead of 1em

Here is an example:

image

The PR also introduces three new CSS variables to control font sizes of the dropdown:

--sd-fontsize-tabs-label: 1rem;
--sd-fontsize-dropdown-title: 1rem;
--sd-fontweight-dropdown-title: 700;

Internally, the HTML / CSS is changed, such that the title is now an inline-flex box, with three columns arranged with justify-content: space-between:

icon (optional) text (flex-grow: 1) state chevron

Also, the state chevron was previously two distinct SVGs (with one hidden), but now is one that get rotated on open/close.


An additional note, currently for multi-line titles, the icons are aligned vertically centered:

image

It might be ideal for them to be aligned with only the first line of text, i.e. be at the top. But I couldn't work out how to do this, whilst maintaining the correct alignment for the (more common) single line title

codecov-commenter commented 2 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 89.15%. Comparing base (169c09d) to head (fde2a8a).

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #192 +/- ## ========================================== + Coverage 89.13% 89.15% +0.02% ========================================== Files 11 11 Lines 957 959 +2 ========================================== + Hits 853 855 +2 Misses 104 104 ``` | [Flag](https://app.codecov.io/gh/executablebooks/sphinx-design/pull/192/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=executablebooks) | Coverage Δ | | |---|---|---| | [pytests](https://app.codecov.io/gh/executablebooks/sphinx-design/pull/192/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=executablebooks) | `89.15% <100.00%> (+0.02%)` | :arrow_up: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=executablebooks#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.