Notification badge - React and HTML examples don't match

[ajacobs21e]

HTML examples include the default state (no background) on a white background https://www.patternfly.org/v4/components/notification-badge/html

React examples just have "unread" and "attention" on a black background. Clicking on these clears the badge background color but does not then apply the "open" background color shown on the design guidelines tab. https://www.patternfly.org/v4/components/notification-badge

Black background probably makes more sense since this will be used in the masthead, or maybe both backgrounds.

[nicolethoen]

@mcarrano It looks like React is only missing an Open state, but so is core. And likely the core examples should be placed on a black background? Does that sound right?

[nicolethoen]

This can be follow up work to https://github.com/patternfly/patternfly/issues/4563

[jpuzz0]

After reading up on this issue, it seems like https://github.com/patternfly/patternfly/issues/4563 should not have been closed, since no modifiers for open state exists yet.

If we want an "open" state as the design specs show, I assume our first steps would be to update core to include a new css modifier and update the HTML examples to include what "open" should look like with that modifier.

After that, we can update the react component with a new variant that maps to that modifier and update the React examples.

Does this seem like the correct course of action @mcarrano @nicolethoen?

[mcarrano]

After reading up on this issue, it seems like https://github.com/patternfly/patternfly-react/issues/4563 should not have been closed, since no modifiers for open state exists yet.

@jeffpuzzo looks like you pasted the wrong issue link here. Should be https://github.com/patternfly/patternfly/issues/4563. @srambach @mcoker can you comment on why that issue was closed and/or how this needs to be addressed?

[srambach]

I believe this is the answer - the styling for the open state comes from the header tools item. https://github.com/patternfly/patternfly/issues/4563#issuecomment-999715799

This is the comment attempting to explain that, but maybe it's still not clear. https://github.com/srambach/patternfly/blob/889e4a9e4326cec4910f33fc14ebd7950d984d43/src/patternfly/components/NotificationBadge/examples/NotificationBadge.md?plain=1#L105

[ajacobs21e]

I can't remember what this looked like before. I see both examples on a black background now which is great! It would still help if react had a default state example.