Allow custom toggle title to be passed to MenuItems

hypothesis · Jan 10, 2025 · b70984b · b70984b
1 parent 9b0a025
commit b70984b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/src/sidebar/components/GroupList/GroupListItem.tsx b/src/sidebar/components/GroupList/GroupListItem.tsx
@@ -136,6 +136,7 @@ function GroupListItem({
       leftChannelContent={leftChannelContent}
       onClick={isSelectable ? focusGroup : toggleSubmenu}
       onToggleSubmenu={toggleSubmenu}
+      submenuToggleTitle={`Show actions for ${group.name}`}
       submenu={
         <>
           <ul>

diff --git a/src/sidebar/components/MenuItem.tsx b/src/sidebar/components/MenuItem.tsx
@@ -112,13 +112,20 @@ export type MenuItemProps = {
 
   onClick?: (e: Event) => void;
   onToggleSubmenu?: (e: Event) => void;
+
   /**
    * Contents of the submenu for this item.  This is typically a list of
    * `MenuItem` components with the `isSubmenuItem` prop set to `true`, but can
    * include other content as well. The submenu is only rendered if
    * `isSubmenuVisible` is `true`.
    */
   submenu?: ComponentChildren;
+
+  /**
+   * Custom title for the submenu toggle button.
+   * Omit this prop if there is no submenu.
+   */
+  submenuToggleTitle?: string;
 };
 
 /**
@@ -150,6 +157,7 @@ export default function MenuItem({
   onClick,
   onToggleSubmenu,
   submenu,
+  submenuToggleTitle,
 }: MenuItemProps) {
   const menuItemRef = useRef<HTMLAnchorElement | HTMLDivElement | null>(null);
 
@@ -226,7 +234,12 @@ export default function MenuItem({
       )}
       {hasSubmenuVisible && (
         <SubmenuToggle
-          title={`Show actions for ${label}`}
+          title={
+            submenuToggleTitle ??
+            (typeof label === 'string'
+              ? `Show actions for ${label}`
+              : `Toggle submenu`)
+          }
           isExpanded={isSubmenuVisible}
           onToggleSubmenu={onToggleSubmenu}
         />

diff --git a/src/sidebar/components/test/MenuItem-test.js b/src/sidebar/components/test/MenuItem-test.js
@@ -267,6 +267,35 @@ describe('MenuItem', () => {
       }
       // no assert needed
     });
+
+    [
+      {
+        label: 'The label',
+        submenuToggleTitle: 'Explicit title',
+        expectedTitle: 'Explicit title',
+      },
+      {
+        label: <span>Rich label</span>,
+        submenuToggleTitle: 'Explicit title',
+        expectedTitle: 'Explicit title',
+      },
+      { label: 'The label', expectedTitle: 'Show actions for The label' },
+      { label: <span>Rich label</span>, expectedTitle: 'Toggle submenu' },
+    ].forEach(({ label, submenuToggleTitle, expectedTitle }) => {
+      it('shows right title in SubmenuToggle', () => {
+        const wrapper = createMenuItem({
+          label,
+          submenuToggleTitle,
+          isSubmenuVisible: true,
+          submenu: <div role="menuitem">Submenu content</div>,
+        });
+
+        assert.equal(
+          wrapper.find('SubmenuToggle').prop('title'),
+          expectedTitle,
+        );
+      });
+    });
   });
 
   it(