StatPanel: Add padding between horizontal name and value #55299
Conversation
JoaoSilvaGrafana
added
type/bug
add to changelog
area/panel/stat
no-backport
JoaoSilvaGrafana
requested review from
a team,
joshhunt,
ashharrison90,
jackw,
mdvictor and
supilee
and removed request for
a team
| const styles: CSSProperties = { | ||
| fontSize: `${this.titleFontSize}px`, | ||
| lineHeight: LINE_HEIGHT, | ||
| }; | ||
|
|
||
| if (this.props.parentOrientation === VizOrientation.Horizontal && this.justifyCenter) { | ||
| styles.paddingRight = this.props.theme.spacing(1); |
There was a problem hiding this comment.
what would something font-dependant look like, like 1ch (or maybe like 0.75ch) instead?
There was a problem hiding this comment.
Put differently, is using fixed pixels, where the gap will remain constant size regardless of the surrounding font size, the right approach?
There was a problem hiding this comment.
Good point! Here is what a very small and very large one look like, the top line is with 8px padding the bottom one is with 0.75ch. You barely notice the difference on the big one but on the small one the ch definitely looks better:
|
Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/33812 |
|
Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/33823 |
|
Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/33848 |
What this PR does / why we need it:
The Stat Panel has an option to set the data horizontally and they currently have no space between the name and the value. This PR adds some padding there.
Which issue(s) this PR fixes:
Fixes #54160