Carbon: [Carbon 10: Notification] Inline notification visual issues

[elizabethsjudd]

Detailed description

Describe in detail the issue you're having.

1. The warning notification has a transparent background so if it's applied to any thing other than a white background the color doesn't stay consistent (could use the sass mix function to blend it with white to make it opaque if it's not in the IBM DL color palette)
2. Timestamp styling is not supported in inline notifications but is in toast notifications. I'd like to apply the same styles for both notification types without having to copy and past Carbon's code in to my style sheets.

Is this issue related to a specific component?

Notification

What did you expect to happen? What happened instead? What would you like to see changed?

1. The background on the information notification is opaque
2. I don't have to copy and paste Carbon's code to style a timestamp

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

v10.0.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Watson Health Pattern & Asset Library (PAL)

Steps to reproduce the issue

Issue 1

1. Change the page background color when using a warning notification

Issue 2

1. Add a time stamp to an inline notification

Additional information

[elizabethsjudd]

Also found an issue where the title of the notification doesn't wrap to multiple lines if it is longer than the width of the notification (used Carbon's code pen in screen shot)

[elizabethsjudd]

Our designer also noticed the close button does not have a hover state

[rauhala]

Opaque background in warning notification is an issue also with toast notifications. Please see attached image which displays the problem in more detail.

[dakahn]

@carbon-design-system/design can you comment on the opaque background here?

[aagonzales]

Notification styles are being updated: https://github.com/carbon-design-system/carbon-components/issues/2354

[elizabethsjudd]

@aagonzales is the update for #2354 also going to resolve the other issues mentioned with the overflow and timestamp stylings? It looks like #2367 is meant to resolve this issue but I don't see any updates for these mentioned issues.

[aagonzales]

The inline notifications were not originally designed to have a time stamp. We can maybe add it as a optional feature for inline but I'd like to see some research and guidelines around when and where a timestamp should be used with notifications before making it part of the default. If you have any information or thoughts around this topic we'd love to hear it.

[tw15egan]

Still needs to be fixed, #2746 did not solve this

https://codepen.io/tjegan/pen/NVgRVg

[elizabethsjudd]

@janedepgen

Can you add feedback as to why we have timestamps in our inline notifications at WH or if we should be updating ours to align closer to Carbon's guidelines? https://github.com/carbon-design-system/carbon/issues/2294#issuecomment-489736536

[janedepgen]

@elizabethsjudd we should update to align to Carbon - thinking about the use case of inline notifications vs toast notifications, it makes more sense to just include timestamps for the toast variant 👍

[shixiedesign]

Just checked, long text is no longer an issue in both vanilla and react. Looks like we are good with no time-stamp on inline too.

[elizabethsjudd]

@carbon-design-system/developers has this been released? We have pulled in v10.3.1 and still have the long title issues with our notifications

[elizabethsjudd]

@carbon-design-system/developers
In v10.3.2 this is still an issue. Please re-open this issue and you can assign it to me.

current v10.3.2 implementation

remove "whitespace: nowrap" from title
(I tested a short title and removing the optional subtitle as well and it worked correctly)