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

.changeset/famous-hairs-jam.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated top bar menu active state

polaris-react/src/components/ActionList/ActionList.scss

@@ -58,11 +58,6 @@
     svg {
       fill: var(--p-color-icon-interactive);
     }
-
-    &::before {
-      // stylelint-disable-next-line -- alignment for left tab style https://github.com/Shopify/polaris/pull/3619
-      @include list-selected-indicator;
-    }
   }
 
   &.destructive {

polaris-react/src/components/ActionList/ActionList.tsx

@@ -49,7 +49,7 @@ export function ActionList({
   const sectionMarkup = finalSections.map((section, index) => {
     return section.items.length > 0 ? (
       <Section
-        key={section.title || index}
+        key={typeof section.title === 'string' ? section.title : index}
         section={section}
         hasMultipleSections={hasMultipleSections}
         actionRole={actionRole}

polaris-react/src/components/ActionList/components/Item/Item.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {TickSmallMinor} from '@shopify/polaris-icons';
 
 import {classNames} from '../../../../utilities/css';
 import type {ActionListItemDescriptor} from '../../../../types';
@@ -11,6 +12,8 @@ import styles from '../../ActionList.scss';
 import {handleMouseUpByBlurring} from '../../../../utilities/focus';
 import {HorizontalStack} from '../../../HorizontalStack';
 import {Box} from '../../../Box';
+import {Tooltip} from '../../../Tooltip';
+import {Truncate} from '../../../Truncate';
 
 export type ItemProps = ActionListItemDescriptor;
 
@@ -33,6 +36,7 @@ export function Item({
   ellipsis,
   active,
   role,
+  truncate = false,
 }: ItemProps) {
   const className = classNames(
     styles.Item,
@@ -61,7 +65,15 @@ export function Item({
     );
   }
 
-  const contentText = ellipsis && content ? `${content}…` : content;
+  let contentText = null;
+
+  if (ellipsis && content) {
+    contentText = `${content}…`;
+  } else if (content) {
+    contentText = truncate ? truncateText(content) : content;
+  } else {
+    contentText = content;
+  }
 
   const contentMarkup = helpText ? (
     <>
@@ -80,16 +92,28 @@ export function Item({
     </span>
   );
 
-  const suffixMarkup = suffix && (
-    <Box>
-      <span className={styles.Suffix}>{suffix}</span>
-    </Box>
-  );
+  let suffixMarkup: React.ReactNode | null = null;
+
+  if (active) {
+    suffixMarkup = (
+      <Box>
+        <span className={styles.Suffix}>
+          <Icon source={TickSmallMinor} />
+        </span>
+      </Box>
+    );
+  } else if (suffix) {
+    suffixMarkup = suffix && (
+      <Box>
+        <span className={styles.Suffix}>{suffix}</span>
+      </Box>
+    );
+  }
 
   const textMarkup = <span className={styles.Text}>{contentMarkup}</span>;
 
   const contentElement = (
-    <HorizontalStack blockAlign="center" gap="4">
+    <HorizontalStack blockAlign="center" gap="4" wrap={!truncate}>
       {prefixMarkup}
       {textMarkup}
       {badgeMarkup}
@@ -134,3 +158,19 @@ export function Item({
     </>
   );
 }
+
+const truncateText = (text: string) => {
+  const trimmedText = text.trim();
+  return (
+    <Tooltip
+      content={trimmedText}
+      zIndexOverride={514}
+      preferredPosition="above"
+      hoverDelay={1000}
+    >
+      <Text truncate as="p" variant="bodyMd">
+        <Truncate>{trimmedText}</Truncate>
+      </Text>
+    </Tooltip>
+  );
+};

polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx

@@ -102,6 +102,16 @@ describe('<Item />', () => {
       onClick: null,
     });
   });
+
+  it('truncates content when truncate is true', () => {
+    const item = mountWithApp(
+      <Item
+        content="Test longer than usual string that probably overflows."
+        truncate
+      />,
+    );
+    expect(item).toContainReactComponent(Text, {truncate: true});
+  });
 });
 
 function noop() {}

polaris-react/src/components/TopBar/TopBar.stories.tsx

@@ -1,7 +1,13 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {ActionList, Frame, Icon, TopBar, Text} from '@shopify/polaris';
-import {ArrowLeftMinor, QuestionMarkMajor} from '@shopify/polaris-icons';
+import {ActionList, Frame, Icon, TopBar, Text, Avatar} from '@shopify/polaris';
+import {
+  ArrowLeftMinor,
+  QuestionMarkMajor,
+  EditMinor,
+  TickSmallMinor,
+  SearchMinor,
+} from '@shopify/polaris-icons';
 
 export default {
   component: TopBar,
@@ -49,15 +55,42 @@ export function Default() {
     <TopBar.UserMenu
       actions={[
         {
-          items: [{content: 'Back to Shopify', icon: ArrowLeftMinor}],
+          items: [
+            {
+              active: true,
+              content: 'Jaded Pixel',
+              prefix: <Avatar size="small" name="Jaded Pixel" />,
+              suffix: <Icon source={TickSmallMinor} />,
+              truncate: true,
+            },
+            {
+              content: 'Jaded Pixel 2.0',
+              prefix: <Avatar size="small" name="Jaded Pixel 2.0" />,
+              truncate: true,
+            },
+            {
+              content: 'View all 3 stores',
+              prefix: <Icon source={SearchMinor} />,
+            },
+          ],
         },
         {
           items: [{content: 'Community forums'}],
         },
+        {
+          items: [{content: 'Help Center'}],
+        },
+        {
+          items: [{content: 'Keyboard shortcuts'}],
+        },
+        {
+          title: 'Dharma Johnson',
+          items: [{content: 'Manage account'}, {content: 'Log out'}],
+        },
       ]}
       name="Dharma"
       detail="Jaded Pixel"
-      initials="D"
+      initials="JP"
       open={isUserMenuOpen}
       onToggle={toggleIsUserMenuOpen}
     />

polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 
-import type {IconableAction} from '../../../../types';
 import {Avatar} from '../../../Avatar';
 import type {AvatarProps} from '../../../Avatar';
 import {MessageIndicator} from '../../../MessageIndicator';
 import {Menu} from '../Menu';
 import type {MenuProps} from '../Menu';
 import {Text} from '../../../Text';
+import type {ActionListProps} from '../../../ActionList';
 
 import styles from './UserMenu.scss';
 
 export interface UserMenuProps {
   /** An array of action objects that are rendered inside of a popover triggered by this menu */
-  actions: {items: IconableAction[]}[];
+  actions: ActionListProps['sections'];
   /** Accepts a message that facilitates direct, urgent communication with the merchant through the user menu */
   message?: MenuProps['message'];
   /** A string detailing the merchant’s full name to be displayed in the user menu */
@@ -29,6 +29,8 @@ export interface UserMenuProps {
   open: boolean;
   /** A callback function to handle opening and closing the user menu */
   onToggle(): void;
+  /** A custom activator that can be used when the default activator is not desired */
+  customActivator?: React.ReactNode;
 }
 
 export function UserMenu({
@@ -41,10 +43,13 @@ export function UserMenu({
   onToggle,
   open,
   accessibilityLabel,
+  customActivator,
 }: UserMenuProps) {
   const showIndicator = Boolean(message);
 
-  const activatorContentMarkup = (
+  const activatorContentMarkup = customActivator ? (
+    customActivator
+  ) : (
     <>
       <MessageIndicator active={showIndicator}>
         <Avatar

polaris-react/src/types.ts

@@ -204,6 +204,8 @@ export interface ActionListItemDescriptor
   suffix?: React.ReactNode;
   /**  Add an ellipsis suffix to action content */
   ellipsis?: boolean;
+  /** Truncate action content */
+  truncate?: boolean;
   /** Whether the action is active or not */
   active?: boolean;
   /** Defines a role for the action */
@@ -212,7 +214,7 @@ export interface ActionListItemDescriptor
 
 export interface ActionListSection {
   /** Section title */
-  title?: string;
+  title?: string | React.ReactNode;
   /** Collection of action items for the list */
   items: readonly ActionListItemDescriptor[];
 }