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

👌 Improve dropdown title bar #192

Merged
merged 1 commit into from
May 20, 2024
Merged

👌 Improve dropdown title bar #192

merged 1 commit into from
May 20, 2024

Conversation

chrisjsewell
Copy link
Member

@chrisjsewell chrisjsewell commented May 20, 2024

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
Copy link

codecov-commenter commented May 20, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 89.15%. Comparing base (169c09d) to head (fde2a8a).
Report is 12 commits behind head on main.

Additional details and impacted files
@@            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 Coverage Δ
pytests 89.15% <100.00%> (+0.02%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@chrisjsewell chrisjsewell merged commit 89aaa26 into main May 20, 2024
15 checks passed
@chrisjsewell chrisjsewell deleted the update-dropdown branch May 20, 2024 22:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants