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

Update design image and scaler to GitLab UI classes

See merge request gitlab-org/gitlab!44619

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

@@ -51,7 +51,7 @@ export default {
 <template>
   <div class="design-scaler btn-group" role="group">
     <button class="btn" :disabled="disableDecrease" @click="decrementScale">
-      <span class="d-flex-center gl-icon s16">
+      <span class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16">
         –
       </span>
     </button>

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

@@ -93,8 +93,8 @@ export default {
 </script>
 
 <template>
-  <div class="m-auto js-design-image">
-    <gl-icon v-if="imageError" class="text-secondary-100" name="media-broken" :size="48" />
+  <div class="gl-mx-auto gl-my-auto js-design-image">
+    <gl-icon v-if="imageError" class="gl-text-gray-200" name="media-broken" :size="48" />
     <img
       v-show="!imageError"
       ref="contentImg"

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"
     >
       
       –

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"
 >
   <!---->