MC-3477: Polish prototype and apply rearranging in preview

- Cleaned up button styling
- Updated docblocks
- Updated syntax for button item options

Author: Hwashiang Yu

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/button-item/_default.less

@@ -9,21 +9,29 @@
 
 .pagebuilder-content-type {
     .pagebuilder-button-item {
+        font-size: 0;
+        width: auto;
+        z-index: auto;
+        .pagebuilder-options {
+            bottom: 0;
+            left: calc(50% - 5px);
+            transform: translate(-50%, -50%);
+            li.pagebuilder-options-link {
+                margin: 0;
+            }
+        }
+        [contenteditable=true] {
+            display: inline-block;
+            min-height: 18px;
+            min-width: 20px;
+        }
         &.pagebuilder-content-type-active {
             .button-item-drag-handle {
+                color: @color-dark-gray0;
                 position: absolute;
-                &.disabled:before {
-                    color: @color-light-gray;
-                    cursor: not-allowed;
-                }
-
-                &.disabled:active:before {
-                    cursor: not-allowed;
-                }
 
                 &:before {
                     .abs-icon;
-                    color: @color-dark-gray0;
                     content: @icon-gripper__content;
                     cursor: move; /* fallback if grab cursor is unsupported */
                     cursor: grab;
@@ -35,30 +43,19 @@
                     line-height: 2.2rem;
                     position: relative;
                     width: 0;
+
+                    &:active {
+                        cursor: grabbing;
+                        cursor: -moz-grabbing;
+                        cursor: -webkit-grabbing;
+                    }
                 }
 
-                &:active:before {
-                    cursor: grabbing;
-                    cursor: -moz-grabbing;
-                    cursor: -webkit-grabbing;
+                &.disabled:before {
+                    color: @color-light-gray;
+                    cursor: not-allowed;
                 }
             }
         }
-        [contenteditable=true] {
-            display: inline-block;
-            min-height: 18px;
-            min-width: 20px;
-        }
-        font-size: 0;
-        width: auto;
-        z-index: auto;
-        .pagebuilder-options {
-            bottom: 0;
-            left: calc(50% - 5px);
-            transform: translate(-50%, -50%);
-            li.pagebuilder-options-link {
-                margin: 0;
-            }
-        }
     }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/button-item/preview.js

@@ -22,7 +22,7 @@ export default class Preview extends BasePreview {
     public retrieveOptions(): OptionInterface[] {
         const options = super.retrieveOptions();
         const newOptions = options.filter((option) => {
-            return (option.code !== "remove" && option.code !== "title" && option.code !== "move");
+            return ["remove", "title", "move"].indexOf(option.code) !== -1;
         });
         const removeClasses = ["remove-structural"];
         let removeFn = this.onOptionRemove;

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/buttons/preview.js

@@ -152,8 +152,7 @@ export default class Preview extends PreviewCollection {
                 },
             },
             /**
-             * Logic for starting the sorting
-             * Adding the placeholderGhost
+             * Logic for starting the sorting and adding the placeholderGhost
              *
              * @param {Event} event
              * @param {JQueryUI.Sortable} element
@@ -171,9 +170,10 @@ export default class Preview extends PreviewCollection {
                 events.trigger("stage:interactionStart");
             },
             /**
-             * Logic for changing element position during the sorting
+             * Logic for changing element position
+             *
              * Set the width and height of the moving placeholder animation
-             * Add animation of placeholder ghost to the placeholder position
+             * and then add animation of placeholder ghost to the placeholder position.
              *
              * @param {Event} event
              * @param {JQueryUI.Sortable} element
@@ -194,8 +194,7 @@ export default class Preview extends PreviewCollection {
                 }, 200);
             },
             /**
-             * Logic for post sorting
-             * Removing the placeholderGhost
+             * Logic for post sorting and removing the placeholderGhost
              */
             stop() {
                 placeholderGhost.remove();