Is it possible to remove some DOM elements from Persona and PersonaCoin?

[spmonahan]

Problem

In scenarios where applications have many Personas rendered the size of the DOM can become quite large. For example, rendering 235 Personas generates approximately 3,500 DOM nodes.

For example, this rendered element:

Generates this DOM:

Solution

We'd like to remove DOM nodes and only render things that are absolutely required. This can either be achieved by removing DOM nodes entirely or by conditionally rendering nodes.

On the topic of conditionally rendering nodes, the hidden Tooltip nodes from the screenshot seem like good candidates but they need to be rendered to work properly with iOS VoiceOver. See #22216 for details.

Risks (Rabbit holes)

Changing rendered DOM runs the risk of being a breaking change.

[behowell]

I've identified a few places that can be improved:

• The tooltips can be removed by setting showOverflowTooltip={false} on the Persona controls. These tooltips are there in case the text gets truncated, but don't appear to be necessary if a contact card is shown on hover.
• I've published a PR to stop rendering some unnecessary DOM nodes in Persona: Persona: Remove empty divs when there is no secondaryText, tertiaryText, or optionalText #23401
  • Removes extra empty <div> nodes rendered for tertiary and optional text, even if there is no tertiary/optional text
  • Removes an extra <span> surrounding the initials in PersonaCoin

With those changes implemented, it will remove 7 DOM nodes from the example in the issue description.

The DOM of Persona/PersonaCoin does still seem to have more divs than should be necessary, but it is difficult to change further without potentially breaking some users.

[KeiraYang]

@behowell showOverflowTooltip are not in the Fabric version 7 we're using. Can you cherry-pick the props change for it?

[behowell]

Hi @KeiraYang, I logged #23480 to track the request to backport the prop to v7.