From 9d7fa3198062449361d73536266eedec9c72d624 Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Tue, 4 Apr 2023 16:19:38 -0400
Subject: [PATCH 1/7] chore: custom prop for activator on usermenu; allow
 react.node for actionlist title; allow helptext as prop to sections

fix: commits that are messed up

ammend: use source path

ammend: call hook outside of callback

review: use unique id on iteration

ammend: use source path

ammend: call hook outside of callback

review: use unique id on iteration

Update .changeset/famous-hairs-jam.md

fix: use correct import on usermenu; use correct key

changeset

chore: update top bar menu stories to reflect new menu

chore: use actionlistprops as type of actions

review: remove helptext from sections

review: update string type

fix: move import line

fixup

fix: make tick minor the default when active is true; use typeof for key

fix: use unique id combined with index

fix: remove string from id generation
Co-Authored-By: Kyle Durand <kyledurand@users.noreply.github.com>
---
 .changeset/famous-hairs-jam.md                |  5 +++
 .../src/components/ActionList/ActionList.scss |  5 ---
 .../src/components/ActionList/ActionList.tsx  |  2 +-
 .../ActionList/components/Item/Item.tsx       | 23 ++++++++---
 .../ActionList/components/Section/Section.tsx |  2 +-
 .../src/components/TopBar/TopBar.stories.tsx  | 41 +++++++++++++++++--
 .../TopBar/components/UserMenu/UserMenu.tsx   | 11 +++--
 polaris-react/src/types.ts                    |  2 +-
 8 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/famous-hairs-jam.md

diff --git a/.changeset/famous-hairs-jam.md b/.changeset/famous-hairs-jam.md
new file mode 100644
index 00000000000..9c3cd6919fd
--- /dev/null
+++ b/.changeset/famous-hairs-jam.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated top bar menu active state
diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
index 1d28b1196af..b83c07699db 100644
--- a/polaris-react/src/components/ActionList/ActionList.scss
+++ b/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 {
diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx
index 9d384861588..92ec54bdafc 100644
--- a/polaris-react/src/components/ActionList/ActionList.tsx
+++ b/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}
diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx
index 02f819f8db4..e9923043881 100644
--- a/polaris-react/src/components/ActionList/components/Item/Item.tsx
+++ b/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';
@@ -80,11 +81,23 @@ 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>;
 
diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
index 921d6b83681..dda6e9ba6f9 100644
--- a/polaris-react/src/components/ActionList/components/Section/Section.tsx
+++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -61,7 +61,7 @@ export function Section({
     <Box
       paddingBlockStart="4"
       paddingInlineStart="4"
-      paddingBlockEnd="2"
+      paddingBlockEnd={'2'}
       paddingInlineEnd="4"
     >
       <Text as="p" variant="headingXs">
diff --git a/polaris-react/src/components/TopBar/TopBar.stories.tsx b/polaris-react/src/components/TopBar/TopBar.stories.tsx
index b79db4a50b9..6cfb5d0227e 100644
--- a/polaris-react/src/components/TopBar/TopBar.stories.tsx
+++ b/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}],
+          helpText: 'Jaded Pixel',
+          items: [
+            {
+              active: true,
+              content: 'Jaded Pixel',
+              prefix: <Avatar size="small" name="Jaded Pixel" />,
+              suffix: <Icon source={TickSmallMinor} />,
+            },
+            {
+              content: 'Jaded Pixel 2.0',
+              prefix: <Avatar size="small" name="Jaded Pixel 2.0" />,
+            },
+            {
+              content: 'View all 3 stores',
+              prefix: <Icon source={SearchMinor} />,
+            },
+          ],
         },
         {
           items: [{content: 'Community forums'}],
         },
+        {
+          items: [{content: 'Help Center'}],
+        },
+        {
+          items: [{content: 'Keyboard shortcuts'}],
+        },
+        {
+          title: 'Dharma Johnson',
+          helpText: 'dharma@jadedpixel.com',
+          items: [{content: 'Manage account'}, {content: 'Log out'}],
+        },
       ]}
       name="Dharma"
       detail="Jaded Pixel"
-      initials="D"
+      initials="JP"
       open={isUserMenuOpen}
       onToggle={toggleIsUserMenuOpen}
     />
