Merge branch 'nr-pajamas-migration-angle-to-chevron' into 'master'

Migrate icons from angle to chevron

See merge request gitlab-org/gitlab!89829

app/assets/javascripts/environments/components/new_environment_item.vue

@@ -83,7 +83,7 @@ export default {
   },
   computed: {
     icon() {
-      return this.visible ? 'angle-down' : 'angle-right';
+      return this.visible ? 'chevron-lg-down' : 'chevron-lg-right';
     },
     externalUrl() {
       return this.environment.externalUrl;

app/assets/javascripts/jobs/components/log/line_header.vue

@@ -30,7 +30,7 @@ export default {
   },
   computed: {
     iconName() {
-      return this.isClosed ? 'angle-right' : 'angle-down';
+      return this.isClosed ? 'chevron-lg-right' : 'chevron-lg-down';
     },
   },
   methods: {

app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_files.vue

@@ -100,7 +100,7 @@ export default {
       <template #cell(name)="{ item, toggleDetails, detailsShowing }">
         <gl-button
           v-if="hasDetails(item)"
-          :icon="detailsShowing ? 'angle-up' : 'angle-down'"
+          :icon="detailsShowing ? 'chevron-lg-up' : 'chevron-lg-down'"
           :aria-label="detailsShowing ? __('Collapse') : __('Expand')"
           category="tertiary"
           size="small"

app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue

@@ -33,7 +33,7 @@ export default {
       return this.children.length === 0;
     },
     toggleIcon() {
-      return this.isOpen ? 'angle-up' : 'angle-down';
+      return this.isOpen ? 'chevron-lg-up' : 'chevron-lg-down';
     },
     toggleLabel() {
       return this.isOpen

spec/frontend/environments/new_environment_item_spec.js

@@ -374,7 +374,7 @@ describe('~/environments/components/new_environment_item.vue', () => {
 
     it('is collapsed by default', () => {
       expect(collapse.attributes('visible')).toBeUndefined();
-      expect(icon.props('name')).toEqual('angle-right');
+      expect(icon.props('name')).toEqual('chevron-lg-right');
       expect(environmentName.classes('gl-font-weight-bold')).toBe(false);
     });
 
@@ -385,7 +385,7 @@ describe('~/environments/components/new_environment_item.vue', () => {
 
       expect(button.attributes('aria-label')).toBe(__('Collapse'));
       expect(collapse.attributes('visible')).toBe('visible');
-      expect(icon.props('name')).toEqual('angle-down');
+      expect(icon.props('name')).toEqual('chevron-lg-down');
       expect(environmentName.classes('gl-font-weight-bold')).toBe(true);
       expect(findDeployment().isVisible()).toBe(true);
     });

spec/frontend/jobs/components/log/collapsible_section_spec.js

@@ -45,7 +45,7 @@ describe('Job Log Collapsible Section', () => {
     });
 
     it('renders an icon with the closed state', () => {
-      expect(findCollapsibleLineSvg().attributes('data-testid')).toBe('angle-right-icon');
+      expect(findCollapsibleLineSvg().attributes('data-testid')).toBe('chevron-lg-right-icon');
     });
   });
 
@@ -62,7 +62,7 @@ describe('Job Log Collapsible Section', () => {
     });
 
     it('renders an icon with the open state', () => {
-      expect(findCollapsibleLineSvg().attributes('data-testid')).toBe('angle-down-icon');
+      expect(findCollapsibleLineSvg().attributes('data-testid')).toBe('chevron-lg-down-icon');
     });
 
     it('renders collapsible lines content', () => {

spec/frontend/jobs/components/log/line_header_spec.js

@@ -56,8 +56,8 @@ describe('Job Log Header Line', () => {
       createComponent({ ...data, isClosed: true });
     });
 
-    it('sets icon name to be angle-right', () => {
-      expect(wrapper.vm.iconName).toEqual('angle-right');
+    it('sets icon name to be chevron-lg-right', () => {
+      expect(wrapper.vm.iconName).toEqual('chevron-lg-right');
     });
   });
 
@@ -66,8 +66,8 @@ describe('Job Log Header Line', () => {
       createComponent({ ...data, isClosed: false });
     });
 
-    it('sets icon name to be angle-down', () => {
-      expect(wrapper.vm.iconName).toEqual('angle-down');
+    it('sets icon name to be chevron-lg-down', () => {
+      expect(wrapper.vm.iconName).toEqual('chevron-lg-down');
     });
   });
 

spec/frontend/jobs/components/log/log_spec.js

@@ -68,7 +68,9 @@ describe('Job Log', () => {
     });
 
     it('renders an icon with the open state', () => {
-      expect(findCollapsibleLine().find('[data-testid="angle-down-icon"]').exists()).toBe(true);
+      expect(findCollapsibleLine().find('[data-testid="chevron-lg-down-icon"]').exists()).toBe(
+        true,
+      );
     });
 
     describe('on click header section', () => {
@@ -146,7 +148,9 @@ describe('Job Log, infinitelyCollapsibleSections feature flag enabled', () => {
     });
 
     it('renders an icon with the open state', () => {
-      expect(findCollapsibleLine().find('[data-testid="angle-down-icon"]').exists()).toBe(true);
+      expect(findCollapsibleLine().find('[data-testid="chevron-lg-down-icon"]').exists()).toBe(
+        true,
+      );
     });
 
     describe('on click header section', () => {

spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/package_files_spec.js

@@ -206,19 +206,19 @@ describe('Package Files', () => {
       it('toggles the details row', async () => {
         createComponent();
 
-        expect(findFirstToggleDetailsButton().props('icon')).toBe('angle-down');
+        expect(findFirstToggleDetailsButton().props('icon')).toBe('chevron-lg-down');
 
         findFirstToggleDetailsButton().vm.$emit('click');
         await nextTick();
 
         expect(findFirstRowShaComponent('sha-256').exists()).toBe(true);
-        expect(findFirstToggleDetailsButton().props('icon')).toBe('angle-up');
+        expect(findFirstToggleDetailsButton().props('icon')).toBe('chevron-lg-up');
 
         findFirstToggleDetailsButton().vm.$emit('click');
         await nextTick();
 
         expect(findFirstRowShaComponent('sha-256').exists()).toBe(false);
-        expect(findFirstToggleDetailsButton().props('icon')).toBe('angle-down');
+        expect(findFirstToggleDetailsButton().props('icon')).toBe('chevron-lg-down');
       });
     });
 

spec/frontend/work_items/components/work_item_links/work_item_links_spec.js

@@ -24,7 +24,7 @@ describe('WorkItemLinks', () => {
   });
 
   it('is expanded by default', () => {
-    expect(findToggleButton().props('icon')).toBe('angle-up');
+    expect(findToggleButton().props('icon')).toBe('chevron-lg-up');
     expect(findLinksBody().exists()).toBe(true);
   });
 
@@ -32,7 +32,7 @@ describe('WorkItemLinks', () => {
     findToggleButton().vm.$emit('click');
     await nextTick();
 
-    expect(findToggleButton().props('icon')).toBe('angle-down');
+    expect(findToggleButton().props('icon')).toBe('chevron-lg-down');
     expect(findLinksBody().exists()).toBe(false);
   });