NotificationsPanel does not honor carbon theme

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

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

carbon-design-system / ibm-products