Package

@carbon/react

Browser

No response

Package version

v1.66.0

React version

No response

Description

Toast notification messages that have a long title, but not a subtitle, appear too short due to their lack of bottom margin. This is because the title only has a top margin. The bottom margin only appears when the notification has a subtitle.

without a subtitle	with a subtitle

We need to fix the spacing to work in both cases.

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-notifications-toast--playground&args=caption:;title:This+is+a+really+long+notification+title;subtitle:subtitle

Steps to reproduce

This issue can be observed in Storybook. Visit the above link or:

1. Visit the ToastNotification Storybook.
2. Remove the default caption and subtitle.
3. Add a long enough title so that it breaks into multiple lines.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

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