fix(toggle-switch-entry): crop descriptions

bpmn-io · Oct 2, 2020 · 9de27e8 · 9de27e8
1 parent 032c385
commit 9de27e8
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 22 deletions.
diff --git a/lib/factory/EntryFactory.js b/lib/factory/EntryFactory.js
@@ -171,8 +171,8 @@ EntryFactory.collapsible = function(options) {
   return collapsible(options);
 };
 
-EntryFactory.toggleSwitch = function(options) {
-  return toggleSwitch(options, setDefaultParameters(options));
+EntryFactory.toggleSwitch = function(translate, options) {
+  return toggleSwitch(translate, options, setDefaultParameters(options));
 };
 
 module.exports = EntryFactory;
diff --git a/lib/factory/ToggleSwitchEntryFactory.js b/lib/factory/ToggleSwitchEntryFactory.js
@@ -6,8 +6,9 @@ var getBusinessObject = require('bpmn-js/lib/util/ModelUtil').getBusinessObject,
 
 var entryFieldDescription = require('./EntryFieldDescription');
 
+var domify = require('min-dom').domify;
 
-var toggleSwitch = function(options, defaultParameters) {
+var toggleSwitch = function(translate, options, defaultParameters) {
   var resource = defaultParameters,
       id = resource.id,
       label = options.label || id,
@@ -18,7 +19,9 @@ var toggleSwitch = function(options, defaultParameters) {
       labelOn = options.labelOn,
       labelOff = options.labelOff;
 
-  resource.html = '<label for="' + escapeHTML(id) + '" ' +
+  resource.html = document.createDocumentFragment();
+
+  resource.html.appendChild(domify('<label for="' + escapeHTML(id) + '" ' +
       (canBeHidden ? 'data-show="shouldShow"' : '') +
       '>' + escapeHTML(label) + '</label>' +
     '<div class="bpp-field-wrapper"' +
@@ -36,14 +39,14 @@ var toggleSwitch = function(options, defaultParameters) {
       '<p class="bpp-toggle-switch__label" data-show="isOff">' +
         escapeHTML(labelOff) +
       '</p>' +
-    '</div>';
+    '</div>'));
 
   if (descriptionOn) {
-    resource.html += entryFieldDescription(descriptionOn, { show: 'isOn' });
+    resource.html.appendChild(entryFieldDescription(descriptionOn, translate, { show: 'isOn' }));
   }
 
   if (descriptionOff) {
-    resource.html += entryFieldDescription(descriptionOff, { show: 'isOff' });
+    resource.html.appendChild(entryFieldDescription(descriptionOff, translate, { show: 'isOff' }));
   }
 
   resource.get = function(element) {

diff --git a/lib/provider/camunda/element-templates/parts/InputParametersProps.js b/lib/provider/camunda/element-templates/parts/InputParametersProps.js
@@ -154,7 +154,7 @@ module.exports = function(group, element, elementTemplates, bpmnFactory, transla
     }
 
     // (5) add parameter toggle
-    parameterEntries.splice(templateProperty.description ? 2 : 1, 0, entryFactory.toggleSwitch({
+    parameterEntries.splice(templateProperty.description ? 2 : 1, 0, entryFactory.toggleSwitch(translate, {
       id: id + '-assignment-toggle',
       label: translate('Local Variable Assignment'),
       modelProperty: 'isActive',

diff --git a/lib/provider/camunda/element-templates/parts/OutputParametersProps.js b/lib/provider/camunda/element-templates/parts/OutputParametersProps.js
@@ -131,7 +131,7 @@ module.exports = function(group, element, elementTemplates, bpmnFactory, transla
     }
 
     // (3) add parameter toggle
-    parameterEntries.splice(templateProperty.description ? 2 : 1, 0, entryFactory.toggleSwitch({
+    parameterEntries.splice(templateProperty.description ? 2 : 1, 0, entryFactory.toggleSwitch(translate, {
       id: id + '-assignment-toggle',
       label: translate('Process Variable Assignment'),
       modelProperty: 'isActive',

diff --git a/test/spec/factory/ToggleSwitchEntryFactorySpec.js b/test/spec/factory/ToggleSwitchEntryFactorySpec.js
@@ -9,7 +9,7 @@ describe('factory/ToggleSwitchEntry', function() {
     it('should render', function() {
 
       // when
-      var html = ToggleSwitchEntry({
+      var html = ToggleSwitchEntry(translate, {
         id: 'foo',
         label: 'label',
         labelOff: 'off',
@@ -19,21 +19,36 @@ describe('factory/ToggleSwitchEntry', function() {
         modelProperty: 'toggle'
       }).html;
 
+      var foo = document.createElement('div');
+
+      foo.appendChild(html);
 
       // then
-      expect(html).to.eql('<label for="foo" >label</label>' +
-      '<div class="bpp-field-wrapper">' +
-        '<label class="bpp-toggle-switch__switcher">' +
-          '<input id="foo" type="checkbox" name="toggle" />' +
-          '<span class="bpp-toggle-switch__slider"></span>' +
-        '</label>'+
-        '<p class="bpp-toggle-switch__label" data-show="isOn">on</p>' +
-        '<p class="bpp-toggle-switch__label" data-show="isOff">off</p>' +
-      '</div>' +
-      '<div class="bpp-field-description"data-show="isOn">this is on</div>' +
-      '<div class="bpp-field-description"data-show="isOff">this is off</div>');
+      expect(foo.innerHTML).to.eql(
+        '<label for="foo">label</label>' +
+        '<div class="bpp-field-wrapper">' +
+          '<label class="bpp-toggle-switch__switcher">' +
+            '<input id="foo" type="checkbox" name="toggle">' +
+            '<span class="bpp-toggle-switch__slider"></span>' +
+          '</label>'+
+          '<p class="bpp-toggle-switch__label" data-show="isOn">on</p>' +
+          '<p class="bpp-toggle-switch__label" data-show="isOff">off</p>' +
+        '</div>' +
+        '<div class="bpp-field-description description description--expanded" data-show="isOn">' +
+          '<span class="description__text">this is on</span>' +
+        '</div>' +
+        '<div class="bpp-field-description description description--expanded" data-show="isOff">' +
+          '<span class="description__text">this is off</span>' +
+        '</div>'
+      );
     });
 
   });
 
-});
+});
+
+// helpers //////////
+
+function translate(string) {
+  return string;
+}