[Toast] Getting: Attempted import error: 'NotificationActionButton' is not exported from 'carbon-components-react'.

What package(s) are you using?

• carbon-components
• carbon-components-react

Summary

I’m trying to follow the example of Toast from StoryBook but I’m getting this error: Attempted import error: ‘NotificationActionButton’ is not exported from ‘carbon-components-react’.

What is the Action button in inlineNotification stands for?

I was expecting to see a button that triggers the add/remove to/from toast, are there such hooks for adding removing?

For now I used a Tooltip to display the notifications inside:

But I’m facing some issues with that. For example when clicking on the close button of one notification the tooltip is closed and the notification does not disappear when opening the tooltip again. If I putt the notification outside the tooltip, the close button works. But I don’t want to have notifications floating on the screen, I need to put them all in one drawer and handling it as a state array that I can add/remove from. I’ll try to use the onCloseButtonClick event to remove from the list, and push to the state array to add new ones…

1. Is it a good approach or there is something more acceptable?
2. Is there a way to prevent the tooltip window auto close when removing a notification. To be closed only when pressing on the tooltip icon for example.
3. Is there a max-height property that makes the opened window with scroll bar if there are many notification?

this. what happens if I set max-height:

Relevant information

Please check this sandbox: https://codesandbox.io/s/brave-voice-bdrx0

1. How to make the tooltip icon with white color I tried making the Tooltips icons white by adding :

.bx–tooltip { max-width: none; /width: 100%;/ }

.bx–tooltip-icon svg { fill: white; }

But it didn’t work for me.

Sorry for listing more than one item in the same thread, if needed will split.

[asudoh]

Thanks @shixiedesign for your feedback! @zbeedatm Please make sure working with your designers to figure out the design that fits well with Carbon design ecosystem. If your designer still comes back with the design seen in the screenshot above, please follow what @shixiedesign suggested.

[asudoh]

^ Sounds a different one, if you have a reduced case based on https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox feel free to enter an issue. Thanks!