Skip to content

feat: 2147 Update notification message to use Carbon notification component#2382

Open
xiaopeng0202 wants to merge 5 commits intomainfrom
feat/2147
Open

feat: 2147 Update notification message to use Carbon notification component#2382
xiaopeng0202 wants to merge 5 commits intomainfrom
feat/2147

Conversation

@xiaopeng0202
Copy link
Collaborator

@xiaopeng0202 xiaopeng0202 commented Mar 5, 2026

…ponent

Description

Closes #2147

Changelog

Changed

  • Update notification message on moisture content and purity test screen to use Carbon notification component not material UI Alert to keep consistency

How was this tested?

  • 🧠 Not needed
  • 👀 Eyeball
  • 🤖 Added tests

What gif/image best describes this PR or how it makes you feel?


Thanks for the PR!

Deployments, as required, will be available below:

Please create PRs in draft mode. Mark as ready to enable:

After merge, new images are deployed in:

@xiaopeng0202 xiaopeng0202 requested review from Copilot and removed request for MCatherine1994 and SLDonnelly March 5, 2026 17:10
@xiaopeng0202 xiaopeng0202 requested a review from ngunner15 March 5, 2026 18:02
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Updates the moisture content and purity test screens to use Carbon’s InlineNotification component instead of Material UI Alert, aligning notifications with the app’s Carbon design system usage.

Changes:

  • Replaced MUI Alert with Carbon InlineNotification in MoistureContent and PurityContent screens.
  • Added/updated SCSS for notification positioning and styling in both views.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File Description
frontend/src/views/CONSEP/TestingActivities/PurityContent/styles.scss Adds styling for the new Carbon notification on the purity screen.
frontend/src/views/CONSEP/TestingActivities/PurityContent/index.tsx Switches purity screen notification rendering from MUI Alert to Carbon InlineNotification.
frontend/src/views/CONSEP/TestingActivities/MoistureContent/styles.scss Adjusts notification positioning/layout for the moisture screen.
frontend/src/views/CONSEP/TestingActivities/MoistureContent/index.tsx Switches moisture screen notification rendering from MUI Alert to Carbon InlineNotification.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

{alert?.message
&& (<Alert className="consep-moisture-content-alert" severity={alert?.isSuccess ? 'success' : 'error'}>{alert?.message}</Alert>)}
&& (
<InlineNotification
Copy link
Collaborator

Choose a reason for hiding this comment

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

Hi Xiao, I think we use the low-contrast version for the inline notification, otherwise all the background color will be black and that's for the dark mode

Screenshot 2026-03-05 at 2 04 30 PM

It should look like below:
Image

@MCatherine1994
Copy link
Collaborator

Hi Xiao, the issue number in the pr title we need to put as #2147, so when the release pipeline generates the release note, it can link to the issue number
Screenshot 2026-03-05 at 2 27 31 PM

@MCatherine1994
Copy link
Collaborator

Could you share some screenshots of the success and error notification after the change? Thanks!

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.

Update notification message to use Carbon notification component not Alert

3 participants