👌 Improve dropdown title bar #192
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Codecov ReportAll modified and coverable lines are covered by tests ✅
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
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR makes three visible changes:
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-updirective option.The prefix icon (optional), title text, and chevron state icon are now all better aligned
The top/bottom padding is now 0.5em instead of 1em
Here is an example:
The PR also introduces three new CSS variables to control font sizes of the dropdown:
Internally, the HTML / CSS is changed, such that the title is now an
inline-flexbox, with three columns arranged withjustify-content: space-between:flex-grow: 1)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:
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