Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

14 files changed, 80 insertions, 121 deletions

diff --git a/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap
index 62a0f675cff..ed8ed3254ba 100644
--- a/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap
+++ b/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap
@@ -1,23 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Design note pin component should match the snapshot of note when repositioning 1`] = `
-<button
-  aria-label="Comment form position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator"
-  style="left: 10px; top: 10px; cursor: move;"
-  type="button"
->
-  <gl-icon-stub
-    name="image-comment-dark"
-    size="24"
-  />
-</button>
-`;
-
 exports[`Design note pin component should match the snapshot of note with index 1`] = `
 <button
   aria-label="Comment '1' position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 js-image-badge badge badge-pill"
+  class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0! js-image-badge badge badge-pill"
   style="left: 10px; top: 10px;"
   type="button"
 >
@@ -30,7 +16,7 @@ exports[`Design note pin component should match the snapshot of note with index
 exports[`Design note pin component should match the snapshot of note without index 1`] = `
 <button
   aria-label="Comment form position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator"
+  class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0! btn-transparent comment-indicator gl-p-0"
   style="left: 10px; top: 10px;"
   type="button"
 >
diff --git a/spec/frontend/design_management/components/__snapshots__/design_presentation_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/design_presentation_spec.js.snap
index 189962c5b2e..560533891c9 100644
--- a/spec/frontend/design_management/components/__snapshots__/design_presentation_spec.js.snap
+++ b/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"
diff --git a/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap
index cb4575cbd11..0679b485f77 100644
--- a/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap
+++ b/spec/frontend/design_management/components/__snapshots__/design_scaler_spec.js.snap
@@ -10,7 +10,7 @@ exports[`Design management design scaler component minus and reset buttons are d
     disabled="disabled"
   >
     <span
-      class="d-flex-center gl-icon s16"
+      class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16"
     >
       
       –
@@ -48,7 +48,7 @@ exports[`Design management design scaler component minus and reset buttons are e
     class="btn"
   >
     <span
-      class="d-flex-center gl-icon s16"
+      class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16"
     >
       
       –
@@ -85,7 +85,7 @@ exports[`Design management design scaler component plus button is disabled when
     class="btn"
   >
     <span
-      class="d-flex-center gl-icon s16"
+      class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16"
     >
       
       –
diff --git a/spec/frontend/design_management/components/__snapshots__/image_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/image_spec.js.snap
index acaa62b11eb..7cffd3cf3e8 100644
--- a/spec/frontend/design_management/components/__snapshots__/image_spec.js.snap
+++ b/spec/frontend/design_management/components/__snapshots__/image_spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Design management large image component renders image 1`] = `
 <div
-  class="m-auto js-design-image"
+  class="gl-mx-auto gl-my-auto js-design-image"
 >
   <!---->
    
@@ -16,7 +16,7 @@ exports[`Design management large image component renders image 1`] = `
 
 exports[`Design management large image component renders loading state 1`] = `
 <div
-  class="m-auto js-design-image"
+  class="gl-mx-auto gl-my-auto js-design-image"
   isloading="true"
 >
   <!---->
@@ -31,7 +31,7 @@ exports[`Design management large image component renders loading state 1`] = `
 
 exports[`Design management large image component renders media broken icon on error 1`] = `
 <gl-icon-stub
-  class="text-secondary-100"
+  class="gl-text-gray-200"
   name="media-broken"
   size="48"
 />
@@ -39,7 +39,7 @@ exports[`Design management large image component renders media broken icon on er
 
 exports[`Design management large image component sets correct classes and styles if imageStyle is set 1`] = `
 <div
-  class="m-auto js-design-image"
+  class="gl-mx-auto gl-my-auto js-design-image"
 >
   <!---->
    
@@ -54,7 +54,7 @@ exports[`Design management large image component sets correct classes and styles
 
 exports[`Design management large image component zoom sets image style when zoomed 1`] = `
 <div
-  class="m-auto js-design-image"
+  class="gl-mx-auto gl-my-auto js-design-image"
 >
   <!---->
    
diff --git a/spec/frontend/design_management/components/design_note_pin_spec.js b/spec/frontend/design_management/components/design_note_pin_spec.js
index 4e045b58a35..a6219923aca 100644
--- a/spec/frontend/design_management/components/design_note_pin_spec.js
+++ b/spec/frontend/design_management/components/design_note_pin_spec.js
@@ -29,21 +29,4 @@ describe('Design note pin component', () => {
     createComponent({ label: 1 });
     expect(wrapper.element).toMatchSnapshot();
   });
-
-  it('should match the snapshot of note when repositioning', () => {
-    createComponent({ repositioning: true });
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  describe('pinStyle', () => {
-    it('sets cursor to `move` when repositioning = true', () => {
-      createComponent({ repositioning: true });
-      expect(wrapper.vm.pinStyle.cursor).toBe('move');
-    });
-
-    it('does not set cursor when repositioning = false', () => {
-      createComponent();
-      expect(wrapper.vm.pinStyle.cursor).toBe(undefined);
-    });
-  });
 });
diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js
index 673a09320e5..4ef067e3f5e 100644
--- a/spec/frontend/design_management/components/design_overlay_spec.js
+++ b/spec/frontend/design_management/components/design_overlay_spec.js
@@ -202,7 +202,7 @@ describe('Design overlay component', () => {
         { x: position.x, y: position.y },
         { x: 20, y: 20 },
       ).then(() => {
-        expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 20px; cursor: move;');
+        expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 20px;');
       });
     });
 
@@ -300,9 +300,7 @@ describe('Design overlay component', () => {
           { x: position.x, y: position.y },
           { x: 20, y: 20 },
         ).then(() => {
-          expect(findCommentBadge().attributes().style).toBe(
-            'left: 20px; top: 20px; cursor: move;',
-          );
+          expect(findCommentBadge().attributes().style).toBe('left: 20px; top: 20px;');
         });
       });
 
diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js
index 700faa8a70f..60266883fcd 100644
--- a/spec/frontend/design_management/components/design_sidebar_spec.js
+++ b/spec/frontend/design_management/components/design_sidebar_spec.js
@@ -43,7 +43,7 @@ describe('Design management design sidebar component', () => {
   const findNewDiscussionDisclaimer = () =>
     wrapper.find('[data-testid="new-discussion-disclaimer"]');
 
-  function createComponent(props = {}, { enableTodoButton } = {}) {
+  function createComponent(props = {}) {
     wrapper = shallowMount(DesignSidebar, {
       propsData: {
         design,
@@ -58,9 +58,6 @@ describe('Design management design sidebar component', () => {
         },
       },
       stubs: { GlPopover },
-      provide: {
-        glFeatures: { designManagementTodoButton: enableTodoButton },
-      },
     });
   }
 
@@ -80,6 +77,12 @@ describe('Design management design sidebar component', () => {
     expect(findParticipants().props('participants')).toHaveLength(1);
   });
 
+  it('renders To-Do button', () => {
+    createComponent();
+
+    expect(wrapper.find(DesignTodoButton).exists()).toBe(true);
+  });
+
   describe('when has no discussions', () => {
     beforeEach(() => {
       createComponent({
@@ -245,23 +248,4 @@ describe('Design management design sidebar component', () => {
       expect(Cookies.set).toHaveBeenCalledWith(cookieKey, 'true', { expires: 365 * 10 });
     });
   });
-
-  it('does not render To-Do button by default', () => {
-    createComponent();
-    expect(wrapper.find(DesignTodoButton).exists()).toBe(false);
-  });
-
-  describe('when `design_management_todo_button` feature flag is enabled', () => {
-    beforeEach(() => {
-      createComponent({}, { enableTodoButton: true });
-    });
-
-    it('renders sidebar root element with no top padding', () => {
-      expect(wrapper.classes()).toContain('gl-pt-0');
-    });
-
-    it('renders To-Do button', () => {
-      expect(wrapper.find(DesignTodoButton).exists()).toBe(true);
-    });
-  });
 });
diff --git a/spec/frontend/design_management/components/design_todo_button_spec.js b/spec/frontend/design_management/components/design_todo_button_spec.js
index 451c23f0fea..9ebc6ca26a2 100644
--- a/spec/frontend/design_management/components/design_todo_button_spec.js
+++ b/spec/frontend/design_management/components/design_todo_button_spec.js
@@ -111,7 +111,7 @@ describe('Design management design todo button', () => {
     });
 
     it('renders correct button text', () => {
-      expect(wrapper.text()).toBe('Add a To-Do');
+      expect(wrapper.text()).toBe('Add a To Do');
     });
 
     describe('when clicked', () => {
diff --git a/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap b/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
index 822df1f6472..de276bd300b 100644
--- a/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
+++ b/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
@@ -24,6 +24,7 @@ exports[`Design management list item component with notes renders item with mult
       <img
         alt="test"
         class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
+        data-qa-filename="test"
         data-qa-selector="design_image"
         src=""
       />
@@ -94,6 +95,7 @@ exports[`Design management list item component with notes renders item with sing
       <img
         alt="test"
         class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
+        data-qa-filename="test"
         data-qa-selector="design_image"
         src=""
       />
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
index a7d6145285c..5eb86d4f9cb 100644
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
+++ b/spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap
@@ -4,15 +4,16 @@ exports[`Design management pagination component hides components when designs ar
 
 exports[`Design management pagination component renders navigation buttons 1`] = `
 <div
-  class="d-flex align-items-center"
+  class="gl-display-flex gl-align-items-center"
 >
   
   0 of 2
   
   <gl-button-group-stub
-    class="ml-3 mr-3"
+    class="gl-mx-5"
   >
     <gl-button-stub
+      buttontextclasses=""
       category="primary"
       class="js-previous-design"
       disabled="true"
@@ -23,6 +24,7 @@ exports[`Design management pagination component renders navigation buttons 1`] =
     />
      
     <gl-button-stub
+      buttontextclasses=""
       category="primary"
       class="js-next-design"
       icon="angle-right"
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
index b286a74ebb8..723ac0491a7 100644
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
@@ -19,16 +19,16 @@ exports[`Design management toolbar component renders design and updated data 1`]
     </a>
      
     <div
-      class="overflow-hidden d-flex align-items-center"
+      class="gl-overflow-hidden gl-display-flex gl-align-items-center"
     >
       <h2
-        class="m-0 str-truncated-100 gl-font-base"
+        class="gl-m-0 str-truncated-100 gl-font-base"
       >
         test.jpg
       </h2>
        
       <small
-        class="text-secondary"
+        class="gl-text-gray-500"
       >
         Updated 1 hour ago by Test Name
       </small>
@@ -36,11 +36,12 @@ exports[`Design management toolbar component renders design and updated data 1`]
   </div>
    
   <design-navigation-stub
-    class="ml-auto flex-shrink-0"
+    class="gl-ml-auto gl-flex-shrink-0"
     id="1"
   />
    
   <gl-button-stub
+    buttontextclasses=""
     category="primary"
     href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
     icon="download"
diff --git a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
index 1c6588a9628..1d9b9c002f9 100644
--- a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
+++ b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
@@ -43,7 +43,7 @@ describe('Design management pagination component', () => {
 
   it('renders navigation buttons', () => {
     wrapper.setData({
-      designs: [{ id: '1' }, { id: '2' }],
+      designCollection: { designs: [{ id: '1' }, { id: '2' }] },
     });
 
     return wrapper.vm.$nextTick().then(() => {
@@ -54,7 +54,7 @@ describe('Design management pagination component', () => {
   describe('keyboard buttons navigation', () => {
     beforeEach(() => {
       wrapper.setData({
-        designs: [{ filename: '1' }, { filename: '2' }, { filename: '3' }],
+        designCollection: { designs: [{ filename: '1' }, { filename: '2' }, { filename: '3' }] },
       });
     });
 
diff --git a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap
index 3d7939df28e..eaa7460ae15 100644
--- a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap
+++ b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap
@@ -5,6 +5,7 @@ exports[`Design management upload button component renders inverted upload desig
   isinverted="true"
 >
   <gl-button-stub
+    buttontextclasses=""
     category="primary"
     icon=""
     size="small"
@@ -30,6 +31,7 @@ exports[`Design management upload button component renders inverted upload desig
 exports[`Design management upload button component renders loading icon 1`] = `
 <div>
   <gl-button-stub
+    buttontextclasses=""
     category="primary"
     disabled="true"
     icon=""
@@ -62,6 +64,7 @@ exports[`Design management upload button component renders loading icon 1`] = `
 exports[`Design management upload button component renders upload design button 1`] = `
 <div>
   <gl-button-stub
+    buttontextclasses=""
     category="primary"
     icon=""
     size="small"
diff --git a/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap
index 9284099b40d..1ca5360fa59 100644
--- a/spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap
+++ b/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