diff --git a/app/assets/javascripts/lib/utils/constants.js b/app/assets/javascripts/lib/utils/constants.js
index 77986539403a9e85e1f1dd0689ea467cebc9f0e1..f2bdb1bb6afc865b881d3797b6b2dde19b4e4c41 100644
--- a/app/assets/javascripts/lib/utils/constants.js
+++ b/app/assets/javascripts/lib/utils/constants.js
@@ -10,9 +10,6 @@ export const BV_SHOW_TOOLTIP = 'bv::show::tooltip';
export const BV_DROPDOWN_SHOW = 'bv::dropdown::show';
export const BV_DROPDOWN_HIDE = 'bv::dropdown::hide';
-export const DEFAULT_TH_CLASSES =
- 'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';
-
// We set the drawer's z-index to 252 to clear flash messages that might
// be displayed in the page and that have a z-index of 251.
export const DRAWER_Z_INDEX = 252;
diff --git a/app/assets/javascripts/lib/utils/table_utility.js b/app/assets/javascripts/lib/utils/table_utility.js
index 5d3aba9f4ed27f74a1a4ec82f6f9b49b6c4104ad..f5a814c8fdc2a78d4f846b2005ce3201ae99f76f 100644
--- a/app/assets/javascripts/lib/utils/table_utility.js
+++ b/app/assets/javascripts/lib/utils/table_utility.js
@@ -1,14 +1,4 @@
import { convertToSnakeCase, convertToCamelCase } from '~/lib/utils/text_utility';
-import { DEFAULT_TH_CLASSES } from './constants';
-
-/**
- * Deprecated: use thWidthPercent instead
- * Generates the table header classes to be used for GlTable fields.
- *
- * @param {Number} width - The column width as a percentage.
- * @returns {String} The classes to be used in GlTable fields object.
- */
-export const thWidthClass = (width) => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
/**
* Generates the table header class for width to be used for GlTable fields.
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 6bbd2d3979449cbba231e5c16de4890c73beeead..bc0c4988ec43e6490e89eceb976861fbc3eb0bcb 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, thWidthClass } from '~/lib/utils/table_utility';
+import { sortObjectToString, sortStringToObject, thWidthPercent } 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: thWidthClass(10),
+ thClass: `gl-p-5! ${thWidthPercent(10)}`,
tdClass: 'gl-vertical-align-middle!',
sortable: true,
},
{
key: 'violationReason',
label: __('Violation'),
- thClass: thWidthClass(15),
+ thClass: `gl-p-5! ${thWidthPercent(15)}`,
tdClass: 'gl-vertical-align-middle!',
sortable: true,
},
{
key: 'mergeRequestTitle',
label: __('Merge request'),
- thClass: thWidthClass(40),
+ thClass: `gl-p-5! ${thWidthPercent(40)}`,
tdClass: 'gl-vertical-align-middle!',
sortable: true,
},
{
key: 'mergedAt',
label: __('Date merged'),
- thClass: thWidthClass(20),
+ thClass: `gl-p-5! ${thWidthPercent(20)}`,
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 1edfb8193ecbe4474aa67137f51736b1c6f3776b..878e87e978b999a4b27a6bebee9dd2a61cf91dba 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,9 +6,7 @@ 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 { thWidthClass } from '~/lib/utils/table_utility';
-
-const thClass = 'gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1!';
+import { thWidthPercent } from '~/lib/utils/table_utility';
export default {
components: {
@@ -29,29 +27,29 @@ export default {
{
key: 'name',
label: s__('CorpusManagement|Corpus name'),
- thClass: `${thClass} ${thWidthClass(40)}`,
+ thClass: thWidthPercent(40),
tdClass: 'gl-text-truncate gl-max-w-15',
},
{
key: 'target',
label: s__('CorpusManagement|Target'),
- thClass: `${thClass} ${thWidthClass(20)}`,
+ thClass: thWidthPercent(20),
tdClass: 'gl-word-break-word',
},
{
key: 'lastUpdated',
label: s__('CorpusManagement|Last updated'),
- thClass: `${thClass} ${thWidthClass(15)}`,
+ thClass: thWidthPercent(15),
},
{
key: 'lastUsed',
label: s__('CorpusManagement|Last used'),
- thClass: `${thClass} ${thWidthClass(15)}`,
+ thClass: thWidthPercent(15),
},
{
key: 'actions',
label: s__('CorpusManagement|Actions'),
- thClass: `${thClass} ${thWidthClass(10)}`,
+ thClass: thWidthPercent(10),
},
],
i18n: {
diff --git a/ee/spec/frontend/security_configuration/corpus_management/__snapshots__/corpus_table_spec.js.snap b/ee/spec/frontend/security_configuration/corpus_management/__snapshots__/corpus_table_spec.js.snap
index 023615c3b4a2027869d9d3af2b1f5c328e02a342..f93f6d4594d47689dde7b9855d8a91f91c55cddf 100644
--- a/ee/spec/frontend/security_configuration/corpus_management/__snapshots__/corpus_table_spec.js.snap
+++ b/ee/spec/frontend/security_configuration/corpus_management/__snapshots__/corpus_table_spec.js.snap
@@ -6,7 +6,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
>
<th
aria-colindex="1"
- class="gl-bg-transparent! gl-border-b-1! gl-border-b-gray-100! gl-border-b-solid! gl-border-gray-100! gl-p-5! gl-w-40p"
+ class="gl-w-40p"
role="columnheader"
scope="col"
>
@@ -16,7 +16,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
</th>
<th
aria-colindex="2"
- class="gl-bg-transparent! gl-border-b-1! gl-border-b-gray-100! gl-border-b-solid! gl-border-gray-100! gl-p-5! gl-w-20p"
+ class="gl-w-20p"
role="columnheader"
scope="col"
>
@@ -26,7 +26,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
</th>
<th
aria-colindex="3"
- class="gl-bg-transparent! gl-border-b-1! gl-border-b-gray-100! gl-border-b-solid! gl-border-gray-100! gl-p-5! gl-w-15p"
+ class="gl-w-15p"
role="columnheader"
scope="col"
>
@@ -36,7 +36,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
</th>
<th
aria-colindex="4"
- class="gl-bg-transparent! gl-border-b-1! gl-border-b-gray-100! gl-border-b-solid! gl-border-gray-100! gl-p-5! gl-w-15p"
+ class="gl-w-15p"
role="columnheader"
scope="col"
>
@@ -46,7 +46,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
</th>
<th
aria-colindex="5"
- class="gl-bg-transparent! gl-border-b-1! gl-border-b-gray-100! gl-border-b-solid! gl-border-gray-100! gl-p-5! gl-w-10p"
+ class="gl-w-10p"
role="columnheader"
scope="col"
>
diff --git a/spec/frontend/lib/utils/table_utility_spec.js b/spec/frontend/lib/utils/table_utility_spec.js
index df9006f4909802ea46f8ee0b6e06c8f8fd3c48b8..d6544fa83271e6d2ef34ba87e2f1c89f116d6ce5 100644
--- a/spec/frontend/lib/utils/table_utility_spec.js
+++ b/spec/frontend/lib/utils/table_utility_spec.js
@@ -1,14 +1,6 @@
-import { DEFAULT_TH_CLASSES } from '~/lib/utils/constants';
import * as tableUtils from '~/lib/utils/table_utility';
describe('table_utility', () => {
- describe('thWidthClass', () => {
- it('returns the width class including default table header classes', () => {
- const width = 50;
- expect(tableUtils.thWidthClass(width)).toBe(`gl-w-${width}p ${DEFAULT_TH_CLASSES}`);
- });
- });
-
describe('thWidthPercent', () => {
it('returns the width class including default table header classes', () => {
const width = 50;