fix: properly size icons in distribute/align

bpmn-io · Jul 7, 2022 · 26fea30 · 26fea30
1 parent 6feaeca
commit 26fea30
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/assets/bpmn-js.css b/assets/bpmn-js.css
@@ -129,15 +129,14 @@
 }
 
 [data-popup="align-elements"] .djs-popup-body .entry {
-  height: 20px;
-  width: 20px;
-
   padding: 6px 8px;
 }
 
 [data-popup="align-elements"] .djs-popup-body .entry img {
-  height: 100%;
-  width: 100%;
+  display: block;
+
+  height: 20px;
+  width: 20px;
 }
 
 [data-popup="align-elements"] .bjs-align-elements-menu-entry {

diff --git a/test/spec/features/align-elements/AlignElementsMenuProviderSpec.js b/test/spec/features/align-elements/AlignElementsMenuProviderSpec.js
@@ -78,6 +78,34 @@ describe('features/align-elements - popup menu', function() {
       expect(popupMenu.isOpen()).to.be.false;
     })
   );
+
+
+  it('should properly size icons even with border-box', inject(function(elementRegistry, popupMenu, canvas) {
+
+    // given
+    var container = canvas.getContainer();
+    var elements = [
+      elementRegistry.get('EndEvent_lane'),
+      elementRegistry.get('Task_lane'),
+      elementRegistry.get('SubProcess_lane')
+    ];
+
+    // when
+    container.style['box-sizing'] = 'border-box';
+    popupMenu.open(elements, 'align-elements', {
+      x: 0,
+      y: 0
+    });
+
+    // then
+    var entry = getEntry('align-elements-left'),
+        icon = domQuery('img', entry);
+
+    var bbox = icon.getBoundingClientRect();
+
+    expect(bbox.width).to.eql(20);
+    expect(bbox.height).to.eql(20);
+  }));
 });