Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Toast notifications without a subtitle are missing bottom margin #17523

Closed
2 tasks done
cuppajoey opened this issue Sep 18, 2024 · 1 comment · Fixed by #17578
Closed
2 tasks done

[Bug]: Toast notifications without a subtitle are missing bottom margin #17523

cuppajoey opened this issue Sep 18, 2024 · 1 comment · Fixed by #17578

Comments

@cuppajoey
Copy link
Contributor

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
image image

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

@tay1orjones
Copy link
Member

@emyarod could you also add VRT for this to make sure we're insulated from regressions like this in the future?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: ✅ Done
Development

Successfully merging a pull request may close this issue.

4 participants