feat(bullet): improve header layout and positioning #2243
Merged
Conversation
This file contains 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
nickofthyme
added
:styling
|
This is one of the most satisfying thing to watch ever, it is brilliant and seem to work perfectly! Approved with compliments to the chef 👍 |
gvnmagni
approved these changes
Nov 13, 2023
|
buildkite update screenshots |
nickofthyme
pushed a commit
that referenced
this pull request
Nov 20, 2023
# [61.1.0](v61.0.0...v61.1.0) (2023-11-20) ### Bug Fixes * **deps:** update dependency @elastic/eui to v91 ([#2233](#2233)) ([e89f623](e89f623)) * **metric:** add option to set empty cell background color ([#2247](#2247)) ([6a9fb86](6a9fb86)) * **metric:** background color for bar with interactions ([#2248](#2248)) ([dcb56fa](dcb56fa)) ### Features * **bullet:** improve header layout and positioning ([#2243](#2243)) ([b3a95d2](b3a95d2)) * **bullet:** new design style and implementation ([#2156](#2156)) ([fca6cdd](fca6cdd))
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.
Summary
Improves positioning of title. subtitle, value and target
Details
Positioning changes
Previously we used a font size and line height approach that left the baselines of the subtitle/title misaligned with the value/target. This was fixed by using a common baseline for the value/target and the subtitle (or title if no subtitle) along with
ctx.textBaseline = 'alphabetic'.In addition to using a common bottom baseline, we consider the height of the text using an approximation of the ascent, see diagram below, along with a defined line spacing for elements allowed to render multiple lines, for now this is just the title.
With this approach we can better space the text without having overly padded gaps or line heights, with better control over the overall sizing and spacing. With this change the baselines always matchup nicely...
This way no matter if there is a title or subtitle or multiline title, it always aligns the bottom-most left side text with the bottom-most right side text. This also accounts for cases where the value font size is greater than a single title line.
Break points for stacking value/target below title/subtitle when...
I am happy to tweak or add to this but this is what I came up from discussing with @gvnmagni and made some assumptions on my own. This way we are not too eager to stack the target value when it's not needed and tends to fill the space the best.
This change look something like this...
Issues
closes #2235
Checklist
:xy,:partition):interactions,:axis)closes #123,fixes #123)packages/charts/src/index.ts