[UserMenu] Update Topbar User Menu and Action List to reflect new designs

[zakwarsame]

WHY are these changes introduced?

Resolves https://github.com/Shopify/core-workflows/issues/881

Before the launch of Commerce Components by Shopify, there are a couple of prerequisites that require changes to Polaris. This PR addresses these changes.

I'm including screenshots of individual changes below but for in-depth specifications, please see this Figma.

WHAT is this pull request doing?

This PR updates the Topbar.UserMenu component as well as the ActionList to reflect the new store switcher experience.

The changes being made here are three fold:

• Topbar.UserMenu: Allow a custom activatorContent prop to be passed enabling us to customize the order of the avatar and heading. Our activator will have a square shaped avatar as well as an updated Text. Otherwise, the default activator stays the same (It might be a good idea to have the new format as the default, in which case I can update the existing activator).

• ActionList: title is updated to accept a React.Node instead of string. Additionally a new helpText prop is added to accommodate email or other help texts.

• ActionList: the blue indicator that displays on active actions is removed. If there are any accessibility concerns regarding this, I'm happy to discuss.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

• 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.
  • The selected item doesn't have a blue indicator

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 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

[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-20230404213853

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230404213853

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

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230404213853

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	240.22 KB (+0.08% 🔺)
polaris-react-esm	156.49 KB (-0.01% 🔽)
polaris-react-esnext	218.65 KB (-0.03% 🔽)
polaris-react-css	47.16 KB (-0.13% 🔽)

[kyledurand]

This is looking ok to me, just a few comments. I'd like to hear what others think as well before shipping

[zakwarsame]

I tentatively made the suffix to always be TickSmallMinor when active is true following @chloerice's suggestion.
Will update if the consensus changes.

[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-20230411134611

yarn add @shopify/polaris-codemods@0.0.0-snapshot-release-20230411134611

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230411134611

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

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230411134611

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230411134611

[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-20230412181419

yarn add @shopify/polaris-codemods@0.0.0-snapshot-release-20230412181419

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230412181419

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

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230412181419

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230412181419

[chloerice]

Suggested change

	Updated top bar menu active state
	- Updated `TopBar.UserMenu` active state styles
	- Added the `truncate` prop to `ActionList.Item`
	- Added support for setting an array of type ActionListSection[] on the `Topbar.UserMenu` `actions` prop

[chloerice]

@kyle Should ellipsis be depreecated in favor of truncate? It seems like the ellipsis prop is pointless as is and should have been doing actual truncation all this time since the content prop is string only (can't be passed in as truncated) 🤔

[chloerice]

Suggested change

	<div className={styles.Trimmed}>
	<Truncate>{trimmedText}</Truncate>
	</div>
	<Text truncate as="p" variant="bodySm">{trimmedText}</Text>

The undocumented Truncate component is going to be removed in favor of Text.truncate.

[chloerice]

Suggested change

	expect(item).toContainReactComponent(Truncate);
	expect(item).toContainReactComponent(Text, {truncate: true});

[chloerice]

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]

Yup! Our current project aims to roll out the new store switcher to all our merchants except Plus, who have a separate nav.

[chloerice]

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]

For future reference: moved

[zakwarsame]

@chloerice @kyledurand

I ran into a couple of more things that need scrutiny with regards to updating the active state. In the meantime, I would appreciate a review on this PR
which only introduces the customActivator and changes the title type. 🙏🏾

• The scrolling behaviour (here). When active is true, we automatically scroll to the current button. This makes sense for places like Metafileds -> Select Type, but not in the user menu.
• The cursor type and clickability of the button. For the user menu, the active item isn't meant to be interactive.

Makes me wonder if we should have a separate highlighted state 🤔

[jamalsoueidan]

const contentText = ellipsis && content ? `${content}…` : (truncate ? truncateText(content) : content);

[zakwarsame]

Thanks for the suggestion. Nesting a ternary operator is shorter, but the if else style is more readable to other devs.

[jamalsoueidan]

You should consider using const most if not all places, and your condition is duplicated!

const contextText = content
if (ellipsis && content) {
  contentText = `${content}…`;
} else if (content && truncate) {
  contentText = truncateText(content);
} 

remove the else, and assign contextText = content as default.
but i still prefer one line, since its very short condition.

[chloerice]

We prefer clarity over brevity, especially in this case because theres multiple props that influence what's rendered and one needs to take precedence.

Suggested change

	let contentText = null;
	let contentText = content
	if (ellipsis) {
	contentText = `${content}…`;
	} else if (truncate) {
	contentText = truncateText(content);
	}

I do think that ellipsis should be deprecated in favor of the truncate prop you're adding @zakwarsame

[zakwarsame]

Working on it here 😄

[github-actions]

Hi! We noticed there hasn’t been activity on this PR in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.