MC-3146: Add new row appearances to configuration

- Fix issue with visual select not displaying value after being hidden
- Update full width padding styles

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/row/_full-width.less

@@ -7,9 +7,11 @@
 //  Full Width row appearance styles
 //  _____________________________________________
 
-[data-appearance='full-width'] > .element-children {
+.pagebuilder-content-type.children-min-height.pagebuilder-row[data-appearance='full-width'] > .element-children {
     margin-left: auto;
     margin-right: auto;
     max-width: 90%;
+    padding-left: 20px;
+    padding-right: 20px;
     width: @layout__max-width;
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/visual-select.js

@@ -12,6 +12,9 @@ define([
     return Select.extend({
         defaults: {
             noticeMessage: '',
+            listens: {
+                value: 'setNoticeMessage',
+            }
         },
 
         /**
@@ -108,6 +111,26 @@ define([
             }
 
             return this;
-        }
+        },
+
+        /**
+         * Set the notice message on value change
+         *
+         * @param value
+         * @returns {exports}
+         */
+        setNoticeMessage: function (value) {
+            var noticeMessage = "",
+                selectedOption = _.find(this.options(), function (option) {
+                    return option.value === value;
+                });
+
+            if (selectedOption && typeof selectedOption.noticeMessage !== "undefined") {
+                noticeMessage = selectedOption.noticeMessage;
+            }
+
+            this.noticeMessage(noticeMessage);
+            return this;
+        },
     });
 });

app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/visual-select.html

@@ -12,7 +12,7 @@
            attr="id: uid, name: inputName"/>
 
     <ol data-bind="foreach: options, css: {'_disabled': disabled}">
-        <li data-bind="click: function() { if(!$parent.disabled()) {$parent.value(value); $parent.noticeMessage($data.noticeMessage);} }, css: {active: $parent.value() == value, 'admin__field-visual-select-small': $data.size == 'small', 'admin__field-visual-select-large': $data.size == 'large', 'no-pointer-events': $parent.disabled()}, event: {keyup: function() { if(!$parent.disabled() && (event.keyCode==32||event.keyCode==13)) { $parent.value(value); $parent.noticeMessage($data.noticeMessage);} }}, attr: { tabindex: !$parent.disabled() ? 0 : 'false', name: value }">
+        <li data-bind="click: function() { if(!$parent.disabled()) {$parent.value(value);} }, css: {active: $parent.value() == value, 'admin__field-visual-select-small': $data.size == 'small', 'admin__field-visual-select-large': $data.size == 'large', 'no-pointer-events': $parent.disabled()}, event: {keyup: function() { if(!$parent.disabled() && (event.keyCode==32||event.keyCode==13)) { $parent.value(value);} }}, attr: { tabindex: !$parent.disabled() ? 0 : 'false', name: value }">
             <img if="$data.icon" data-bind="attr:{src: $data.icon}" draggable="false" aria-hidden="true"/>
             <!-- ko if: $data.size == 'large' -->
                 <div ifnot="$data.icon" class="admin__field-visual-select-spacer"></div>