diff --git a/app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue b/app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue
index a5f1f7708b5540e7024cbe14aadbc855e814ca48..a374e916cf5e0ab85f6a976f4ec85b7729692526 100644
--- a/app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue
+++ b/app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue
@@ -113,9 +113,9 @@ export default {
</script>
<template>
- <div class="gl-p-5 gl-bg-gray-10 gl-border-t gl-border-b">
- <div class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-gap-3">
- <div class="gl-flex-grow-1">
+ <div class="gl-border-t gl-border-b gl-bg-gray-10 gl-p-5">
+ <div class="gl-flex gl-flex-col gl-gap-3 md:gl-flex-row">
+ <div class="gl-grow">
<filtered-search-bar
:namespace="filteredSearchNamespace"
:tokens="filteredSearchTokens"
@@ -132,7 +132,7 @@ export default {
</div>
<div v-if="shouldShowSort" data-testid="groups-projects-sort">
<gl-sorting
- class="gl-display-flex"
+ class="gl-flex"
dropdown-class="gl-w-full"
block
:text="activeSortOption.text"
diff --git a/app/assets/javascripts/organizations/groups_and_projects/components/app.vue b/app/assets/javascripts/organizations/groups_and_projects/components/app.vue
index c348e3e5c66d55fe0fce328756591edded830630..e2f3f7a26ad5e140d2512838afb950395b4c635e 100644
--- a/app/assets/javascripts/organizations/groups_and_projects/components/app.vue
+++ b/app/assets/javascripts/organizations/groups_and_projects/components/app.vue
@@ -206,11 +206,9 @@ export default {
<template>
<div>
- <div
- class="page-title-holder gl-display-flex gl-sm-flex-direction-row gl-flex-direction-column gl-sm-align-items-center"
- >
- <h1 class="page-title gl-font-size-h-display">{{ $options.i18n.pageTitle }}</h1>
- <div class="gl-display-flex gl-gap-x-3 gl-sm-ml-auto gl-mb-4 gl-sm-mb-0">
+ <div class="page-title-holder gl-flex gl-flex-col sm:gl-flex-row sm:gl-items-center">
+ <h1 class="page-title gl-text-size-h-display">{{ $options.i18n.pageTitle }}</h1>
+ <div class="gl-mb-4 gl-flex gl-gap-x-3 sm:gl-mb-0 sm:gl-ml-auto">
<new-group-button category="secondary" />
<new-project-button />
</div>
@@ -234,7 +232,7 @@ export default {
:items="$options.displayListboxItems"
:header-text="$options.i18n.displayListboxHeaderText"
block
- toggle-class="gl-md-w-30"
+ toggle-class="md:gl-w-30"
@select="onDisplayListboxSelect"
/>
</filtered-search-and-sort>
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
index 1892c6ae9719e1abaf12d2fda962378eba49152c..140937c9787224417324e2eaa653977f75f0650a 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
@@ -350,10 +350,10 @@ export default {
</script>
<template>
- <div class="vue-filtered-search-bar-container max-sm:gl-flex-col gl-flex gl-min-w-0 sm:gl-gap-3">
+ <div class="vue-filtered-search-bar-container gl-flex gl-min-w-0 max-sm:gl-flex-col sm:gl-gap-3">
<gl-form-checkbox
v-if="showCheckbox"
- class="gl-align-self-center"
+ class="gl-self-center"
:checked="checkboxChecked"
@change="$emit('checked-input', $event)"
>
@@ -401,7 +401,7 @@ export default {
:sort-options="transformedSortOptions"
:sort-by="sortById"
:is-ascending="sortDirectionAscending"
- class="sort-dropdown-container sm:!gl-m-0 max-sm:gl-w-full"
+ class="sort-dropdown-container max-sm:gl-w-full sm:!gl-m-0"
dropdown-class="gl-grow"
dropdown-toggle-class="gl-grow"
sort-direction-toggle-class="!gl-shrink !gl-grow-0"
diff --git a/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue b/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue
index f6847bfeb8351ecb6345b031aac775f9006b889e..2c60c7b31f4c75303cb38c04432fc0a06af27535 100644
--- a/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue
+++ b/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue
@@ -26,7 +26,7 @@ export default {
[TIMESTAMP_TYPE_CREATED_AT]: __('Created'),
[TIMESTAMP_TYPE_UPDATED_AT]: __('Updated'),
},
- truncateTextToggleButtonProps: { class: 'gl-font-sm!' },
+ truncateTextToggleButtonProps: { class: '!gl-text-sm' },
components: {
GlAvatarLabeled,
GlIcon,
@@ -136,13 +136,10 @@ export default {
</script>
<template>
- <li class="groups-list-item gl-py-5 gl-border-b gl-display-flex">
- <div class="md:gl-flex gl-flex-grow-1">
+ <li class="groups-list-item gl-border-b gl-flex gl-py-5">
+ <div class="gl-grow md:gl-flex">
<div class="gl-flex gl-grow gl-items-start">
- <div
- v-if="showGroupIcon"
- class="gl-display-flex gl-align-items-center gl-flex-shrink-0 gl-h-9 gl-mr-3"
- >
+ <div v-if="showGroupIcon" class="gl-mr-3 gl-flex gl-h-9 gl-flex-shrink-0 gl-items-center">
<gl-icon class="gl-text-secondary" :name="groupIconName" />
</div>
<gl-avatar-labeled
@@ -155,7 +152,7 @@ export default {
>
<template #meta>
<div class="gl-px-2">
- <div class="-gl-mx-2 gl-display-flex gl-align-items-center gl-flex-wrap">
+ <div class="-gl-mx-2 gl-flex gl-flex-wrap gl-items-center">
<div class="gl-px-2">
<gl-icon
v-if="visibility"
@@ -186,14 +183,14 @@ export default {
>
<div
v-safe-html="group.descriptionHtml"
- class="gl-font-sm gl-text-secondary md"
+ class="md gl-text-sm gl-text-secondary"
data-testid="group-description"
></div>
</gl-truncate-text>
</gl-avatar-labeled>
</div>
<div
- class="md:gl-flex gl-flex-col gl-items-end gl-shrink-0 gl-mt-3 md:gl-pl-0 md:gl-mt-0"
+ class="gl-mt-3 gl-shrink-0 gl-flex-col gl-items-end md:gl-mt-0 md:gl-flex md:gl-pl-0"
:class="statsPadding"
>
<div class="gl-flex gl-items-center gl-gap-x-3 md:gl-h-9">
@@ -228,14 +225,14 @@ export default {
</div>
<div
v-if="timestamp"
- class="gl-text-sm gl-whitespace-nowrap gl-text-secondary gl-mt-3 md:-gl-mt-2"
+ class="gl-mt-3 gl-whitespace-nowrap gl-text-sm gl-text-secondary md:-gl-mt-2"
>
<span>{{ timestampText }}</span>
<time-ago-tooltip :time="timestamp" />
</div>
</div>
</div>
- <div class="gl-display-flex gl-align-items-center gl-h-9 gl-ml-3">
+ <div class="gl-ml-3 gl-flex gl-h-9 gl-items-center">
<list-actions
v-if="hasActions"
:actions="actions"
diff --git a/app/assets/javascripts/vue_shared/components/list_actions/constants.js b/app/assets/javascripts/vue_shared/components/list_actions/constants.js
index b1506ae1e93086cd4c58a63c66e5bab78fe04302..e2b0a4742e8d8d0900e387714e4eabbb659de107 100644
--- a/app/assets/javascripts/vue_shared/components/list_actions/constants.js
+++ b/app/assets/javascripts/vue_shared/components/list_actions/constants.js
@@ -10,7 +10,7 @@ export const BASE_ACTIONS = {
[ACTION_DELETE]: {
text: __('Delete'),
extraAttrs: {
- class: 'gl-text-red-500!',
+ class: '!gl-text-red-500',
},
},
};
diff --git a/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue b/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue
index ae248b6eaaee795ca4e2ee901b78d6e80f66ac9a..aa12580f6d5ee9dab40cd3771314a2325d738883 100644
--- a/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue
+++ b/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue
@@ -46,7 +46,7 @@ export default {
showMore: __('Show more'),
showLess: __('Show less'),
},
- truncateTextToggleButtonProps: { class: 'gl-font-sm!' },
+ truncateTextToggleButtonProps: { class: '!gl-text-sm' },
components: {
GlAvatarLabeled,
GlIcon,
@@ -249,13 +249,10 @@ export default {
</script>
<template>
- <li class="projects-list-item gl-py-5 gl-border-b gl-display-flex">
- <div class="md:gl-flex gl-flex-grow-1">
+ <li class="projects-list-item gl-border-b gl-flex gl-py-5">
+ <div class="gl-grow md:gl-flex">
<div class="gl-flex gl-grow gl-items-start">
- <div
- v-if="showProjectIcon"
- class="gl-display-flex gl-align-items-center gl-flex-shrink-0 gl-h-9 gl-mr-3"
- >
+ <div v-if="showProjectIcon" class="gl-mr-3 gl-flex gl-h-9 gl-flex-shrink-0 gl-items-center">
<gl-icon class="gl-text-secondary" name="project" />
</div>
<gl-avatar-labeled
@@ -268,7 +265,7 @@ export default {
>
<template #meta>
<div class="gl-px-2">
- <div class="-gl-mx-2 gl-display-flex gl-align-items-center gl-flex-wrap">
+ <div class="-gl-mx-2 gl-flex gl-flex-wrap gl-items-center">
<div class="gl-px-2">
<gl-icon
v-if="visibility"
@@ -299,15 +296,15 @@ export default {
>
<div
v-safe-html="project.descriptionHtml"
- class="gl-font-sm gl-text-secondary md"
+ class="md gl-text-sm gl-text-secondary"
data-testid="project-description"
></div>
</gl-truncate-text>
<div v-if="hasTopics" class="gl-mt-3" data-testid="project-topics">
<div
- class="gl-w-full gl-inline-flex gl-flex-wrap gl-font-base gl-font-normal gl-align-items-center -gl-mx-2 -gl-my-2"
+ class="-gl-mx-2 -gl-my-2 gl-inline-flex gl-w-full gl-flex-wrap gl-items-center gl-text-base gl-font-normal"
>
- <span class="gl-p-2 gl-font-sm gl-text-secondary">{{ $options.i18n.topics }}:</span>
+ <span class="gl-p-2 gl-text-sm gl-text-secondary">{{ $options.i18n.topics }}:</span>
<div v-for="topic in visibleTopics" :key="topic" class="gl-p-2">
<gl-badge v-gl-tooltip="topicTooltipTitle(topic)" :href="topicPath(topic)">
{{ topicTitle(topic) }}
@@ -316,7 +313,7 @@ export default {
<template v-if="popoverTopics.length">
<div
:id="topicsPopoverTarget"
- class="gl-p-2 gl-font-sm gl-text-secondary"
+ class="gl-p-2 gl-text-sm gl-text-secondary"
role="button"
tabindex="0"
>
@@ -325,12 +322,8 @@ export default {
</gl-sprintf>
</div>
<gl-popover :target="topicsPopoverTarget" :title="$options.i18n.moreTopics">
- <div class="gl-font-base gl-font-normal -gl-mx-2 -gl-my-2">
- <div
- v-for="topic in popoverTopics"
- :key="topic"
- class="gl-p-2 gl-display-inline-block"
- >
+ <div class="-gl-mx-2 -gl-my-2 gl-text-base gl-font-normal">
+ <div v-for="topic in popoverTopics" :key="topic" class="gl-inline-block gl-p-2">
<gl-badge v-gl-tooltip="topicTooltipTitle(topic)" :href="topicPath(topic)">
{{ topicTitle(topic) }}
</gl-badge>
@@ -343,7 +336,7 @@ export default {
</gl-avatar-labeled>
</div>
<div
- class="md:gl-flex gl-flex-col gl-items-end gl-shrink-0 gl-mt-3 md:gl-pl-0 md:gl-mt-0"
+ class="gl-mt-3 gl-shrink-0 gl-flex-col gl-items-end md:gl-mt-0 md:gl-flex md:gl-pl-0"
:class="showProjectIcon ? 'gl-pl-12' : 'gl-pl-10'"
>
<div class="gl-flex gl-items-center gl-gap-x-3 md:gl-h-9">
@@ -390,14 +383,14 @@ export default {
</div>
<div
v-if="timestamp"
- class="gl-text-sm gl-whitespace-nowrap gl-text-secondary gl-mt-3 md:-gl-mt-2"
+ class="gl-mt-3 gl-whitespace-nowrap gl-text-sm gl-text-secondary md:-gl-mt-2"
>
<span>{{ timestampText }}</span>
<time-ago-tooltip :time="timestamp" />
</div>
</div>
</div>
- <div class="gl-display-flex gl-align-items-center gl-h-9 gl-ml-3">
+ <div class="gl-ml-3 gl-flex gl-h-9 gl-items-center">
<list-actions
v-if="hasActions"
:actions="actions"
diff --git a/spec/frontend/vue_shared/components/list_actions/list_actions_spec.js b/spec/frontend/vue_shared/components/list_actions/list_actions_spec.js
index c43a19e40de9b92b66f2c5dc73196659cb595e58..8a0dfe6c9b01640861e4dc9cfa41a2e56838e839 100644
--- a/spec/frontend/vue_shared/components/list_actions/list_actions_spec.js
+++ b/spec/frontend/vue_shared/components/list_actions/list_actions_spec.js
@@ -41,7 +41,7 @@ describe('ListActions', () => {
{
text: 'Delete',
extraAttrs: {
- class: 'gl-text-red-500!',
+ class: '!gl-text-red-500',
},
action: expect.any(Function),
},
@@ -76,7 +76,7 @@ describe('ListActions', () => {
{
text: 'Delete',
extraAttrs: {
- class: 'gl-text-red-500!',
+ class: '!gl-text-red-500',
},
action: expect.any(Function),
},
@@ -109,7 +109,7 @@ describe('ListActions', () => {
{
text: 'Delete',
extraAttrs: {
- class: 'gl-text-red-500!',
+ class: '!gl-text-red-500',
},
action: expect.any(Function),
},