Merge branch 'MAGETWO-34949' of github.corp.ebay.com:magento-vanilla/magento2ce into MAGETWO-34949

Author: guz-anton

app/code/Magento/Catalog/Block/Adminhtml/Product/Helper/Form/Category.php

@@ -132,7 +132,7 @@ public function getAfterElementHtml()
                     'id' => 'add_category_button',
                     'label' => $newCategoryCaption,
                     'title' => $newCategoryCaption,
-                    'onclick' => 'jQuery("#new-category").trigger("openDialog")',
+                    'onclick' => 'jQuery("#new-category").trigger("openModal")',
                     'disabled' => $this->getDisabled(),
                 ]
             );

app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js

@@ -7,7 +7,7 @@
 define([
     'jquery',
     'jquery/ui',
-    'Magento_Ui/js/popup/popup',
+    'Magento_Ui/js/modal/modal',
     'mage/translate',
     'mage/backend/tree-suggest',
     'mage/backend/validation'
@@ -52,9 +52,9 @@ define([
                         options.errorClass, options.validClass || '');
                 }
             });
-            this.element.popup({
+            this.element.modal({
                 type: 'slide',
-                dialogClass: 'mage-new-category-dialog form-inline',
+                modalClass: 'mage-new-category-dialog form-inline',
                 title: $.mage.__('Create Category'),
                 buttons: [{
                     text: $.mage.__('Create Category'),
@@ -93,7 +93,7 @@ define([
                                 $('#new_category_name, #new_category_parent-suggest').val('');
                                 $suggest.val('');
                                 clearParentCategory();
-                                widget.element.trigger('closeDialog');
+                                widget.element.trigger('closeModal');
                             } else {
                                 $('#new_category_messages').html(data.messages);
                             }

app/code/Magento/Ui/view/base/web/js/popup/popup.js renamed to app/code/Magento/Ui/view/base/web/js/modal/modal.js

@@ -6,174 +6,174 @@ define([
     "jquery",
     "underscore",
     "mage/template",
-    "text!ui/template/popup/popup-modal.html",
-    "text!ui/template/popup/popup-slide.html",
+    "text!ui/template/modal/modal-popup.html",
+    "text!ui/template/modal/modal-slide.html",
     "jquery/ui",
     "mage/translate"
-], function($, _, template, modalTpl, slideTpl){
+], function($, _, template, popupTpl, slideTpl){
     "use strict";
 
     /**
-     * Dialog Widget
+     * Modal Window Widget
      */
-    $.widget('mage.popup', {
+    $.widget('mage.modal', {
         options: {
-            type: 'modal',
+            type: 'popup',
             title: '',
-            dialogClass: '',
-            modalTpl: modalTpl,
+            modalClass: '',
+            popupTpl: popupTpl,
             slideTpl: slideTpl,
-            dialogVisibleClass: '_show',
-            parentDialogClass: '_has-dialog',
+            modalVisibleClass: '_show',
+            parentModalClass: '_has-modal',
             innerScrollClass: '_inner-scroll',
             responsive: false,
             innerScroll: false,
-            dialogBlock: '[data-role="dialog"]',
-            dialogCloseBtn: '[data-role="closeBtn"]',
-            dialogContent: '[data-role="content"]',
-            dialogAction: '[data-role="action"]',
+            modalBlock: '[data-role="modal"]',
+            modalCloseBtn: '[data-role="closeBtn"]',
+            modalContent: '[data-role="content"]',
+            modalAction: '[data-role="action"]',
             appendTo: 'body',
-            wrapperClass: 'dialogs-wrapper',
+            wrapperClass: 'modals-wrapper',
             overlayClass: 'overlay_magento',
-            responsiveClass: 'dialog-slide',
-            dialogLeftMargin: 45,
+            responsiveClass: 'modal-slide',
+            modalLeftMargin: 45,
             closeText: $.mage.__('Close'),
             buttons: [{
                 text: $.mage.__('Ok'),
                 class: '',
                 click: function(){
-                    this.closeDialog();
+                    this.closeModal();
                 }
             }]
         },
         /**
-         * Creates dialog widget.
+         * Creates modal widget.
          */
         _create: function() {
             this.options.transitionEvent = this.whichTransitionEvent();
             this._createWrapper();
-            this._renderDialog();
+            this._renderModal();
             this._createButtons();
 
-            this.dialog.find(this.options.dialogCloseBtn).on('click',  _.bind(this.closeDialog, this));
-            this.element.on('openDialog', _.bind(this.openDialog, this));
-            this.element.on('closeDialog', _.bind(this.closeDialog, this));
+            this.modal.find(this.options.modalCloseBtn).on('click',  _.bind(this.closeModal, this));
+            this.element.on('openModal', _.bind(this.openModal, this));
+            this.element.on('closeModal', _.bind(this.closeModal, this));
         },
         /**
-         * Returns element from dialog node.
+         * Returns element from modal node.
          * @return {Object} - element.
          */
         _getElem: function(elem) {
-            return this.dialog.find(elem);
+            return this.modal.find(elem);
         },
         /**
-         * Gets visible dialog count.
-         * * @return {Number} - visible dialog count.
+         * Gets visible modal count.
+         * * @return {Number} - visible modal count.
          */
         _getVisibleCount: function() {
-            return this.dialogWrapper.find('.'+this.options.dialogVisibleClass).length;
+            return this.modalWrapper.find('.'+this.options.modalVisibleClass).length;
         },
         /**
-         * Gets visible slide type dialog count.
-         * * @return {Number} - visible dialog count.
+         * Gets count of visible modal by slide type.
+         * * @return {Number} - visible modal count.
          */
         _getVisibleSlideCount: function() {
-            var elems = this.dialogWrapper.find('[data-type="slide"]');
+            var elems = this.modalWrapper.find('[data-type="slide"]');
 
-            return elems.filter('.'+this.options.dialogVisibleClass).length;
+            return elems.filter('.'+this.options.modalVisibleClass).length;
         },
-        openDialog: function() {
+        openModal: function() {
             var that = this;
 
             this.options.isOpen = true;
             this._createOverlay();
             this._setActive();
-            this.dialog.one(this.options.transitionEvent, function() {
+            this.modal.one(this.options.transitionEvent, function() {
                 that._trigger('opened');
             });
-            this.dialog.addClass(this.options.dialogVisibleClass);
+            this.modal.addClass(this.options.modalVisibleClass);
             if ( !this.options.transitionEvent ) {
                 that._trigger('opened');
             }
 
             return this.element;
         },
-        closeDialog: function() {
+        closeModal: function() {
             var that = this;
 
             this.options.isOpen = false;
-            this.dialog.one(this.options.transitionEvent, function() {
+            this.modal.one(this.options.transitionEvent, function() {
                 that._close();
             });
-            this.dialog.removeClass(this.options.dialogVisibleClass);
+            this.modal.removeClass(this.options.modalVisibleClass);
             if ( !this.options.transitionEvent ) {
                 that._close();
             }
 
             return this.element;
         },
         /**
-         * Helper for closeDialog function.
+         * Helper for closeModal function.
          */
         _close: function() {
-            var trigger = _.bind(this._trigger, this, 'closed', this.dialog);
+            var trigger = _.bind(this._trigger, this, 'closed', this.modal);
 
             this._destroyOverlay();
             this._unsetActive();
             _.defer(trigger, this);
         },
         /**
-         * Set z-index and margin for dialog and overlay.
+         * Set z-index and margin for modal and overlay.
          */
         _setActive: function() {
-            var zIndex = this.dialog.zIndex();
+            var zIndex = this.modal.zIndex();
 
             this.prevOverlayIndex = this.overlay.zIndex();
-            this.dialog.zIndex(zIndex + this._getVisibleCount());
+            this.modal.zIndex(zIndex + this._getVisibleCount());
             this.overlay.zIndex(zIndex + (this._getVisibleCount() - 1));
             if ( this._getVisibleSlideCount() ) {
-                this.dialog.css('marginLeft', this.options.dialogLeftMargin * this._getVisibleSlideCount());
+                this.modal.css('marginLeft', this.options.modalLeftMargin * this._getVisibleSlideCount());
             }
         },
         /**
-         * Unset styles for dialog and set z-index for previous dialog.
+         * Unset styles for modal and set z-index for previous modal.
          */
         _unsetActive: function() {
-            this.dialog.removeAttr('style');
+            this.modal.removeAttr('style');
             if ( this.overlay ) {
                 this.overlay.zIndex(this.prevOverlayIndex);
             }
         },
         /**
-         * Creates wrapper to hold all dialogs.
+         * Creates wrapper to hold all modals.
          */
         _createWrapper: function() {
-            this.dialogWrapper = $('.'+this.options.wrapperClass);
-            if ( !this.dialogWrapper.length ) {
-                this.dialogWrapper = $('<div></div>')
+            this.modalWrapper = $('.'+this.options.wrapperClass);
+            if ( !this.modalWrapper.length ) {
+                this.modalWrapper = $('<div></div>')
                      .addClass(this.options.wrapperClass)
                      .appendTo(this.options.appendTo);
             }
         },
         /**
          * Compile template and append to wrapper.
          */
-        _renderDialog: function() {
+        _renderModal: function() {
             $(template(
                 this.options[this.options.type + 'Tpl'],
                 {
                     data: this.options
-                })).appendTo(this.dialogWrapper);
-            this.dialog = this.dialogWrapper.find(this.options.dialogBlock).last();
-            this.element.show().appendTo(this._getElem(this.options.dialogContent));
+                })).appendTo(this.modalWrapper);
+            this.modal = this.modalWrapper.find(this.options.modalBlock).last();
+            this.element.show().appendTo(this._getElem(this.options.modalContent));
         },
         /**
          * Creates buttons pane.
          */
         _createButtons: function() {
             var that = this;
 
-            this.buttons = this._getElem(this.options.dialogAction);
+            this.buttons = this._getElem(this.options.modalAction);
             _.each(this.options.buttons, function(btn, key) {
                 var button = that.buttons[key];
 
@@ -189,28 +189,28 @@ define([
 
             this.overlay = $('.' + this.options.overlayClass);
             if ( !this.overlay.length ) {
-                $(this.options.appendTo).addClass(this.options.parentDialogClass);
+                $(this.options.appendTo).addClass(this.options.parentModalClass);
                 this.overlay = $('<div></div>')
                     .addClass(this.options.overlayClass)
-                    .appendTo(this.dialogWrapper);
+                    .appendTo(this.modalWrapper);
             }
 
             events = $._data(this.overlay.get(0), 'events');
             if ( events ) {
                 this.prevOverlayHandler = events.click[0].handler;
             }
             this.overlay.unbind().on('click', function() {
-                that.closeDialog();
+                that.closeModal();
             });
         },
         /**
          * Destroy overlay.
          */
         _destroyOverlay: function() {
-            var dialogCount = this.dialogWrapper.find('.'+this.options.dialogVisibleClass).length;
+            var modalCount = this.modalWrapper.find('.'+this.options.modalVisibleClass).length;
 
-            if ( !dialogCount ) {
-                $(this.options.appendTo).removeClass(this.options.parentDialogClass);
+            if ( !modalCount ) {
+                $(this.options.appendTo).removeClass(this.options.parentModalClass);
                 this.overlay.remove();
                 this.overlay = null;
 
@@ -239,5 +239,5 @@ define([
         }
     });
 
-    return $.mage.popup;
+    return $.mage.modal;
 });

app/code/Magento/Ui/view/base/web/templates/popup/popup-modal.html renamed to app/code/Magento/Ui/view/base/web/templates/modal/modal-popup.html

@@ -6,14 +6,14 @@
 -->
 
 <aside
-    class="dialog-<%= data.type %> <%= data.dialogClass %>
+    class="modal-<%= data.type %> <%= data.modalClass %>
            <% if(data.responsive){ %><%= data.responsiveClass %><% } %>
            <% if(data.innerScroll){ %><%= data.innerScrollClass %><% } %>"
-    data-role="dialog"
+    data-role="modal"
     data-type="<%= data.type %>">
-    <div class="dialog-inner-wrap">
-        <header class="dialog-header">
-            <h1 class="dialog-title"
+    <div class="modal-inner-wrap">
+        <header class="modal-header">
+            <h1 class="modal-title"
                 data-role="title"><%= data.title %></h1>
             <button
                 class="action-close"
@@ -23,9 +23,9 @@
             </button>
         </header>
         <div
-            class="dialog-content"
+            class="modal-content"
             data-role="content"></div>
-        <footer class="dialog-footer">
+        <footer class="modal-footer">
             <% _.each(data.buttons, function(button) { %>
             <button
                 class="<%= button.class %>"

app/code/Magento/Ui/view/base/web/templates/popup/popup-slide.html renamed to app/code/Magento/Ui/view/base/web/templates/modal/modal-slide.html

@@ -6,13 +6,13 @@
 -->
 
 <aside
-    class="dialog-<%= data.type %> <%= data.dialogClass %>
+    class="modal-<%= data.type %> <%= data.modalClass %>
            <% if(data.innerScroll){ %><%= data.innerScrollClass %><% } %>"
-    data-role="dialog"
+    data-role="modal"
     data-type="<%= data.type %>">
-    <div class="dialog-inner-wrap">
-        <header class="dialog-header">
-            <h1 class="dialog-title"
+    <div class="modal-inner-wrap">
+        <header class="modal-header">
+            <h1 class="modal-title"
                 data-role="title"><%= data.title %></h1>
             <button
                 class="action-close"
@@ -34,6 +34,6 @@
                 </div>
             </div>
         </header>
-        <div class="dialog-content" data-role="content"></div>
+        <div class="modal-content" data-role="content"></div>
     </div>
 </aside>

app/design/adminhtml/Magento/backend/web/css/source/_components.less

@@ -11,5 +11,5 @@
 @import 'components/_calendar-temp.less';
 @import 'components/_messages.less';
 @import 'components/_popups.less';
-@import 'components/_dialogs.less';
-@import 'components/_dialogs_extend.less';
+@import 'components/_modals.less';
+@import 'components/_modals_extend.less';

app/design/adminhtml/Magento/backend/web/css/source/_structure.less

@@ -51,10 +51,12 @@ body {
 
 //  Scroll bar appearing compensation
 @media (min-width: @window__min-width) {
-    html {
-        width: 100vw;
-        overflow-x: hidden;
-    }
+  html {
+    width: 100vw;
+  }
+  body {
+    overflow-x: hidden;
+  }
 }
 
 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {