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

Update design list item component to use GitLab UI classes

See merge request gitlab-org/gitlab!42441

app/assets/javascripts/design_management/components/list/item.vue

@@ -125,10 +125,12 @@ export default {
       params: { id: filename },
       query: $route.query,
     }"
-    class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
+    class="card gl-cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   >
-    <div class="card-body p-0 d-flex-center overflow-hidden position-relative">
-      <div v-if="icon.name" data-testid="designEvent" class="design-event position-absolute">
+    <div
+      class="card-body gl-p-0 gl-display-flex gl-align-items-center gl-justify-content-center gl-overflow-hidden gl-relative"
+    >
+      <div v-if="icon.name" data-testid="designEvent" class="design-event gl-absolute">
         <span :title="icon.tooltip" :aria-label="icon.tooltip">
           <gl-icon :name="icon.name" :size="18" :class="icon.classes" />
         </span>
@@ -145,25 +147,28 @@ export default {
           v-show="showImage"
           :src="imageLink"
           :alt="filename"
-          class="block mx-auto mw-100 mh-100 design-img"
+          class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
           data-qa-selector="design_image"
           @load="onImageLoad"
           @error="onImageError"
         />
       </gl-intersection-observer>
     </div>
-    <div class="card-footer d-flex w-100">
-      <div class="d-flex flex-column str-truncated-100">
-        <span class="bold str-truncated-100" data-qa-selector="design_file_name">{{
+    <div class="card-footer gl-display-flex gl-w-full">
+      <div class="gl-display-flex gl-flex-direction-column str-truncated-100">
+        <span class="gl-font-weight-bold str-truncated-100" data-qa-selector="design_file_name">{{
           filename
         }}</span>
         <span v-if="updatedAt" class="str-truncated-100">
           {{ __('Updated') }} <timeago :time="updatedAt" tooltip-placement="bottom" />
         </span>
       </div>
-      <div v-if="notesCount" class="ml-auto d-flex align-items-center text-secondary">
-        <gl-icon name="comments" class="ml-1" />
-        <span :aria-label="notesLabel" class="ml-1">
+      <div
+        v-if="notesCount"
+        class="gl-ml-auto gl-display-flex gl-align-items-center gl-text-gray-500"
+      >
+        <gl-icon name="comments" class="gl-ml-2" />
+        <span :aria-label="notesLabel" class="gl-ml-2">
           {{ notesCount }}
         </span>
       </div>

spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

@@ -10,11 +10,11 @@ exports[`Design management list item component when item appears in view after i
 
 exports[`Design management list item component with notes renders item with multiple comments 1`] = `
 <router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
+  class="card gl-cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   to="[object Object]"
 >
   <div
-    class="card-body p-0 d-flex-center overflow-hidden position-relative"
+    class="card-body gl-p-0 gl-display-flex gl-align-items-center gl-justify-content-center gl-overflow-hidden gl-relative"
   >
     <!---->
      
@@ -23,7 +23,7 @@ exports[`Design management list item component with notes renders item with mult
        
       <img
         alt="test"
-        class="block mx-auto mw-100 mh-100 design-img"
+        class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
         data-qa-selector="design_image"
         src=""
       />
@@ -31,13 +31,13 @@ exports[`Design management list item component with notes renders item with mult
   </div>
    
   <div
-    class="card-footer d-flex w-100"
+    class="card-footer gl-display-flex gl-w-full"
   >
     <div
-      class="d-flex flex-column str-truncated-100"
+      class="gl-display-flex gl-flex-direction-column str-truncated-100"
     >
       <span
-        class="bold str-truncated-100"
+        class="gl-font-weight-bold str-truncated-100"
         data-qa-selector="design_file_name"
       >
         test
@@ -57,17 +57,17 @@ exports[`Design management list item component with notes renders item with mult
     </div>
      
     <div
-      class="ml-auto d-flex align-items-center text-secondary"
+      class="gl-ml-auto gl-display-flex gl-align-items-center gl-text-gray-500"
     >
       <gl-icon-stub
-        class="ml-1"
+        class="gl-ml-2"
         name="comments"
         size="16"
       />
        
       <span
         aria-label="2 comments"
-        class="ml-1"
+        class="gl-ml-2"
       >
         
         2
@@ -80,11 +80,11 @@ exports[`Design management list item component with notes renders item with mult
 
 exports[`Design management list item component with notes renders item with single comment 1`] = `
 <router-link-stub
-  class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
+  class="card gl-cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
   to="[object Object]"
 >
   <div
-    class="card-body p-0 d-flex-center overflow-hidden position-relative"
+    class="card-body gl-p-0 gl-display-flex gl-align-items-center gl-justify-content-center gl-overflow-hidden gl-relative"
   >
     <!---->
      
@@ -93,7 +93,7 @@ exports[`Design management list item component with notes renders item with sing
        
       <img
         alt="test"
-        class="block mx-auto mw-100 mh-100 design-img"
+        class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
         data-qa-selector="design_image"
         src=""
       />
@@ -101,13 +101,13 @@ exports[`Design management list item component with notes renders item with sing
   </div>
    
   <div
-    class="card-footer d-flex w-100"
+    class="card-footer gl-display-flex gl-w-full"
   >
     <div
-      class="d-flex flex-column str-truncated-100"
+      class="gl-display-flex gl-flex-direction-column str-truncated-100"
     >
       <span
-        class="bold str-truncated-100"
+        class="gl-font-weight-bold str-truncated-100"
         data-qa-selector="design_file_name"
       >
         test
@@ -127,17 +127,17 @@ exports[`Design management list item component with notes renders item with sing
     </div>
      
     <div
-      class="ml-auto d-flex align-items-center text-secondary"
+      class="gl-ml-auto gl-display-flex gl-align-items-center gl-text-gray-500"
     >
       <gl-icon-stub
-        class="ml-1"
+        class="gl-ml-2"
         name="comments"
         size="16"
       />
        
       <span
         aria-label="1 comment"
-        class="ml-1"
+        class="gl-ml-2"
       >
         
         1