From 03db84e59a2877a7b9d35736c9bf76aaf954a4ce Mon Sep 17 00:00:00 2001
From: Beatriz Mendes <bea.smendes98@gmail.com>
Date: Mon, 21 Nov 2022 11:25:38 +0100
Subject: [PATCH] chore: specialize popup menu classes

Closes #703
---
 assets/diagram-js.css                         | 64 +++++++++----------
 lib/features/popup-menu/PopupMenuComponent.js | 10 +--
 lib/features/popup-menu/PopupMenuItem.js      | 10 +--
 lib/features/popup-menu/PopupMenuList.js      |  4 +-
 4 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/assets/diagram-js.css b/assets/diagram-js.css
index 9cd46f1ac..35a215260 100644
--- a/assets/diagram-js.css
+++ b/assets/diagram-js.css
@@ -527,7 +527,7 @@ marker.djs-dragger tspan {
   border-radius: 2px;
 }
 
-.djs-popup .overlay {
+.djs-popup-overlay {
   width: min-content;
   background: var(--popup-background-color);
   overflow: hidden;
@@ -538,7 +538,7 @@ marker.djs-dragger tspan {
   min-width: 120px;
 }
 
-.djs-popup .search input {
+.djs-popup-search input {
   width: 100%;
   box-sizing: border-box;
   font-size: 14px;
@@ -548,7 +548,7 @@ marker.djs-dragger tspan {
   line-height: 21px;
 }
 
-.djs-popup .search input:focus {
+.djs-popup-search input:focus {
   background-color: var(--popup-search-focus-background-color);
   border: solid 1px var(--popup-search-focus-border-color);
   outline: none;
@@ -561,31 +561,31 @@ marker.djs-dragger tspan {
   margin: 12px 12px 10px 12px;
 }
 
-.djs-popup .djs-popup-header {
+.djs-popup-header {
   display: flex;
   align-items: stretch;
   line-height: 20px;
   margin: 0 12px 10px 12px;
 }
 
-.djs-popup .djs-popup-header .entry {
+.djs-popup-header .entry {
   font-size: 19.5px;
   border-radius: 2px;
 }
 
-.djs-popup .djs-popup-header .entry.active {
+.djs-popup-header .entry.active {
   color: var(--popup-header-entry-selected-color);
 }
 
-.djs-popup .djs-popup-header .entry.disabled {
+.djs-popup-header .entry.disabled {
   color: inherit;
 }
 
-.djs-popup .search {
+.djs-popup-search {
   margin: 10px 12px;
 }
 
-.djs-popup .title {
+.djs-popup-title {
   font-size: 14px;
   font-weight: 500;
   flex: 1;
@@ -593,22 +593,22 @@ marker.djs-dragger tspan {
   width: max-content;
 }
 
-.djs-popup .search {
+.djs-popup-search {
   position: relative;
   width: auto;
 }
 
-.djs-popup .search-icon {
+.djs-popup-search-icon {
   position: absolute;
   left: 8px;
   top: 7px;
 }
 
-.djs-popup .search input {
+.djs-popup-search input {
   padding-left: 25px;
 }
 
-.djs-popup .results {
+.djs-popup-results {
   margin: 0 3px 7px 12px;
   list-style: none;
   max-height: 280px;
@@ -616,21 +616,21 @@ marker.djs-dragger tspan {
   padding-right: 9px;
 }
 
-.djs-popup .group {
+.djs-popup-group {
   margin: 0;
   padding: 0;
   width: 100%;
 }
 
-.djs-popup .djs-popup-body .entry,
-.djs-popup .djs-popup-body .entry-header {
+.djs-popup-body .entry,
+.djs-popup-body .entry-header {
   padding: 5px 7px;
   cursor: default;
   border-radius: 4px;
   font-size: 14px;
 }
 
-.djs-popup .djs-popup-body .entry-header {
+.djs-popup-body .entry-header {
   font-weight: 500;
   color: var(--popup-entry-title-color);
   padding-left: 0;
@@ -647,7 +647,7 @@ marker.djs-dragger tspan {
   margin-bottom: 2px;
 }
 
-.djs-popup .djs-popup-body .entry {
+.djs-popup-body .entry {
   display: flex;
   flex-direction: row;
   align-items: stretch;
@@ -658,23 +658,23 @@ marker.djs-dragger tspan {
   background-color: var(--popup-entry-hover-color);
 }
 
-.djs-popup .djs-popup-body .entry:not(:first-child) {
+.djs-popup-body .entry:not(:first-child) {
   margin-top: 2px;
 }
 
-.djs-popup .djs-popup-body .entry .content {
+.djs-popup-entry-content {
   display: flex;
   flex-direction: column;
   flex: 1;
   overflow: hidden;
 }
 
-.djs-popup .djs-popup-body .entry .description {
+.djs-popup-entry-description {
   color: var(--popup-description-color);
 }
 
-.djs-popup .djs-popup-body .entry .name,
-.djs-popup .djs-popup-body .entry .description {
+.djs-popup-entry-name,
+.djs-popup-entry-description {
   line-height: 1.4em;
   display: block;
   overflow: hidden;
@@ -682,20 +682,20 @@ marker.djs-dragger tspan {
   white-space: nowrap;
 }
 
-.djs-popup .djs-popup-body .entry .name {
+.djs-popup-entry-name {
   display: flex;
 }
 
-.djs-popup .djs-popup-body .entry-content {
+.entry-content {
   display: flex;
   flex-direction: column;
   flex: 1;
   overflow: hidden;
 }
 
-.djs-popup .djs-popup-body .entry .name[class^="bpmn-icon-"]:before,
-.djs-popup .djs-popup-body .entry .name[class*=" bpmn-icon-"]:before,
-.djs-popup .djs-popup-body .entry .icon {
+.djs-popup-entry-name[class^="bpmn-icon-"]:before,
+.djs-popup-entry-name[class*=" bpmn-icon-"]:before,
+.djs-popup-entry-icon {
   display: inline-block;
   font-size: 1.4em;
   vertical-align: middle;
@@ -723,13 +723,13 @@ marker.djs-dragger tspan {
   padding: 5px;
 }
 
-.djs-popup .no-results {
+.djs-popup-no-results {
   font-size: 14px;
   padding: 0 12px 12px 12px;
   color: var(--popup-no-results-color);
 }
 
-.djs-popup .docs {
+.djs-popup-entry-docs {
   flex: 0;
   flex-direction: row;
   align-items: center;
@@ -737,11 +737,11 @@ marker.djs-dragger tspan {
   display: none;
 }
 
-.djs-popup .djs-popup-body .entry:hover .docs {
+.djs-popup-body .entry:hover .djs-popup-entry-docs {
   display: flex;
 }
 
-.djs-popup .djs-popup-body .entry .docs svg {
+.djs-popup-entry-docs svg {
   vertical-align: middle;
   margin: auto 2px auto 5px;
 }
diff --git a/lib/features/popup-menu/PopupMenuComponent.js b/lib/features/popup-menu/PopupMenuComponent.js
index 6034979b8..810c90e5d 100644
--- a/lib/features/popup-menu/PopupMenuComponent.js
+++ b/lib/features/popup-menu/PopupMenuComponent.js
@@ -170,7 +170,7 @@ export default function PopupMenuComponent(props) {
     >
       ${ displayHeader && html`
         <div class="djs-popup-header">
-          <h3 class="title">${ props.title }</h3>
+          <h3 class="djs-popup-title">${ props.title }</h3>
           ${ Object.entries(headerEntries).map(([ id, entry ]) => html`
             <span
               class=${ getHeaderClasses(entry, entry === selectedEntry) }
@@ -189,8 +189,8 @@ export default function PopupMenuComponent(props) {
         <div class="djs-popup-body">
 
           ${ searchable && html`
-          <div class="search">
-            <svg class="search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <div class="djs-popup-search">
+            <svg class="djs-popup-search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
             </svg>
             <input
@@ -211,7 +211,7 @@ export default function PopupMenuComponent(props) {
         </div>
       ` }
       ${ entries.length === 0 && html`
-        <div class="no-results">No matching entries found.</div>
+        <div class="djs-popup-no-results">No matching entries found.</div>
       ` }
     </${PopupMenuWrapper}>`
   );
@@ -250,7 +250,7 @@ function PopupMenuWrapper(props) {
       onClick=${ () => onClose() }
     >
       <div
-        class="overlay"
+        class="djs-popup-overlay"
         ref=${ overlayRef }
         style=${ getOverlayStyle(props) }
       >
diff --git a/lib/features/popup-menu/PopupMenuItem.js b/lib/features/popup-menu/PopupMenuItem.js
index ffa46c500..26ab965e0 100644
--- a/lib/features/popup-menu/PopupMenuItem.js
+++ b/lib/features/popup-menu/PopupMenuItem.js
@@ -23,7 +23,7 @@ export default function PopupMenuItem(props) {
   } = props;
 
   const createImage = imageUrl => {
-    return html`<img src=${ imageUrl } class="icon" />`;
+    return html`<img src=${ imageUrl } class="djs-popup-entry-icon" />`;
   };
 
   return html`
@@ -33,9 +33,9 @@ export default function PopupMenuItem(props) {
       onClick=${ onClick }
       onMouseEnter=${ onMouseEnter }
     >
-      <div class="content">
+      <div class="djs-popup-entry-content">
         <span
-          class=${ classNames('name', entry.className) }
+          class=${ classNames('djs-popup-entry-name', entry.className) }
           title=${ entry.label || entry.name }
         >
           ${ entry.imageUrl ? createImage(entry.imageUrl) : null }
@@ -43,7 +43,7 @@ export default function PopupMenuItem(props) {
         </span>
         ${ entry.description && html`
           <span
-            class="description"
+            class="djs-popup-entry-description"
             title=${ entry.description }
           >
             ${ entry.description }
@@ -51,7 +51,7 @@ export default function PopupMenuItem(props) {
         ` }
       </div>
       ${ entry.documentationRef && html`
-        <div class="docs">
+        <div class="djs-popup-entry-docs">
           <a
             href="${ entry.documentationRef }"
             onClick=${ (event) => event.stopPropagation() }
diff --git a/lib/features/popup-menu/PopupMenuList.js b/lib/features/popup-menu/PopupMenuList.js
index 252304d24..2f4ec6a69 100644
--- a/lib/features/popup-menu/PopupMenuList.js
+++ b/lib/features/popup-menu/PopupMenuList.js
@@ -44,14 +44,14 @@ export default function PopupMenuList(props) {
   }, [ selectedEntry ]);
 
   return html`
-    <div class="results" ref=${ resultsRef }>
+    <div class="djs-popup-results" ref=${ resultsRef }>
       ${ groups.map(group => html`
         ${ group.name && html`
           <div key=${ group.id } class="entry-header">
             ${ group.name }
           </div>
         ` }
-        <ul class="group" data-group=${ group.id }>
+        <ul class="djs-popup-group" data-group=${ group.id }>
           ${ group.entries.map(entry => html`
             <${PopupMenuItem}
               key=${ entry.id }