Merge branch '220442-fix-inconsistent-icon-colours-in-package-title' into 'master'

Fix inconsistent icon colours in package title

See merge request gitlab-org/gitlab!33933

ee/app/assets/javascripts/packages/details/components/package_title.vue

@@ -51,7 +51,7 @@ export default {
           {{ packageEntity.name }}
         </h1>
 
-        <div class="gl-display-flex gl-align-items-center text-secondary">
+        <div class="gl-display-flex gl-align-items-center gl-text-gray-700">
           <gl-icon name="eye" class="gl-mr-3" />
           <gl-sprintf :message="$options.i18n.packageInfo">
             <template #version>
@@ -70,7 +70,7 @@ export default {
 
     <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mb-3">
       <div v-if="packageTypeDisplay" class="gl-display-flex gl-align-items-center gl-mr-5">
-        <gl-icon name="package" class="text-secondary gl-mr-3" />
+        <gl-icon name="package" class="gl-text-gray-700 gl-mr-3" />
         <span data-testid="package-type" class="gl-font-weight-bold">{{ packageTypeDisplay }}</span>
       </div>
 
@@ -79,7 +79,7 @@ export default {
       </div>
 
       <div v-if="packagePipeline" class="gl-display-flex gl-align-items-center gl-mr-5">
-        <gl-icon name="review-list" class="text-secondary gl-mr-3" />
+        <gl-icon name="review-list" class="gl-text-gray-700 gl-mr-3" />
         <gl-link
           data-testid="pipeline-project"
           :href="packagePipeline.project.web_url"
@@ -94,7 +94,7 @@ export default {
         data-testid="package-ref"
         class="gl-display-flex gl-align-items-center gl-mr-5"
       >
-        <gl-icon name="branch" class="text-secondary gl-mr-3" />
+        <gl-icon name="branch" class="gl-text-gray-700 gl-mr-3" />
         <span
           v-gl-tooltip
           class="gl-font-weight-bold text-truncate mw-xs"
@@ -104,7 +104,7 @@ export default {
       </div>
 
       <div class="gl-display-flex gl-align-items-center gl-mr-5">
-        <gl-icon name="disk" class="text-secondary gl-mr-3" />
+        <gl-icon name="disk" class="gl-text-gray-700 gl-mr-3" />
         <span data-testid="package-size" class="gl-font-weight-bold">{{ totalSize }}</span>
       </div>
     </div>

ee/app/assets/javascripts/packages/shared/components/package_tags.vue

@@ -56,10 +56,10 @@ export default {
   methods: {
     tagBadgeClass(index) {
       return {
-        'd-none': true,
-        'd-flex': this.tagCount === 1,
+        'gl-display-none': true,
+        'gl-display-flex': this.tagCount === 1,
         'd-md-flex': this.tagCount > 1,
-        'append-right-4': index !== this.tagsToRender.length - 1,
+        'gl-mr-2': index !== this.tagsToRender.length - 1,
         'gl-ml-3': !this.hideLabel && index === 0,
       };
     },
@@ -68,16 +68,16 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex align-items-center">
-    <div v-if="!hideLabel" ref="tagLabel" class="d-flex align-items-center">
-      <gl-icon name="labels" class="gl-mr-3" />
-      <strong class="js-tags-count">{{ tagsDisplay }}</strong>
+  <div class="gl-display-flex gl-align-items-center">
+    <div v-if="!hideLabel" data-testid="tagLabel" class="gl-display-flex gl-align-items-center">
+      <gl-icon name="labels" class="gl-text-gray-700 gl-mr-3" />
+      <span class="gl-font-weight-bold">{{ tagsDisplay }}</span>
     </div>
 
     <gl-badge
       v-for="(tag, index) in tagsToRender"
       :key="index"
-      ref="tagBadge"
+      data-testid="tagBadge"
       :class="tagBadgeClass(index)"
       variant="info"
       >{{ tag.name }}</gl-badge
@@ -85,11 +85,11 @@ export default {
 
     <gl-badge
       v-if="moreTagsDisplay"
-      ref="moreBadge"
       v-gl-tooltip
+      data-testid="moreBadge"
       variant="muted"
       :title="moreTagsTooltip"
-      class="d-none d-md-flex gl-ml-2"
+      class="gl-display-none d-md-flex gl-ml-2"
       ><gl-sprintf :message="__('+%{tags} more')">
         <template #tags>
           {{ moreTagsDisplay }}
@@ -99,7 +99,7 @@ export default {
 
     <gl-badge
       v-if="moreTagsDisplay && hideLabel"
-      ref="moreBadge"
+      data-testid="moreBadge"
       variant="muted"
       class="d-md-none gl-ml-2"
       >{{ tagsDisplay }}</gl-badge

ee/changelogs/unreleased/220442-fix-inconsistent-icon-colours-in-package-title.yml

+---
+title: Fixes inconsistent package title icon colors
+merge_request: 33933
+author:
+type: added

ee/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap

@@ -21,7 +21,7 @@ exports[`PackageTitle renders with tags 1`] = `
       </h1>
        
       <div
-        class="gl-display-flex gl-align-items-center text-secondary"
+        class="gl-display-flex gl-align-items-center gl-text-gray-700"
       >
         <gl-icon-stub
           class="gl-mr-3"
@@ -43,7 +43,7 @@ exports[`PackageTitle renders with tags 1`] = `
       class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="text-secondary gl-mr-3"
+        class="gl-text-gray-700 gl-mr-3"
         name="package"
         size="16"
       />
@@ -73,7 +73,7 @@ exports[`PackageTitle renders with tags 1`] = `
       class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="text-secondary gl-mr-3"
+        class="gl-text-gray-700 gl-mr-3"
         name="disk"
         size="16"
       />
@@ -110,7 +110,7 @@ exports[`PackageTitle renders without tags 1`] = `
       </h1>
        
       <div
-        class="gl-display-flex gl-align-items-center text-secondary"
+        class="gl-display-flex gl-align-items-center gl-text-gray-700"
       >
         <gl-icon-stub
           class="gl-mr-3"
@@ -132,7 +132,7 @@ exports[`PackageTitle renders without tags 1`] = `
       class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="text-secondary gl-mr-3"
+        class="gl-text-gray-700 gl-mr-3"
         name="package"
         size="16"
       />
@@ -155,7 +155,7 @@ exports[`PackageTitle renders without tags 1`] = `
       class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="text-secondary gl-mr-3"
+        class="gl-text-gray-700 gl-mr-3"
         name="disk"
         size="16"
       />

ee/spec/frontend/packages/shared/components/package_tags_spec.js

@@ -16,9 +16,9 @@ describe('PackageTags', () => {
     });
   }
 
-  const tagLabel = () => wrapper.find({ ref: 'tagLabel' });
-  const tagBadges = () => wrapper.findAll({ ref: 'tagBadge' });
-  const moreBadge = () => wrapper.find({ ref: 'moreBadge' });
+  const tagLabel = () => wrapper.find('[data-testid="tagLabel"]');
+  const tagBadges = () => wrapper.findAll('[data-testid="tagBadge"]');
+  const moreBadge = () => wrapper.find('[data-testid="moreBadge"]');
 
   afterEach(() => {
     if (wrapper) wrapper.destroy();
@@ -68,12 +68,12 @@ describe('PackageTags', () => {
   });
 
   describe('tagBadgeStyle', () => {
-    const defaultStyle = ['badge', 'badge-info', 'd-none'];
+    const defaultStyle = ['badge', 'badge-info', 'gl-display-none'];
 
     it('shows tag badge when there is only one', () => {
       createComponent([mockTags[0]]);
 
-      const expectedStyle = [...defaultStyle, 'd-flex', 'gl-ml-3'];
+      const expectedStyle = [...defaultStyle, 'gl-display-flex', 'gl-ml-3'];
 
       expect(
         tagBadges()
@@ -100,7 +100,7 @@ describe('PackageTags', () => {
       });
 
       const expectedStyleWithoutAppend = [...defaultStyle, 'd-md-flex'];
-      const expectedStyleWithAppend = [...expectedStyleWithoutAppend, 'append-right-4'];
+      const expectedStyleWithAppend = [...expectedStyleWithoutAppend, 'gl-mr-2'];
 
       const allBadges = tagBadges();