Persona as a name is opinionated (compared even to ItemLayout), are there reasons no not use semantic naming like title, description, etc.?

That's a good point. As the slots can accept a breaadcrumbs component in the future, it seems a bit odd to pass it to a primaryText slot for example.

We decided to go with Persona over EntityLayout due to Entity/Item being too generic. Persona layout gives a little of context on what to expect of the component and is more familiar since v8 has the same name. For the semantic naming, there's no big reason. Though changing it to description, for example, would make it weird if a breadcrumb is used instead of simple text.

We decided to go with Persona over EntityLayout due to Entity/Item being too generic.

But we use too generic *text slots then 😸 IMO as we went with more semantic name (Persona) it's better to use semantic names for slots. description was just an example, feel free to suggest/use own options.

How about primarySlot, secondarySlot, ...? I feel like primary, secondary, and so on should be kept, but I do agree that Text won't work. Especially if we want to use breadcrumbs and such.

@sopranopillow this component looks very similar to https://react.semantic-ui.com/views/item/#types-props. You can consider to grab some naming ideas from there, for example header, meta, extra.

That's a good point. As the slots can accept a breaadcrumbs component in the future, it seems a bit odd to pass it to a primaryText slot for example.

Thanks for clarifying it 👍

I am wondering if PersonaIcon is really needed:

function App() {
  return (
    <>
      {/* We can't apply sizing to sized icons */}
      <Persona media={< AccessTime24Filled />} />
      {/* For unsized we can specify `fontSize` to scale them */}
      <Persona media={< AccessTimeFilled />} />
    </>
   )
}

WDYT about it?

@ling1726 AFAIR you mentioned a similar problem with Avatar & Table sizing. Did you figure out a solution?

The main thing PersonaIcon does is to add a font size and let Persona know that the media is an icon. If we were to remove PersonaIcon, we then drop support of the sizing styles for icons as well. Only Avatars and PresenceBadges would have the sizing behavior.

I think adding a disclaimer about sized icons vs non-sized icons would be better in this case. I think it's worth having the sizing functionality for the icons if possible.

The main thing PersonaIcon does is to add a font size and let Persona know that the media is an icon. If we were to remove PersonaIcon, we then drop support of the sizing styles for icons as well

Can we specify fontSize in styles for media slot?

if that's the case, I still need to know if the media type is an icon. While I could size it with a selector like & > svg, I still need to know that it's an icon to size the text lines correctly.

if that's the case, I still need to know if the media type is an icon. While I could size it with a selector like & > svg, I still need to know that it's an icon to size the text lines correctly.

Sorry, but I didn't get why... Is something except avatar, image, badge and icon can be specified in media slot?

Yes, the possible types the media slot can have are: images, avatars, badges, and icons.

The problem is mainly that whenever an icon is used, we need to support the fixed and scaled sizing. To support the fixed sizing I need to know the icon size so I can set the correct styles for the text slots. This is the main problem since to be able to know the icon size I need to use PersonaContext to let persona know the size of the icon.

For the scaled sizing, it's easier since as you mentioned I could just add the fontSize directly to the media slot, but what keeps us from doing this is the scaled size.

One option we could do is do the same to icon as we are doing with image and let the user deal with the sizing and just have a general size for icons. While I think it's worth having the PersonaIcon, I also think that not being able to fully control the icon's size might set wrong expectations on what PersonaIcon can do. I can talk to design about only supporting the sizing prop for Avatar and PresenceBadge. What do you think?

What do you think?

TBH I am a bit lost at this point and it will be easier for me to understand the implementation. Will it be okay to keep going as it is for now and then follow up on this based on the implementation?

Sounds good, I'll merge this PR #24704 and make a draft PR with the implementation! Sorry for the confusion, but I agree that it'll all make sense in the Implementation.

@layershifter one last major change, I swear 😥😥 I've updated the spec to reflect a discussion we had offline. The new trajectory of this component will be to have a strict persona that aligns with v8's persona for partners. This will ensure that we have the same persona across products.

For the extra functionality that included images, icons and other content, we are exploring two options but leaning towards option 1:

1. We will add a recipes section to the docs and give guidance on building a media object with the components we currently have.
2. We will provide building blocks for a MediaObject and make it flexible for the user.

Thanks so much for being attentive to this PR and I really appreciate all the feedback you've provided!

Sorry, but it does not seem to be aligned with the spec in Figma. Complicating usage for images/icons does not seem for like a futureproof approach 🤔

IMO the latest changes also return the problem with priorities and mutually exclusive slots:

<Persona
  avatar={{ name: 'Kevin Sturgis', badge: { status: 'online' } }}
  presence={{ status: 'offline', outOfOffice: true }}
 />

For me, it's the same case as appearance with Button: we don't want users to do <Button secondary primary />, so we have <Button appearance="primary" />. This follows the principle "do the right thing by default".

It doesn't look like MIGRATION.md exists yet. Do you plan to add it in another PR?

yes, I was planning on adding it with this issue: #24956