BUG Fix issue with gulpfile.js not compiling client/src/legacy dir

BUG Make SelectionGroup.ss and SelectionGroup.js work together
BUG Fix for IE visual indentation of composite field

admin/client/src/components/Form/Form.scss

@@ -160,6 +160,7 @@ input.radio {
 
         .form__field-holder {
           margin-left: 0;
+          left: 0;
         }
 
         // TODO make label display on the right side like normal .form__field-extra-label

admin/themes/cms-forms/templates/forms/SelectionGroup.ss

@@ -2,23 +2,31 @@
 	<% if $IsReadonly %>
 		<% loop $FieldSet %>
 			<% if $Selected %>
-				<li class="selected selection-group__item">
+				<li class="selected selection-group__item" id="$HolderID">
 					$RadioLabel
 					<%-- Bypass composite item field and directly render child fields --%>
-					<% loop $FieldList %>
+					<% if $FieldList %>
-						$Field
+						<div class="selection-group selection-group__item__fieldlist" id="$ID">
-					<% end_loop %>
+							<% loop $FieldList %>
+								$Fieldholder
+							<% end_loop %>
+						</div>
+					<% end_if %>
 				</li>
 			<% end_if %>
 		<% end_loop %>
 	<% else %>
 		<% loop $FieldSet %>
-			<li class="selection-group__item<% if $Selected %> selected<% end_if %>">
+			<li class="selection-group__item<% if $Selected %> selected<% end_if %>" id="$HolderID">
 				{$RadioButton}{$RadioLabel}
 				<%-- Bypass composite item field and directly render child fields --%>
-				<% loop $FieldList %>
+				<% if $FieldList %>
-					$Field
+					<div class="selection-group selection-group__item__fieldlist" id="$ID">
-				<% end_loop %>
+						<% loop $FieldList %>
+							$Fieldholder
+						<% end_loop %>
+					</div>
+				<% end_if %>
 			</li>
 		<% end_loop %>
 	<% end_if %>

client/dist/js/AssetUploadField.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	if (typeof define === "function" && define.amd) {
-		define('ss.AssetUploadField', ['./jQuery'], factory);
+		define('ss.AssetUploadField', ['../jQuery'], factory);
 	} else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'));
+		factory(require('../jQuery'));
 	} else {
 		var mod = {
 			exports: {}

client/dist/js/ConfirmedPasswordField.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	if (typeof define === "function" && define.amd) {
-		define('ss.ConfirmedPasswordField', ['./jQuery'], factory);
+		define('ss.ConfirmedPasswordField', ['../jQuery'], factory);
 	} else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'));
+		factory(require('../jQuery'));
 	} else {
 		var mod = {
 			exports: {}

client/dist/js/DateField.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	if (typeof define === "function" && define.amd) {
-		define('ss.DateField', ['./jQuery'], factory);
+		define('ss.DateField', ['../jQuery'], factory);
 	} else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'));
+		factory(require('../jQuery'));
 	} else {
 		var mod = {
 			exports: {}

client/dist/js/GridField.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	if (typeof define === "function" && define.amd) {
-		define('ss.GridField', ['./jQuery', './i18n'], factory);
+		define('ss.GridField', ['../jQuery', '../i18n'], factory);
 	} else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'), require('./i18n'));
+		factory(require('../jQuery'), require('../i18n'));
 	} else {
 		var mod = {
 			exports: {}
@@ -274,8 +274,8 @@
 
 		$('.ss-gridfield .filter-header :input').entwine({
 			onmatch: function onmatch() {
-				var filterbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-filter'),
+				var filterbtn = this.closest('.form__fieldgroup').find('.ss-gridfield-button-filter'),
-				    resetbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-reset');
+				    resetbtn = this.closest('.form__fieldgroup').find('.ss-gridfield-button-reset');
 
 				if (this.val()) {
 					filterbtn.addClass('filtered');
@@ -289,8 +289,8 @@
 			onkeydown: function onkeydown(e) {
 				if (this.closest('.ss-gridfield-button-reset').length) return;
 
-				var filterbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-filter'),
+				var filterbtn = this.closest('.form__fieldgroup').find('.ss-gridfield-button-filter'),
-				    resetbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-reset');
+				    resetbtn = this.closest('.form__fieldgroup').find('.ss-gridfield-button-reset');
 
 				if (e.keyCode == '13') {
 					var btns = this.closest('.filter-header').find('.ss-gridfield-button-filter');
@@ -318,22 +318,21 @@
 							headers: {
 								"X-Pjax": 'Partial'
 							},
+							dataType: 'json',
 							type: "GET",
 							url: $(searchField).data('searchUrl'),
 							data: encodeURIComponent(searchField.attr('name')) + '=' + encodeURIComponent(searchField.val()),
-							success: function success(data) {
+							success: response,
-								response($.map(JSON.parse(data), function (name, id) {
-									return { label: name, value: name, id: id };
-								}));
-							},
 							error: function error(e) {
 								alert(_i18n2.default._t('GRIDFIELD.ERRORINTRANSACTION', 'An error occured while fetching data from the server\n Please try again later.'));
 							}
 						});
 					},
 					select: function select(event, ui) {
-						$(this).closest(".ss-gridfield").find("#action_gridfield_relationfind").replaceWith('<input type="hidden" name="relationID" value="' + ui.item.id + '" id="relationID"/>');
+						var hiddenField = $('<input type="hidden" name="relationID" class="action_gridfield_relationfind" />');
-						var addbutton = $(this).closest(".ss-gridfield").find("#action_gridfield_relationadd");
+						hiddenField.val(ui.item.id);
+						$(this).closest(".ss-gridfield").find(".action_gridfield_relationfind").replaceWith(hiddenField);
+						var addbutton = $(this).closest(".ss-gridfield").find(".action_gridfield_relationadd");
 						if (addbutton.data('button')) {
 							addbutton.button('enable');
 						} else {
@@ -358,4 +357,4 @@
 			}
 		});
 	});
-});
+});

client/dist/js/HtmlEditorField.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	if (typeof define === "function" && define.amd) {
-		define('ss.HtmlEditorField', ['./jQuery', './i18n'], factory);
+		define('ss.HtmlEditorField', ['../jQuery', '../i18n'], factory);
 	} else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'), require('./i18n'));
+		factory(require('../jQuery'), require('../i18n'));
 	} else {
 		var mod = {
 			exports: {}
@@ -751,7 +751,7 @@
 				this.find('.ss-uploadfield-item-actions')[editingSelected ? 'hide' : 'show']();
 				this.find('.ss-uploadfield-item-name')[editingSelected ? 'hide' : 'show']();
 				this.find('.ss-uploadfield-item-preview')[editingSelected ? 'hide' : 'show']();
-				this.find('.Actions .media-update')[editingSelected ? 'show' : 'hide']();
+				this.find('.btn-toolbar .media-update')[editingSelected ? 'show' : 'hide']();
 				this.find('.ss-uploadfield-item-editform').toggleEditForm(editingSelected);
 				this.find('.htmleditorfield-from-cms .field.treedropdown').css('left', $('.htmleditorfield-mediaform-heading:visible').outerWidth());
 				this.closest('.ui-dialog').addClass('ss-uploadfield-dropzone');

client/dist/js/PermissionCheckboxSetField.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	if (typeof define === "function" && define.amd) {
-		define('ss.PermissionCheckboxSetField', ['./jQuery'], factory);
+		define('ss.PermissionCheckboxSetField', ['../jQuery'], factory);
 	} else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'));
+		factory(require('../jQuery'));
 	} else {
 		var mod = {
 			exports: {}

client/dist/js/SelectionGroup.js

@@ -1,37 +1,41 @@
 (function (global, factory) {
-	if (typeof define === "function" && define.amd) {
+  if (typeof define === "function" && define.amd) {
-		define('ss.SelectionGroup', ['./jQuery'], factory);
+    define('ss.SelectionGroup', ['../jQuery'], factory);
-	} else if (typeof exports !== "undefined") {
+  } else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'));
+    factory(require('../jQuery'));
-	} else {
+  } else {
-		var mod = {
+    var mod = {
-			exports: {}
+      exports: {}
-		};
+    };
-		factory(global.jQuery);
+    factory(global.jQuery);
-		global.ssSelectionGroup = mod.exports;
+    global.ssSelectionGroup = mod.exports;
-	}
+  }
 })(this, function (_jQuery) {
-	'use strict';
+  'use strict';
 
-	var _jQuery2 = _interopRequireDefault(_jQuery);
+  var _jQuery2 = _interopRequireDefault(_jQuery);
 
-	function _interopRequireDefault(obj) {
+  function _interopRequireDefault(obj) {
-		return obj && obj.__esModule ? obj : {
+    return obj && obj.__esModule ? obj : {
-			default: obj
+      default: obj
-		};
+    };
-	}
+  }
 
-	(0, _jQuery2.default)(document).ready(function () {
+  (0, _jQuery2.default)(document).ready(function () {
-		(0, _jQuery2.default)('ul.SelectionGroup input.selector').live('click', function () {
+    (0, _jQuery2.default)('ul.SelectionGroup input.selector, ul.selection-group input.selector').live('click', function () {
-			var li = (0, _jQuery2.default)(this).closest('li');
+      var li = (0, _jQuery2.default)(this).closest('li');
-			li.addClass('selected');
+      li.addClass('selected');
 
-			var prev = li.prevAll('li.selected');
+      var prev = li.prevAll('li.selected');
-			if (prev.length) prev.removeClass('selected');
+      if (prev.length) {
-			var next = li.nextAll('li.selected');
+        prev.removeClass('selected');
-			if (next.length) next.removeClass('selected');
+      }
+      var next = li.nextAll('li.selected');
+      if (next.length) {
+        next.removeClass('selected');
+      }
 
-			(0, _jQuery2.default)(this).focus();
+      (0, _jQuery2.default)(this).focus();
-		});
+    });
-	});
+  });
 });

client/dist/js/TabSet.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	if (typeof define === "function" && define.amd) {
-		define('ss.TabSet', ['./jQuery'], factory);
+		define('ss.TabSet', ['../jQuery'], factory);
 	} else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'));
+		factory(require('../jQuery'));
 	} else {
 		var mod = {
 			exports: {}

client/dist/js/ToggleCompositeField.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	if (typeof define === "function" && define.amd) {
-		define('ss.ToggleCompositeField', ['./jQuery'], factory);
+		define('ss.ToggleCompositeField', ['../jQuery'], factory);
 	} else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'));
+		factory(require('../jQuery'));
 	} else {
 		var mod = {
 			exports: {}

client/dist/js/ToggleField.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	if (typeof define === "function" && define.amd) {
-		define('ss.ToggleField', ['./jQuery'], factory);
+		define('ss.ToggleField', ['../jQuery'], factory);
 	} else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'));
+		factory(require('../jQuery'));
 	} else {
 		var mod = {
 			exports: {}

client/dist/js/TreeDropdownField.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	if (typeof define === "function" && define.amd) {
-		define('ss.TreeDropdownField', ['./jQuery', './i18n'], factory);
+		define('ss.TreeDropdownField', ['../jQuery', '../i18n'], factory);
 	} else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'), require('./i18n'));
+		factory(require('../jQuery'), require('../i18n'));
 	} else {
 		var mod = {
 			exports: {}

client/dist/js/UploadField.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	if (typeof define === "function" && define.amd) {
-		define('ss.UploadField', ['./jQuery', './i18n'], factory);
+		define('ss.UploadField', ['../jQuery', '../i18n'], factory);
 	} else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'), require('./i18n'));
+		factory(require('../jQuery'), require('../i18n'));
 	} else {
 		var mod = {
 			exports: {}

client/dist/js/UploadField_select.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	if (typeof define === "function" && define.amd) {
-		define('ss.UploadField_select', ['./jQuery'], factory);
+		define('ss.UploadField_select', ['../jQuery'], factory);
 	} else if (typeof exports !== "undefined") {
-		factory(require('./jQuery'));
+		factory(require('../jQuery'));
 	} else {
 		var mod = {
 			exports: {}

client/dist/styles/SelectionGroup.css

@@ -1,3 +1,3 @@
-.SelectionGroup{padding-left:0;clear:both}.SelectionGroup li{list-style-type:none}.SelectionGroup li>div.selectiongroup_item{display:none}.SelectionGroup li.selected>div.selectiongroup_item{display:block;margin-bottom:16px}.SelectionGroup input.selector{width:20px;margin-top:2px;float:left}.mainblock.allassets ul{padding:0 0 0 10px;height:100px;overflow-y:scroll}.mainblock.allassets ul li{width:150px}
+.SelectionGroup,.selection-group{padding-left:0;clear:both}.SelectionGroup li,.selection-group li{list-style-type:none}.SelectionGroup li>div.selectiongroup_item,.SelectionGroup li>.selection-group__item__fieldlist,.selection-group li>div.selectiongroup_item,.selection-group li>.selection-group__item__fieldlist{display:none}.SelectionGroup li.selected>div.selectiongroup_item,.SelectionGroup li.selected>.selection-group__item__fieldlist,.selection-group li.selected>div.selectiongroup_item,.selection-group li.selected>.selection-group__item__fieldlist{display:block}.SelectionGroup input.selector,.selection-group input.selector{width:20px;margin-top:2px;float:left}.mainblock.allassets ul{padding:0 0 0 10px;height:100px;overflow-y:scroll}.mainblock.allassets ul li{width:150px}
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxlZ2FjeS9TZWxlY3Rpb25Hcm91cC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGdCQUNFLGVBQ0EsVUFBWSxDQUZkLG1CQUtJLG9CQUFzQixDQUwxQiwyQ0FRTSxZQUFjLENBUnBCLG9EQVlNLGNBQ0Esa0JBQW9CLENBYjFCLCtCQW1CSSxXQUNBLGVBQ0EsVUFBWSxDQUNiLHdCQUlELG1CQUNBLGFBQ0EsaUJBQW1CLENBSHJCLDJCQU1JLFdBQWEsQ0FDZCIsImZpbGUiOiJsZWdhY3kvU2VsZWN0aW9uR3JvdXAuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLlNlbGVjdGlvbkdyb3VwIHtcbiAgcGFkZGluZy1sZWZ0OiAwO1xuICBjbGVhcjogYm90aDtcblxuICBsaSB7XG4gICAgbGlzdC1zdHlsZS10eXBlOiBub25lO1xuXG4gICAgPiBkaXYuc2VsZWN0aW9uZ3JvdXBfaXRlbSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cblxuICAgICYuc2VsZWN0ZWQgPiBkaXYuc2VsZWN0aW9uZ3JvdXBfaXRlbSB7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIG1hcmdpbi1ib3R0b206IDE2cHg7XG4gICAgfVxuICB9XG5cbiAgLy8gRml4IGZvciB0aGUgbGFiZWwgbm90IHdyYXBwaW5nIGFyb3VuZCB0aGUgaW5wdXQgYXMgaXQgc2hvdWxkIHdpdGggQm9vdHN0cmFwXG4gIGlucHV0LnNlbGVjdG9yIHtcbiAgICB3aWR0aDogMjBweDtcbiAgICBtYXJnaW4tdG9wOiAycHg7XG4gICAgZmxvYXQ6IGxlZnQ7XG4gIH1cbn1cblxuLm1haW5ibG9jay5hbGxhc3NldHMgdWwge1xuICBwYWRkaW5nOiAwIDAgMCAxMHB4O1xuICBoZWlnaHQ6IDEwMHB4O1xuICBvdmVyZmxvdy15OiBzY3JvbGw7XG5cbiAgbGkge1xuICAgIHdpZHRoOiAxNTBweDtcbiAgfVxufVxuIl0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxlZ2FjeS9TZWxlY3Rpb25Hcm91cC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGlDQUVFLGVBQ0EsVUFBWSxDQUhkLHVDQU1JLG9CQUFzQixDQU4xQixrTUFVTSxZQUFjLENBVnBCLHNPQWVNLGFBQWUsQ0FmckIsK0RBcUJJLFdBQ0EsZUFDQSxVQUFZLENBQ2Isd0JBSUQsbUJBQ0EsYUFDQSxpQkFBbUIsQ0FIckIsMkJBTUksV0FBYSxDQUNkIiwiZmlsZSI6ImxlZ2FjeS9TZWxlY3Rpb25Hcm91cC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuU2VsZWN0aW9uR3JvdXAsXG4uc2VsZWN0aW9uLWdyb3VwIHtcbiAgcGFkZGluZy1sZWZ0OiAwO1xuICBjbGVhcjogYm90aDtcblxuICBsaSB7XG4gICAgbGlzdC1zdHlsZS10eXBlOiBub25lO1xuXG4gICAgPiBkaXYuc2VsZWN0aW9uZ3JvdXBfaXRlbSxcbiAgICA+IC5zZWxlY3Rpb24tZ3JvdXBfX2l0ZW1fX2ZpZWxkbGlzdCB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cblxuICAgICYuc2VsZWN0ZWQgPiBkaXYuc2VsZWN0aW9uZ3JvdXBfaXRlbSxcbiAgICAmLnNlbGVjdGVkID4gLnNlbGVjdGlvbi1ncm91cF9faXRlbV9fZmllbGRsaXN0IHtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbiAgfVxuXG4gIC8vIEZpeCBmb3IgdGhlIGxhYmVsIG5vdCB3cmFwcGluZyBhcm91bmQgdGhlIGlucHV0IGFzIGl0IHNob3VsZCB3aXRoIEJvb3RzdHJhcFxuICBpbnB1dC5zZWxlY3RvciB7XG4gICAgd2lkdGg6IDIwcHg7XG4gICAgbWFyZ2luLXRvcDogMnB4O1xuICAgIGZsb2F0OiBsZWZ0O1xuICB9XG59XG5cbi5tYWluYmxvY2suYWxsYXNzZXRzIHVsIHtcbiAgcGFkZGluZzogMCAwIDAgMTBweDtcbiAgaGVpZ2h0OiAxMDBweDtcbiAgb3ZlcmZsb3cteTogc2Nyb2xsO1xuXG4gIGxpIHtcbiAgICB3aWR0aDogMTUwcHg7XG4gIH1cbn1cbiJdLCJzb3VyY2VSb290IjoiL3NvdXJjZS8ifQ== */

client/src/legacy/SelectionGroup.js

@@ -1,15 +1,22 @@
 import $ from '../jQuery';
 
 $(document).ready(function() {
-	$('ul.SelectionGroup input.selector').live('click', function() {
+  // Support both bootstrap / legacy selectors
-		var li = $(this).closest('li');
+	$('ul.SelectionGroup input.selector, ul.selection-group input.selector')
-		li.addClass('selected');
+    .live('click', function() {
+      var li = $(this).closest('li');
+      li.addClass('selected');
 
-		var prev = li.prevAll('li.selected');
+      var prev = li.prevAll('li.selected');
-		if(prev.length) prev.removeClass('selected');
+      if(prev.length) {
-		var next = li.nextAll('li.selected');
+        prev.removeClass('selected');
-		if(next.length) next.removeClass('selected');
+      }
+      var next = li.nextAll('li.selected');
+      if(next.length) {
+        next.removeClass('selected');
+      }
 
-		$(this).focus();
+      $(this).focus();
-	});
+    }
+  );
 });

client/src/styles/legacy/SelectionGroup.scss

@@ -1,17 +1,19 @@
-.SelectionGroup {
+.SelectionGroup,
+.selection-group {
   padding-left: 0;
   clear: both;
 
   li {
     list-style-type: none;
 
-    > div.selectiongroup_item {
+    > div.selectiongroup_item,
+    > .selection-group__item__fieldlist {
       display: none;
     }
 
-    &.selected > div.selectiongroup_item {
+    &.selected > div.selectiongroup_item,
+    &.selected > .selection-group__item__fieldlist {
       display: block;
-      margin-bottom: 16px;
     }
   }
 

gulpfile.js

@@ -452,7 +452,7 @@ gulp.task('thirdparty', () => {
 gulp.task('umd', ['umd-admin', 'umd-framework'], () => {
   if (isDev) {
     gulp.watch(`${PATHS.ADMIN_JS_SRC}/legacy/*.js`, ['umd-admin']);
-    gulp.watch(`${PATHS.FRAMEWORK_JS_SRC}/*.js`, ['umd-framework']);
+    gulp.watch(`${PATHS.FRAMEWORK_JS_SRC}/**/*.js`, ['umd-framework']);
   }
 });
 
@@ -467,7 +467,7 @@ gulp.task('umd-admin', () => {
 
 gulp.task('umd-framework', () => { // eslint-disable-line
   return transformToUmd(glob.sync(
-    `${PATHS.FRAMEWORK_JS_SRC}/*.js`),
+    `${PATHS.FRAMEWORK_JS_SRC}/**/*.js`),
     PATHS.FRAMEWORK_JS_DIST
   );
 });

tests/forms/CompositeFieldTest.php

@@ -71,7 +71,7 @@ class CompositeFieldTest extends SapphireTest {
 		$composite->setTag('fieldset');
 		$composite->setLegend('My legend');
 
-		$parser = new CSSContentParser($composite->Field());
+		$parser = new CSSContentParser($composite->FieldHolder());
 		$root = $parser->getBySelector('fieldset.composite');
 		$legend = $parser->getBySelector('fieldset.composite legend');