diff --git a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
index 4b973ceff3e..5f8a1ab8a1d 100644
--- a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
+++ b/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 */
+  activatorContent?: React.ReactNode;
 }
 
 export function UserMenu({
@@ -41,10 +43,13 @@ export function UserMenu({
   onToggle,
   open,
   accessibilityLabel,
+  activatorContent,
 }: UserMenuProps) {
   const showIndicator = Boolean(message);
 
-  const activatorContentMarkup = (
+  const activatorContentMarkup = activatorContent ? (
+    activatorContent
+  ) : (
     <>
       <MessageIndicator active={showIndicator}>
         <Avatar
diff --git a/polaris-react/src/types.ts b/polaris-react/src/types.ts
index da9ea5b2599..ff519bc3b6c 100644
--- a/polaris-react/src/types.ts
+++ b/polaris-react/src/types.ts
@@ -212,7 +212,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[];
 }

From 31f9011e352b89bcbe2fef218df169f1b0c912f7 Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Tue, 11 Apr 2023 12:43:00 -0400
Subject: [PATCH 2/7] remove curly braces

---
 .../src/components/ActionList/components/Section/Section.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
index dda6e9ba6f9..921d6b83681 100644
--- a/polaris-react/src/components/ActionList/components/Section/Section.tsx
+++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -61,7 +61,7 @@ export function Section({
     <Box
       paddingBlockStart="4"
       paddingInlineStart="4"
-      paddingBlockEnd={'2'}
+      paddingBlockEnd="2"
       paddingInlineEnd="4"
     >
       <Text as="p" variant="headingXs">

From 413c28a0bee05c2086c33e3832e2445f95082c46 Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Wed, 12 Apr 2023 12:50:42 -0400
Subject: [PATCH 3/7] add truncation to action list item

---
 .../ActionList/components/Item/Item.tsx       | 26 +++++++++++++++++--
 .../components/Item/tests/Item.test.tsx       | 11 ++++++++
 .../src/components/TopBar/TopBar.stories.tsx  |  7 ++---
 polaris-react/src/types.ts                    |  2 ++
 4 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx
index e9923043881..62b6e59e684 100644
--- a/polaris-react/src/components/ActionList/components/Item/Item.tsx
+++ b/polaris-react/src/components/ActionList/components/Item/Item.tsx
@@ -12,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;
 
@@ -34,6 +36,7 @@ export function Item({
   ellipsis,
   active,
   role,
+  truncate = false,
 }: ItemProps) {
   const className = classNames(
     styles.Item,
@@ -62,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 ? (
     <>
@@ -102,7 +113,7 @@ export function Item({
   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}
@@ -147,3 +158,14 @@ export function Item({
     </>
   );
 }
+
+const truncateText = (text: string) => {
+  const trimmedText = text.trim();
+  return trimmedText.length > 50 ? (
+    <Tooltip content={trimmedText} zIndexOverride={514}>
+      <Truncate>{trimmedText}</Truncate>
+    </Tooltip>
+  ) : (
+    trimmedText
+  );
+};
diff --git a/polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx b/polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx
index 5494718b75d..a24ace6951e 100644
--- a/polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx
+++ b/polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx
@@ -4,6 +4,7 @@ import {mountWithApp} from 'tests/utilities';
 import {Item} from '../Item';
 import {Text} from '../../../../Text';
 import {UnstyledLink} from '../../../../UnstyledLink';
+import {Truncate} from '../../../../Truncate';
 
 describe('<Item />', () => {
   it('adds a style property when the image prop is present', () => {
@@ -102,6 +103,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(Truncate);
+  });
 });
 
 function noop() {}
diff --git a/polaris-react/src/components/TopBar/TopBar.stories.tsx b/polaris-react/src/components/TopBar/TopBar.stories.tsx
index 6cfb5d0227e..b909599766d 100644
--- a/polaris-react/src/components/TopBar/TopBar.stories.tsx
+++ b/polaris-react/src/components/TopBar/TopBar.stories.tsx
@@ -55,17 +55,19 @@ export function Default() {
     <TopBar.UserMenu
       actions={[
         {
-          helpText: 'Jaded Pixel',
           items: [
             {
               active: true,
               content: 'Jaded Pixel',
               prefix: <Avatar size="small" name="Jaded Pixel" />,
               suffix: <Icon source={TickSmallMinor} />,
+              truncate: true,
             },
             {
-              content: 'Jaded Pixel 2.0',
+              content:
+                'Jaded Pixel 2.0 Jaded Pixel 2.0 Jaded Pixel 2.0 Jaded Pixel Pixel 2.0',
               prefix: <Avatar size="small" name="Jaded Pixel 2.0" />,
+              truncate: true,
             },
             {
               content: 'View all 3 stores',
@@ -84,7 +86,6 @@ export function Default() {
         },
         {
           title: 'Dharma Johnson',
-          helpText: 'dharma@jadedpixel.com',
           items: [{content: 'Manage account'}, {content: 'Log out'}],
         },
       ]}
diff --git a/polaris-react/src/types.ts b/polaris-react/src/types.ts
index ff519bc3b6c..0b03bc358ea 100644
--- a/polaris-react/src/types.ts
+++ b/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 */

From 21558bf1d46c2b1ca38ad8bf7a64766533208352 Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Wed, 12 Apr 2023 13:47:02 -0400
Subject: [PATCH 4/7] use max width to truncate

---
 polaris-react/src/components/ActionList/ActionList.scss   | 6 ++++++
 .../src/components/ActionList/components/Item/Item.tsx    | 8 ++++----
 polaris-react/src/components/TopBar/TopBar.stories.tsx    | 3 ++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
index b83c07699db..2dca0cb73ea 100644
--- a/polaris-react/src/components/ActionList/ActionList.scss
+++ b/polaris-react/src/components/ActionList/ActionList.scss
@@ -1,5 +1,7 @@
 @import '../../styles/common';
 
+$content-max-width: 176px;
+
 .Item {
   // stylelint-disable -- Polaris component custom properties
   --pc-action-list-image-size: 20px;
@@ -123,4 +125,8 @@
   min-width: 0;
   max-width: 100%;
   flex: 1 1 auto;
+
+  .Trimmed {
+    max-width: $content-max-width;
+  }
 }
diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx
index 62b6e59e684..67287383a47 100644
--- a/polaris-react/src/components/ActionList/components/Item/Item.tsx
+++ b/polaris-react/src/components/ActionList/components/Item/Item.tsx
@@ -161,11 +161,11 @@ export function Item({
 
 const truncateText = (text: string) => {
   const trimmedText = text.trim();
-  return trimmedText.length > 50 ? (
+  return (
     <Tooltip content={trimmedText} zIndexOverride={514}>
-      <Truncate>{trimmedText}</Truncate>
+      <div className={styles.Trimmed}>
+        <Truncate>{trimmedText}</Truncate>
+      </div>
     </Tooltip>
-  ) : (
-    trimmedText
   );
 };
diff --git a/polaris-react/src/components/TopBar/TopBar.stories.tsx b/polaris-react/src/components/TopBar/TopBar.stories.tsx
index b909599766d..b412282ab07 100644
--- a/polaris-react/src/components/TopBar/TopBar.stories.tsx
+++ b/polaris-react/src/components/TopBar/TopBar.stories.tsx
@@ -58,7 +58,8 @@ export function Default() {
           items: [
             {
               active: true,
-              content: 'Jaded Pixel',
+              content:
+                'Jaded Pixel Jaded Pixel Jaded Pixel Jaded Pixel Jaded Pixel Jaded Pixel',
               prefix: <Avatar size="small" name="Jaded Pixel" />,
               suffix: <Icon source={TickSmallMinor} />,
               truncate: true,

From 1a81660c27ece4c0a5ecb708edf29b0f21a99792 Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Wed, 12 Apr 2023 16:39:36 -0400
Subject: [PATCH 5/7] update stories

---
 polaris-react/src/components/TopBar/TopBar.stories.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/polaris-react/src/components/TopBar/TopBar.stories.tsx b/polaris-react/src/components/TopBar/TopBar.stories.tsx
index b412282ab07..4f79f1320e4 100644
--- a/polaris-react/src/components/TopBar/TopBar.stories.tsx
+++ b/polaris-react/src/components/TopBar/TopBar.stories.tsx
@@ -58,15 +58,13 @@ export function Default() {
           items: [
             {
               active: true,
-              content:
-                'Jaded Pixel Jaded Pixel Jaded Pixel Jaded Pixel Jaded Pixel Jaded Pixel',
+              content: 'Jaded Pixel',
               prefix: <Avatar size="small" name="Jaded Pixel" />,
               suffix: <Icon source={TickSmallMinor} />,
               truncate: true,
             },
             {
-              content:
-                'Jaded Pixel 2.0 Jaded Pixel 2.0 Jaded Pixel 2.0 Jaded Pixel Pixel 2.0',
+              content: 'Jaded Pixel 2.0',
               prefix: <Avatar size="small" name="Jaded Pixel 2.0" />,
               truncate: true,
             },

From f7ab8a924aed7f5ccae83395087ab24c0633a0e1 Mon Sep 17 00:00:00 2001
From: zak warsame <42528878+zakwarsame@users.noreply.github.com>
Date: Thu, 13 Apr 2023 09:31:47 -0400
Subject: [PATCH 6/7] rename activatorContent to customActivator

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
---
 .../src/components/TopBar/components/UserMenu/UserMenu.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
index 5f8a1ab8a1d..39f30acd0ac 100644
--- a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
+++ b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
@@ -30,7 +30,7 @@ export interface UserMenuProps {
   /** 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 */
-  activatorContent?: React.ReactNode;
+  customActivator?: React.ReactNode;
 }
 
 export function UserMenu({

From 9fc6e67da1ea2e1b1ed771d282b5db6b1378dd76 Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Thu, 13 Apr 2023 10:26:29 -0400
Subject: [PATCH 7/7] review: remove max width constraint; update truncate;

---
 .../src/components/ActionList/ActionList.scss         |  6 ------
 .../components/ActionList/components/Item/Item.tsx    | 11 ++++++++---
 .../ActionList/components/Item/tests/Item.test.tsx    |  3 +--
 .../TopBar/components/UserMenu/UserMenu.tsx           |  6 +++---
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
index 2dca0cb73ea..b83c07699db 100644
--- a/polaris-react/src/components/ActionList/ActionList.scss
+++ b/polaris-react/src/components/ActionList/ActionList.scss
@@ -1,7 +1,5 @@
 @import '../../styles/common';
 
-$content-max-width: 176px;
-
 .Item {
   // stylelint-disable -- Polaris component custom properties
   --pc-action-list-image-size: 20px;
@@ -125,8 +123,4 @@ $content-max-width: 176px;
   min-width: 0;
   max-width: 100%;
   flex: 1 1 auto;
-
-  .Trimmed {
-    max-width: $content-max-width;
-  }
 }
diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx
index 67287383a47..1b2ee564f4c 100644
--- a/polaris-react/src/components/ActionList/components/Item/Item.tsx
+++ b/polaris-react/src/components/ActionList/components/Item/Item.tsx
@@ -162,10 +162,15 @@ export function Item({
 const truncateText = (text: string) => {
   const trimmedText = text.trim();
   return (
-    <Tooltip content={trimmedText} zIndexOverride={514}>
-      <div className={styles.Trimmed}>
+    <Tooltip
+      content={trimmedText}
+      zIndexOverride={514}
+      preferredPosition="above"
+      hoverDelay={1000}
+    >
+      <Text truncate as="p" variant="bodyMd">
         <Truncate>{trimmedText}</Truncate>
-      </div>
+      </Text>
     </Tooltip>
   );
 };
diff --git a/polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx b/polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx
index a24ace6951e..174bb9f913f 100644
--- a/polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx
+++ b/polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx
@@ -4,7 +4,6 @@ import {mountWithApp} from 'tests/utilities';
 import {Item} from '../Item';
 import {Text} from '../../../../Text';
 import {UnstyledLink} from '../../../../UnstyledLink';
-import {Truncate} from '../../../../Truncate';
 
 describe('<Item />', () => {
   it('adds a style property when the image prop is present', () => {
@@ -111,7 +110,7 @@ describe('<Item />', () => {
         truncate
       />,
     );
-    expect(item).toContainReactComponent(Truncate);
+    expect(item).toContainReactComponent(Text, {truncate: true});
   });
 });
 
diff --git a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
index 39f30acd0ac..33100a79c4b 100644
--- a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
+++ b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
@@ -43,12 +43,12 @@ export function UserMenu({
   onToggle,
   open,
   accessibilityLabel,
-  activatorContent,
+  customActivator,
 }: UserMenuProps) {
   const showIndicator = Boolean(message);
 
-  const activatorContentMarkup = activatorContent ? (
-    activatorContent
+  const activatorContentMarkup = customActivator ? (
+    customActivator
   ) : (
     <>
       <MessageIndicator active={showIndicator}>