Skip to content

feat(Metric): style enhancements#2437

Merged
nickofthyme merged 24 commits intoelastic:mainfrom
nickofthyme:metric-enhancements
Jun 10, 2024
Merged

feat(Metric): style enhancements#2437
nickofthyme merged 24 commits intoelastic:mainfrom
nickofthyme:metric-enhancements

Conversation

@nickofthyme
Copy link
Copy Markdown
Collaborator

@nickofthyme nickofthyme commented May 20, 2024

Summary

This PR adds the following style improvements to the MetricSpec.

  • Support for text alignment of metric titles, value and icon.
  • Improved height-based font breakpoints.
  • Auto value font to maximize the font of the value in the available space.
  • Custom value font defined by consumer.

BREAKING CHANGE: The MetricStyle.text.darkColor and MetricStyle.text.lightColor are now MetricStyle.textDarkColor and MetricStyle.textLightColor, respectively. This PR also includes minor overall style changes to the text breakpoints of the Metric chart.

Demo of alignment combinations

See demo story here

Zight Recording 2024-05-20 at 01 30 32 PM

Demo of auto value font sizing

Zight Recording 2024-06-04 at 08 04 15 PM

Issues

closes #2306
closes #2213

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • The proper feature labels have been added (e.g. :interactions, :axis)
  • All related issues have been linked (i.e. closes #123, fixes #123)
  • New public API exports have been added to packages/charts/src/index.ts
  • Unit tests have been added or updated to match the most common scenarios
  • The proper documentation and/or storybook story has been added or updated
  • The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)

@nickofthyme nickofthyme added :styling Styling related issue :metric Related to Metric chart labels May 20, 2024
@nickofthyme nickofthyme requested a review from gvnmagni June 5, 2024 18:41
@nickofthyme
Copy link
Copy Markdown
Collaborator Author

buildkite update screenshots

@nickofthyme nickofthyme requested a review from markov00 June 6, 2024 22:10
@nickofthyme
Copy link
Copy Markdown
Collaborator Author

@gvnmagni & @markov00 ready for another review

@nickofthyme nickofthyme marked this pull request as ready for review June 6, 2024 22:10
Copy link
Copy Markdown
Collaborator

@markov00 markov00 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally and works great! I'm wondering if we need to call this a breaking change, at least in charts due to the style changes

@nickofthyme nickofthyme merged commit 0686596 into elastic:main Jun 10, 2024
@nickofthyme nickofthyme deleted the metric-enhancements branch June 10, 2024 23:01
nickofthyme pushed a commit that referenced this pull request Jun 10, 2024
# [66.0.0](v65.2.0...v66.0.0) (2024-06-10)

### Features

* **Metric:** style enhancements ([#2437](#2437)) ([0686596](0686596))

### Performance Improvements

* replace spread with concat where useful ([#2446](#2446)) ([078b490](078b490))

### BREAKING CHANGES

* **Metric:** The `MetricStyle.text.darkColor` and `MetricStyle.text.lightColor` are now `MetricStyle.textDarkColor` and `MetricStyle.textLightColor`, respectively. This PR also includes minor overall style changes to the text breakpoints of the `Metric` chart.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

:metric Related to Metric chart :styling Styling related issue

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Metric] Enhance typography positioning and proportions [metric] Medium and long text in metric is cut

3 participants