Merge branch 'ntepluhina-refactor-to-gitlab-ui' into 'master'

Updated design presentation and dropzone to GtiLab UI classes

See merge request gitlab-org/gitlab!44304

app/assets/javascripts/design_management/components/design_presentation.vue

@@ -286,7 +286,7 @@ export default {
 <template>
   <div
     ref="presentationViewport"
-    class="h-100 w-100 p-3 overflow-auto position-relative"
+    class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
     :style="presentationStyle"
     @mousedown="onPresentationMousedown"
     @mousemove="onPresentationMousemove"
@@ -297,7 +297,7 @@ export default {
     @touchend="onPresentationMouseup"
     @touchcancel="onPresentationMouseup"
   >
-    <div class="h-100 w-100 d-flex align-items-center position-relative">
+    <div class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative">
       <design-image
         v-if="image"
         :image="image"

app/assets/javascripts/design_management/components/upload/design_dropzone.vue

@@ -83,7 +83,7 @@ export default {
 
 <template>
   <div
-    class="w-100 position-relative"
+    class="gl-w-full gl-relative"
     @dragstart.prevent.stop
     @dragend.prevent.stop
     @dragover.prevent.stop
@@ -93,7 +93,7 @@ export default {
   >
     <slot>
       <button
-        class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
+        class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
         @click="openFileUpload"
       >
         <div
@@ -127,9 +127,9 @@ export default {
     <transition name="design-dropzone-fade">
       <div
         v-show="dragging && !isDraggingDesign"
-        class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white"
+        class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
       >
-        <div v-show="!isDragDataValid" class="mw-50 text-center">
+        <div v-show="!isDragDataValid" class="mw-50 gl-text-center">
           <h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Oh no!') }}</h3>
           <span>{{
             __(
@@ -137,7 +137,7 @@ export default {
             )
           }}</span>
         </div>
-        <div v-show="isDragDataValid" class="mw-50 text-center">
+        <div v-show="isDragDataValid" class="mw-50 gl-text-center">
           <h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Incoming!') }}</h3>
           <span>{{ __('Drop your designs to start your upload.') }}</span>
         </div>

spec/frontend/design_management/components/__snapshots__/design_presentation_spec.js.snap

@@ -2,10 +2,10 @@
 
 exports[`Design management design presentation component currentCommentForm is equal to current annotation position when isAnnotating is true 1`] = `
 <div
-  class="h-100 w-100 p-3 overflow-auto position-relative"
+  class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
 >
   <div
-    class="h-100 w-100 d-flex align-items-center position-relative"
+    class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"
   >
     <design-image-stub
       image="test.jpg"
@@ -25,10 +25,10 @@ exports[`Design management design presentation component currentCommentForm is e
 
 exports[`Design management design presentation component currentCommentForm is null when isAnnotating is false 1`] = `
 <div
-  class="h-100 w-100 p-3 overflow-auto position-relative"
+  class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
 >
   <div
-    class="h-100 w-100 d-flex align-items-center position-relative"
+    class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"
   >
     <design-image-stub
       image="test.jpg"
@@ -47,10 +47,10 @@ exports[`Design management design presentation component currentCommentForm is n
 
 exports[`Design management design presentation component currentCommentForm is null when isAnnotating is true but annotation position is falsey 1`] = `
 <div
-  class="h-100 w-100 p-3 overflow-auto position-relative"
+  class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
 >
   <div
-    class="h-100 w-100 d-flex align-items-center position-relative"
+    class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"
   >
     <design-image-stub
       image="test.jpg"
@@ -69,10 +69,10 @@ exports[`Design management design presentation component currentCommentForm is n
 
 exports[`Design management design presentation component renders empty state when no image provided 1`] = `
 <div
-  class="h-100 w-100 p-3 overflow-auto position-relative"
+  class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
 >
   <div
-    class="h-100 w-100 d-flex align-items-center position-relative"
+    class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"
   >
     <!---->
      
@@ -83,10 +83,10 @@ exports[`Design management design presentation component renders empty state whe
 
 exports[`Design management design presentation component renders image and overlay when image provided 1`] = `
 <div
-  class="h-100 w-100 p-3 overflow-auto position-relative"
+  class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
 >
   <div
-    class="h-100 w-100 d-flex align-items-center position-relative"
+    class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"
   >
     <design-image-stub
       image="test.jpg"

spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap

@@ -2,10 +2,10 @@
 
 exports[`Design management dropzone component when dragging renders correct template when drag event contains files 1`] = `
 <div
-  class="w-100 position-relative"
+  class="gl-w-full gl-relative"
 >
   <button
-    class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
+    class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
@@ -39,11 +39,11 @@ exports[`Design management dropzone component when dragging renders correct temp
     name="design-dropzone-fade"
   >
     <div
-      class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white"
+      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
       style=""
     >
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
         style="display: none;"
       >
         <h3
@@ -58,7 +58,7 @@ exports[`Design management dropzone component when dragging renders correct temp
       </div>
        
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
         style=""
       >
         <h3
@@ -78,10 +78,10 @@ exports[`Design management dropzone component when dragging renders correct temp
 
 exports[`Design management dropzone component when dragging renders correct template when drag event contains files and text 1`] = `
 <div
-  class="w-100 position-relative"
+  class="gl-w-full gl-relative"
 >
   <button
-    class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
+    class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
@@ -115,11 +115,11 @@ exports[`Design management dropzone component when dragging renders correct temp
     name="design-dropzone-fade"
   >
     <div
-      class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white"
+      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
       style=""
     >
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
         style="display: none;"
       >
         <h3
@@ -134,7 +134,7 @@ exports[`Design management dropzone component when dragging renders correct temp
       </div>
        
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
         style=""
       >
         <h3
@@ -154,10 +154,10 @@ exports[`Design management dropzone component when dragging renders correct temp
 
 exports[`Design management dropzone component when dragging renders correct template when drag event contains text 1`] = `
 <div
-  class="w-100 position-relative"
+  class="gl-w-full gl-relative"
 >
   <button
-    class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
+    class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
@@ -191,11 +191,11 @@ exports[`Design management dropzone component when dragging renders correct temp
     name="design-dropzone-fade"
   >
     <div
-      class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white"
+      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
       style=""
     >
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
       >
         <h3
           class=""
@@ -209,7 +209,7 @@ exports[`Design management dropzone component when dragging renders correct temp
       </div>
        
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
         style="display: none;"
       >
         <h3
@@ -229,10 +229,10 @@ exports[`Design management dropzone component when dragging renders correct temp
 
 exports[`Design management dropzone component when dragging renders correct template when drag event is empty 1`] = `
 <div
-  class="w-100 position-relative"
+  class="gl-w-full gl-relative"
 >
   <button
-    class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
+    class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
@@ -266,11 +266,11 @@ exports[`Design management dropzone component when dragging renders correct temp
     name="design-dropzone-fade"
   >
     <div
-      class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white"
+      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
       style=""
     >
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
       >
         <h3
           class=""
@@ -284,7 +284,7 @@ exports[`Design management dropzone component when dragging renders correct temp
       </div>
        
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
         style="display: none;"
       >
         <h3
@@ -304,10 +304,10 @@ exports[`Design management dropzone component when dragging renders correct temp
 
 exports[`Design management dropzone component when dragging renders correct template when dragging stops 1`] = `
 <div
-  class="w-100 position-relative"
+  class="gl-w-full gl-relative"
 >
   <button
-    class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
+    class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
@@ -341,11 +341,11 @@ exports[`Design management dropzone component when dragging renders correct temp
     name="design-dropzone-fade"
   >
     <div
-      class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white"
+      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
       style="display: none;"
     >
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
       >
         <h3
           class=""
@@ -359,7 +359,7 @@ exports[`Design management dropzone component when dragging renders correct temp
       </div>
        
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
         style="display: none;"
       >
         <h3
@@ -379,10 +379,10 @@ exports[`Design management dropzone component when dragging renders correct temp
 
 exports[`Design management dropzone component when no slot provided renders default dropzone card 1`] = `
 <div
-  class="w-100 position-relative"
+  class="gl-w-full gl-relative"
 >
   <button
-    class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
+    class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
   >
     <div
       class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
@@ -416,11 +416,11 @@ exports[`Design management dropzone component when no slot provided renders defa
     name="design-dropzone-fade"
   >
     <div
-      class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white"
+      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
       style="display: none;"
     >
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
       >
         <h3
           class=""
@@ -434,7 +434,7 @@ exports[`Design management dropzone component when no slot provided renders defa
       </div>
        
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
         style="display: none;"
       >
         <h3
@@ -454,7 +454,7 @@ exports[`Design management dropzone component when no slot provided renders defa
 
 exports[`Design management dropzone component when slot provided renders dropzone with slot content 1`] = `
 <div
-  class="w-100 position-relative"
+  class="gl-w-full gl-relative"
 >
   <div>
     dropzone slot
@@ -464,11 +464,11 @@ exports[`Design management dropzone component when slot provided renders dropzon
     name="design-dropzone-fade"
   >
     <div
-      class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white"
+      class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
       style="display: none;"
     >
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
       >
         <h3
           class=""
@@ -482,7 +482,7 @@ exports[`Design management dropzone component when slot provided renders dropzon
       </div>
        
       <div
-        class="mw-50 text-center"
+        class="mw-50 gl-text-center"
         style="display: none;"
       >
         <h3