Modal content overflow doesn't fade

[eedzjee]

Bug: Modal content overflow doesn't fade

Detailed description

When a modal dialog has scrollable content, the content isn't fading out in the Angular variant of the modal.

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug

Is this issue related to a specific component?

Modal (https://angular.carbondesignsystem.com/?path=/story/components-modal--basic)

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

A modal dialog with a lot of content should have a fade-out at the bottom, as described in the documentation:
https://carbondesignsystem.com/components/modal/usage/#overflow-content

What browser are you working in?

Chrome / Edge on a Mac

What version of the Carbon Design System are you using?

The current storybook (I guess 5.32.0 at the moment)

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

No pressing dates.

Steps to reproduce the issue

(will create the codesandbox later)

1. Go to https://angular.carbondesignsystem.com/?path=/story/components-modal--basic
2. Update the modalText in 'Controls' to add a lot of text
3. Open the modal
4. Scroll down the content and see that there is no fade:

Additional information

[eduardmarcinco]

hi, I did a bit of analysis and it seems class .cds--modal-content--overflow-indicator that is used by carbon-components angular was removed from @carbon/styles.

The commit where it was removed: carbon-design-system/carbon@ffc385b#diff-e66e03e601056150086bae060a7b1e96a3e537f83b7f002db1305fcab05b2fbeL359

The class was replaced with .cds--modal-scroll-content that should be applied on content div along with .cds--modal-content.

Carbon react implementation: https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Modal/Modal.tsx#L366-L368

@Akshat55 ^^

[github-actions]

🎉 This issue has been resolved in version 5.40.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