From f0a9ef0fa3e78c566bdbbe942b50d8fa5c461b5a Mon Sep 17 00:00:00 2001
From: James Rushford <jrushford@gitlab.com>
Date: Thu, 12 Dec 2024 09:40:54 +0100
Subject: [PATCH] Migrate gl-text-green-500 -> gl-text-success
---
.../issues/create_merge_request_dropdown.js | 4 ++--
app/helpers/ci/runners_helper.rb | 2 +-
.../dashboards/components/trend_indicator.vue | 2 +-
.../components/throughput_table.vue | 6 +++---
.../standards_adherence_report/base_table.vue | 4 ++--
.../fix_suggestions_sidebar.vue | 4 ++--
.../components/learn_gitlab_section_link.vue | 9 +++++++--
ee/app/assets/javascripts/password/constants.js | 2 +-
.../dast_profile_summary_card.vue | 4 ++--
.../dast_site_validation/constants.js | 2 +-
.../shared/project_security_status_chart.vue | 2 +-
.../components/policy_drawer/drawer_layout.vue | 4 ++--
ee/app/assets/javascripts/sidebar/constants.js | 2 +-
ee/spec/features/learn_gitlab_spec.rb | 2 +-
.../dashboards/components/trend_indicator_spec.js | 4 ++--
.../__snapshots__/learn_gitlab_spec.js.snap | 12 ++++++------
.../__snapshots__/drawer_layout_spec.js.snap | 4 ++--
17 files changed, 37 insertions(+), 32 deletions(-)
diff --git a/app/assets/javascripts/issues/create_merge_request_dropdown.js b/app/assets/javascripts/issues/create_merge_request_dropdown.js
index 614e076ec5a92..3675cd5a1bb3a 100644
--- a/app/assets/javascripts/issues/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/issues/create_merge_request_dropdown.js
@@ -497,7 +497,7 @@ export default class CreateMergeRequestDropdown {
removeMessage(target) {
const { input, message } = this.getTargetData(target);
const inputClasses = ['gl-field-error-outline', 'gl-field-success-outline'];
- const messageClasses = ['gl-text-subtle', 'gl-text-red-500', 'gl-text-green-500'];
+ const messageClasses = ['gl-text-subtle', 'gl-text-red-500', 'gl-text-success'];
inputClasses.forEach((cssClass) => input.classList.remove(cssClass));
messageClasses.forEach((cssClass) => message.classList.remove(cssClass));
@@ -520,7 +520,7 @@ export default class CreateMergeRequestDropdown {
this.removeMessage(target);
input.classList.add('gl-field-success-outline');
- message.classList.add('gl-text-green-500');
+ message.classList.add('gl-text-success');
message.textContent = sprintf(__('%{text} is available'), { text });
message.style.display = 'inline-block';
}
diff --git a/app/helpers/ci/runners_helper.rb b/app/helpers/ci/runners_helper.rb
index 5dca6eb1e65bb..f651d25441117 100644
--- a/app/helpers/ci/runners_helper.rb
+++ b/app/helpers/ci/runners_helper.rb
@@ -16,7 +16,7 @@ def runner_status_icon(runner, size: 16, icon_class: '')
when :online
title = s_("Runners|Runner is online; last contact was %{runner_contact} ago") % { runner_contact: time_ago_in_words(contacted_at) }
icon = 'status-active'
- span_class = 'gl-text-green-500'
+ span_class = 'gl-text-success'
when :never_contacted
title = s_("Runners|Runner has never contacted this instance")
icon = 'warning-solid'
diff --git a/ee/app/assets/javascripts/analytics/dashboards/components/trend_indicator.vue b/ee/app/assets/javascripts/analytics/dashboards/components/trend_indicator.vue
index 629034a9d9f23..b5df531067805 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/components/trend_indicator.vue
+++ b/ee/app/assets/javascripts/analytics/dashboards/components/trend_indicator.vue
@@ -27,7 +27,7 @@ export default {
return this.change > 0;
},
textColor() {
- return this.trendingUp !== this.invertColor ? 'gl-text-green-500' : 'gl-text-red-500';
+ return this.trendingUp !== this.invertColor ? 'gl-text-success' : 'gl-text-red-500';
},
iconName() {
return this.trendingUp ? 'trend-up' : 'trend-down';
diff --git a/ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_table.vue b/ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_table.vue
index b66c8892026f7..c4722d52806fc 100644
--- a/ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_table.vue
+++ b/ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_table.vue
@@ -309,10 +309,10 @@ export default {
</li>
<li
v-if="item.approvedBy.nodes.length"
- class="gl-text-green-500"
+ class="gl-text-success"
:data-testid="$options.testIds.APPROVED"
>
- <gl-icon name="approval" class="gl-mr-2" /><span>{{
+ <gl-icon name="approval" class="gl-mr-2" variant="success" /><span>{{
formatApprovalText(item.approvedBy.nodes.length)
}}</span>
</li>
@@ -349,7 +349,7 @@ export default {
<template #cell(line_changes)="{ item }">
<div :data-testid="$options.testIds.LINE_CHANGES">
- <span class="gl-font-bold gl-text-green-500">{{
+ <span class="gl-font-bold gl-text-success">{{
formatLineChangeAdditions(item.diffStatsSummary.additions)
}}</span>
<span class="gl-font-bold gl-text-red-500">{{
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/base_table.vue b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/base_table.vue
index d6a777181aebe..bf55d13445bfe 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/base_table.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/base_table.vue
@@ -297,8 +297,8 @@ export default {
<span v-if="isFailedStatus(status)" class="gl-text-red-500">
<gl-icon name="status_failed" /> {{ __('Fail') }}
</span>
- <span v-else class="gl-text-green-500">
- <gl-icon name="status_success" /> {{ __('Success') }}
+ <span v-else class="gl-text-success">
+ <gl-icon name="status_success" variant="success" /> {{ __('Success') }}
</span>
</template>
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue
index d2f98716ca443..ea0c3ee5c4058 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue
@@ -109,8 +109,8 @@ export default {
<span v-if="isFailedStatus" class="gl-font-bold gl-text-red-500">
<gl-icon name="status_failed" /> {{ __('Fail') }}
</span>
- <span v-else class="gl-font-bold gl-text-green-500">
- <gl-icon name="status_success" /> {{ __('Success') }}
+ <span v-else class="gl-font-bold gl-text-success">
+ <gl-icon name="status_success" variant="success" /> {{ __('Success') }}
</span>
<gl-link class="gl-mx-3" :href="project.webUrl"> {{ project.name }} </gl-link>
diff --git a/ee/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue b/ee/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
index b9dcff8b9f6b2..0ba34e3b7538f 100644
--- a/ee/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
+++ b/ee/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
@@ -61,8 +61,13 @@ export default {
<template>
<div class="gl-mb-2">
<div class="gl-flex gl-items-center">
- <span v-if="value.completed" class="gl-text-green-500">
- <gl-icon name="check-circle-filled" :size="16" data-testid="completed-icon" />
+ <span v-if="value.completed" class="gl-text-success">
+ <gl-icon
+ name="check-circle-filled"
+ :size="16"
+ data-testid="completed-icon"
+ variant="success"
+ />
{{ actionLabelValue('title') }}
<included-in-trial-indicator v-if="actionLabelValue('trialRequired')" />
</span>
diff --git a/ee/app/assets/javascripts/password/constants.js b/ee/app/assets/javascripts/password/constants.js
index c30ced1cbfb2e..37faf95a43348 100644
--- a/ee/app/assets/javascripts/password/constants.js
+++ b/ee/app/assets/javascripts/password/constants.js
@@ -11,7 +11,7 @@ export const INVALID_FORM_CLASS = 'show-password-complexity-errors';
export const INVALID_INPUT_CLASS = 'password-complexity-error-outline';
export const PASSWORD_REQUIREMENTS_ID = 'password-requirements';
export const RED_TEXT_CLASS = 'gl-text-red-500';
-export const GREEN_TEXT_CLASS = 'gl-text-green-500';
+export const GREEN_TEXT_CLASS = 'gl-text-success';
export const HIDDEN_ELEMENT_CLASS = 'gl-invisible';
export const I18N = {
diff --git a/ee/app/assets/javascripts/security_configuration/dast_profiles/dast_profile_selector/dast_profile_summary_card.vue b/ee/app/assets/javascripts/security_configuration/dast_profiles/dast_profile_selector/dast_profile_summary_card.vue
index f007ab92db8c6..973fe4f531a68 100644
--- a/ee/app/assets/javascripts/security_configuration/dast_profiles/dast_profile_selector/dast_profile_summary_card.vue
+++ b/ee/app/assets/javascripts/security_configuration/dast_profiles/dast_profile_selector/dast_profile_summary_card.vue
@@ -72,9 +72,9 @@ export default {
v-if="isProfileInUse"
v-gl-tooltip="$options.i18n.selectedProfileTooltip"
data-testid="in-use-label"
- class="gl-pl-2 gl-text-green-500"
+ class="gl-pl-2 gl-text-success"
>
- <gl-icon name="check-circle-filled" :size="16" />
+ <gl-icon name="check-circle-filled" :size="16" variant="success" />
{{ $options.i18n.selectedProfileLabel }}
</span>
</div>
diff --git a/ee/app/assets/javascripts/security_configuration/dast_site_validation/constants.js b/ee/app/assets/javascripts/security_configuration/dast_site_validation/constants.js
index e03f6d0cd7603..029dbce915998 100644
--- a/ee/app/assets/javascripts/security_configuration/dast_site_validation/constants.js
+++ b/ee/app/assets/javascripts/security_configuration/dast_site_validation/constants.js
@@ -57,7 +57,7 @@ export const DAST_SITE_VALIDATION_STATUS_PROPS = {
[DAST_SITE_VALIDATION_STATUS.PASSED]: {
labelText: s__('DastSiteValidation|Validated'),
name: 'status-success',
- class: 'gl-text-green-500',
+ class: 'gl-text-success',
title: s__(
'DastSiteValidation|Validation succeeded. Both active and passive scans can be run against the target site.',
),
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_status_chart.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_status_chart.vue
index 48c491e2b2ba3..1f1b96a286cb1 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_status_chart.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/project_security_status_chart.vue
@@ -35,7 +35,7 @@ export default {
[SEVERITY_GROUP_D]: 'gl-text-red-700',
[SEVERITY_GROUP_C]: 'gl-text-orange-600',
[SEVERITY_GROUP_B]: 'gl-text-orange-400',
- [SEVERITY_GROUP_A]: 'gl-text-green-500',
+ [SEVERITY_GROUP_A]: 'gl-text-success',
},
severityLevels: {
[SEVERITY_LEVEL_CRITICAL]: 'gl-text-red-800',
diff --git a/ee/app/assets/javascripts/security_orchestration/components/policy_drawer/drawer_layout.vue b/ee/app/assets/javascripts/security_orchestration/components/policy_drawer/drawer_layout.vue
index e4320329393db..7277947c429c7 100644
--- a/ee/app/assets/javascripts/security_orchestration/components/policy_drawer/drawer_layout.vue
+++ b/ee/app/assets/javascripts/security_orchestration/components/policy_drawer/drawer_layout.vue
@@ -133,8 +133,8 @@ export default {
<slot name="additional-details"></slot>
<info-row v-if="showStatus" :label="$options.i18n.statusTitle">
- <div v-if="policy.enabled" class="gl-text-green-500" data-testid="enabled-status-text">
- <gl-icon name="check-circle-filled" class="gl-mr-3" />{{ statusLabel }}
+ <div v-if="policy.enabled" class="gl-text-success" data-testid="enabled-status-text">
+ <gl-icon name="check-circle-filled" class="gl-mr-3" variant="success" />{{ statusLabel }}
</div>
<div v-else class="gl-text-subtle" data-testid="not-enabled-status-text">
{{ statusLabel }}
diff --git a/ee/app/assets/javascripts/sidebar/constants.js b/ee/app/assets/javascripts/sidebar/constants.js
index 941089667eeeb..ccaa4cf48f5a6 100644
--- a/ee/app/assets/javascripts/sidebar/constants.js
+++ b/ee/app/assets/javascripts/sidebar/constants.js
@@ -54,7 +54,7 @@ export const healthStatusIconMap = {
};
export const healthStatusColorMap = {
- [HEALTH_STATUS_ON_TRACK]: 'gl-text-green-500',
+ [HEALTH_STATUS_ON_TRACK]: 'gl-text-success',
[HEALTH_STATUS_NEEDS_ATTENTION]: 'gl-text-orange-500',
[HEALTH_STATUS_AT_RISK]: 'gl-text-red-500',
};
diff --git a/ee/spec/features/learn_gitlab_spec.rb b/ee/spec/features/learn_gitlab_spec.rb
index 93302b166ff12..80a81010d1865 100644
--- a/ee/spec/features/learn_gitlab_spec.rb
+++ b/ee/spec/features/learn_gitlab_spec.rb
@@ -137,7 +137,7 @@
def expect_completed_section(text)
expect(page).to have_no_link(text)
- expect(page).to have_css('.gl-text-green-500', text: text)
+ expect(page).to have_css('.gl-text-success', text: text)
end
def expect_correct_candidate_link(link, path)
diff --git a/ee/spec/frontend/analytics/dashboards/components/trend_indicator_spec.js b/ee/spec/frontend/analytics/dashboards/components/trend_indicator_spec.js
index 2128b78b399ae..af3efa975cc4d 100644
--- a/ee/spec/frontend/analytics/dashboards/components/trend_indicator_spec.js
+++ b/ee/spec/frontend/analytics/dashboards/components/trend_indicator_spec.js
@@ -10,7 +10,7 @@ describe('Analytics trend indicator', () => {
it('renders a positive change with green text', () => {
createComponent({ change: 100 });
- expect(wrapper.classes('gl-text-green-500')).toBe(true);
+ expect(wrapper.classes('gl-text-success')).toBe(true);
});
it('renders a negative change with red text', () => {
@@ -25,6 +25,6 @@ describe('Analytics trend indicator', () => {
it('renders a negative change with green text when invertColor = true', () => {
createComponent({ change: -100, invertColor: true });
- expect(wrapper.classes('gl-text-green-500')).toBe(true);
+ expect(wrapper.classes('gl-text-success')).toBe(true);
});
});
diff --git a/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap b/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
index ca54b4876a58f..59c072a252a4e 100644
--- a/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
+++ b/ee/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap
@@ -94,11 +94,11 @@ exports[`Learn GitLab Initial rendering concerns renders correctly 1`] = `
class="gl-flex gl-items-center"
>
<span
- class="gl-text-green-500"
+ class="gl-text-success"
>
<svg
aria-hidden="true"
- class="gl-fill-current gl-icon s16"
+ class="gl-fill-icon-success gl-icon s16"
data-testid="completed-icon"
role="img"
>
@@ -117,11 +117,11 @@ exports[`Learn GitLab Initial rendering concerns renders correctly 1`] = `
class="gl-flex gl-items-center"
>
<span
- class="gl-text-green-500"
+ class="gl-text-success"
>
<svg
aria-hidden="true"
- class="gl-fill-current gl-icon s16"
+ class="gl-fill-icon-success gl-icon s16"
data-testid="completed-icon"
role="img"
>
@@ -182,11 +182,11 @@ exports[`Learn GitLab Initial rendering concerns renders correctly 1`] = `
class="gl-flex gl-items-center"
>
<span
- class="gl-text-green-500"
+ class="gl-text-success"
>
<svg
aria-hidden="true"
- class="gl-fill-current gl-icon s16"
+ class="gl-fill-icon-success gl-icon s16"
data-testid="completed-icon"
role="img"
>
diff --git a/ee/spec/frontend/security_orchestration/components/policy_drawer/__snapshots__/drawer_layout_spec.js.snap b/ee/spec/frontend/security_orchestration/components/policy_drawer/__snapshots__/drawer_layout_spec.js.snap
index 8c147b45944e7..e01f8e50c2a04 100644
--- a/ee/spec/frontend/security_orchestration/components/policy_drawer/__snapshots__/drawer_layout_spec.js.snap
+++ b/ee/spec/frontend/security_orchestration/components/policy_drawer/__snapshots__/drawer_layout_spec.js.snap
@@ -40,14 +40,14 @@ exports[`DrawerLayout component enabled policy matches the snapshots 1`] = `
label="Status"
>
<div
- class="gl-text-green-500"
+ class="gl-text-success"
data-testid="enabled-status-text"
>
<gl-icon-stub
class="gl-mr-3"
name="check-circle-filled"
size="16"
- variant="current"
+ variant="success"
/>
Enabled
</div>
--
GitLab