Add background color to st.metric delta
#11678
Conversation
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
✅ PR preview is ready!
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds a semi-transparent background behind the delta value in st.metric, matching the existing Markdown background colors.
- Introduces
getMetricBackgroundColorto compute delta backgrounds based on theme and delta color. - Updates the styled delta component to include background color, padding, and rounded corners.
- Adjusts the metric arrow icon size and updates unit tests to assert the new background styles.
Reviewed Changes
Copilot reviewed 110 out of 110 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/lib/src/components/elements/Metric/styled-components.ts | Added getMetricBackgroundColor and applied background styling to StyledMetricDeltaText |
| frontend/lib/src/components/elements/Metric/Metric.tsx | Changed delta icon size from "lg" to "md" |
| frontend/lib/src/components/elements/Metric/Metric.test.tsx | Updated tests to verify the new background-color style for deltas |
Comments suppressed due to low confidence (1)
frontend/lib/src/components/elements/Metric/Metric.test.tsx:118
- [nitpick] Current tests only cover the light theme background color. Consider adding a test using the dark-mode fixture (e.g.,
themed_app) to verify that the delta background renders correctly in dark mode.
)
frontend/lib/src/components/elements/Metric/styled-components.ts
Outdated
Show resolved
Hide resolved
| case MetricProto.MetricColor.RED: | ||
| return transparentize( | ||
| theme.colors[lightTheme ? "red80" : "red60"], | ||
| lightTheme ? 0.9 : 0.7 |
There was a problem hiding this comment.
[nitpick] The opacity values 0.9 and 0.7 are magic numbers. Consider defining named constants or theme variables for these alpha values to improve readability and maintainability.
There was a problem hiding this comment.
Should do this as part of refactoring when we tackle these color values in advanced theming.
Describe your changes
Slightly changes the design of
st.metricto add a background color behind the delta. Colors are the same as for background colored Markdown text.Before:
After:
GitHub Issue Link (if applicable)
Testing Plan
st_columns.pywere updated becausest.metricis used in thest.columnstests, so the change here pushed the rest of the page down a bit.Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.