Update Design Management toolbar to use GitLab UI classes

app/assets/javascripts/design_management/components/toolbar/design_navigation.vue

@@ -64,9 +64,9 @@ export default {
 </script>
 
 <template>
-  <div v-if="designsCount" class="d-flex align-items-center">
+  <div v-if="designsCount" class="gl-display-flex gl-align-items-center">
     {{ paginationText }}
-    <gl-button-group class="ml-3 mr-3">
+    <gl-button-group class="gl-mx-5">
       <gl-button
         :disabled="!previousDesign"
         :title="s__('DesignManagement|Go to previous design')"

app/assets/javascripts/design_management/components/toolbar/index.vue

@@ -106,12 +106,12 @@ export default {
       >
         <gl-icon name="close" />
       </router-link>
-      <div class="overflow-hidden d-flex align-items-center">
-        <h2 class="m-0 str-truncated-100 gl-font-base">{{ filename }}</h2>
-        <small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small>
+      <div class="gl-overflow-hidden gl-display-flex gl-align-items-center">
+        <h2 class="gl-m-0 str-truncated-100 gl-font-base">{{ filename }}</h2>
+        <small v-if="updatedAt" class="gl-text-gray-500">{{ updatedText }}</small>
       </div>
     </div>
-    <design-navigation :id="id" class="ml-auto flex-shrink-0" />
+    <design-navigation :id="id" class="gl-ml-auto gl-flex-shrink-0" />
     <gl-button :href="image" icon="download" />
     <delete-button
       v-if="isLatestVersion && canDeleteDesign"

changelogs/unreleased/ntepluhina-refactor-toolbar-to-gitlab-ui.yml

+---
+title: Update Design Management toolbar to use GitLab UI classes
+merge_request: 43682
+author:
+type: other

spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap

@@ -4,13 +4,13 @@ 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=""

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,7 +36,7 @@ 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"
   />