fix: move popout close button to header

Closes #364
bpmn-io · Jun 5, 2024 · 49a0a92 · 49a0a92
1 parent 2b73687
commit 49a0a92
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 12 deletions.
diff --git a/src/assets/properties-panel.css b/src/assets/properties-panel.css
@@ -1334,6 +1334,31 @@ textarea.bio-properties-panel-input {
   text-transform: capitalize;
 }
 
+.bio-properties-panel-popup .bio-properties-panel-popup__close {
+  margin: -12px;
+  margin-left: 12px;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background-color: var(--popup-header-background-color);
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close:hover,
+.bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
+  background-color: var(--popup-background-color);
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close:focus-visible {
+  outline-offset: -2px;
+}
+
+.bio-properties-panel-popup .bio-properties-panel-popup__close svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  margin-top: 2px;
+}
+
 .bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
   margin-left: -4px;
 }

diff --git a/src/components/Popup.js b/src/components/Popup.js
@@ -8,7 +8,7 @@ import { query as domQuery } from 'min-dom';
 
 import * as focusTrap from 'focus-trap';
 
-import { DragIcon } from './icons';
+import { DragIcon, CloseIcon } from './icons';
 
 import { createDragger } from './util/dragger';
 import { useEvent } from '../hooks/useEvent';
@@ -145,6 +145,9 @@ function Title(props) {
     draggable,
     emit = () => {},
     title,
+    showCloseButton = false,
+    closeButtonTooltip = 'Close popup',
+    onClose,
     ...rest
   } = props;
 
@@ -227,6 +230,14 @@ function Title(props) {
       )}
       <div class="bio-properties-panel-popup__title">{ title }</div>
       { children }
+      { showCloseButton && (
+        <button
+          title={ closeButtonTooltip }
+          class="bio-properties-panel-popup__close"
+          onClick={ onClose }>
+          <CloseIcon />
+        </button>
+      )}
     </div>
   );
 }

diff --git a/src/components/entries/FEEL/FeelPopup.js b/src/components/entries/FEEL/FeelPopup.js
@@ -214,6 +214,9 @@ function FeelPopupComponent(props) {
       <Popup.Title
         title={ title }
         emit={ emit }
+        showCloseButton={ true }
+        closeButtonTooltip="Save and close"
+        onClose={ onClose }
         draggable>
         {type === 'feel' && (
           <a href="https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/" target="_blank" class="bio-properties-panel-feel-popup__title-link">
@@ -269,13 +272,6 @@ function FeelPopupComponent(props) {
           }
         </div>
       </Popup.Body>
-      <Popup.Footer>
-        <button
-          type="button"
-          onClick={ () => onClose() }
-          title="Close pop-up editor"
-          class="bio-properties-panel-feel-popup__close-btn">Close</button>
-      </Popup.Footer>
     </Popup>
   );
 }

diff --git a/src/components/icons/Close.svg b/src/components/icons/Close.svg
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
@@ -5,4 +5,5 @@ export { default as DragIcon } from './Drag.svg';
 export { default as ExternalLinkIcon } from './ExternalLink.svg';
 export { default as FeelIcon } from './Feel.svg';
 export { default as HelpIcon } from './help.svg';
-export { default as PopupIcon } from './Popup.svg';
+export { default as PopupIcon } from './Popup.svg';
+export { default as CloseIcon } from './Close.svg';
diff --git a/test/spec/components/FeelPopup.spec.js b/test/spec/components/FeelPopup.spec.js
@@ -90,7 +90,7 @@ describe('<FeelPopup>', function() {
       btn.click();
     });
 
-    const closeBtn = domQuery('.bio-properties-panel-feel-popup__close-btn', document.body);
+    const closeBtn = domQuery('.bio-properties-panel-popup__close', document.body);
 
     // when
     await act(() => {
@@ -550,7 +550,7 @@ describe('<FeelPopup>', function() {
       // assume
       expect(getFeelEditor(document.body)).to.exist;
 
-      const closeBtn = domQuery('.bio-properties-panel-feel-popup__close-btn', document.body);
+      const closeBtn = domQuery('.bio-properties-panel-popup__close', document.body);
 
       // when
       await act(() => {
@@ -663,7 +663,7 @@ describe('<FeelPopup>', function() {
       // assume
       expect(getFeelersEditor(document.body)).to.exist;
 
-      const closeBtn = domQuery('.bio-properties-panel-feel-popup__close-btn', document.body);
+      const closeBtn = domQuery('.bio-properties-panel-popup__close', document.body);
 
       // when
       await act(() => {

diff --git a/test/spec/components/Popup.spec.js b/test/spec/components/Popup.spec.js
@@ -264,6 +264,26 @@ describe('<Popup>', function() {
     });
 
 
+    it('should render close button', function() {
+
+      // when
+      render(
+        <Popup container={ container }>
+          <Popup.Title title={ 'test close button' } showCloseButton={ true } closeButtonTooltip={ 'test close button tooltip' } />
+        </Popup>,
+        { container }
+      );
+
+      const header = domQuery('.bio-properties-panel-popup__header', document.body);
+      const closeButton = domQuery('.bio-properties-panel-popup__close', header);
+      const closeButonTitle = closeButton.getAttribute('title');
+
+      // then
+      expect(closeButton).to.exist;
+      expect(closeButonTitle).to.eql('test close button tooltip');
+    });
+
+
     it('should render custom class', function() {
 
       // when