Merge branch 'add_tooltips_to_design_buttons' into 'master'

Add tooltips to design buttons

See merge request gitlab-org/gitlab!46922

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

 <script>
 /* global Mousetrap */
 import 'mousetrap';
-import { GlButton, GlButtonGroup } from '@gitlab/ui';
+import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import allDesignsMixin from '../../mixins/all_designs';
 import { DESIGN_ROUTE_NAME } from '../../router/constants';
@@ -11,6 +11,9 @@ export default {
     GlButton,
     GlButtonGroup,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   mixins: [allDesignsMixin],
   props: {
     id: {
@@ -68,6 +71,7 @@ export default {
     {{ paginationText }}
     <gl-button-group class="gl-mx-5">
       <gl-button
+        v-gl-tooltip.bottom
         :disabled="!previousDesign"
         :title="s__('DesignManagement|Go to previous design')"
         icon="angle-left"
@@ -75,6 +79,7 @@ export default {
         @click="navigateToDesign(previousDesign)"
       />
       <gl-button
+        v-gl-tooltip.bottom
         :disabled="!nextDesign"
         :title="s__('DesignManagement|Go to next design')"
         icon="angle-right"

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

 <script>
-import { GlButton, GlIcon } from '@gitlab/ui';
+import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import { __, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -14,6 +14,9 @@ export default {
     DesignNavigation,
     DeleteButton,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   mixins: [timeagoMixin],
   props: {
     id: {
@@ -112,14 +115,21 @@ export default {
       </div>
     </div>
     <design-navigation :id="id" class="gl-ml-auto gl-flex-shrink-0" />
-    <gl-button :href="image" icon="download" />
+    <gl-button
+      v-gl-tooltip.bottom
+      :href="image"
+      icon="download"
+      :title="s__('DesignManagement|Download design')"
+    />
     <delete-button
       v-if="isLatestVersion && canDeleteDesign"
+      v-gl-tooltip.bottom
       class="gl-ml-3"
       :is-deleting="isDeleting"
       button-variant="warning"
       button-icon="archive"
       button-category="secondary"
+      :title="s__('DesignManagement|Archive design')"
       @deleteSelectedDesigns="$emit('delete')"
     />
   </header>

changelogs/unreleased/add_tooltips_to_design_buttons.yml

+---
+title: Add tooltips to design buttons
+merge_request: 46922
+author: Lee Tickett
+type: added

locale/gitlab.pot

@@ -9219,6 +9219,9 @@ msgstr ""
 msgid "DesignManagement|Adding a design with the same filename replaces the file in a new version."
 msgstr ""
 
+msgid "DesignManagement|Archive design"
+msgstr ""
+
 msgid "DesignManagement|Archive designs"
 msgstr ""
 
@@ -9276,6 +9279,9 @@ msgstr ""
 msgid "DesignManagement|Discard comment"
 msgstr ""
 
+msgid "DesignManagement|Download design"
+msgstr ""
+
 msgid "DesignManagement|Error uploading a new design. Please try again."
 msgstr ""
 

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

@@ -46,6 +46,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
     href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
     icon="download"
     size="medium"
+    title="Download design"
     variant="default"
   />
    
@@ -57,6 +58,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
     buttonvariant="warning"
     class="gl-ml-3"
     hasselecteddesigns="true"
+    title="Archive design"
   />
 </header>
 `;