MC-3146: Add new row appearances to configuration

davemacaulay · davemacaulay · commit 988220064fa9 · 2018-07-24T14:02:33.000+02:00
- Implement noticeMessage on visual-select.js
- Update appearance visual select to only display if it contains options
- Ensure any field using visual select template implements the visual select component
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_accordion_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_accordion_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_anchor_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_anchor_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_banner_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_banner_form.xml
@@ -56,7 +56,7 @@
                     <class name="admin__field-visual-select-container">true</class>
                 </additionalClasses>
                 <dataType>text</dataType>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_block_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_block_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_button_item_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_button_item_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_buttons_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_buttons_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_column_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_column_form.xml
@@ -70,7 +70,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
@@ -101,7 +101,7 @@
                 </validation>
             </settings>
         </field>
-        <field name="justify_content" sortOrder="20" formElement="select">
+        <field name="justify_content" sortOrder="20" formElement="select" component="Magento_PageBuilder/js/form/element/visual-select">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="default" xsi:type="string">flex-start</item>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_divider_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_divider_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_heading_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_heading_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_html_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_html_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_image_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_image_form.xml
@@ -56,7 +56,7 @@
                     <class name="admin__field-visual-select-container">true</class>
                 </additionalClasses>
                 <dataType>text</dataType>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_map_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_map_form.xml
@@ -54,7 +54,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_newsletter_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_newsletter_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_products_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_products_form.xml
@@ -60,7 +60,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_row_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_row_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
@@ -316,7 +316,7 @@
                 </validation>
             </settings>
         </field>
-        <field name="justify_content" sortOrder="20" formElement="select">
+        <field name="justify_content" sortOrder="20" formElement="select" component="Magento_PageBuilder/js/form/element/visual-select">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="default" xsi:type="string">flex-start</item>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml
@@ -56,7 +56,7 @@
                     <class name="admin__field-visual-select-container">true</class>
                 </additionalClasses>
                 <dataType>text</dataType>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slider_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slider_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_tab_item_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_tab_item_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_tabs_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_tabs_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
@@ -104,7 +104,7 @@
                 </validation>
             </settings>
         </field>
-        <field name="navigation_alignment" formElement="select" sortOrder="40" component="Magento_PageBuilder/js/form/element/dependent-select">
+        <field name="navigation_alignment" formElement="select" sortOrder="40" component="Magento_PageBuilder/js/form/element/visual-select">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="default" xsi:type="string">left</item>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_text_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_text_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_video_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_video_form.xml
@@ -59,7 +59,7 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
-                <elementTmpl>Magento_PageBuilder/form/element/appearance-visual-select</elementTmpl>
+                <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/appearance-visual-select.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/appearance-visual-select.js
@@ -12,19 +12,6 @@ define([
     return Select.extend({
         defaults: {
             visible: false,
-            noticeMessage: ''
-        },
-
-        /**
-         * Initializes observable properties of instance
-         *
-         * @returns {Abstract} Chainable.
-         */
-        initObservable: function () {
-            this._super();
-            this.observe('noticeMessage');
-
-            return this;
         },
 
         /**
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/visual-select.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/visual-select.js
@@ -10,6 +10,21 @@ define([
     'use strict';
 
     return Select.extend({
+        defaults: {
+            noticeMessage: '',
+        },
+
+        /**
+         * Initializes observable properties of instance
+         *
+         * @returns {Abstract} Chainable.
+         */
+        initObservable: function () {
+            this._super();
+            this.observe('noticeMessage');
+
+            return this;
+        },
 
         /**
          * Parses incoming options, considers options with undefined value property
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/appearance-visual-select.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/appearance-visual-select.html
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/visual-select.html b/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) }, 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 }">
+        <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 }">
             <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>
@@ -21,4 +21,7 @@
             <span translate="$data.title"/>
         </li>
     </ol>
+    <div if="noticeMessage" class="message message-notice notice">
+        <div data-ui-id="messages-message-notice" html="noticeMessage"></div>
+    </div>
 </div>
