Merge branch...

Merge branch '320746-update-the-package-list-item-ui-make-action-buttons-in-list-items-secondary' into 'master'

Registry: make delete icon buttons secondary

See merge request gitlab-org/gitlab!54545

app/assets/javascripts/packages/shared/components/package_list_row.vue

@@ -123,7 +123,7 @@ export default {
       <gl-button
         data-testid="action-delete"
         icon="remove"
-        category="primary"
+        category="secondary"
         variant="danger"
         :title="s__('PackageRegistry|Remove package')"
         :aria-label="s__('PackageRegistry|Remove package')"

app/assets/javascripts/registry/explorer/components/delete_button.vue

@@ -48,6 +48,7 @@ export default {
       :title="title"
       :aria-label="title"
       variant="danger"
+      category="secondary"
       icon="remove"
       @click="$emit('delete')"
     />

changelogs/unreleased/320746-update-the-package-list-item-ui-make-action-buttons-in-list-items-.yml

+---
+title: 'Registry: make delete icon buttons secondary'
+merge_request: 54545
+author:
+type: changed

spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap

@@ -102,7 +102,7 @@ exports[`packages_list_row renders 1`] = `
       <gl-button-stub
         aria-label="Remove package"
         buttontextclasses=""
-        category="primary"
+        category="secondary"
         data-testid="action-delete"
         icon="remove"
         size="medium"

spec/frontend/packages/shared/components/package_list_row_spec.js

@@ -60,11 +60,9 @@ describe('packages_list_row', () => {
   });
 
   describe('when is is group', () => {
-    beforeEach(() => {
+    it('has a package path component', () => {
       mountComponent({ isGroup: true });
-    });
 
-    it('has a package path component', () => {
       expect(findPackagePath().exists()).toBe(true);
       expect(findPackagePath().props()).toMatchObject({ path: 'foo/bar/baz' });
     });
@@ -92,10 +90,22 @@ describe('packages_list_row', () => {
     });
   });
 
-  describe('delete event', () => {
-    beforeEach(() => mountComponent({ packageEntity: packageWithoutTags }));
+  describe('delete button', () => {
+    it('exists and has the correct props', () => {
+      mountComponent({ packageEntity: packageWithoutTags });
+
+      expect(findDeleteButton().exists()).toBe(true);
+      expect(findDeleteButton().attributes()).toMatchObject({
+        icon: 'remove',
+        category: 'secondary',
+        variant: 'danger',
+        title: 'Remove package',
+      });
+    });
 
     it('emits the packageToDelete event when the delete button is clicked', async () => {
+      mountComponent({ packageEntity: packageWithoutTags });
+
       findDeleteButton().vm.$emit('click');
 
       await wrapper.vm.$nextTick();

spec/frontend/registry/explorer/components/delete_button_spec.js

@@ -58,6 +58,7 @@ describe('delete_button', () => {
           title: 'Foo title',
           variant: 'danger',
           disabled: 'true',
+          category: 'secondary',
         });
       });