NotificationsPanel does not honor carbon theme

[justindm234]

Package

Carbon for IBM Products

Description

The user interface for my product supports multiple carbon themes (g100 and g10) with UI Shell HeaderPanels using g90 and white themes. We are hoping to include the c4p NotificationsPanel in our UI. Unfortunately, the NotificationsPanel enforces the g100 theme, which does not align with our other HeaderPanels.

Existing header panels in my products:

c4p NotificationsPanel in my product

Component(s) impacted

NotificationsPanel

Allow the NotificationsPanel to support all carbon theme either via its parent Theme/Layer tags or an explicit theme prop

I can work around this for the most part by overriding c4p styles. This one override does most of the work:

.my-class-name:global(.c4p--notifications-panel.c4p--notifications-panel__container) {
  @include theme.theme(themes.$white);
}

However, I cannot override the NotificationPanel's NotificationsEmptyState's illustrationTheme prop, so a new emptyStateIllustrationTheme prop may be sufficient (though not ideal).

Browser

Chrome

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.36.0

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Product/offering

IBM Z Hardware Management Console

CodeSandbox or Stackblitz example

https://stackblitz.com/github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products/NotificationsPanel?file=src%2FExample%2FExample.jsx

Steps to reproduce the issue (if applicable)

Render NotificationsPanel in white, g10, or g90 themed UI and the NotificationsPanel theme is always g100

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

Tasks

• Remove hardcoded theming
• Get a design review once implemented (before PR merge)

[elycheea]

Thanks for raising this issue!

Believe the enforced theme was as initially designed — but this design was based on Carbon 10 where the UI shell was not themed.

I’ve tagged this issue so we can discuss this further as a possible enhancement to the original design.

[oliviaflory]

@elycheea I think we would expect the notifications panel to follow the UI shell theme now that theming is a possibility in v11.

• This is a good example to share with DSIT/DSAG for a product using something other than the gray 100 theme for UI shell!
• We would need to sort out the layering logic, but can probably reference what core is doing with the switcher
• Additionally, I think the notifications panel is one thing that the core team would maybe want to include in the UI shell in the future, but TBD on that

[oliviaflory]

Old sketch design file for reference: https://www.figma.com/design/Ltk5SGayQMnNzmnbKWp2Tv/Notifications_specs-final?node-id=0-4391&t=bZZl8lPODEiqQpo0-1

[RichKummer]

@elycheea – for NotificationPanel, does theming just need to be enabled on the dev side or do you need a new design spec with v11 tokens?