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
Co-Authored-By: Kyle Durand <kyledurand@users.noreply.github.com>

Author: zakwarsame

.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.stories.tsx

@@ -178,6 +178,51 @@ export function WithSections() {
   );
 }
 
+export function WithSectionsAndHelpTexts() {
+  const [active, setActive] = useState(true);
+
+  const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+  const activator = (
+    <Button onClick={toggleActive} disclosure>
+      More actions
+    </Button>
+  );
+
+  return (
+    <div style={{height: '250px'}}>
+      <Popover
+        active={active}
+        activator={activator}
+        autofocusTarget="first-node"
+        onClose={toggleActive}
+      >
+        <ActionList
+          actionRole="menuitem"
+          sections={[
+            {
+              title: 'File options',
+              helpText: 'Import or export your data',
+              items: [
+                {content: 'Import file', icon: ImportMinor},
+                {content: 'Export file', icon: ExportMinor},
+              ],
+            },
+            {
+              title: 'Bulk actions',
+              helpText: 'Edit or delete multiple items at once',
+              items: [
+                {content: 'Edit', icon: EditMinor},
+                {content: 'Delete', icon: DeleteMinor},
+              ],
+            },
+          ]}
+        />
+      </Popover>
+    </div>
+  );
+}
+
 export function WithSectionsNoTitles() {
   const [active, setActive] = useState(true);
 

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

@@ -8,6 +8,7 @@ import {KeypressListener} from '../KeypressListener';
 import {Key} from '../../types';
 import type {ActionListItemDescriptor, ActionListSection} from '../../types';
 import {Box} from '../Box';
+import {useUniqueId} from '../../utilities/unique-id';
 
 import {Section, Item} from './components';
 import type {ItemProps} from './components';
@@ -33,6 +34,7 @@ export function ActionList({
 }: ActionListProps) {
   let finalSections: readonly ActionListSection[] = [];
   const actionListRef = useRef<HTMLDivElement & HTMLUListElement>(null);
+  const sectionId = useUniqueId('ActionListSection');
 
   if (items) {
     finalSections = [{items}, ...sections];
@@ -49,7 +51,7 @@ export function ActionList({
   const sectionMarkup = finalSections.map((section, index) => {
     return section.items.length > 0 ? (
       <Section
-        key={section.title || index}
+        key={sectionId}
         section={section}
         hasMultipleSections={hasMultipleSections}
         actionRole={actionRole}

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

@@ -61,7 +61,7 @@ export function Section({
     <Box
       paddingBlockStart="4"
       paddingInlineStart="4"
-      paddingBlockEnd="2"
+      paddingBlockEnd={section.helpText ? '1' : '2'}
       paddingInlineEnd="4"
     >
       <Text as="p" variant="headingXs">
@@ -70,6 +70,19 @@ export function Section({
     </Box>
   ) : null;
 
+  const helpTextMarkup = section.helpText ? (
+    <Box
+      paddingBlockStart={section.title ? '0' : '2'}
+      paddingInlineStart="4"
+      paddingBlockEnd="2"
+      paddingInlineEnd="4"
+    >
+      <Text as="span" color="subdued" breakWord>
+        {section.helpText}
+      </Text>
+    </Box>
+  ) : null;
+
   let sectionRole: 'menu' | 'presentation' | undefined;
   switch (actionRole) {
     case 'option':
@@ -86,6 +99,7 @@ export function Section({
   const sectionMarkup = (
     <>
       {titleMarkup}
+      {helpTextMarkup}
       <Box
         as="ul"
         padding="2"

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}
     />

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

polaris-react/src/types.ts

@@ -206,9 +206,11 @@ export interface ActionListItemDescriptor
 
 export interface ActionListSection {
   /** Section title */
-  title?: string;
+  title?: React.ReactNode;
   /** Collection of action items for the list */
   items: readonly ActionListItemDescriptor[];
+  /** Section help text */
+  helpText?: React.ReactNode;
 }
 
 export interface ComplexAction