chore: Change flashbar styles for one-theme#4686
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4686 +/- ##
=======================================
Coverage 97.57% 97.57%
=======================================
Files 948 948
Lines 30495 30502 +7
Branches 11154 11159 +5
=======================================
+ Hits 29755 29762 +7
Misses 733 733
Partials 7 7 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
| }; | ||
| } | ||
|
|
||
| export function getFlashIconStyles(style: FlashbarProps['style'] | undefined, type: string = 'info') { |
There was a problem hiding this comment.
@mxschll
In the new one-theme Flashbar design, the status icon gets its own color (green for success, red for error, etc.) that's different from the neutral body text. That per-status icon color is applied in src/flashbar/styles.scss.
The problem is that for the Core, builders can override colors at runtime through the Flashbar style API. But a color set on the root flash container can't reach the icon, because that class-based SCSS rule on .flash-icon beats anything inherited from the parent. So the only way to let a Core builders customize the icon color is to write it inline, directly on the icon element — and that's exactly what getFlashIconStyles does.
Nothing will be changed for the existing builders' flashbar who have customized flahsbar using the style API. So this change is safe.
| // Focus outline matches the text color to align with other flashbar types and to ensure color contrast. | ||
| colorBorderItemFocused: '{colorTextNotificationYellow}', | ||
|
|
||
| // Status icon color |
There was a problem hiding this comment.
Why does the comment say icon color? Isnt this for the whole text?
Description
This PR updates flashbar styles for the one-theme. Originally we merged this PR for the flashbar style changes, but there were issue detected in a pipeline so the #4671 was reverted in the #4683. This PR brings the flashbar style changes with the fix for the issues.
Related links, issue #, if available: n/a
How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.