[UserMenu] Allow activator content to be passed in Top bar menu

[zakwarsame]

WHY are these changes introduced?

Resolves https://github.com/Shopify/core-workflows/issues/881
Follow up to: #8856

Part of Commerce Components by Shopify; which requires some customization to the user menu

WHAT is this pull request doing?

Topbar.UserMenu: Allow a custom activatorContent prop to be passed enabling customization of the order of the avatar and heading.

ActionList: title is updated to accept a React.Node instead of string.

How to 🎩

• Spin URL
  • Notice how we're able to pass a custom activator with a squared avatar, and a different text style
  • The title "Test User" is also customized to use a different style. Passing just a string would still have the original style.

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	240.45 KB (+0.02% 🔺)
polaris-react-esm	156.67 KB (+0.03% 🔺)
polaris-react-esnext	218.86 KB (+0.02% 🔺)
polaris-react-css	47.22 KB (+0.01% 🔺)

[zakwarsame]

/snapit

[github-actions]

🫰✨ Thanks @zakwarsame! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230412220453

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20230412220453

yarn add @shopify/polaris@0.0.0-snapshot-release-20230412220453

[kyledurand]

Looks good! Can you add a story for the custom activator? Also I really think we should just call the prop activator and leave it optional. That should be straightforward enough to consumers

[kyledurand]

Can we just name this activator?

[chloerice]

I think since the majority of the props map to the built-in activator, it might be confusing (name, avatar, accessibilityLabel, initials, detail) since the other components with an activator prop don't render their own internally.

[zakwarsame]

Agree ^. Also, there's a default activator already; passing a new one would be customizing it.

[kyledurand]

Fair enough! We do have a custom activator on the Sheet component which follows the activator? but it works slightly differently and is also a deprecated component so I'm fine with setting a new standard here

[chloerice]

Oh I thought Sheet's activator prop was analogous to Modal's 👀. In any case, bringing the related convo from other PR here:

@chloerice 6 hours ago
Are all user menus going to have the store switcher eventually instead of the Stores action list item that links out to an identity page? If not, should this use case be documented as its own story since it's unique to merchants who have the store switcher?

@zakwarsame 4 hours ago •
Yup! Our https://github.com/Shopify/core-workflows/issues/881 aims to roll out the new store switcher to all our merchants except Plus, who have a separate nav.

Ah okay! In that case, should we:

• Make this a layout change internal to the component instead of adding a customActivator prop, since the pattern is being updated across the board?
• Add an optional logo prop that renders a Thumbnail to the right of the name (instead of an avatar on the left) when provided, and make initials optional?

[zakwarsame]

@chloerice

Make this a layout change internal to the component instead of adding a customActivator prop, since the pattern is being updated across the board?

Making it an internal layout change is a good idea. Although I think we still need the customActivator prop because the release for the store switcher change is set for Editions; and also, Plus stores will not have their layout changed even after the release.

Add an optional logo prop that renders a Thumbnail to the right of the name (instead of an avatar on the left) when provided, and make initials optional?

I think this depends on how much flexibility we'll want in Polaris. We can allow for both of them to be optional in a prefix / suffix type of way like we do in ActionList. On the other hand if we want to be stricter, we can just use one internal layout, and then allow the customActivator prop for the other one-off situations. For this case the avatar prop already acts as a logo since it takes in a url that can be passed to the Avatar component.

[chloerice]

Sounds like what you have is th ebest way to move forward 💯

[zakwarsame]

Thank you! FYI, I've made the new layout change internal and will temporarily pass in the old activator as customActivator until launch.