Change clear icon to remove for PA variables

app/assets/javascripts/ci/pipeline_new/components/pipeline_new_form.vue

@@ -12,6 +12,7 @@ import {
   GlSprintf,
   GlLoadingIcon,
 } from '@gitlab/ui';
+import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import { uniqueId } from 'lodash';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { fetchPolicies } from '~/lib/graphql';
@@ -190,6 +191,12 @@ export default {
     },
   },
   computed: {
+    isMobile() {
+      return ['sm', 'xs'].includes(GlBreakpointInstance.getBreakpointSize());
+    },
+    removeButtonCategory() {
+      return this.isMobile ? 'secondary' : 'tertiary';
+    },
     isFetchingCiConfigVariables() {
       return this.predefinedVariables === null;
     },
@@ -509,18 +516,17 @@ export default {
               v-if="canRemove(index)"
               class="gl-mb-3 md:gl-ml-3"
               data-testid="remove-ci-variable-row"
-              variant="danger"
-              category="secondary"
+              :category="removeButtonCategory"
               :aria-label="$options.i18n.removeVariableLabel"
               @click="removeVariable(index)"
             >
-              <gl-icon class="!gl-mr-0 gl-hidden md:gl-block" name="clear" />
-              <span class="md:gl-hidden">{{ $options.i18n.removeVariableLabel }}</span>
+              <gl-icon class="!gl-mr-0 !gl-text-gray-500" name="remove" />
+              <span class="gl-ml-2 md:gl-hidden">{{ $options.i18n.removeVariableLabel }}</span>
             </gl-button>
             <gl-button
               v-else
               class="gl-invisible gl-mb-3 gl-hidden md:gl-ml-3 md:gl-block"
-              icon="clear"
+              icon="remove"
               :aria-label="$options.i18n.removeVariableLabel"
             />
           </template>

spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js

 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlForm, GlSprintf, GlLoadingIcon } from '@gitlab/ui';
+import { GlForm, GlSprintf, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import CreditCardValidationRequiredAlert from 'ee_component/billings/components/cc_validation_required_alert.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -166,6 +166,12 @@ describe('Pipeline New Form', () => {
       expect(findRemoveIcons()).toHaveLength(2);
     });
 
+    it('display remove button with specific properties', () => {
+      expect(findRemoveIcons().at(0).props('category')).toBe('tertiary');
+      expect(findRemoveIcons().at(0).props('variant')).toBe('default');
+      expect(findRemoveIcons().at(0).findComponent(GlIcon).props('name')).toBe('remove');
+    });
+
     it('removes ci variable row on remove icon button click', async () => {
       findRemoveIcons().at(1).vm.$emit('click');