Skip to content

chore: Change flashbar styles for one-theme#4686

Merged
at-susie merged 5 commits into
mainfrom
onetheme/change-flashbar-style
Jul 2, 2026
Merged

chore: Change flashbar styles for one-theme#4686
at-susie merged 5 commits into
mainfrom
onetheme/change-flashbar-style

Conversation

@at-susie

@at-susie at-susie commented Jul 2, 2026

Copy link
Copy Markdown
Member

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

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@at-susie at-susie changed the title Onetheme/change flashbar style chore: Change flashbar styles for one-theme Jul 2, 2026
@at-susie at-susie marked this pull request as ready for review July 2, 2026 11:46
@at-susie at-susie requested a review from a team as a code owner July 2, 2026 11:46
@at-susie at-susie requested review from gethinwebster and mxschll and removed request for a team and gethinwebster July 2, 2026 11:46
@codecov

codecov Bot commented Jul 2, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.57%. Comparing base (7f6f93b) to head (d217f83).

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.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Comment thread src/flashbar/style.tsx
};
}

export function getFlashIconStyles(style: FlashbarProps['style'] | undefined, type: string = 'info') {

@at-susie at-susie Jul 2, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

@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

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Why does the comment say icon color? Isnt this for the whole text?

@at-susie at-susie added this pull request to the merge queue Jul 2, 2026
Merged via the queue into main with commit 350ae2f Jul 2, 2026
87 of 88 checks passed
@at-susie at-susie deleted the onetheme/change-flashbar-style branch July 2, 2026 14:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants