diff --git a/app/assets/javascripts/admin/abuse_reports/components/abuse_category.vue b/app/assets/javascripts/admin/abuse_reports/components/abuse_category.vue
index f05f96d63027fafb6cd6612e16096fd559cf3734..3fc4c576e8e93cda44bff77d15750e92eff74f2c 100644
--- a/app/assets/javascripts/admin/abuse_reports/components/abuse_category.vue
+++ b/app/assets/javascripts/admin/abuse_reports/components/abuse_category.vue
@@ -28,6 +28,6 @@ export default {
:background-color="categoryObject.backgroundColor"
:title="categoryObject.title"
:target="null"
- :class="`gl-text-${categoryObject.color}`"
+ :class="categoryObject.textColor"
/>
</template>
diff --git a/app/assets/javascripts/admin/abuse_reports/constants.js b/app/assets/javascripts/admin/abuse_reports/constants.js
index 8b14745543e81105f5a31d9c8816a8f7ccaedbe0..297dc2df6da9385fe5bfbd503237656447720f41 100644
--- a/app/assets/javascripts/admin/abuse_reports/constants.js
+++ b/app/assets/javascripts/admin/abuse_reports/constants.js
@@ -90,42 +90,42 @@ export const FILTERED_SEARCH_TOKENS = [
export const ABUSE_CATEGORIES = {
spam: {
backgroundColor: '#f5d9a8',
- color: 'orange-700',
+ textColor: 'gl-text-orange-700',
title: s__('AbuseReport|Spam'),
},
offensive: {
backgroundColor: '#e1d8f9',
- color: 'purple-700',
+ textColor: 'gl-text-purple-700',
title: s__('AbuseReport|Offensive or Abusive'),
},
phishing: {
backgroundColor: '#7c7ccc',
- color: 'indigo-800',
+ textColor: 'gl-text-indigo-800',
title: s__('AbuseReport|Phishing'),
},
crypto: {
backgroundColor: '#fdd4cd',
- color: 'red-700',
+ textColor: 'gl-text-red-700',
title: s__('AbuseReport|Crypto Mining'),
},
credentials: {
backgroundColor: '#cbe2f9',
- color: 'blue-700',
+ textColor: 'gl-text-blue-700',
title: s__('AbuseReport|Personal information or credentials'),
},
copyright: {
backgroundColor: '#c3e6cd',
- color: 'green-700',
+ textColor: 'gl-text-green-700',
title: s__('AbuseReport|Copyright or trademark violation'),
},
malware: {
backgroundColor: '#fdd4cd',
- color: 'red-700',
+ textColor: 'gl-text-red-700',
title: s__('AbuseReport|Malware'),
},
other: {
backgroundColor: '#dcdcde',
- color: 'gray-700',
+ textColor: 'gl-text-gray-700',
title: s__('AbuseReport|Other'),
},
};
diff --git a/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue b/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
index d0675ba96fdbdecd9475a4e2e3a7b84fe6ca110f..24a9686e2d4a6ecebd794176fa6669cdfc4835eb 100644
--- a/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
+++ b/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
@@ -1,7 +1,6 @@
<script>
import { GlAvatar, GlAvatarLink, GlBadge, GlButton, GlTable, GlTooltipDirective } from '@gitlab/ui';
import { __, s__ } from '~/locale';
-import { thWidthPercent } from '~/lib/utils/table_utility';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
@@ -44,32 +43,32 @@ export default {
{
key: 'token',
label: s__('Pipelines|Token'),
- thClass: thWidthPercent(60),
+ thClass: 'gl-w-60p',
tdClass: 'gl-vertical-align-middle!',
},
{
key: 'description',
label: s__('Pipelines|Description'),
- thClass: thWidthPercent(20),
+ thClass: 'gl-w-20p',
tdClass: 'gl-vertical-align-middle!',
},
{
key: 'owner',
label: s__('Pipelines|Owner'),
- thClass: thWidthPercent(5),
+ thClass: 'gl-w-5p',
tdClass: 'gl-vertical-align-middle!',
},
{
key: 'lastUsed',
label: s__('Pipelines|Last Used'),
- thClass: thWidthPercent(10),
+ thClass: 'gl-w-10p',
tdClass: 'gl-vertical-align-middle!',
},
{
key: 'actions',
label: __('Actions'),
tdClass: 'gl-text-right gl-white-space-nowrap',
- thClass: `gl-text-right ${thWidthPercent(5)}`,
+ thClass: `gl-text-right gl-w-5p`,
},
],
computed: {
diff --git a/app/assets/javascripts/lib/utils/table_utility.js b/app/assets/javascripts/lib/utils/table_utility.js
index f5a814c8fdc2a78d4f846b2005ce3201ae99f76f..3d69f061e32be3eca535dd267b3aff373085e8ee 100644
--- a/app/assets/javascripts/lib/utils/table_utility.js
+++ b/app/assets/javascripts/lib/utils/table_utility.js
@@ -1,14 +1,5 @@
import { convertToSnakeCase, convertToCamelCase } from '~/lib/utils/text_utility';
-/**
- * Generates the table header class for width to be used for GlTable fields.
- *
- * @param {Number} width - The column width as a percentage. Only accepts values
- * as defined in https://gitlab.com/gitlab-org/gitlab-ui/blob/main/src/scss/utility-mixins/sizing.scss
- * @returns {String} The class to be used in GlTable fields object.
- */
-export const thWidthPercent = (width) => `gl-w-${width}p`;
-
/**
* Converts a GlTable sort-changed event object into string format.
* This string can be used as a sort argument on GraphQL queries.
diff --git a/app/assets/javascripts/usage_quotas/storage/project/components/project_storage_detail.vue b/app/assets/javascripts/usage_quotas/storage/project/components/project_storage_detail.vue
index 211933e571b9f6da1b44e4762c7490608ea46531..9d94da40c85d323b4e70d7a0ddb544e4d46e0ba9 100644
--- a/app/assets/javascripts/usage_quotas/storage/project/components/project_storage_detail.vue
+++ b/app/assets/javascripts/usage_quotas/storage/project/components/project_storage_detail.vue
@@ -1,7 +1,6 @@
<script>
import { GlIcon, GlLink, GlSprintf, GlTableLite, GlPopover } from '@gitlab/ui';
import NumberToHumanSize from '~/vue_shared/components/number_to_human_size/number_to_human_size.vue';
-import { thWidthPercent } from '~/lib/utils/table_utility';
import { sprintf } from '~/locale';
import {
HELP_LINK_ARIA_LABEL,
@@ -38,12 +37,12 @@ export default {
{
key: 'storageType',
label: PROJECT_TABLE_LABEL_STORAGE_TYPE,
- thClass: thWidthPercent(90),
+ thClass: 'gl-w-90p',
},
{
key: 'value',
label: PROJECT_TABLE_LABEL_USAGE,
- thClass: thWidthPercent(10),
+ thClass: 'gl-w-10p',
},
],
};
diff --git a/app/assets/javascripts/vue_shared/components/users_table/users_table.vue b/app/assets/javascripts/vue_shared/components/users_table/users_table.vue
index be164bb07a30cd77e319697b23ef97cc44a66ec4..15a59900aa7da5e5cb50c4eb8c1c4c012fcc0798 100644
--- a/app/assets/javascripts/vue_shared/components/users_table/users_table.vue
+++ b/app/assets/javascripts/vue_shared/components/users_table/users_table.vue
@@ -1,6 +1,5 @@
<script>
import { GlSkeletonLoader, GlTable } from '@gitlab/ui';
-import { thWidthPercent } from '~/lib/utils/table_utility';
import { __ } from '~/locale';
import UserDate from '~/vue_shared/components/user_date.vue';
import UserAvatar from './user_avatar.vue';
@@ -36,32 +35,32 @@ export default {
{
key: 'name',
label: __('Name'),
- thClass: thWidthPercent(40),
+ thClass: 'gl-w-40p',
},
{
key: 'projectsCount',
label: __('Projects'),
- thClass: thWidthPercent(10),
+ thClass: 'gl-w-10p',
},
{
key: 'groupCount',
label: __('Groups'),
- thClass: thWidthPercent(10),
+ thClass: 'gl-w-10p',
},
{
key: 'createdAt',
label: __('Created on'),
- thClass: thWidthPercent(15),
+ thClass: 'gl-w-15p',
},
{
key: 'lastActivityOn',
label: __('Last activity'),
- thClass: thWidthPercent(15),
+ thClass: 'gl-w-15p',
},
{
key: 'settings',
label: '',
- thClass: thWidthPercent(10),
+ thClass: 'gl-w-10p',
},
],
};
diff --git a/ee/app/assets/javascripts/analytics/dashboards/utils.js b/ee/app/assets/javascripts/analytics/dashboards/utils.js
index 42c60ea21f88c12de99dd7ba25c98a6645bf38ba..6d9f0674ea183123af77381c3bbf52c26f4fde94 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/utils.js
+++ b/ee/app/assets/javascripts/analytics/dashboards/utils.js
@@ -8,7 +8,6 @@ import {
nSecondsBefore,
nDaysBefore,
} from '~/lib/utils/datetime_utility';
-import { thWidthPercent } from '~/lib/utils/table_utility';
import { days, percentHundred } from '~/lib/utils/unit_format';
import {
TABLE_METRICS,
@@ -247,7 +246,7 @@ export const generateDateRanges = (now) => {
label: s__('DORA4Metrics|Month to date'),
start: thisMonthStart,
end: now,
- thClass: thWidthPercent(20),
+ thClass: 'gl-w-20p',
});
const lastMonthStart = nMonthsBefore(thisMonthStart, 1);
@@ -257,7 +256,7 @@ export const generateDateRanges = (now) => {
label: monthInWords(lastMonthStart),
start: lastMonthStart,
end: lastMonthEnd,
- thClass: thWidthPercent(20),
+ thClass: 'gl-w-20p',
});
const twoMonthsAgoStart = nMonthsBefore(lastMonthStart, 1);
@@ -267,7 +266,7 @@ export const generateDateRanges = (now) => {
label: monthInWords(twoMonthsAgoStart),
start: twoMonthsAgoStart,
end: twoMonthsAgoEnd,
- thClass: thWidthPercent(20),
+ thClass: 'gl-w-20p',
});
const threeMonthsAgoStart = nMonthsBefore(twoMonthsAgoStart, 1);
@@ -306,7 +305,7 @@ export const generateDashboardTableFields = (now) => {
{
key: 'metric',
label: __('Metric'),
- thClass: thWidthPercent(25),
+ thClass: 'gl-w-25p',
},
...generateDateRanges(now).slice(0, -1),
{
@@ -314,7 +313,7 @@ export const generateDashboardTableFields = (now) => {
label: s__('DORA4Metrics|Past 6 Months'),
start: nMonthsBefore(now, 6),
end: now,
- thClass: thWidthPercent(15),
+ thClass: 'gl-w-15p',
tdClass: 'gl-py-2!',
},
];
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/violations_report/report.vue b/ee/app/assets/javascripts/compliance_dashboard/components/violations_report/report.vue
index a509752a3c5354cee456cee9cf76a1c806a9e1e1..a5b29bbef83358ee8680c5f2769e4e86e47c83cc 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/violations_report/report.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/violations_report/report.vue
@@ -2,7 +2,7 @@
import { GlAlert, GlButton, GlKeysetPagination, GlLoadingIcon, GlTable } from '@gitlab/ui';
import * as Sentry from '~/sentry/sentry_browser_wrapper';
import { __, s__ } from '~/locale';
-import { sortObjectToString, sortStringToObject, thWidthPercent } from '~/lib/utils/table_utility';
+import { sortObjectToString, sortStringToObject } from '~/lib/utils/table_utility';
import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
import UrlSync from '~/vue_shared/components/url_sync.vue';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
@@ -173,28 +173,28 @@ export default {
{
key: 'severityLevel',
label: __('Severity'),
- thClass: `gl-p-5! ${thWidthPercent(10)}`,
+ thClass: `gl-p-5! gl-w-10p`,
tdClass: 'gl-vertical-align-middle!',
sortable: true,
},
{
key: 'violationReason',
label: __('Violation'),
- thClass: `gl-p-5! ${thWidthPercent(15)}`,
+ thClass: `gl-p-5! gl-w-15p`,
tdClass: 'gl-vertical-align-middle!',
sortable: true,
},
{
key: 'mergeRequestTitle',
label: __('Merge request'),
- thClass: `gl-p-5! ${thWidthPercent(40)}`,
+ thClass: `gl-p-5! gl-w-40p`,
tdClass: 'gl-vertical-align-middle!',
sortable: true,
},
{
key: 'mergedAt',
label: __('Date merged'),
- thClass: `gl-p-5! ${thWidthPercent(20)}`,
+ thClass: `gl-p-5! gl-w-20p`,
tdClass: 'gl-vertical-align-middle!',
sortable: true,
},
diff --git a/ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_table.vue b/ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_table.vue
index 878e87e978b999a4b27a6bebee9dd2a61cf91dba..996398efcf585e06efcacc62b25c963cf256b520 100644
--- a/ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_table.vue
+++ b/ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_table.vue
@@ -6,7 +6,6 @@ import Target from 'ee/security_configuration/corpus_management/components/colum
import { s__ } from '~/locale';
import UserDate from '~/vue_shared/components/user_date.vue';
import { ISO_SHORT_FORMAT } from '~/vue_shared/constants';
-import { thWidthPercent } from '~/lib/utils/table_utility';
export default {
components: {
@@ -27,29 +26,29 @@ export default {
{
key: 'name',
label: s__('CorpusManagement|Corpus name'),
- thClass: thWidthPercent(40),
+ thClass: 'gl-w-40p',
tdClass: 'gl-text-truncate gl-max-w-15',
},
{
key: 'target',
label: s__('CorpusManagement|Target'),
- thClass: thWidthPercent(20),
+ thClass: 'gl-w-20p',
tdClass: 'gl-word-break-word',
},
{
key: 'lastUpdated',
label: s__('CorpusManagement|Last updated'),
- thClass: thWidthPercent(15),
+ thClass: 'gl-w-15p',
},
{
key: 'lastUsed',
label: s__('CorpusManagement|Last used'),
- thClass: thWidthPercent(15),
+ thClass: 'gl-w-15p',
},
{
key: 'actions',
label: s__('CorpusManagement|Actions'),
- thClass: thWidthPercent(10),
+ thClass: 'gl-w-10p',
},
],
i18n: {
diff --git a/ee/app/assets/javascripts/status_checks/components/status_checks.vue b/ee/app/assets/javascripts/status_checks/components/status_checks.vue
index 5bdc073f3a1e08e630e9bbbb9a02d3c6673fa638..7427459cfb313834f67075864d4eae9b71a01d91 100644
--- a/ee/app/assets/javascripts/status_checks/components/status_checks.vue
+++ b/ee/app/assets/javascripts/status_checks/components/status_checks.vue
@@ -2,7 +2,6 @@
import { GlCard, GlTable, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
// eslint-disable-next-line no-restricted-imports
import { mapState } from 'vuex';
-import { thWidthPercent } from '~/lib/utils/table_utility';
import { helpPagePath } from '~/helpers/help_page_helper';
import { __, s__ } from '~/locale';
import { EMPTY_STATUS_CHECK } from '../constants';
@@ -60,17 +59,17 @@ export default {
{
key: 'name',
label: i18n.nameHeader,
- thClass: thWidthPercent(20),
+ thClass: 'gl-w-20p',
},
{
key: 'externalUrl',
label: i18n.apiHeader,
- thClass: thWidthPercent(40),
+ thClass: 'gl-w-40p',
},
{
key: 'protectedBranches',
label: i18n.branchHeader,
- thClass: thWidthPercent(20),
+ thClass: 'gl-w-20p',
},
{
key: 'actions',
diff --git a/ee/app/assets/javascripts/tracing/details/tracing_spans_chart.vue b/ee/app/assets/javascripts/tracing/details/tracing_spans_chart.vue
index 5a2e4a9da3d21c975c8c7eca0847db7a60bf5203..676fa20e0e1007c97170e88c733eccd58dd58f4b 100644
--- a/ee/app/assets/javascripts/tracing/details/tracing_spans_chart.vue
+++ b/ee/app/assets/javascripts/tracing/details/tracing_spans_chart.vue
@@ -172,7 +172,7 @@ export default {
<div
data-testid="span-duration-bar"
:style="durationBarStyle(span)"
- :class="`gl-bg-data-viz-${serviceToColor[span.service]}`"
+ :class="serviceToColor[span.service]"
></div>
<span
data-testid="span-duration-value"
diff --git a/ee/app/assets/javascripts/tracing/trace_utils.js b/ee/app/assets/javascripts/tracing/trace_utils.js
index 38fa19a9c9e5f0392456b0497828ef0aa07091b0..d3d04075ca11c3c9c6421bc42f71a4b56651f4cc 100644
--- a/ee/app/assets/javascripts/tracing/trace_utils.js
+++ b/ee/app/assets/javascripts/tracing/trace_utils.js
@@ -2,8 +2,38 @@ import { s__, sprintf } from '~/locale';
import { periodToDate } from '~/observability/utils';
// See https://design.gitlab.com/data-visualization/color/#categorical-data
-const SPAN_COLOR_WEIGHT = ['500', '600', '700', '800', '900', '950'];
-const SPAN_COLOR_PALETTE = ['blue', 'orange', 'aqua', 'green', 'magenta'];
+const PALETTE = [
+ 'gl-bg-data-viz-blue-500',
+ 'gl-bg-data-viz-orange-500',
+ 'gl-bg-data-viz-aqua-500',
+ 'gl-bg-data-viz-green-500',
+ 'gl-bg-data-viz-magenta-500',
+ 'gl-bg-data-viz-blue-600',
+ 'gl-bg-data-viz-orange-600',
+ 'gl-bg-data-viz-aqua-600',
+ 'gl-bg-data-viz-green-600',
+ 'gl-bg-data-viz-magenta-600',
+ 'gl-bg-data-viz-blue-700',
+ 'gl-bg-data-viz-orange-700',
+ 'gl-bg-data-viz-aqua-700',
+ 'gl-bg-data-viz-green-700',
+ 'gl-bg-data-viz-magenta-700',
+ 'gl-bg-data-viz-blue-800',
+ 'gl-bg-data-viz-orange-800',
+ 'gl-bg-data-viz-aqua-800',
+ 'gl-bg-data-viz-green-800',
+ 'gl-bg-data-viz-magenta-800',
+ 'gl-bg-data-viz-blue-900',
+ 'gl-bg-data-viz-orange-900',
+ 'gl-bg-data-viz-aqua-900',
+ 'gl-bg-data-viz-green-900',
+ 'gl-bg-data-viz-magenta-900',
+ 'gl-bg-data-viz-blue-950',
+ 'gl-bg-data-viz-orange-950',
+ 'gl-bg-data-viz-aqua-950',
+ 'gl-bg-data-viz-green-950',
+ 'gl-bg-data-viz-magenta-950',
+];
export function durationNanoToMs(durationNano) {
return durationNano / 1000000;
@@ -44,24 +74,12 @@ export function formatTraceDuration(durationNano) {
return formatDurationMs(durationNanoToMs(durationNano));
}
-function createPalette() {
- const palette = [];
- SPAN_COLOR_WEIGHT.forEach((w) => {
- SPAN_COLOR_PALETTE.forEach((c) => {
- palette.push(`${c}-${w}`);
- });
- });
- return palette;
-}
-
export function assignColorToServices(trace) {
const services = Array.from(new Set(trace.spans.map((s) => s.service_name)));
- const palette = createPalette();
-
const serviceToColor = {};
services.forEach((s, i) => {
- serviceToColor[s] = palette[i % palette.length];
+ serviceToColor[s] = PALETTE[i % PALETTE.length];
});
return serviceToColor;
diff --git a/ee/app/assets/javascripts/usage_quotas/code_suggestions/constants.js b/ee/app/assets/javascripts/usage_quotas/code_suggestions/constants.js
index 70917f84f3e7a0334fa525c889f29a895945bde8..a8171c75ef959648b53bbfc7bef37cdbd5aa2443 100644
--- a/ee/app/assets/javascripts/usage_quotas/code_suggestions/constants.js
+++ b/ee/app/assets/javascripts/usage_quotas/code_suggestions/constants.js
@@ -1,6 +1,5 @@
import { PROMO_URL } from 'jh_else_ce/lib/utils/url_utility';
import { __, s__ } from '~/locale';
-import { thWidthPercent } from '~/lib/utils/table_utility';
export const ADD_ON_CODE_SUGGESTIONS = 'CODE_SUGGESTIONS';
export const codeSuggestionsLearnMoreLink = `${PROMO_URL}/solutions/code-suggestions/`;
@@ -10,50 +9,50 @@ export const addOnEligibleUserListTableFields = {
codeSuggestionsAddon: {
key: 'codeSuggestionsAddon',
label: s__('CodeSuggestions|GitLab Duo Pro add-on'),
- thClass: thWidthPercent(25),
+ thClass: 'gl-w-25p',
tdClass: 'gl-vertical-align-middle!',
},
email: {
key: 'email',
label: __('Email'),
- thClass: thWidthPercent(15),
+ thClass: 'gl-w-15p',
tdClass: 'gl-vertical-align-middle!',
},
emailWide: {
key: 'email',
label: __('Email'),
- thClass: thWidthPercent(20),
+ thClass: 'gl-w-20p',
tdClass: 'gl-vertical-align-middle!',
},
lastActivityTime: {
key: 'lastActivityTime',
label: __('Last GitLab activity'),
- thClass: thWidthPercent(15),
+ thClass: 'gl-w-15p',
tdClass: 'gl-vertical-align-middle!',
},
lastActivityTimeWide: {
key: 'lastActivityTime',
label: __('Last GitLab activity'),
- thClass: thWidthPercent(25),
+ thClass: 'gl-w-25p',
tdClass: 'gl-vertical-align-middle!',
},
maxRole: {
key: 'maxRole',
label: __('Max role'),
- thClass: thWidthPercent(15),
+ thClass: 'gl-w-15p',
tdClass: 'gl-vertical-align-middle!',
},
user: {
key: 'user',
label: __('User'),
- thClass: `gl-pl-2! ${thWidthPercent(25)}`,
+ thClass: `gl-pl-2! gl-w-25p`,
tdClass: 'gl-vertical-align-middle! gl-pl-2!',
},
checkbox: {
key: 'checkbox',
label: '',
headerTitle: __('Checkbox'),
- thClass: __(`${thWidthPercent(5)} gl-pl-2!`),
+ thClass: 'gl-w-5p gl-pl-2!',
tdClass: 'gl-vertical-align-middle! gl-pl-2!',
},
};
diff --git a/ee/app/assets/javascripts/usage_quotas/seats/constants.js b/ee/app/assets/javascripts/usage_quotas/seats/constants.js
index 55713470cca536f73b44f813b3106b7f815fe5c7..f9fe478ad5d06604ea31b319b24704b8127ce0f3 100644
--- a/ee/app/assets/javascripts/usage_quotas/seats/constants.js
+++ b/ee/app/assets/javascripts/usage_quotas/seats/constants.js
@@ -1,4 +1,3 @@
-import { thWidthPercent } from '~/lib/utils/table_utility';
import { __, s__ } from '~/locale';
import { helpPagePath } from '~/helpers/help_page_helper';
@@ -18,32 +17,31 @@ export const FIELDS = [
{
key: 'user',
label: __('User'),
- // eslint-disable-next-line @gitlab/require-i18n-strings
- thClass: `${thWidthPercent(30)} gl-pl-2!`,
+ thClass: `gl-w-30p gl-pl-2!`,
tdClass: 'gl-vertical-align-middle! gl-pl-2!',
},
{
key: 'email',
label: __('Email'),
- thClass: thWidthPercent(20),
+ thClass: 'gl-w-20p',
tdClass: 'gl-vertical-align-middle!',
},
{
key: 'lastActivityTime',
label: __('Last GitLab activity'),
- thClass: thWidthPercent(20),
+ thClass: 'gl-w-20p',
tdClass: 'gl-vertical-align-middle!',
},
{
key: 'lastLoginAt',
label: __('Last login'),
- thClass: thWidthPercent(20),
+ thClass: 'gl-w-20p',
tdClass: 'gl-vertical-align-middle!',
},
{
key: 'actions',
label: '',
- thClass: thWidthPercent(10),
+ thClass: 'gl-w-10p',
tdClass: 'gl-vertical-align-middle! text-right',
},
];
diff --git a/ee/spec/frontend/tracing/details/tracing_span_chart_spec.js b/ee/spec/frontend/tracing/details/tracing_span_chart_spec.js
index 29b86be4b0028857fdeb8896c2bc83ab87a760b3..7a812cbb9be9bd41ffb4610b249487c2ef907311 100644
--- a/ee/spec/frontend/tracing/details/tracing_span_chart_spec.js
+++ b/ee/spec/frontend/tracing/details/tracing_span_chart_spec.js
@@ -36,8 +36,8 @@ describe('TracingSpansChart', () => {
spans: mockSpans,
traceDurationMs: 300,
serviceToColor: {
- 'service-1': 'blue-500',
- 'service-2': 'orange-500',
+ 'service-1': 'gl-bg-data-viz-blue-500',
+ 'service-2': 'gl-bg-data-viz-orange-500',
},
};
diff --git a/ee/spec/frontend/tracing/trace_utils_spec.js b/ee/spec/frontend/tracing/trace_utils_spec.js
index df7e4873f8849644c7c20f70e1d755f07a119f0b..f338bff5f44a350dc0ed2f662d2f6e8cfede91c7 100644
--- a/ee/spec/frontend/tracing/trace_utils_spec.js
+++ b/ee/spec/frontend/tracing/trace_utils_spec.js
@@ -61,38 +61,38 @@ describe('trace_utils', () => {
}));
expect(assignColorToServices(trace)).toEqual({
- 'service-0': 'blue-500',
- 'service-1': 'orange-500',
- 'service-2': 'aqua-500',
- 'service-3': 'green-500',
- 'service-4': 'magenta-500',
- 'service-5': 'blue-600',
- 'service-6': 'orange-600',
- 'service-7': 'aqua-600',
- 'service-8': 'green-600',
- 'service-9': 'magenta-600',
- 'service-10': 'blue-700',
- 'service-11': 'orange-700',
- 'service-12': 'aqua-700',
- 'service-13': 'green-700',
- 'service-14': 'magenta-700',
- 'service-15': 'blue-800',
- 'service-16': 'orange-800',
- 'service-17': 'aqua-800',
- 'service-18': 'green-800',
- 'service-19': 'magenta-800',
- 'service-20': 'blue-900',
- 'service-21': 'orange-900',
- 'service-22': 'aqua-900',
- 'service-23': 'green-900',
- 'service-24': 'magenta-900',
- 'service-25': 'blue-950',
- 'service-26': 'orange-950',
- 'service-27': 'aqua-950',
- 'service-28': 'green-950',
- 'service-29': 'magenta-950',
+ 'service-0': 'gl-bg-data-viz-blue-500',
+ 'service-1': 'gl-bg-data-viz-orange-500',
+ 'service-2': 'gl-bg-data-viz-aqua-500',
+ 'service-3': 'gl-bg-data-viz-green-500',
+ 'service-4': 'gl-bg-data-viz-magenta-500',
+ 'service-5': 'gl-bg-data-viz-blue-600',
+ 'service-6': 'gl-bg-data-viz-orange-600',
+ 'service-7': 'gl-bg-data-viz-aqua-600',
+ 'service-8': 'gl-bg-data-viz-green-600',
+ 'service-9': 'gl-bg-data-viz-magenta-600',
+ 'service-10': 'gl-bg-data-viz-blue-700',
+ 'service-11': 'gl-bg-data-viz-orange-700',
+ 'service-12': 'gl-bg-data-viz-aqua-700',
+ 'service-13': 'gl-bg-data-viz-green-700',
+ 'service-14': 'gl-bg-data-viz-magenta-700',
+ 'service-15': 'gl-bg-data-viz-blue-800',
+ 'service-16': 'gl-bg-data-viz-orange-800',
+ 'service-17': 'gl-bg-data-viz-aqua-800',
+ 'service-18': 'gl-bg-data-viz-green-800',
+ 'service-19': 'gl-bg-data-viz-magenta-800',
+ 'service-20': 'gl-bg-data-viz-blue-900',
+ 'service-21': 'gl-bg-data-viz-orange-900',
+ 'service-22': 'gl-bg-data-viz-aqua-900',
+ 'service-23': 'gl-bg-data-viz-green-900',
+ 'service-24': 'gl-bg-data-viz-magenta-900',
+ 'service-25': 'gl-bg-data-viz-blue-950',
+ 'service-26': 'gl-bg-data-viz-orange-950',
+ 'service-27': 'gl-bg-data-viz-aqua-950',
+ 'service-28': 'gl-bg-data-viz-green-950',
+ 'service-29': 'gl-bg-data-viz-magenta-950',
// restart pallete
- 'service-30': 'blue-500',
+ 'service-30': 'gl-bg-data-viz-blue-500',
});
});
});
diff --git a/spec/frontend/admin/abuse_reports/components/abuse_category_spec.js b/spec/frontend/admin/abuse_reports/components/abuse_category_spec.js
index 456df3b18576ef345896e452f340ee9530a9f054..7f80026b10dc2418e7e61431e25b1007b34ed8ee 100644
--- a/spec/frontend/admin/abuse_reports/components/abuse_category_spec.js
+++ b/spec/frontend/admin/abuse_reports/components/abuse_category_spec.js
@@ -38,6 +38,6 @@ describe('AbuseCategory', () => {
});
it('renders the label with the right text color for the category', () => {
- expect(findLabel().attributes('class')).toBe(`gl-text-${category.color}`);
+ expect(findLabel().attributes('class')).toBe('gl-text-orange-700');
});
});
diff --git a/spec/frontend/lib/utils/table_utility_spec.js b/spec/frontend/lib/utils/table_utility_spec.js
index d6544fa83271e6d2ef34ba87e2f1c89f116d6ce5..304a7a53d90e8a578b65a8bf0e73aa3f59c2125e 100644
--- a/spec/frontend/lib/utils/table_utility_spec.js
+++ b/spec/frontend/lib/utils/table_utility_spec.js
@@ -1,13 +1,6 @@
import * as tableUtils from '~/lib/utils/table_utility';
describe('table_utility', () => {
- describe('thWidthPercent', () => {
- it('returns the width class including default table header classes', () => {
- const width = 50;
- expect(tableUtils.thWidthPercent(width)).toBe(`gl-w-${width}p`);
- });
- });
-
describe('sortObjectToString', () => {
it('returns the expected sorting string ending in "DESC" when sortDesc is true', () => {
expect(tableUtils.sortObjectToString({ sortBy: 'mergedAt', sortDesc: true })).toBe(