[SF][MessageView]: [Long titleText in link will be overlapped]

[tandan0813]

Describe the bug

Please see the isolated example，when use Link in TitleText, the text will be overlapped. However, we expected to show the full content in MessageItem.

Expected behavior:

Isolated Example

https://stackblitz.com/edit/github-wntw1g5z?file=src%2FApp.tsx

Reproduction steps

...

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

2.6.0

UI5 Web Components Version

2.6.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @tandan0813

you have to apply wrappingType="None" to the Link component, otherwise it won't overflow. Also, I've discovered a bug in the calculation for the details view. Currently it's required to set children if an overflowing Link is used as titleText for the details view to be enabled.

We'll outline the required wrappingType and fix the calculation issue in the linked PR.

Here you can find a working implementation including the workaround: https://stackblitz.com/edit/github-wntw1g5z-kuuczoxt?file=src%2FApp.tsx,package.json

[tandan0813]

@Lukas742
However, we hope to display wrapped text without having to enter the detail view. Requiring users to click into the details page just to see the complete text can lead to a poor user experience and may also pose accessibility (A11y) issues.

[Lukas742]

Hi @tandan0813

this behavior is by design and it's not recommended using long texts as title. Also, I’m not sure what a11y issues you’re referring to.

So, for this to be implemented this request would need to go through the Inner Source process and be synchronised with the SAP Central Design team first. Please raise a BLI to the central design team and include the ticket number here for reference. Please contact me internally, if you require the current specifications or want to know the process of how to create BLIs for the central design team.

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v2.7.0 🎉

The release is available on v2.7.0

Your semantic-release bot 📦🚀