chore(popup-menu): add titles to all elements

Allows users to inspect truncated items.
bpmn-io · Dec 7, 2022 · 103b4c8 · 103b4c8
1 parent 8eaef1b
commit 103b4c8
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/lib/features/popup-menu/PopupMenuComponent.js b/lib/features/popup-menu/PopupMenuComponent.js
@@ -184,7 +184,7 @@ export default function PopupMenuComponent(props) {
     >
       ${ displayHeader && html`
         <div class="djs-popup-header">
-          <h3 class="djs-popup-title">${ title }</h3>
+          <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
           ${ headerEntries.map(entry => html`
             <span
               class=${ getHeaderClasses(entry, entry === selectedEntry) }

diff --git a/lib/features/popup-menu/PopupMenuList.js b/lib/features/popup-menu/PopupMenuList.js
@@ -47,7 +47,7 @@ export default function PopupMenuList(props) {
     <div class="djs-popup-results" ref=${ resultsRef }>
       ${ groups.map(group => html`
         ${ group.name && html`
-          <div key=${ group.id } class="entry-header">
+          <div key=${ group.id } class="entry-header" title=${ group.name }>
             ${ group.name }
           </div>
         ` }

diff --git a/test/spec/features/popup-menu/PopupMenuComponentSpec.js b/test/spec/features/popup-menu/PopupMenuComponentSpec.js
@@ -328,6 +328,34 @@ describe('features/popup-menu - <PopupMenu>', function() {
       expect(describedEntry.textContent).to.eql('FOOI DESCRIBE IT');
     }));
 
+
+    it('should render entry header', inject(function() {
+
+      // given
+      const entries = [
+        {
+          id: '1',
+          label: '1',
+          group: {
+            id: 'SAD',
+            name: 'SOME GROUP'
+          }
+        }
+      ];
+
+      createPopupMenu({ container, entries });
+
+      // when
+      const [
+        groupHeader
+      ] = domQueryAll('.entry-header', container);
+
+      // then
+      expect(groupHeader).to.exist;
+      expect(groupHeader.title).to.eql('SOME GROUP');
+      expect(groupHeader.textContent).to.eql('SOME GROUP');
+    }));
+
   });
 
 
@@ -404,8 +432,8 @@ describe('features/popup-menu - <PopupMenu>', function() {
     // then
     var titleElement = domQuery('.djs-popup-title', container);
     expect(titleElement).to.exist;
+    expect(titleElement.title).to.eql(title);
     expect(titleElement.innerHTML).to.eql(title);
-
   }));