[Bug]: Persona with long text overflows parent container

[rafaeltavares]

Component

Persona

Package version

9.56.6

React version

17.0.2

Environment

System:
    OS: Linux 6.5 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (32) x64 AMD EPYC 7763 64-Core Processor
    Memory: 115.15 GB / 125.78 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  npmPackages:
    @types/react: 17.0.39 => 17.0.39 
    @types/react-dom: 17.0.11 => 17.0.11 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2

Current Behavior

Persona text props (primary | secondary | tertiary | quaternary) do not provide a strategy to handle long text strings, causing styling overflow in parent containers.

Expected Behavior

Persona should provide a prop to specify the text wrap/overflow strategy (e.g. ellipsis | wrap | nowrap).

Reproduction

https://stackblitz.com/edit/2cj6rimd?file=src%2Fexample.tsx

Steps to reproduce

1. Go to "https://stackblitz.com/edit/2cj6rimd?file=src%2Fexample.tsx"
2. Wait for the bundle finish building.
3. The page should display a Persona component overflowing its parent container.

Are you reporting an Accessibility issue?

no

Suggested severity

Medium - Has workaround

Products/sites affected

Viva Engage

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[mainframev]

@rafaeltavares

hi 👋🏻

This request is more a feature request. I understand the use case, but at the same time I think it's something that can be easily achievable on consumers side. In your case, you could apply word-break to the same fixed width parent or via className to Persona or add truncating via slots and Text (it has truncate and wrap properties) component.