From a384f48a690d5877d61fd15087e9ba3d63e3d5e8 Mon Sep 17 00:00:00 2001
From: Lukas Eipert <leipert@gitlab.com>
Date: Fri, 23 Aug 2024 16:49:10 +0000
Subject: [PATCH] Migrate utility classes in dirs starting with MNO
This is part of the larger ongoing effort to migrate legacy utility
classes to tailwind. We have already migrated thousands of instances in
an automated manner and we came to trust our tooling. So we simply run
it on all the JS folders, starting with M, N and R.
See: https://gitlab.com/groups/gitlab-org/-/epics/13521
---
.../action_buttons/action_button_group.vue | 2 +-
.../components/avatars/user_avatar.vue | 2 +-
.../filter_sort/filter_sort_container.vue | 4 +--
.../components/filter_sort/sort_dropdown.vue | 2 +-
.../members/components/members_tabs.vue | 2 +-
.../members/components/role_selector.vue | 2 +-
.../table/drawer/role_details_drawer.vue | 10 ++++----
.../members/components/table/max_role.vue | 2 +-
.../components/table/member_activity.vue | 10 ++++----
.../components/table/member_source.vue | 2 +-
.../components/table/members_table.vue | 2 +-
.../components/placeholder_actions.vue | 4 +--
.../components/placeholders_table.vue | 2 +-
.../components/diff_file_editor.vue | 2 +-
.../merge_conflict_resolver_app.vue | 6 ++---
.../components/app.vue | 18 ++++++-------
.../components/assigned_users.vue | 6 ++---
.../components/collapsible_section.vue | 2 +-
.../components/merge_request.vue | 16 ++++++------
.../merge_requests/components/compare_app.vue | 4 +--
.../components/compare_dropdown.vue | 7 ++----
.../components/merge_request_header.vue | 12 ++++-----
.../reviewers/reviewer_dropdown.vue | 6 ++---
.../reviewers/reviewers_container.vue | 14 +++++------
.../components/sticky_header.vue | 22 ++++++++--------
.../components/merge_request_statistics.vue | 2 +-
.../components/merge_requests_list_app.vue | 2 +-
.../list/components/more_actions_dropdown.vue | 4 +--
.../components/milestone_combobox.vue | 4 +--
.../components/milestone_results_section.vue | 11 +++-----
.../components/more_actions_dropdown.vue | 10 ++++----
.../experiments/show/ml_experiments_show.vue | 2 +-
.../model_registry/apps/index_ml_models.vue | 2 +-
.../apps/show_ml_model_version.vue | 8 +++---
.../components/candidate_detail.vue | 4 +--
.../components/candidate_list_row.vue | 4 +--
.../components/import_artifact_zone.vue | 2 +-
.../components/mlflow_usage_modal.vue | 2 +-
.../components/model_create.vue | 2 +-
.../components/model_detail.vue | 2 +-
.../model_registry/components/model_edit.vue | 2 +-
.../components/model_list_empty_state.vue | 2 +-
.../model_registry/components/model_row.vue | 4 +--
.../components/model_version_detail.vue | 4 +--
.../components/model_version_row.vue | 4 +--
.../components/cascading_lock_icon.vue | 2 +-
.../components/lock_tooltip.vue | 2 +-
.../javascripts/network/branch_graph.js | 2 +-
.../javascripts/notebook/cells/code/index.vue | 2 +-
.../notes/components/comment_field_layout.vue | 10 ++++----
.../notes/components/comment_form.vue | 2 +-
.../components/comment_type_dropdown.vue | 2 +-
.../components/diff_discussion_header.vue | 6 ++---
.../notes/components/diff_with_note.vue | 4 +--
.../notes/components/discussion_counter.vue | 12 ++++-----
.../notes/components/discussion_filter.vue | 2 +-
.../components/discussion_filter_note.vue | 4 +--
.../components/discussion_locked_widget.vue | 4 +--
.../notes/components/discussion_notes.vue | 2 +-
.../discussion_notes_replies_wrapper.vue | 2 +-
.../components/discussion_resolve_button.vue | 2 +-
.../discussion_resolve_with_issue_button.vue | 2 +-
.../notes/components/mr_discussion_filter.vue | 2 +-
.../notes/components/note_edited_text.vue | 2 +-
.../notes/components/note_form.vue | 12 ++++-----
.../notes/components/note_header.vue | 2 +-
.../notes/components/noteable_discussion.vue | 6 ++---
.../notes/components/noteable_note.vue | 2 +-
.../components/notes_activity_header.vue | 6 ++---
.../components/toggle_replies_widget.vue | 10 ++++----
.../notifications_dropdown_item.vue | 2 +-
.../components/oauth_secret.vue | 4 +--
.../components/date_range_filter.vue | 5 +---
.../components/app.vue | 2 +-
.../manage_roles_dropdown_footer.vue | 2 +-
.../promotion_requests/components/app.vue | 2 +-
.../components/reviewers/approval_rules.vue | 18 ++++++-------
.../reviewers/approval_rules_wrapper.vue | 8 +++---
.../components/reviewers/approval_summary.vue | 4 +--
.../components/summarize_code_changes.vue | 4 +--
.../details/filter_bar/groupby_filter.vue | 2 +-
.../filter_bar/metrics_filtered_search.vue | 6 ++---
.../metrics/details/metrics_details.vue | 2 +-
.../metrics/details/metrics_heatmap.vue | 2 +-
.../metrics/details/metrics_line_chart.vue | 6 ++---
.../javascripts/metrics/list/metrics_list.vue | 2 +-
.../metrics/list/metrics_table.vue | 4 +--
.../ml/ai_agents/components/agent_list.vue | 2 +-
.../ml/ai_agents/views/create_agent.vue | 2 +-
.../ml/ai_agents/views/edit_agent.vue | 2 +-
.../ml/ai_agents/views/list_agents.vue | 2 +-
.../ml/ai_agents/views/show_agent.vue | 4 +--
.../notes/components/ai_summary.vue | 14 +++++------
.../on_demand_scans/components/actions.vue | 2 +-
.../components/tabs/base_tab.vue | 4 +--
.../on_demand_scans/components/tabs/saved.vue | 6 ++---
.../components/tabs/scheduled.vue | 2 +-
.../components/on_demand_scans_form.vue | 10 ++++----
.../components/runner_tags.vue | 2 +-
.../components/scan_schedule.vue | 6 ++---
.../components/oncall_schedule.vue | 25 ++++++++-----------
.../components/oncall_schedules_wrapper.vue | 2 +-
.../components/add_edit_rotation_form.vue | 14 +++++------
.../components/rotation_assignee.vue | 9 +++----
.../components/current_day_indicator.vue | 2 +-
.../preset_days/days_header_sub_item.vue | 6 ++---
.../preset_weeks/weeks_header_item.vue | 2 +-
.../preset_weeks/weeks_header_sub_item.vue | 6 ++---
.../components/rotations_list_section.vue | 16 ++++++------
.../components/schedule_timeline_section.vue | 2 +-
.../__snapshots__/approval_rules_spec.js.snap | 16 ++++++------
.../approval_rules_wrapper_spec.js.snap | 8 +++---
.../__snapshots__/actions_spec.js.snap | 2 +-
.../rotations_list_section_spec.js.snap | 12 ++++-----
.../preset_days/days_header_sub_item_spec.js | 10 ++++----
.../weeks_header_sub_item_spec.js | 4 +--
.../member_activity_spec.js.snap | 20 +++++++--------
117 files changed, 306 insertions(+), 325 deletions(-)
diff --git a/app/assets/javascripts/members/components/action_buttons/action_button_group.vue b/app/assets/javascripts/members/components/action_buttons/action_button_group.vue
index 4dc008e43afe5..29d19b4cf699a 100644
--- a/app/assets/javascripts/members/components/action_buttons/action_button_group.vue
+++ b/app/assets/javascripts/members/components/action_buttons/action_button_group.vue
@@ -5,7 +5,7 @@ export default {
</script>
<template>
- <div class="gl-display-flex gl-align-items-center gl-justify-content-end -gl-mx-1">
+ <div class="-gl-mx-1 gl-flex gl-items-center gl-justify-end">
<slot></slot>
</div>
</template>
diff --git a/app/assets/javascripts/members/components/avatars/user_avatar.vue b/app/assets/javascripts/members/components/avatars/user_avatar.vue
index 98453aa364f66..087ebab126925 100644
--- a/app/assets/javascripts/members/components/avatars/user_avatar.vue
+++ b/app/assets/javascripts/members/components/avatars/user_avatar.vue
@@ -85,7 +85,7 @@ export default {
>
<template #meta>
<div v-if="isUserBusy" class="gl-p-1">
- <span class="gl-text-gray-500 gl-font-sm gl-font-normal">({{ $options.i18n.busy }})</span>
+ <span class="gl-text-sm gl-font-normal gl-text-gray-500">({{ $options.i18n.busy }})</span>
</div>
<div v-if="statusEmoji" class="gl-p-1">
<span
diff --git a/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue b/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue
index e4c87cb9f5452..f39aff768274d 100644
--- a/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue
+++ b/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue
@@ -29,7 +29,7 @@ export default {
<template>
<div v-if="showContainer" class="gl-bg-gray-10 gl-p-3 md:gl-flex">
- <members-filtered-search-bar v-if="filteredSearchBar.show" class="gl-p-3 gl-flex-grow-1" />
- <sort-dropdown v-if="showSortDropdown" class="gl-p-3 gl-flex-shrink-0" />
+ <members-filtered-search-bar v-if="filteredSearchBar.show" class="gl-grow gl-p-3" />
+ <sort-dropdown v-if="showSortDropdown" class="gl-shrink-0 gl-p-3" />
</div>
</template>
diff --git a/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue b/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
index 3cb3a14e51ad4..298b8286b10e4 100644
--- a/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
+++ b/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
@@ -77,7 +77,7 @@ export default {
<template>
<gl-sorting
- class="gl-display-flex"
+ class="gl-flex"
dropdown-class="gl-w-full"
block
data-testid="members-sort-dropdown"
diff --git a/app/assets/javascripts/members/components/members_tabs.vue b/app/assets/javascripts/members/components/members_tabs.vue
index 1f53354fcb28b..b0f3a5ffffcfb 100644
--- a/app/assets/javascripts/members/components/members_tabs.vue
+++ b/app/assets/javascripts/members/components/members_tabs.vue
@@ -112,7 +112,7 @@ export default {
<template #tabs-end>
<gl-button
v-if="shouldShowExportButton"
- class="gl-align-self-center gl-ml-auto"
+ class="gl-ml-auto gl-self-center"
icon="export"
:href="exportCsvPath"
>
diff --git a/app/assets/javascripts/members/components/role_selector.vue b/app/assets/javascripts/members/components/role_selector.vue
index 97acc96bcea72..d271518be197d 100644
--- a/app/assets/javascripts/members/components/role_selector.vue
+++ b/app/assets/javascripts/members/components/role_selector.vue
@@ -67,7 +67,7 @@ export default {
</div>
<div
v-if="item.memberRoleId && item.description"
- class="gl-text-gray-700 gl-font-sm gl-mt-1 gl-line-clamp-2"
+ class="gl-mt-1 gl-line-clamp-2 gl-text-sm gl-text-gray-700"
data-testid="role-description"
>
{{ item.description }}
diff --git a/app/assets/javascripts/members/components/table/drawer/role_details_drawer.vue b/app/assets/javascripts/members/components/table/drawer/role_details_drawer.vue
index a2535fa4c013a..b2cc6b4d25b48 100644
--- a/app/assets/javascripts/members/components/table/drawer/role_details_drawer.vue
+++ b/app/assets/javascripts/members/components/table/drawer/role_details_drawer.vue
@@ -130,7 +130,7 @@ export default {
<role-badges :member="member" :role="selectedRole" />
</dd>
- <dt class="gl-mt-6 gl-mb-3" data-testid="description-header">
+ <dt class="gl-mb-3 gl-mt-6" data-testid="description-header">
{{ s__('MemberRole|Description') }}
</dt>
<dd data-testid="description-value">
@@ -138,10 +138,10 @@ export default {
<span v-else class="gl-text-gray-400">{{ s__('MemberRole|No description') }}</span>
</dd>
- <dt class="gl-mt-6 gl-mb-3" data-testid="permissions-header">
+ <dt class="gl-mb-3 gl-mt-6" data-testid="permissions-header">
{{ __('Permissions') }}
</dt>
- <dd class="gl-display-flex gl-mb-5">
+ <dd class="gl-mb-5 gl-flex">
<span v-if="selectedRole.memberRoleId" class="gl-mr-3" data-testid="base-role">
<gl-sprintf :message="s__('MemberRole|Base role: %{role}')">
<template #role>
@@ -163,10 +163,10 @@ export default {
<div
v-for="permission in selectedRole.permissions"
:key="permission.name"
- class="gl-display-flex"
+ class="gl-flex"
data-testid="permission"
>
- <gl-icon name="check" class="gl-flex-shrink-0" />
+ <gl-icon name="check" class="gl-shrink-0" />
<div class="gl-mx-3">
<span data-testid="permission-name">
{{ permission.name }}
diff --git a/app/assets/javascripts/members/components/table/max_role.vue b/app/assets/javascripts/members/components/table/max_role.vue
index 1ea6729e30399..06cee2cff1720 100644
--- a/app/assets/javascripts/members/components/table/max_role.vue
+++ b/app/assets/javascripts/members/components/table/max_role.vue
@@ -136,7 +136,7 @@ export default {
</div>
<div
v-if="item.memberRoleId && item.description"
- class="gl-text-gray-700 gl-font-sm gl-pt-1 gl-line-clamp-2 gl-whitespace-normal"
+ class="gl-line-clamp-2 gl-whitespace-normal gl-pt-1 gl-text-sm gl-text-gray-700"
>
{{ item.description }}
</div>
diff --git a/app/assets/javascripts/members/components/table/member_activity.vue b/app/assets/javascripts/members/components/table/member_activity.vue
index 9651aeb86711a..82e3ec5c5baf8 100644
--- a/app/assets/javascripts/members/components/table/member_activity.vue
+++ b/app/assets/javascripts/members/components/table/member_activity.vue
@@ -28,18 +28,18 @@ export default {
</script>
<template>
- <div class="gl-display-flex gl-flex-direction-column gl-gap-2">
- <div v-if="userCreated" class="gl-display-flex gl-gap-3">
+ <div class="gl-flex gl-flex-col gl-gap-2">
+ <div v-if="userCreated" class="gl-flex gl-gap-3">
<gl-icon
ref="userCreated"
v-gl-tooltip.${userCreated}
- class="gl-ml-2 -gl-mr-2 gl-text-gray-500"
+ class="-gl-mr-2 gl-ml-2 gl-text-gray-500"
name="assignee"
:title="s__('Members|User created')"
/>
<user-date :date="userCreated" />
</div>
- <div v-if="accessGranted" class="gl-display-flex gl-gap-3">
+ <div v-if="accessGranted" class="gl-flex gl-gap-3">
<gl-icon
ref="memberCreatedAt"
v-gl-tooltip.${memberCreatedAt}
@@ -49,7 +49,7 @@ export default {
/>
<user-date :date="accessGranted" />
</div>
- <div v-if="lastActivity" class="gl-display-flex gl-gap-3">
+ <div v-if="lastActivity" class="gl-flex gl-gap-3">
<gl-icon
ref="lastActivity"
v-gl-tooltip.${lastActivity}
diff --git a/app/assets/javascripts/members/components/table/member_source.vue b/app/assets/javascripts/members/components/table/member_source.vue
index fdcdf027b9e31..f77871991ea79 100644
--- a/app/assets/javascripts/members/components/table/member_source.vue
+++ b/app/assets/javascripts/members/components/table/member_source.vue
@@ -58,7 +58,7 @@ export default {
</script>
<template>
- <div v-if="isSharedWithGroupPrivate" class="gl-display-flex gl-gap-x-2">
+ <div v-if="isSharedWithGroupPrivate" class="gl-flex gl-gap-x-2">
<span>{{ $options.i18n.private }}</span>
<private-icon />
</div>
diff --git a/app/assets/javascripts/members/components/table/members_table.vue b/app/assets/javascripts/members/components/table/members_table.vue
index 07dc5d83d18f4..3c1212f8d6b6f 100644
--- a/app/assets/javascripts/members/components/table/members_table.vue
+++ b/app/assets/javascripts/members/components/table/members_table.vue
@@ -269,7 +269,7 @@ export default {
<template #cell(invited)="{ item: { createdAt, createdBy, invite, state } }">
<div
- class="gl-display-flex gl-align-items-center gl-justify-content-end gl-lg-justify-content-start gl-flex-wrap gl-gap-3"
+ class="gl-flex gl-flex-wrap gl-items-center gl-justify-end gl-gap-3 lg:gl-justify-start"
>
<created-at :date="createdAt" :created-by="createdBy" />
<gl-badge v-if="inviteBadge(invite, state)" data-testid="invited-badge"
diff --git a/app/assets/javascripts/members/placeholders/components/placeholder_actions.vue b/app/assets/javascripts/members/placeholders/components/placeholder_actions.vue
index 9e5dd2469cb1a..0c0d8f5619760 100644
--- a/app/assets/javascripts/members/placeholders/components/placeholder_actions.vue
+++ b/app/assets/javascripts/members/placeholders/components/placeholder_actions.vue
@@ -313,11 +313,11 @@ export default {
<template #footer>
<div
- class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-200 gl-flex gl-flex-col !gl-p-2 !gl-pt-0"
+ class="gl-flex gl-flex-col gl-border-t-1 gl-border-t-gray-200 !gl-p-2 !gl-pt-0 gl-border-t-solid"
>
<gl-button
category="tertiary"
- class="!gl-justify-start gl-mt-2"
+ class="gl-mt-2 !gl-justify-start"
data-testid="dont-reassign-button"
@click="onSelect('')"
>
diff --git a/app/assets/javascripts/members/placeholders/components/placeholders_table.vue b/app/assets/javascripts/members/placeholders/components/placeholders_table.vue
index 20b0a663f6846..b795348d7cebb 100644
--- a/app/assets/javascripts/members/placeholders/components/placeholders_table.vue
+++ b/app/assets/javascripts/members/placeholders/components/placeholders_table.vue
@@ -197,7 +197,7 @@ export default {
</template>
</gl-table>
- <div v-if="pageInfo.hasNextPage || pageInfo.hasPreviousPage" class="gl-text-center gl-mt-5">
+ <div v-if="pageInfo.hasNextPage || pageInfo.hasPreviousPage" class="gl-mt-5 gl-text-center">
<gl-keyset-pagination
v-bind="pageInfo"
:prev-text="__('Prev')"
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue
index 4f638dfdf4242..24a3ab5ece6ab 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue
@@ -110,7 +110,7 @@ export default {
<div v-show="file.showEditor">
<div v-if="file.promptDiscardConfirmation" class="discard-changes-alert">
{{ __('Are you sure you want to discard your changes?') }}
- <div class="gl-ml-3 gl-display-inline-block">
+ <div class="gl-ml-3 gl-inline-block">
<gl-button
size="small"
variant="danger"
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
index 1886e7641df2a..01d243e7aface 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
@@ -131,7 +131,7 @@ export default {
category="tertiary"
/>
</div>
- <div class="file-actions gl-flex gl-items-center gl-ml-auto gl-align-self-start">
+ <div class="file-actions gl-ml-auto gl-flex gl-items-center gl-self-start">
<gl-button-group v-if="file.type === 'text'" class="gl-mr-3">
<gl-button
:selected="file.resolveMode === 'interactive'"
@@ -157,10 +157,10 @@ export default {
</gl-button>
</div>
</div>
- <div class="diff-content diff-wrap-lines gl-rounded-bottom-base">
+ <div class="diff-content diff-wrap-lines gl-rounded-b-base">
<div
v-if="file.resolveMode === 'interactive' && file.type === 'text'"
- class="file-content gl-rounded-bottom-base"
+ class="file-content gl-rounded-b-base"
>
<parallel-conflict-lines v-if="isParallel" :file="file" />
<inline-conflict-lines v-else :file="file" />
diff --git a/app/assets/javascripts/merge_request_dashboard/components/app.vue b/app/assets/javascripts/merge_request_dashboard/components/app.vue
index 7e364856ed893..ab0f2783b144d 100644
--- a/app/assets/javascripts/merge_request_dashboard/components/app.vue
+++ b/app/assets/javascripts/merge_request_dashboard/components/app.vue
@@ -25,7 +25,7 @@ export default {
<template>
<div>
<div class="page-title-holder gl-flex">
- <h1 class="page-title gl-font-size-h-display">{{ __('Merge requests') }}</h1>
+ <h1 class="page-title gl-text-size-h-display">{{ __('Merge requests') }}</h1>
</div>
<merge-requests-query
v-for="(list, i) in lists"
@@ -47,22 +47,22 @@ export default {
<col style="width: 120px" />
<col style="min-width: 200px" />
</colgroup>
- <thead class="gl-bg-gray-10 gl-border-b">
+ <thead class="gl-border-b gl-bg-gray-10">
<tr>
- <th class="gl-pl-5 gl-pr-3 gl-pb-3" :aria-label="__('Pipeline status')">
+ <th class="gl-pb-3 gl-pl-5 gl-pr-3" :aria-label="__('Pipeline status')">
<gl-icon name="pipeline" />
</th>
- <th class="gl-pb-3 gl-px-3" :aria-label="__('Approvals')">
+ <th class="gl-px-3 gl-pb-3" :aria-label="__('Approvals')">
<gl-icon name="approval" />
</th>
- <th class="gl-pb-3 gl-px-3 gl-text-sm gl-text-gray-700">{{ __('Title') }}</th>
- <th class="gl-pb-3 gl-px-3 gl-text-sm gl-text-gray-700 gl-text-center">
+ <th class="gl-px-3 gl-pb-3 gl-text-sm gl-text-gray-700">{{ __('Title') }}</th>
+ <th class="gl-px-3 gl-pb-3 gl-text-center gl-text-sm gl-text-gray-700">
{{ __('Assignee') }}
</th>
- <th class="gl-pb-3 gl-px-3 gl-text-sm gl-text-gray-700 gl-text-center">
+ <th class="gl-px-3 gl-pb-3 gl-text-center gl-text-sm gl-text-gray-700">
{{ __('Reviewers') }}
</th>
- <th class="gl-pr-5 gl-pl-3 gl-pb-3 gl-text-sm gl-text-gray-700 gl-text-right">
+ <th class="gl-pb-3 gl-pl-3 gl-pr-5 gl-text-right gl-text-sm gl-text-gray-700">
{{ __('Activity') }}
</th>
</tr>
@@ -93,7 +93,7 @@ export default {
</div>
</div>
<template #pagination>
- <div v-if="hasNextPage" class="gl-flex gl-justify-center gl-mt-4">
+ <div v-if="hasNextPage" class="gl-mt-4 gl-flex gl-justify-center">
<gl-button :loading="loading" data-testid="load-more" @click="loadMore">{{
__('Show more')
}}</gl-button>
diff --git a/app/assets/javascripts/merge_request_dashboard/components/assigned_users.vue b/app/assets/javascripts/merge_request_dashboard/components/assigned_users.vue
index d1c868ead41c6..28d25f3560622 100644
--- a/app/assets/javascripts/merge_request_dashboard/components/assigned_users.vue
+++ b/app/assets/javascripts/merge_request_dashboard/components/assigned_users.vue
@@ -118,7 +118,7 @@ export default {
</script>
<template>
- <div class="gl-flex gl-justify-center mr-users-list">
+ <div class="mr-users-list gl-flex gl-justify-center">
<gl-avatars-inline
v-if="sortedUsers.length"
:avatars="sortedUsers"
@@ -139,14 +139,14 @@ export default {
<gl-avatar :src="user.avatarUrl" :size="32" />
<span
v-if="isCurrentUser(user)"
- class="gl-absolute -gl-top-2 -gl-left-2 gl-rounded-full gl-p-1 gl-w-5 gl-h-5 gl-flex gl-justify-center gl-items-center gl-bg-blue-500 gl-text-white"
+ class="gl-absolute -gl-left-2 -gl-top-2 gl-flex gl-h-5 gl-w-5 gl-items-center gl-justify-center gl-rounded-full gl-bg-blue-500 gl-p-1 gl-text-white"
data-testid="current-user"
>
<gl-icon name="user" class="gl-block" :size="12" />
</span>
<span
v-if="reviewStateIcon(user)"
- class="gl-absolute -gl-bottom-2 -gl-right-2 gl-rounded-full gl-p-1 gl-w-5 gl-h-5 gl-flex gl-justify-center gl-items-center"
+ class="gl-absolute -gl-bottom-2 -gl-right-2 gl-flex gl-h-5 gl-w-5 gl-items-center gl-justify-center gl-rounded-full gl-p-1"
:class="reviewStateIcon(user).class"
data-testid="review-state-icon"
>
diff --git a/app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue b/app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue
index 4d18ab92386e8..c1bc254bfecbe 100644
--- a/app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue
+++ b/app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue
@@ -61,7 +61,7 @@ export default {
<section class="gl-border gl-rounded-base">
<header
:class="{ 'gl-rounded-base': !open }"
- class="gl-bg-gray-10 gl-rounded-tl-base gl-rounded-tr-base gl-px-5 gl-py-4"
+ class="gl-rounded-tl-base gl-rounded-tr-base gl-bg-gray-10 gl-px-5 gl-py-4"
>
<h5 class="gl-m-0">
<gl-button
diff --git a/app/assets/javascripts/merge_request_dashboard/components/merge_request.vue b/app/assets/javascripts/merge_request_dashboard/components/merge_request.vue
index f2557c3a26301..4c0d08f1dec88 100644
--- a/app/assets/javascripts/merge_request_dashboard/components/merge_request.vue
+++ b/app/assets/javascripts/merge_request_dashboard/components/merge_request.vue
@@ -66,10 +66,10 @@ export default {
/>
<gl-icon v-else name="dash" />
</td>
- <td class="gl-py-4 gl-px-3 gl-align-top">
+ <td class="gl-px-3 gl-py-4 gl-align-top">
<approval-count :merge-request="mergeRequest" />
</td>
- <td class="gl-py-4 gl-px-3 gl-align-top">
+ <td class="gl-px-3 gl-py-4 gl-align-top">
<h4 class="gl-mb-0 gl-mt-0 gl-text-base">
<gl-link
v-safe-html="mergeRequest.titleHtml"
@@ -77,7 +77,7 @@ export default {
class="gl-text-primary hover:gl-text-gray-900"
/>
</h4>
- <div class="gl-text-sm gl-mt-2 gl-mb-2 gl-text-secondary">
+ <div class="gl-mb-2 gl-mt-2 gl-text-sm gl-text-secondary">
<gl-sprintf
:message="__('%{reference} %{divider} created %{createdAt} by %{author} %{milestone}')"
>
@@ -99,13 +99,13 @@ export default {
</gl-sprintf>
</div>
</td>
- <td class="gl-py-4 gl-px-3 gl-align-top">
+ <td class="gl-px-3 gl-py-4 gl-align-top">
<assigned-users :users="mergeRequest.assignees.nodes" type="ASSIGNEES" />
</td>
- <td class="gl-py-4 gl-px-3 gl-align-top">
+ <td class="gl-px-3 gl-py-4 gl-align-top">
<assigned-users :users="mergeRequest.reviewers.nodes" type="REVIEWERS" />
</td>
- <td class="gl-py-4 gl-pr-5 gl-pl-3 gl-align-top">
+ <td class="gl-py-4 gl-pl-3 gl-pr-5 gl-align-top">
<div class="gl-flex gl-justify-end" :aria-label="statsAriaLabel">
<div class="gl-whitespace-nowrap">
<gl-icon name="comments" class="!gl-align-middle" />
@@ -115,11 +115,11 @@ export default {
<gl-icon name="doc-code" />
<span>{{ mergeRequest.diffStatsSummary.fileCount }}</span>
</div>
- <div class="gl-ml-3 gl-text-green-600 gl-font-bold gl-flex gl-items-center">
+ <div class="gl-ml-3 gl-flex gl-items-center gl-font-bold gl-text-green-600">
<span>+</span>
<span>{{ mergeRequest.diffStatsSummary.additions }}</span>
</div>
- <div class="gl-ml-3 gl-text-red-500 gl-font-bold gl-flex gl-items-center">
+ <div class="gl-ml-3 gl-flex gl-items-center gl-font-bold gl-text-red-500">
<span>−</span>
<span>{{ mergeRequest.diffStatsSummary.deletions }}</span>
</div>
diff --git a/app/assets/javascripts/merge_requests/components/compare_app.vue b/app/assets/javascripts/merge_requests/components/compare_app.vue
index a753641ffd2b3..88b83a201598c 100644
--- a/app/assets/javascripts/merge_requests/components/compare_app.vue
+++ b/app/assets/javascripts/merge_requests/components/compare_app.vue
@@ -133,14 +133,14 @@ export default {
</div>
<div
v-if="showCommitBox"
- class="gl-bg-gray-50 gl-rounded-base gl-my-4"
+ class="gl-my-4 gl-rounded-base gl-bg-gray-50"
data-testid="commit-box"
>
<gl-loading-icon v-if="loading" class="gl-py-3" />
<template v-else>
<div
v-if="!selectedBranch.value"
- class="compare-commit-empty gl-display-flex gl-align-items-center gl-p-5"
+ class="compare-commit-empty gl-flex gl-items-center gl-p-5"
>
<gl-icon name="branch" class="gl-mr-3" />
{{ __('Select a branch to compare') }}
diff --git a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue
index 35fbf4bc4e632..884a3ee75a273 100644
--- a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue
+++ b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue
@@ -138,11 +138,8 @@ export default {
:searching="isLoading"
:disabled="disabled"
searchable
- class="gl-w-full dropdown-target-project"
- :toggle-class="[
- 'gl-align-items-flex-start! gl-justify-content-start! mr-compare-dropdown',
- toggleClass,
- ]"
+ class="dropdown-target-project gl-w-full"
+ :toggle-class="['!gl-items-start !gl-justify-start mr-compare-dropdown', toggleClass]"
@shown="fetchData"
@search="searchData"
@select="selectItem"
diff --git a/app/assets/javascripts/merge_requests/components/merge_request_header.vue b/app/assets/javascripts/merge_requests/components/merge_request_header.vue
index 667670b46eb67..698cfd891ec91 100644
--- a/app/assets/javascripts/merge_requests/components/merge_request_header.vue
+++ b/app/assets/javascripts/merge_requests/components/merge_request_header.vue
@@ -94,31 +94,31 @@ export default {
</script>
<template>
- <span class="gl-display-contents">
+ <span class="gl-contents">
<status-badge
- class="gl-align-self-center gl-mr-2"
+ class="gl-mr-2 gl-self-center"
:issuable-type="$options.TYPE_MERGE_REQUEST"
:state="state"
/>
<confidentiality-badge
v-if="isConfidential"
- class="gl-align-self-center gl-mr-2"
+ class="gl-mr-2 gl-self-center"
:issuable-type="$options.TYPE_ISSUE"
:workspace-type="$options.WORKSPACE_PROJECT"
/>
<locked-badge
v-if="isLocked"
- class="gl-align-self-center gl-mr-2"
+ class="gl-mr-2 gl-self-center"
:issuable-type="$options.TYPE_MERGE_REQUEST"
/>
<hidden-badge
v-if="hidden"
- class="gl-align-self-center gl-mr-2"
+ class="gl-mr-2 gl-self-center"
:issuable-type="$options.TYPE_MERGE_REQUEST"
/>
<imported-badge
v-if="isImported"
- class="gl-align-self-center gl-mr-2"
+ class="gl-mr-2 gl-self-center"
:importable-type="$options.TYPE_MERGE_REQUEST"
/>
</span>
diff --git a/app/assets/javascripts/merge_requests/components/reviewers/reviewer_dropdown.vue b/app/assets/javascripts/merge_requests/components/reviewers/reviewer_dropdown.vue
index 34b10b55e8d5f..0d85c5dba7d21 100644
--- a/app/assets/javascripts/merge_requests/components/reviewers/reviewer_dropdown.vue
+++ b/app/assets/javascripts/merge_requests/components/reviewers/reviewer_dropdown.vue
@@ -156,7 +156,7 @@ export default {
@hidden="updateReviewers"
>
<template #list-item="{ item }">
- <span class="gl-display-flex gl-align-items-center">
+ <span class="gl-flex gl-items-center">
<div class="gl-relative gl-mr-3">
<gl-avatar :size="32" :src="item.avatarUrl" :entity-name="item.value" />
<gl-icon
@@ -166,8 +166,8 @@ export default {
class="reviewer-merge-icon"
/>
</div>
- <span class="gl-display-flex gl-flex-direction-column">
- <span class="gl-font-bold gl-white-space-nowrap">{{ item.text }}</span>
+ <span class="gl-flex gl-flex-col">
+ <span class="gl-whitespace-nowrap gl-font-bold">{{ item.text }}</span>
<span class="gl-text-gray-400"> {{ item.secondaryText }}</span>
</span>
</span>
diff --git a/app/assets/javascripts/merge_requests/components/reviewers/reviewers_container.vue b/app/assets/javascripts/merge_requests/components/reviewers/reviewers_container.vue
index 921c2d5a09444..9e475d0ee6836 100644
--- a/app/assets/javascripts/merge_requests/components/reviewers/reviewers_container.vue
+++ b/app/assets/javascripts/merge_requests/components/reviewers/reviewers_container.vue
@@ -66,10 +66,10 @@ export default {
<template>
<div>
- <div class="gl-leading-20 gl-font-bold gl-flex gl-w-full gl-align-items-center gl-mb-3">
+ <div class="gl-mb-3 gl-flex gl-w-full gl-items-center gl-font-bold gl-leading-20">
<template v-if="loadingReviewers">
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-w-20"></div>
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-w-4 gl-ml-auto"></div>
+ <div class="gl-animate-skeleton-loader gl-h-4 gl-w-20 gl-rounded-base"></div>
+ <div class="gl-animate-skeleton-loader gl-ml-auto gl-h-4 gl-w-4 gl-rounded-base"></div>
</template>
<template v-else>
{{ reviewersTitle }}
@@ -77,9 +77,9 @@ export default {
</template>
</div>
<div v-if="loadingReviewers">
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-mb-3 gl-max-w-20!"></div>
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-mb-3 gl-max-w-20!"></div>
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-max-w-20!"></div>
+ <div class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-20 gl-rounded-base"></div>
+ <div class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-20 gl-rounded-base"></div>
+ <div class="gl-animate-skeleton-loader gl-h-4 !gl-max-w-20 gl-rounded-base"></div>
</div>
<uncollapsed-reviewer-list
v-else-if="reviewers.length"
@@ -90,7 +90,7 @@ export default {
/>
<gl-empty-state v-else :svg-path="$options.noReviewersAssignedSvg" :svg-height="70">
<template #description>
- <p class="gl-font-normal gl-mb-3">{{ __('No reviewers assigned') }}</p>
+ <p class="gl-mb-3 gl-font-normal">{{ __('No reviewers assigned') }}</p>
<update-reviewers
v-if="userPermissions.adminMergeRequest"
:selected-reviewers="currentUser"
diff --git a/app/assets/javascripts/merge_requests/components/sticky_header.vue b/app/assets/javascripts/merge_requests/components/sticky_header.vue
index 539848ec89065..c7cf2197aa9be 100644
--- a/app/assets/javascripts/merge_requests/components/sticky_header.vue
+++ b/app/assets/javascripts/merge_requests/components/sticky_header.vue
@@ -160,20 +160,20 @@ export default {
@disappear="setStickyHeaderVisible(true)"
>
<div
- class="issue-sticky-header merge-request-sticky-header gl-fixed gl-bg-default gl-hidden md:gl-flex gl-flex-col gl-justify-end gl-border-b"
+ class="issue-sticky-header merge-request-sticky-header gl-border-b gl-fixed gl-hidden gl-flex-col gl-justify-end gl-bg-default md:gl-flex"
:class="{ 'gl-invisible': !isStickyHeaderVisible }"
>
<div
- class="issue-sticky-header-text gl-flex gl-flex-col gl-items-center gl-mx-auto gl-w-full"
+ class="issue-sticky-header-text gl-mx-auto gl-flex gl-w-full gl-flex-col gl-items-center"
:class="{ 'container-limited': !isFluidLayout }"
>
- <div class="gl-w-full gl-flex gl-items-center gl-gap-2">
+ <div class="gl-flex gl-w-full gl-items-center gl-gap-2">
<status-badge :issuable-type="$options.TYPE_MERGE_REQUEST" :state="badgeState.state" />
<imported-badge v-if="isImported" :importable-type="$options.TYPE_MERGE_REQUEST" />
<a
v-safe-html:[$options.safeHtmlConfig]="titleHtml"
href="#top"
- class="gl-hidden lg:gl-block gl-font-bold gl-overflow-hidden gl-whitespace-nowrap gl-text-overflow-ellipsis gl-my-0 gl-ml-1 gl-mr-2 gl-text-black-normal"
+ class="gl-my-0 gl-ml-1 gl-mr-2 gl-hidden gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-font-bold gl-text-default lg:gl-block"
></a>
<div class="gl-flex gl-items-center">
<gl-sprintf :message="__('%{source} %{copyButton} into %{target}')">
@@ -184,20 +184,20 @@ export default {
:text="getNoteableData.source_branch"
size="small"
category="tertiary"
- class="gl-mx-1 js-source-branch-copy"
+ class="js-source-branch-copy gl-mx-1"
/>
</template>
<template #source>
<gl-link
:title="getNoteableData.source_branch"
:href="getNoteableData.source_branch_path"
- class="gl-font-monospace gl-bg-blue-50 gl-rounded-base gl-font-sm gl-px-2 gl-mt-2 gl-truncate gl-max-w-26"
+ class="gl-mt-2 gl-max-w-26 gl-truncate gl-rounded-base gl-bg-blue-50 gl-px-2 gl-text-sm gl-font-monospace"
data-testid="source-branch"
>
<span
v-if="isForked"
v-gl-tooltip
- class="gl-align-middle -gl-mr-2"
+ class="-gl-mr-2 gl-align-middle"
:title="__('The source project is a fork')"
>
<gl-icon name="fork" :size="12" class="gl-ml-1" />
@@ -209,7 +209,7 @@ export default {
<gl-link
:title="getNoteableData.target_branch"
:href="getNoteableData.target_branch_path"
- class="gl-text-blue-500! gl-font-monospace gl-bg-blue-50 gl-rounded-base gl-font-sm gl-px-2 gl-mt-2 gl-truncate gl-max-w-26 gl-ml-2"
+ class="gl-ml-2 gl-mt-2 gl-max-w-26 gl-truncate gl-rounded-base gl-bg-blue-50 gl-px-2 gl-text-sm !gl-text-blue-500 gl-font-monospace"
>
{{ getNoteableData.target_branch }}
</gl-link>
@@ -217,9 +217,9 @@ export default {
</gl-sprintf>
</div>
</div>
- <div class="gl-w-full gl-flex">
+ <div class="gl-flex gl-w-full">
<ul
- class="merge-request-tabs nav-tabs nav nav-links gl-flex gl-flex-nowrap gl-m-0 gl-p-0 gl-border-b-0"
+ class="merge-request-tabs nav-tabs nav nav-links gl-m-0 gl-flex gl-flex-nowrap gl-border-b-0 gl-p-0"
>
<li
v-for="(tab, index) in tabs"
@@ -239,7 +239,7 @@ export default {
</gl-link>
</li>
</ul>
- <div class="gl-hidden lg:gl-flex gl-items-center gl-ml-auto">
+ <div class="gl-ml-auto gl-hidden gl-items-center lg:gl-flex">
<discussion-counter :blocks-merge="blocksMerge" hide-options />
<div v-if="isSignedIn" :class="{ 'gl-flex gl-gap-3': isNotificationsTodosButtons }">
<todo-widget
diff --git a/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue b/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue
index 94d3c6f51f1e5..c79cbd37403cf 100644
--- a/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue
+++ b/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue
@@ -20,7 +20,7 @@ export default {
</script>
<template>
- <ul class="gl-display-contents">
+ <ul class="gl-contents">
<li
v-if="mergeRequest.upvotes"
v-gl-tooltip
diff --git a/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue b/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue
index e77d011b98b67..9388126d606d6 100644
--- a/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue
+++ b/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue
@@ -493,7 +493,7 @@ export default {
@filter="handleFilter"
>
<template #nav-actions>
- <div class="gl-display-flex gl-gap-3">
+ <div class="gl-flex gl-gap-3">
<gl-button
v-if="newMergeRequestPath"
variant="confirm"
diff --git a/app/assets/javascripts/merge_requests/list/components/more_actions_dropdown.vue b/app/assets/javascripts/merge_requests/list/components/more_actions_dropdown.vue
index 08b3f023c809f..9c36b5692bbc1 100644
--- a/app/assets/javascripts/merge_requests/list/components/more_actions_dropdown.vue
+++ b/app/assets/javascripts/merge_requests/list/components/more_actions_dropdown.vue
@@ -68,8 +68,8 @@ export default {
<template #toggle>
<div class="gl-min-h-7">
<gl-button
- class="md:!gl-hidden gl-w-full"
- button-text-classes="gl-display-flex gl-justify-content-space-between gl-w-full"
+ class="gl-w-full md:!gl-hidden"
+ button-text-classes="gl-flex gl-justify-between gl-w-full"
category="secondary"
:aria-label="$options.i18n.toggleText"
>
diff --git a/app/assets/javascripts/milestones/components/milestone_combobox.vue b/app/assets/javascripts/milestones/components/milestone_combobox.vue
index 205a09dbfe88f..4e951f30778c7 100644
--- a/app/assets/javascripts/milestones/components/milestone_combobox.vue
+++ b/app/assets/javascripts/milestones/components/milestone_combobox.vue
@@ -171,7 +171,7 @@ export default {
</template>
<template #footer>
<div
- class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-200 gl-display-flex gl-flex-direction-column gl-p-2! gl-pt-0!"
+ class="gl-flex gl-flex-col gl-border-t-1 gl-border-t-gray-200 !gl-p-2 !gl-pt-0 gl-border-t-solid"
>
<gl-button
v-for="(item, idx) in extraLinks"
@@ -181,7 +181,7 @@ export default {
data-testid="milestone-combobox-extra-links"
category="tertiary"
block
- class="gl-justify-content-start! gl-mt-2!"
+ class="!gl-mt-2 !gl-justify-start"
>
{{ item.text }}
</gl-button>
diff --git a/app/assets/javascripts/milestones/components/milestone_results_section.vue b/app/assets/javascripts/milestones/components/milestone_results_section.vue
index e3c691b14c7b6..363c8b79e3559 100644
--- a/app/assets/javascripts/milestones/components/milestone_results_section.vue
+++ b/app/assets/javascripts/milestones/components/milestone_results_section.vue
@@ -62,17 +62,14 @@ export default {
<template>
<div>
<gl-dropdown-section-header>
- <div
- class="gl-display-flex gl-align-items-center gl-pl-6"
- data-testid="milestone-results-section-header"
- >
- <span class="gl-mr-2 gl-mb-1">{{ sectionTitle }}</span>
+ <div class="gl-flex gl-items-center gl-pl-6" data-testid="milestone-results-section-header">
+ <span class="gl-mb-1 gl-mr-2">{{ sectionTitle }}</span>
<gl-badge variant="neutral">{{ totalCountText }}</gl-badge>
</div>
</gl-dropdown-section-header>
<template v-if="error">
- <div class="gl-display-flex align-items-start gl-text-red-500 gl-ml-4 gl-mr-4 gl-mb-3">
- <gl-icon name="error" class="gl-mr-2 gl-mt-2 gl-flex-shrink-0" />
+ <div class="align-items-start gl-mb-3 gl-ml-4 gl-mr-4 gl-flex gl-text-red-500">
+ <gl-icon name="error" class="gl-mr-2 gl-mt-2 gl-shrink-0" />
<span>{{ errorMessage }}</span>
</div>
</template>
diff --git a/app/assets/javascripts/milestones/components/more_actions_dropdown.vue b/app/assets/javascripts/milestones/components/more_actions_dropdown.vue
index c2ea3d3050084..9d65e5639d005 100644
--- a/app/assets/javascripts/milestones/components/more_actions_dropdown.vue
+++ b/app/assets/javascripts/milestones/components/more_actions_dropdown.vue
@@ -104,7 +104,7 @@ export default {
return {
text: this.$options.i18n.delete,
extraAttrs: {
- class: 'gl-text-red-500!',
+ class: '!gl-text-red-500',
'data-testid': 'milestone-delete-item',
},
};
@@ -183,7 +183,7 @@ export default {
<template v-if="isDetailPage" #toggle>
<div class="gl-min-h-7">
<gl-button
- class="md:!gl-hidden gl-new-dropdown-toggle gl-absolute gl-top-0 gl-left-0 gl-w-full gl-sm-w-auto"
+ class="gl-new-dropdown-toggle gl-absolute gl-left-0 gl-top-0 gl-w-full sm:gl-w-auto md:!gl-hidden"
button-text-classes="gl-w-full"
category="secondary"
:aria-label="$options.i18n.actionsLabel"
@@ -193,7 +193,7 @@ export default {
<gl-icon class="dropdown-chevron" name="chevron-down" />
</gl-button>
<gl-button
- class="gl-hidden md:!gl-flex gl-new-dropdown-toggle gl-new-dropdown-icon-only gl-new-dropdown-toggle-no-caret"
+ class="gl-new-dropdown-toggle gl-new-dropdown-icon-only gl-new-dropdown-toggle-no-caret gl-hidden md:!gl-flex"
category="tertiary"
icon="ellipsis_v"
:aria-label="$options.i18n.actionsLabel"
@@ -214,11 +214,11 @@ export default {
@action="setPromoteModalVisibility(true)"
/>
- <gl-disclosure-dropdown-group v-if="canReadMilestone" bordered class="gl-border-t-gray-200!">
+ <gl-disclosure-dropdown-group v-if="canReadMilestone" bordered class="!gl-border-t-gray-200">
<gl-disclosure-dropdown-item :item="copyIdItem" :data-clipboard-text="id" />
</gl-disclosure-dropdown-group>
- <gl-disclosure-dropdown-group v-if="showDelete" bordered class="gl-border-t-gray-200!">
+ <gl-disclosure-dropdown-group v-if="showDelete" bordered class="!gl-border-t-gray-200">
<gl-disclosure-dropdown-item :item="deleteItem" @action="setDeleteModalVisibility(true)" />
</gl-disclosure-dropdown-group>
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
index 93b35d71becc4..f463724c31a58 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
@@ -197,7 +197,7 @@ export default {
:items="tableItems"
show-empty
small
- class="gl-mt-0! ml-candidate-table"
+ class="ml-candidate-table !gl-mt-0"
>
<template #cell()="data">
<div>{{ data.value }}</div>
diff --git a/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue b/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
index 76497608365cd..da2a7f73e0cb5 100644
--- a/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
+++ b/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
@@ -136,7 +136,7 @@ export default {
<div>
<title-area>
<template #title>
- <div class="gl-flex-grow-1 gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-grow gl-items-center">
<span>{{ $options.i18n.TITLE_LABEL }}</span>
<gl-experiment-badge :help-page-url="$options.docHref" type="beta" />
</div>
diff --git a/app/assets/javascripts/ml/model_registry/apps/show_ml_model_version.vue b/app/assets/javascripts/ml/model_registry/apps/show_ml_model_version.vue
index b49f42e64f136..62c67072c407d 100644
--- a/app/assets/javascripts/ml/model_registry/apps/show_ml_model_version.vue
+++ b/app/assets/javascripts/ml/model_registry/apps/show_ml_model_version.vue
@@ -163,13 +163,11 @@ export default {
<template>
<div>
- <div
- class="gl-display-flex gl-flex-wrap gl-sm-flex-nowrap gl-justify-content-space-between gl-py-3"
- >
- <div class="gl-flex-direction-column gl-flex-grow-1 gl-min-w-0">
+ <div class="gl-flex gl-flex-wrap gl-justify-between gl-py-3 sm:gl-flex-nowrap">
+ <div class="gl-min-w-0 gl-grow gl-flex-col">
<title-area :title="title" />
</div>
- <div class="gl-display-flex gl-align-items-flex-start gl-gap-3 gl-mt-3">
+ <div class="gl-mt-3 gl-flex gl-items-start gl-gap-3">
<model-version-actions-dropdown @delete-model-version="deleteModelVersion" />
</div>
</div>
diff --git a/app/assets/javascripts/ml/model_registry/components/candidate_detail.vue b/app/assets/javascripts/ml/model_registry/components/candidate_detail.vue
index 58216a77e9e87..3745038231b20 100644
--- a/app/assets/javascripts/ml/model_registry/components/candidate_detail.vue
+++ b/app/assets/javascripts/ml/model_registry/components/candidate_detail.vue
@@ -24,7 +24,7 @@ import {
import DetailRow from './candidate_detail_row.vue';
export default {
- HEADER_CLASSES: ['gl-font-lg', 'gl-mt-5'],
+ HEADER_CLASSES: ['gl-text-lg', 'gl-mt-5'],
name: 'MlCandidateDetail',
components: {
DetailRow,
@@ -80,7 +80,7 @@ export default {
},
metricsTableFields() {
const maxStep = maxBy(this.candidate.metrics, 'step').step;
- const rowClass = 'gl-p-3!';
+ const rowClass = '!gl-p-3';
const cssClasses = { thClass: rowClass, tdClass: rowClass };
diff --git a/app/assets/javascripts/ml/model_registry/components/candidate_list_row.vue b/app/assets/javascripts/ml/model_registry/components/candidate_list_row.vue
index 24248c0981be6..66235274bf0d0 100644
--- a/app/assets/javascripts/ml/model_registry/components/candidate_list_row.vue
+++ b/app/assets/javascripts/ml/model_registry/components/candidate_list_row.vue
@@ -29,8 +29,8 @@ export default {
<template>
<list-item v-bind="$attrs">
<template #left-primary>
- <div class="gl-display-flex gl-align-items-center">
- <gl-link class="gl-text-body" :href="pathToDetails">
+ <div class="gl-flex gl-items-center">
+ <gl-link class="gl-text-primary" :href="pathToDetails">
<gl-truncate :text="candidate.name" />
</gl-link>
</div>
diff --git a/app/assets/javascripts/ml/model_registry/components/import_artifact_zone.vue b/app/assets/javascripts/ml/model_registry/components/import_artifact_zone.vue
index ac6933a91af42..55179f6ec7ca2 100644
--- a/app/assets/javascripts/ml/model_registry/components/import_artifact_zone.vue
+++ b/app/assets/javascripts/ml/model_registry/components/import_artifact_zone.vue
@@ -158,7 +158,7 @@ export default {
:description="subfolderValid ? $options.i18n.subfolderDescription : ''"
>
<div>
- <label for="subfolderId" class="gl-font-weight-bold" data-testid="subfolderLabel">{{
+ <label for="subfolderId" class="gl-font-bold" data-testid="subfolderLabel">{{
$options.i18n.subfolderLabel
}}</label>
<gl-icon id="toolTipSubfolderId" v-gl-tooltip name="information-o" tabindex="0" />
diff --git a/app/assets/javascripts/ml/model_registry/components/mlflow_usage_modal.vue b/app/assets/javascripts/ml/model_registry/components/mlflow_usage_modal.vue
index e9021cb693d7b..84bfcc74ff966 100644
--- a/app/assets/javascripts/ml/model_registry/components/mlflow_usage_modal.vue
+++ b/app/assets/javascripts/ml/model_registry/components/mlflow_usage_modal.vue
@@ -92,7 +92,7 @@ export default {
<label> {{ instruction.label }}</label>
<pre
- class="code highlight gl-flex gl-border-none gl-text-left gl-p-2 gl-font-monospace"
+ class="code highlight gl-flex gl-border-none gl-p-2 gl-text-left gl-font-monospace"
data-testid="preview-code"
>
<code class="gl-grow">{{ instruction.cmd }}</code>
diff --git a/app/assets/javascripts/ml/model_registry/components/model_create.vue b/app/assets/javascripts/ml/model_registry/components/model_create.vue
index 0dd8dbaef42f6..799c0c28fff89 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_create.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_create.vue
@@ -271,7 +271,7 @@ export default {
label-for="descriptionId"
optional
:optional-text="$options.modal.optionalText"
- class="common-note-form gfm-form js-main-target-form gl-flex-grow-1 new-note"
+ class="common-note-form gfm-form js-main-target-form new-note gl-grow"
>
<markdown-editor
ref="markdownEditor"
diff --git a/app/assets/javascripts/ml/model_registry/components/model_detail.vue b/app/assets/javascripts/ml/model_registry/components/model_detail.vue
index f01af8e88b47f..c42dd1d6f8f8e 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_detail.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_detail.vue
@@ -66,7 +66,7 @@ export default {
<template>
<div class="issue-details issuable-details">
<div v-if="model.latestVersion">
- <h3 class="gl-font-lg">
+ <h3 class="gl-text-lg">
{{ s__('MlModelRegistry|Latest version') }}:
<gl-link :href="model.latestVersion._links.showPath" data-testid="model-version-link">
diff --git a/app/assets/javascripts/ml/model_registry/components/model_edit.vue b/app/assets/javascripts/ml/model_registry/components/model_edit.vue
index 2080632ecc70c..84fce4edecfce 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_edit.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_edit.vue
@@ -177,7 +177,7 @@ export default {
label-for="descriptionId"
optional
:optional-text="$options.modal.optionalText"
- class="common-note-form gfm-form js-main-target-form gl-grow new-note"
+ class="common-note-form gfm-form js-main-target-form new-note gl-grow"
>
<markdown-editor
ref="markdownEditor"
diff --git a/app/assets/javascripts/ml/model_registry/components/model_list_empty_state.vue b/app/assets/javascripts/ml/model_registry/components/model_list_empty_state.vue
index 4c033b737e11d..ccfbf11b008af 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_list_empty_state.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_list_empty_state.vue
@@ -53,7 +53,7 @@ export default {
<gl-button v-gl-modal="modalId" variant="confirm" class="gl-mx-2 gl-mb-3">{{
primaryText
}}</gl-button>
- <gl-button v-gl-modal="$options.mlflowModalId" class="gl-mb-3 gl-mr-3 gl-mx-2">
+ <gl-button v-gl-modal="$options.mlflowModalId" class="gl-mx-2 gl-mb-3 gl-mr-3">
{{ $options.mlflowDocs }}
</gl-button>
</template>
diff --git a/app/assets/javascripts/ml/model_registry/components/model_row.vue b/app/assets/javascripts/ml/model_registry/components/model_row.vue
index 49f72c7cef2ad..5603c0dc8a879 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_row.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_row.vue
@@ -36,8 +36,8 @@ export default {
<template>
<list-item v-bind="$attrs">
<template #left-primary>
- <div class="gl-display-flex gl-align-items-center">
- <gl-link class="gl-text-body" :href="model._links.showPath">
+ <div class="gl-flex gl-items-center">
+ <gl-link class="gl-text-primary" :href="model._links.showPath">
<gl-truncate :text="model.name" />
</gl-link>
</div>
diff --git a/app/assets/javascripts/ml/model_registry/components/model_version_detail.vue b/app/assets/javascripts/ml/model_registry/components/model_version_detail.vue
index e93d8df042f49..125a2d4abaa8a 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_version_detail.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_version_detail.vue
@@ -43,7 +43,7 @@ export default {
<template>
<div>
- <h3 class="gl-font-lg gl-mt-5">{{ $options.i18n.DESCRIPTION_LABEL }}</h3>
+ <h3 class="gl-mt-5 gl-text-lg">{{ $options.i18n.DESCRIPTION_LABEL }}</h3>
<div v-if="modelVersion.description">
{{ modelVersion.description }}
@@ -61,7 +61,7 @@ export default {
:package-type="packageType"
>
<template v-if="showImportArtifactZone" #upload="{ refetch }">
- <h3 data-testid="uploadHeader" class="gl-text-lg gl-mt-5">
+ <h3 data-testid="uploadHeader" class="gl-mt-5 gl-text-lg">
{{ __('Upload artifacts') }}
</h3>
<import-artifact-zone :path="importPath" @change="refetch" />
diff --git a/app/assets/javascripts/ml/model_registry/components/model_version_row.vue b/app/assets/javascripts/ml/model_registry/components/model_version_row.vue
index 7e024ff546d7a..33443defc9039 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_version_row.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_version_row.vue
@@ -29,8 +29,8 @@ export default {
<template>
<list-item v-bind="$attrs">
<template #left-primary>
- <div class="gl-display-flex gl-align-items-center">
- <gl-link class="gl-text-body" :href="pathToDetails">
+ <div class="gl-flex gl-items-center">
+ <gl-link class="gl-text-primary" :href="pathToDetails">
<gl-truncate :text="modelVersion.version" />
</gl-link>
</div>
diff --git a/app/assets/javascripts/namespaces/cascading_settings/components/cascading_lock_icon.vue b/app/assets/javascripts/namespaces/cascading_settings/components/cascading_lock_icon.vue
index 6cb344ad711d6..c0a9c41d19dec 100644
--- a/app/assets/javascripts/namespaces/cascading_settings/components/cascading_lock_icon.vue
+++ b/app/assets/javascripts/namespaces/cascading_settings/components/cascading_lock_icon.vue
@@ -46,7 +46,7 @@ export default {
<template>
<span>
- <gl-button :ref="$options.refName" class="gl-hover-bg-transparent! !gl-p-0" category="tertiary">
+ <gl-button :ref="$options.refName" class="!gl-p-0 hover:!gl-bg-transparent" category="tertiary">
<gl-icon name="lock" :aria-label="$options.i18n.lockIconLabel" class="!gl-text-gray-400" />
</gl-button>
<lock-tooltip
diff --git a/app/assets/javascripts/namespaces/cascading_settings/components/lock_tooltip.vue b/app/assets/javascripts/namespaces/cascading_settings/components/lock_tooltip.vue
index 300b980023343..2a72990e40c28 100644
--- a/app/assets/javascripts/namespaces/cascading_settings/components/lock_tooltip.vue
+++ b/app/assets/javascripts/namespaces/cascading_settings/components/lock_tooltip.vue
@@ -50,7 +50,7 @@ export default {
:message="s__('CascadingSettings|This setting has been enforced by an owner of %{link}.')"
>
<template #link>
- <gl-link :href="ancestorNamespace.path" class="gl-font-sm">{{
+ <gl-link :href="ancestorNamespace.path" class="gl-text-sm">{{
ancestorNamespace.fullName
}}</gl-link>
</template>
diff --git a/app/assets/javascripts/network/branch_graph.js b/app/assets/javascripts/network/branch_graph.js
index 8adac3b65054b..195cfc326f309 100644
--- a/app/assets/javascripts/network/branch_graph.js
+++ b/app/assets/javascripts/network/branch_graph.js
@@ -272,7 +272,7 @@ export default class BranchGraph {
.text(this.offsetX + this.unitSpace * this.mspace + 35, y, commit.message.split('\n')[0])
.attr({
fill: 'currentColor',
- class: 'gl-text-body',
+ class: 'gl-text-primary',
'text-anchor': 'start',
font: '14px Monaco, monospace',
});
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue
index 211a12208c110..d4854a482e238 100644
--- a/app/assets/javascripts/notebook/cells/code/index.vue
+++ b/app/assets/javascripts/notebook/cells/code/index.vue
@@ -51,7 +51,7 @@ export default {
language="python"
:code="code"
:max-height="maxHeight"
- class="gl-border gl-p-4!"
+ class="gl-border !gl-p-4"
/>
</div>
</template>
diff --git a/app/assets/javascripts/notes/components/comment_field_layout.vue b/app/assets/javascripts/notes/components/comment_field_layout.vue
index 3011e549fa70a..01eae3e0512b4 100644
--- a/app/assets/javascripts/notes/components/comment_field_layout.vue
+++ b/app/assets/javascripts/notes/components/comment_field_layout.vue
@@ -68,7 +68,7 @@ export default {
></div>
<noteable-warning
v-if="hasWarning"
- class="gl-pt-4 gl-pb-5 -gl-mb-3 gl-rounded-lg gl-rounded-bottom-left-none gl-rounded-bottom-right-none"
+ class="-gl-mb-3 gl-rounded-lg gl-rounded-bl-none gl-rounded-br-none gl-pb-5 gl-pt-4"
:is-locked="isLocked"
:is-confidential="isConfidential"
:noteable-type="noteableType"
@@ -80,15 +80,15 @@ export default {
v-if="showAttachmentWarning"
:class="{
'gl-py-3': !showEmailParticipantsWarning,
- 'gl-pt-4 gl-pb-3 -gl-mt-3': showEmailParticipantsWarning,
+ '-gl-mt-3 gl-pb-3 gl-pt-4': showEmailParticipantsWarning,
}"
/>
<email-participants-warning
v-if="showEmailParticipantsWarning"
- class="gl-border-t-1 gl-rounded-lg gl-rounded-top-left-none! gl-rounded-top-right-none!"
+ class="gl-rounded-lg !gl-rounded-tl-none !gl-rounded-tr-none gl-border-t-1"
:class="{
- 'gl-pt-4 gl-pb-3 -gl-mt-3': !showAttachmentWarning,
- 'gl-py-3 gl-mt-1': showAttachmentWarning,
+ '-gl-mt-3 gl-pb-3 gl-pt-4': !showAttachmentWarning,
+ 'gl-mt-1 gl-py-3': showAttachmentWarning,
}"
:emails="emailParticipants"
/>
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 721687dc6a684..9753b4e6eb21f 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -395,7 +395,7 @@ export default {
<gl-form-checkbox
v-if="canSetInternalNote"
v-model="noteIsInternal"
- class="gl-mb-2 gl-flex-basis-full"
+ class="gl-mb-2 gl-basis-full"
data-testid="internal-note-checkbox"
>
{{ $options.i18n.internal }}
diff --git a/app/assets/javascripts/notes/components/comment_type_dropdown.vue b/app/assets/javascripts/notes/components/comment_type_dropdown.vue
index 271e00f1c80b5..a5b187bfa1d94 100644
--- a/app/assets/javascripts/notes/components/comment_type_dropdown.vue
+++ b/app/assets/javascripts/notes/components/comment_type_dropdown.vue
@@ -137,7 +137,7 @@ export default {
<template>
<gl-button-group
- class="js-comment-button js-comment-submit-button comment-type-dropdown gl-w-full gl-mb-3 gl-md-w-auto gl-md-mb-0"
+ class="js-comment-button js-comment-submit-button comment-type-dropdown gl-mb-3 gl-w-full md:gl-mb-0 md:gl-w-auto"
:data-track-label="trackingLabel"
data-track-action="click_button"
data-testid="comment-button"
diff --git a/app/assets/javascripts/notes/components/diff_discussion_header.vue b/app/assets/javascripts/notes/components/diff_discussion_header.vue
index 0f61476ac16fd..29f847ae526bb 100644
--- a/app/assets/javascripts/notes/components/diff_discussion_header.vue
+++ b/app/assets/javascripts/notes/components/diff_discussion_header.vue
@@ -106,8 +106,8 @@ export default {
</script>
<template>
- <div class="discussion-header gl-display-flex gl-align-items-center">
- <div v-once class="timeline-avatar gl-align-self-start gl-flex-shrink-0 gl-flex-shrink">
+ <div class="discussion-header gl-flex gl-items-center">
+ <div v-once class="timeline-avatar gl-flex-shrink gl-shrink-0 gl-self-start">
<gl-avatar-link
v-if="author"
:href="author.path"
@@ -118,7 +118,7 @@ export default {
<gl-avatar :src="author.avatar_url" :alt="author.name" :size="32" />
</gl-avatar-link>
</div>
- <div class="timeline-content gl-w-full gl-ml-3" :class="toggleClass">
+ <div class="timeline-content gl-ml-3 gl-w-full" :class="toggleClass">
<note-header
:author="author"
:created-at="firstNote.created_at"
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index 5e3b89a6be50a..e1d017d572ae6 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -130,7 +130,7 @@ export default {
<td v-if="error" class="js-error-lazy-load-diff diff-loading-error-block">
{{ __('Unable to load the diff') }}
<gl-button
- class="gl-font-regular js-toggle-lazy-diff-retry-button"
+ class="js-toggle-lazy-diff-retry-button gl-font-regular"
@click="fetchDiff"
>
{{ __('Try again') }}
@@ -144,7 +144,7 @@ export default {
</tr>
</template>
<tr class="notes_holder">
- <td :class="{ 'gl-border-top-0!': isFileDiscussion }" class="notes-content" colspan="3">
+ <td :class="{ '!gl-border-t-0': isFileDiscussion }" class="notes-content" colspan="3">
<slot></slot>
</td>
</tr>
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index e14803efba2ce..36cd6a69605ed 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -119,10 +119,10 @@ export default {
v-if="resolvableDiscussionsCount > 0"
id="discussionCounter"
ref="discussionCounter"
- class="gl-display-flex discussions-counter"
+ class="discussions-counter gl-flex"
>
<div
- class="gl-display-flex gl-align-items-center gl-pl-4 gl-rounded-base gl-min-h-7"
+ class="gl-flex gl-min-h-7 gl-items-center gl-rounded-base gl-pl-4"
:class="{
'gl-bg-orange-50': blocksMerge && !allResolved,
'gl-bg-gray-50': !blocksMerge || allResolved,
@@ -143,7 +143,7 @@ export default {
:title="__('Thread options')"
:aria-label="__('Thread options')"
toggle-class="btn-icon"
- class="gl-rounded-base! gl-pt-0! gl-h-full gl-ml-3"
+ class="gl-ml-3 gl-h-full !gl-rounded-base !gl-pt-0"
:items="threadOptions"
/>
</template>
@@ -154,7 +154,7 @@ export default {
v-gl-tooltip.html="previousUnresolvedDiscussionTooltip"
:aria-label="previousUnresolvedDiscussionTitle"
:aria-keyshortcuts="previousUnresolvedDiscussionShortcutKey"
- class="discussion-previous-btn gl-rounded-base! gl-px-2!"
+ class="discussion-previous-btn !gl-rounded-base !gl-px-2"
data-track-action="click_button"
data-track-label="mr_previous_unresolved_thread"
data-track-property="click_previous_unresolved_thread_top"
@@ -166,7 +166,7 @@ export default {
v-gl-tooltip.html="nextUnresolvedDiscussionTooltip"
:aria-label="nextUnresolvedDiscussionTitle"
:aria-keyshortcuts="nextUnresolvedDiscussionShortcutKey"
- class="discussion-next-btn gl-rounded-base! gl-px-2!"
+ class="discussion-next-btn !gl-rounded-base !gl-px-2"
data-track-action="click_button"
data-track-label="mr_next_unresolved_thread"
data-track-property="click_next_unresolved_thread_top"
@@ -184,7 +184,7 @@ export default {
:title="__('Thread options')"
:aria-label="__('Thread options')"
toggle-class="btn-icon"
- class="gl-rounded-base! gl-pt-0!"
+ class="!gl-rounded-base !gl-pt-0"
:items="threadOptions"
/>
</gl-button-group>
diff --git a/app/assets/javascripts/notes/components/discussion_filter.vue b/app/assets/javascripts/notes/components/discussion_filter.vue
index 96d71915f7995..38f386c7d5fde 100644
--- a/app/assets/javascripts/notes/components/discussion_filter.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter.vue
@@ -163,7 +163,7 @@ export default {
v-if="displayFilters"
id="discussion-preferences"
data-testid="discussion-preferences"
- class="gl-display-inline-block gl-align-bottom full-width-mobile"
+ class="full-width-mobile gl-inline-block gl-align-bottom"
>
<local-storage-sync
:value="sortDirection"
diff --git a/app/assets/javascripts/notes/components/discussion_filter_note.vue b/app/assets/javascripts/notes/components/discussion_filter_note.vue
index 9b838571d2cbc..9b2bad3856b40 100644
--- a/app/assets/javascripts/notes/components/discussion_filter_note.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter_note.vue
@@ -29,7 +29,7 @@ export default {
data-testid="discussion-filter-container"
>
<div
- class="gl-float-left gl-flex gl-justify-center gl-items-center gl-rounded-full -gl-mt-1 gl-ml-2 gl-w-6 gl-h-6 gl-bg-gray-50 gl-text-gray-600"
+ class="gl-float-left -gl-mt-1 gl-ml-2 gl-flex gl-h-6 gl-w-6 gl-items-center gl-justify-center gl-rounded-full gl-bg-gray-50 gl-text-gray-600"
>
<gl-icon name="comment" />
</div>
@@ -41,7 +41,7 @@ export default {
</template>
</gl-sprintf>
</div>
- <div class="discussion-filter-actions gl-mt-3 gl-display-flex">
+ <div class="discussion-filter-actions gl-mt-3 gl-flex">
<gl-button variant="default" class="gl-mr-3" @click="selectFilter(0)">
{{ __('Show all activity') }}
</gl-button>
diff --git a/app/assets/javascripts/notes/components/discussion_locked_widget.vue b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
index 88fec0dfb9b37..9503ab92603e5 100644
--- a/app/assets/javascripts/notes/components/discussion_locked_widget.vue
+++ b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
@@ -36,9 +36,7 @@ export default {
<template>
<div class="gl-mt-3" data-testid="disabled-comments">
- <span
- class="issuable-note-warning gl-display-inline-block gl-w-full gl-px-5 gl-py-4 gl-rounded-base"
- >
+ <span class="issuable-note-warning gl-inline-block gl-w-full gl-rounded-base gl-px-5 gl-py-4">
<gl-icon :size="16" name="lock" class="icon" />
<span v-if="isProjectArchived">
{{ projectArchivedWarning }}
diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index 71674169af008..3dd0799ca402c 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -148,7 +148,7 @@ export default {
:is-overview-tab="isOverviewTab"
:should-scroll-to-note="shouldScrollToNote"
:internal-note="isDiscussionInternal"
- :class="{ 'gl-border-top-0!': isFileDiscussion }"
+ :class="{ '!gl-border-t-0': isFileDiscussion }"
@handleDeleteNote="$emit('deleteNote')"
@startReplying="$emit('startReplying')"
>
diff --git a/app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue b/app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue
index 571928b972be6..49ef23c9ebfd6 100644
--- a/app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue
@@ -21,7 +21,7 @@ export default {
'li',
{
class:
- 'discussion-collapsible gl-border-solid gl-border-gray-100 gl-border-1 gl-rounded-base gl-border-top-0',
+ 'discussion-collapsible gl-border-solid gl-border-gray-100 gl-border-1 gl-rounded-base gl-border-t-0',
},
[h('ul', { class: 'notes' }, children)],
);
diff --git a/app/assets/javascripts/notes/components/discussion_resolve_button.vue b/app/assets/javascripts/notes/components/discussion_resolve_button.vue
index cc4f360a694d1..ac1876a14a3f1 100644
--- a/app/assets/javascripts/notes/components/discussion_resolve_button.vue
+++ b/app/assets/javascripts/notes/components/discussion_resolve_button.vue
@@ -23,7 +23,7 @@ export default {
<template>
<gl-button
:loading="isResolving"
- class="gl-w-full gl-sm-w-auto ml-sm-2"
+ class="ml-sm-2 gl-w-full sm:gl-w-auto"
@click="$emit('onClick')"
>
{{ buttonTitle }}
diff --git a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
index 34cbba8ce43ac..fbc8cd154e88e 100644
--- a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
+++ b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
@@ -29,7 +29,7 @@ export default {
:href="url"
:title="$options.i18n.buttonLabel"
:aria-label="$options.i18n.buttonLabel"
- class="new-issue-for-discussion discussion-create-issue-btn gl-w-full gl-sm-w-auto"
+ class="new-issue-for-discussion discussion-create-issue-btn gl-w-full sm:gl-w-auto"
icon="issue-new"
/>
</div>
diff --git a/app/assets/javascripts/notes/components/mr_discussion_filter.vue b/app/assets/javascripts/notes/components/mr_discussion_filter.vue
index feb6b7377f006..2e3c525a2aefe 100644
--- a/app/assets/javascripts/notes/components/mr_discussion_filter.vue
+++ b/app/assets/javascripts/notes/components/mr_discussion_filter.vue
@@ -146,7 +146,7 @@ export default {
@select="select"
>
<template #toggle>
- <gl-button class="gl-rounded-top-right-none! gl-rounded-bottom-right-none!">
+ <gl-button class="!gl-rounded-br-none !gl-rounded-tr-none">
<gl-sprintf :message="selectedFilterText">
<template #strong="{ content }">
<strong>{{ content }}</strong>
diff --git a/app/assets/javascripts/notes/components/note_edited_text.vue b/app/assets/javascripts/notes/components/note_edited_text.vue
index 25c82c29a29c0..4c4e7ce14f1dc 100644
--- a/app/assets/javascripts/notes/components/note_edited_text.vue
+++ b/app/assets/javascripts/notes/components/note_edited_text.vue
@@ -56,7 +56,7 @@ export default {
<gl-link
:href="editedBy.path"
:data-user-id="editedBy.id"
- class="js-user-link author-link gl-hover-text-decoration-underline"
+ class="js-user-link author-link hover:gl-underline"
>
{{ editedBy.name }}
</gl-link>
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index de1bd5590019c..019e994662410 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -399,12 +399,12 @@ export default {
</template>
<template v-if="showBatchCommentsActions">
- <div class="gl-display-flex gl-flex-wrap -gl-mb-3">
+ <div class="-gl-mb-3 gl-flex gl-flex-wrap">
<gl-button
:disabled="isDisabled"
category="primary"
variant="confirm"
- class="gl-sm-mr-3 gl-mb-3"
+ class="gl-mb-3 sm:gl-mr-3"
data-testid="start-review-button"
@click="handleAddToReview"
>
@@ -416,13 +416,13 @@ export default {
category="secondary"
variant="confirm"
data-testid="comment-now-button"
- class="gl-sm-mr-3 gl-mb-3 js-comment-button"
+ class="js-comment-button gl-mb-3 sm:gl-mr-3"
@click="handleUpdate()"
>
{{ __('Add comment now') }}
</gl-button>
<gl-button
- class="note-edit-cancel gl-mb-3 js-close-discussion-note-form"
+ class="note-edit-cancel js-close-discussion-note-form gl-mb-3"
category="secondary"
variant="default"
data-testid="cancelBatchCommentsEnabled"
@@ -433,13 +433,13 @@ export default {
</div>
</template>
<template v-else>
- <div class="gl-display-sm-flex gl-flex-wrap gl-font-size-0">
+ <div class="gl-display-sm-flex gl-font-size-0 gl-flex-wrap">
<gl-button
:disabled="isDisabled"
category="primary"
variant="confirm"
data-testid="reply-comment-button"
- class="gl-sm-mr-3 gl-mb-3 gl-sm-mb-0 js-vue-issue-save js-comment-button"
+ class="js-vue-issue-save js-comment-button gl-mb-3 sm:gl-mb-0 sm:gl-mr-3"
@click="handleUpdate()"
>
{{ saveButtonTitle }}
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 1c645fb7333de..491ed9634801f 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -209,7 +209,7 @@ export default {
</a>
<span
v-if="!isSystemNote && !emailParticipant"
- class="text-nowrap author-username gl-text-truncate"
+ class="text-nowrap author-username gl-truncate"
>
<a
ref="authorUsernameLink"
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 03e954d185931..150c0b4bd092c 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -178,9 +178,9 @@ export default {
},
discussionHolderClass() {
return {
- 'is-replying gl-pt-0!': this.isReplying,
+ 'is-replying !gl-pt-0': this.isReplying,
'internal-note': this.isDiscussionInternal,
- 'gl-pt-0!': !this.discussion.diff_discussion && this.isReplying,
+ '!gl-pt-0': !this.discussion.diff_discussion && this.isReplying,
};
},
hasDraft() {
@@ -341,7 +341,7 @@ export default {
<li
v-else-if="canShowReplyActions && showReplies"
data-testid="reply-wrapper"
- class="discussion-reply-holder gl-border-t-0! gl-pb-5! clearfix"
+ class="discussion-reply-holder clearfix !gl-border-t-0 !gl-pb-5"
:class="discussionHolderClass"
>
<discussion-actions
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index bc460f55eb498..a5827cc815cde 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -412,7 +412,7 @@ export default {
<div
v-if="showMultiLineComment"
data-testid="multiline-comment"
- class="gl-text-gray-500 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-px-5 gl-py-3"
+ class="gl-border-b-1 gl-border-gray-100 gl-px-5 gl-py-3 gl-text-gray-500 gl-border-b-solid"
>
<gl-sprintf :message="__('Comment on lines %{startLine} to %{endLine}')">
<template #startLine>
diff --git a/app/assets/javascripts/notes/components/notes_activity_header.vue b/app/assets/javascripts/notes/components/notes_activity_header.vue
index cb088b7d7c2e8..5758a0834c204 100644
--- a/app/assets/javascripts/notes/components/notes_activity_header.vue
+++ b/app/assets/javascripts/notes/components/notes_activity_header.vue
@@ -51,10 +51,10 @@ export default {
<template>
<div
- class="gl-display-flex gl-sm-align-items-center gl-flex-direction-column gl-sm-flex-direction-row gl-justify-content-space-between gl-pt-5 gl-pb-3"
+ class="gl-flex gl-flex-col gl-justify-between gl-pb-3 gl-pt-5 sm:gl-flex-row sm:gl-items-center"
>
- <h2 class="gl-font-size-h1 gl-m-0">{{ __('Activity') }}</h2>
- <div class="gl-display-flex gl-gap-3 gl-w-full gl-sm-w-auto gl-mt-3 gl-sm-mt-0">
+ <h2 class="gl-m-0 gl-text-size-h1">{{ __('Activity') }}</h2>
+ <div class="gl-mt-3 gl-flex gl-w-full gl-gap-3 sm:gl-mt-0 sm:gl-w-auto">
<ai-summarize-notes
v-if="showAiActions"
:resource-global-id="resourceGlobalId"
diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
index fe2e78c81cb27..9fed414394c28 100644
--- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue
+++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
@@ -40,7 +40,7 @@ export default {
},
liClasses() {
return this.collapsed
- ? 'gl-text-gray-500 gl-rounded-bottom-left-base! gl-rounded-bottom-right-base!'
+ ? 'gl-text-gray-500 !gl-rounded-bl-base !gl-rounded-br-base'
: 'gl-border-b';
},
buttonIcon() {
@@ -62,11 +62,11 @@ export default {
<template>
<li
:class="liClasses"
- class="toggle-replies-widget gl-display-flex! gl-align-items-center gl-flex-wrap gl-bg-gray-10 gl-py-3 gl-px-5 gl-border"
+ class="toggle-replies-widget gl-border !gl-flex gl-flex-wrap gl-items-center gl-bg-gray-10 gl-px-5 gl-py-3"
>
<gl-button
ref="toggle"
- class="gl-my-2 gl-mr-3 gl-p-0!"
+ class="gl-my-2 gl-mr-3 !gl-p-0"
category="tertiary"
:icon="buttonIcon"
:aria-label="buttonLabel"
@@ -99,7 +99,7 @@ export default {
<template #name>
<gl-link
:href="lastReply.author.path || lastReply.author.webUrl"
- class="gl-text-body! gl-text-decoration-none! gl-mx-2"
+ class="gl-mx-2 !gl-text-primary !gl-no-underline"
>
{{ lastReply.author.name }}
</gl-link>
@@ -112,7 +112,7 @@ export default {
</template>
<gl-button
v-else
- class="gl-text-body! gl-text-decoration-none!"
+ class="!gl-text-primary !gl-no-underline"
variant="link"
data-testid="collapse-replies-button"
@click="toggle"
diff --git a/app/assets/javascripts/notifications/components/notifications_dropdown_item.vue b/app/assets/javascripts/notifications/components/notifications_dropdown_item.vue
index ff7b9a73029ee..5a11bcf713efa 100644
--- a/app/assets/javascripts/notifications/components/notifications_dropdown_item.vue
+++ b/app/assets/javascripts/notifications/components/notifications_dropdown_item.vue
@@ -39,7 +39,7 @@ export default {
:class="{ 'is-active': isActive }"
@click="$emit('item-selected', level)"
>
- <div class="gl-display-flex gl-flex-direction-column">
+ <div class="gl-flex gl-flex-col">
<span class="gl-font-bold">{{ title }}</span>
<span class="gl-text-gray-500">{{ description }}</span>
</div>
diff --git a/app/assets/javascripts/oauth_application/components/oauth_secret.vue b/app/assets/javascripts/oauth_application/components/oauth_secret.vue
index c4d77f108fe19..68779c800572d 100644
--- a/app/assets/javascripts/oauth_application/components/oauth_secret.vue
+++ b/app/assets/javascripts/oauth_application/components/oauth_secret.vue
@@ -76,7 +76,7 @@ export default {
</script>
<template>
- <div class="gl-display-flex gl-flex-wrap gl-gap-5">
+ <div class="gl-flex gl-flex-wrap gl-gap-5">
<input-copy-toggle-visibility
v-if="secret"
:copy-button-title="$options.COPY_SECRET"
@@ -89,7 +89,7 @@ export default {
</template>
</input-copy-toggle-visibility>
- <gl-button category="secondary" class="gl-align-self-start" @click="displayModal">{{
+ <gl-button category="secondary" class="gl-self-start" @click="displayModal">{{
$options.RENEW_SECRET
}}</gl-button>
diff --git a/app/assets/javascripts/observability/components/date_range_filter.vue b/app/assets/javascripts/observability/components/date_range_filter.vue
index 43cff0fba1f15..db844a2eb1843 100644
--- a/app/assets/javascripts/observability/components/date_range_filter.vue
+++ b/app/assets/javascripts/observability/components/date_range_filter.vue
@@ -99,10 +99,7 @@ export default {
</script>
<template>
- <div
- class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-gap-3"
- data-testid="date-range-filter"
- >
+ <div class="gl-flex gl-flex-col gl-gap-3 lg:gl-flex-row" data-testid="date-range-filter">
<date-ranges-dropdown
:selected="dateRange.value"
:date-range-options="dateRangeOptions"
diff --git a/ee/app/assets/javascripts/maintenance_mode_settings/components/app.vue b/ee/app/assets/javascripts/maintenance_mode_settings/components/app.vue
index 5524f6ed7ec90..7f5066cbc57b9 100644
--- a/ee/app/assets/javascripts/maintenance_mode_settings/components/app.vue
+++ b/ee/app/assets/javascripts/maintenance_mode_settings/components/app.vue
@@ -40,7 +40,7 @@ export default {
<section>
<gl-loading-icon v-if="loading" size="xl" />
<gl-form v-else @submit.prevent="updateMaintenanceModeSettings">
- <div class="gl-display-flex gl-align-items-center gl-mb-4">
+ <div class="gl-mb-4 gl-flex gl-items-center">
<gl-toggle
v-model="maintenanceEnabled"
:label="$options.i18n.toggleLabel"
diff --git a/ee/app/assets/javascripts/members/components/action_dropdowns/manage_roles_dropdown_footer.vue b/ee/app/assets/javascripts/members/components/action_dropdowns/manage_roles_dropdown_footer.vue
index b86aaddcfa5b3..5908141583408 100644
--- a/ee/app/assets/javascripts/members/components/action_dropdowns/manage_roles_dropdown_footer.vue
+++ b/ee/app/assets/javascripts/members/components/action_dropdowns/manage_roles_dropdown_footer.vue
@@ -18,7 +18,7 @@ export default {
<gl-button
:href="manageMemberRolesPath"
category="tertiary"
- class="gl-w-full gl-justify-content-start!"
+ class="gl-w-full !gl-justify-start"
>
{{ s__('MemberRole|Manage roles') }}
</gl-button>
diff --git a/ee/app/assets/javascripts/members/promotion_requests/components/app.vue b/ee/app/assets/javascripts/members/promotion_requests/components/app.vue
index 70a06636eba3d..c4f3a6074713e 100644
--- a/ee/app/assets/javascripts/members/promotion_requests/components/app.vue
+++ b/ee/app/assets/javascripts/members/promotion_requests/components/app.vue
@@ -137,7 +137,7 @@ export default {
<user-date :date="item.createdAt" />
</template>
</gl-table>
- <div class="gl-flex gl-flex-col gl-items-center gl-mt-4">
+ <div class="gl-mt-4 gl-flex gl-flex-col gl-items-center">
<gl-keyset-pagination
v-bind="pendingMemberApprovals.pageInfo"
:disabled="isLoading"
diff --git a/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules.vue b/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules.vue
index a650c5389b396..993ce2ea425fc 100644
--- a/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules.vue
+++ b/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules.vue
@@ -51,19 +51,19 @@ export default {
fields: [
{
key: 'rule_name',
- thClass: 'gl-text-secondary! gl-font-sm! !gl-font-semibold gl-border-t-0! w-60p',
- class: 'gl-px-0! gl-py-4!',
+ thClass: '!gl-text-secondary !gl-text-sm !gl-font-semibold !gl-border-t-0 w-60p',
+ class: '!gl-px-0 !gl-py-4',
},
{
key: 'rule_approvals',
- thClass: 'gl-text-secondary! gl-font-sm! !gl-font-semibold gl-border-t-0! w-30p',
- class: 'gl-px-0! gl-py-4!',
+ thClass: '!gl-text-secondary !gl-text-sm !gl-font-semibold !gl-border-t-0 w-30p',
+ class: '!gl-px-0 !gl-py-4',
},
{
key: 'dropdown',
label: '',
- thClass: 'gl-border-t-0! w-30p',
- class: 'gl-px-0! gl-py-4!',
+ thClass: '!gl-border-t-0 w-30p',
+ class: '!gl-px-0 !gl-py-4',
},
],
};
@@ -71,19 +71,19 @@ export default {
<template>
<div class="gl-mb-2">
- <gl-table-lite :items="filteredRules" :fields="$options.fields" class="gl-mb-0!">
+ <gl-table-lite :items="filteredRules" :fields="$options.fields" class="!gl-mb-0">
<template #head(rule_name)>{{ group.label }}</template>
<template #head(rule_approvals)>{{ __('Approvals') }}</template>
<template #cell(rule_name)="{ item }">{{ item.name }}</template>
<template #cell(rule_approvals)="{ item }">{{ getApprovalsLeftText(item) }}</template>
<template #cell(dropdown)="{ item }">
- <div class="gl-display-flex gl-justify-content-end">
+ <div class="gl-flex gl-justify-end">
<reviewer-dropdown :selected-reviewers="reviewers" :users="item.eligibleApprovers" />
</div>
</template>
</gl-table-lite>
- <div v-if="optionalRulesLength" class="gl-py-3 gl-border-b">
+ <div v-if="optionalRulesLength" class="gl-border-b gl-py-3">
<gl-button
category="tertiary"
size="small"
diff --git a/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules_wrapper.vue b/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules_wrapper.vue
index d58bbce6f0770..e3ea12887c04f 100644
--- a/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules_wrapper.vue
+++ b/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules_wrapper.vue
@@ -86,10 +86,10 @@ export default {
<template>
<div v-if="isLoading">
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-mb-3 gl-max-w-30!"></div>
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-mb-3 gl-max-w-30!"></div>
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-mb-3 gl-max-w-30!"></div>
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-mb-3 gl-max-w-30!"></div>
+ <div class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-30 gl-rounded-base"></div>
+ <div class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-30 gl-rounded-base"></div>
+ <div class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-30 gl-rounded-base"></div>
+ <div class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-30 gl-rounded-base"></div>
</div>
<div v-else>
<approval-rules
diff --git a/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_summary.vue b/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_summary.vue
index 5d266816fcba7..f35237850d526 100644
--- a/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_summary.vue
+++ b/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_summary.vue
@@ -97,9 +97,9 @@ export default {
<template>
<div
v-if="isLoading"
- class="gl-animate-skeleton-loader gl-mt-3 gl-h-4 gl-rounded-base gl-w-full"
+ class="gl-animate-skeleton-loader gl-mt-3 gl-h-4 gl-w-full gl-rounded-base"
></div>
- <p v-else-if="mergeRequest" :class="{ 'text-muted': approvalsOptional }" class="gl-mt-3 gl-mb-0">
+ <p v-else-if="mergeRequest" :class="{ 'text-muted': approvalsOptional }" class="gl-mb-0 gl-mt-3">
{{ approvalsLeftMessage }}
</p>
</template>
diff --git a/ee/app/assets/javascripts/merge_requests/components/summarize_code_changes.vue b/ee/app/assets/javascripts/merge_requests/components/summarize_code_changes.vue
index 498724d076f9a..4d18f8705f5bd 100644
--- a/ee/app/assets/javascripts/merge_requests/components/summarize_code_changes.vue
+++ b/ee/app/assets/javascripts/merge_requests/components/summarize_code_changes.vue
@@ -87,7 +87,7 @@ export default {
</script>
<template>
- <div class="gl-ml-auto gl-mb-4">
+ <div class="gl-mb-4 gl-ml-auto">
<gl-button
ref="button"
icon="tanuki-ai"
@@ -111,7 +111,7 @@ export default {
@close-button-clicked="dismiss"
>
<div v-outside="() => dismiss()">
- <p class="gl-mb-2 -gl-mt-3">
+ <p class="-gl-mt-3 gl-mb-2">
<gl-icon name="tanuki-ai" class="gl-mr-2" />
<strong>{{ __('Introducing: Summarize code changes') }}</strong>
</p>
diff --git a/ee/app/assets/javascripts/metrics/details/filter_bar/groupby_filter.vue b/ee/app/assets/javascripts/metrics/details/filter_bar/groupby_filter.vue
index d67f6a024fc94..bc5cb359e0d17 100644
--- a/ee/app/assets/javascripts/metrics/details/filter_bar/groupby_filter.vue
+++ b/ee/app/assets/javascripts/metrics/details/filter_bar/groupby_filter.vue
@@ -88,7 +88,7 @@ export default {
</script>
<template>
- <div class="gl-display-flex gl-flex-direction-row gl-align-items-center gl-gap-3">
+ <div class="gl-flex gl-flex-row gl-items-center gl-gap-3">
<gl-collapsible-listbox
v-model="groupByFunction"
data-testid="group-by-function-dropdown"
diff --git a/ee/app/assets/javascripts/metrics/details/filter_bar/metrics_filtered_search.vue b/ee/app/assets/javascripts/metrics/details/filter_bar/metrics_filtered_search.vue
index 0907d43dce182..e13453fc46a12 100644
--- a/ee/app/assets/javascripts/metrics/details/filter_bar/metrics_filtered_search.vue
+++ b/ee/app/assets/javascripts/metrics/details/filter_bar/metrics_filtered_search.vue
@@ -115,10 +115,10 @@ export default {
<template>
<div
- class="gl-mt-3 gl-mb-6 gl-py-5 gl-px-3 gl-bg-gray-10 gl-border-b-1 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-gray-100"
+ class="gl-mb-6 gl-mt-3 gl-border-b-1 gl-border-t-1 gl-border-gray-100 gl-bg-gray-10 gl-px-3 gl-py-5 gl-border-b-solid gl-border-t-solid"
>
<filtered-search
- class="filtered-search-box gl-display-flex gl-border-none"
+ class="filtered-search-box gl-flex gl-border-none"
recent-searches-storage-key="recent-metrics-filter-search"
namespace="metrics-details-filtered-search"
:search-input-placeholder="$options.i18n.searchInputPlaceholder"
@@ -147,7 +147,7 @@ export default {
<gl-button
type="submit"
:variant="loading ? 'danger' : 'confirm'"
- class="gl-my-5 gl-mb-0!"
+ class="gl-my-5 !gl-mb-0"
@click="onSubmit"
>
<template v-if="loading">
diff --git a/ee/app/assets/javascripts/metrics/details/metrics_details.vue b/ee/app/assets/javascripts/metrics/details/metrics_details.vue
index 9c91ebb18c673..8488e86e923a2 100644
--- a/ee/app/assets/javascripts/metrics/details/metrics_details.vue
+++ b/ee/app/assets/javascripts/metrics/details/metrics_details.vue
@@ -296,7 +296,7 @@ export default {
<gl-empty-state v-else :svg-path="$options.EMPTY_CHART_SVG">
<template #title>
- <p class="gl-font-lg gl-my-0">
+ <p class="gl-my-0 gl-text-lg">
<gl-sprintf
:message="
s__('ObservabilityMetrics|No data found for the selected time range %{time}')
diff --git a/ee/app/assets/javascripts/metrics/details/metrics_heatmap.vue b/ee/app/assets/javascripts/metrics/details/metrics_heatmap.vue
index f5607d7a72b85..d8ef247adf76e 100644
--- a/ee/app/assets/javascripts/metrics/details/metrics_heatmap.vue
+++ b/ee/app/assets/javascripts/metrics/details/metrics_heatmap.vue
@@ -102,7 +102,7 @@ export default {
/>
<div
v-if="cancelled"
- class="gl-absolute gl-right-0 gl-left-0 gl-top-0 gl-bottom-0 gl-text-center gl-font-bold gl-font-lg gl-py-2"
+ class="gl-absolute gl-bottom-0 gl-left-0 gl-right-0 gl-top-0 gl-py-2 gl-text-center gl-text-lg gl-font-bold"
>
<span>{{ $options.i18n.cancelledText }}</span>
</div>
diff --git a/ee/app/assets/javascripts/metrics/details/metrics_line_chart.vue b/ee/app/assets/javascripts/metrics/details/metrics_line_chart.vue
index ee5621e02c73f..3075d98beacd7 100644
--- a/ee/app/assets/javascripts/metrics/details/metrics_line_chart.vue
+++ b/ee/app/assets/javascripts/metrics/details/metrics_line_chart.vue
@@ -119,9 +119,9 @@ export default {
v-for="(metric, index) in tooltipContent"
:key="`${metric.seriesId}_${index}`"
data-testid="metric-tooltip-content"
- class="gl-display-flex gl-justify-content-space-between gl-font-sm gl-mb-1"
+ class="gl-mb-1 gl-flex gl-justify-between gl-text-sm"
>
- <gl-chart-series-label :color="metric.color" class="gl-leading-normal gl-mr-7">
+ <gl-chart-series-label :color="metric.color" class="gl-mr-7 gl-leading-normal">
<div v-for="attr in metric.attributes" :key="attr.key + attr.value">
<span class="gl-font-bold">{{ attr.key }}: </span>{{ attr.value }}
</div>
@@ -136,7 +136,7 @@ export default {
<div
v-if="cancelled"
- class="gl-absolute gl-right-0 gl-left-0 gl-top-0 gl-bottom-0 gl-text-center gl-font-bold gl-font-lg gl-py-13"
+ class="gl-absolute gl-bottom-0 gl-left-0 gl-right-0 gl-top-0 gl-py-13 gl-text-center gl-text-lg gl-font-bold"
>
<span>{{ $options.i18n.cancelledText }}</span>
</div>
diff --git a/ee/app/assets/javascripts/metrics/list/metrics_list.vue b/ee/app/assets/javascripts/metrics/list/metrics_list.vue
index 7587fba432674..1816c2f87f1cb 100644
--- a/ee/app/assets/javascripts/metrics/list/metrics_list.vue
+++ b/ee/app/assets/javascripts/metrics/list/metrics_list.vue
@@ -173,7 +173,7 @@ export default {
</header>
<div
- class="gl-mt-3 gl-py-5 gl-px-3 gl-bg-gray-10 gl-border-b-1 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-gray-100"
+ class="gl-mt-3 gl-border-b-1 gl-border-t-1 gl-border-gray-100 gl-bg-gray-10 gl-px-3 gl-py-5 gl-border-b-solid gl-border-t-solid"
>
<filtered-search
:initial-filter-value="initialFilterValue"
diff --git a/ee/app/assets/javascripts/metrics/list/metrics_table.vue b/ee/app/assets/javascripts/metrics/list/metrics_table.vue
index 3bb3e1435a31a..b4fe0c96f6e14 100644
--- a/ee/app/assets/javascripts/metrics/list/metrics_table.vue
+++ b/ee/app/assets/javascripts/metrics/list/metrics_table.vue
@@ -104,7 +104,7 @@ export default {
<template>
<div>
- <h4 class="gl-block md:!gl-hidden gl-my-5">{{ $options.i18n.title }}</h4>
+ <h4 class="gl-my-5 gl-block md:!gl-hidden">{{ $options.i18n.title }}</h4>
<gl-table
:items="formattedMetrics"
@@ -130,7 +130,7 @@ export default {
v-if="metricAttributesTruncatedItems(item) > 0"
v-gl-tooltip="metricAttributesTooltipContent(item)"
data-testid="metric-attributes-tooltip"
- class="gl-link gl-hover-text-decoration-underline"
+ class="gl-link hover:gl-underline"
>
<gl-sprintf :message="$options.i18n.moreAttributes">
<template #count>{{ metricAttributesTruncatedItems(item) }}</template>
diff --git a/ee/app/assets/javascripts/ml/ai_agents/components/agent_list.vue b/ee/app/assets/javascripts/ml/ai_agents/components/agent_list.vue
index a5a0a36cc80ba..6565357c543d5 100644
--- a/ee/app/assets/javascripts/ml/ai_agents/components/agent_list.vue
+++ b/ee/app/assets/javascripts/ml/ai_agents/components/agent_list.vue
@@ -111,7 +111,7 @@ export default {
<router-link
:to="{ name: $options.ROUTE_SHOW_AGENT, params: { agentId: item.routeId } }"
data-testid="agent-item"
- class="gl-text-body gl-leading-24"
+ class="gl-leading-24 gl-text-primary"
>
{{ item.name }}
</router-link>
diff --git a/ee/app/assets/javascripts/ml/ai_agents/views/create_agent.vue b/ee/app/assets/javascripts/ml/ai_agents/views/create_agent.vue
index 79abfecd94127..bc9bf966a8b2d 100644
--- a/ee/app/assets/javascripts/ml/ai_agents/views/create_agent.vue
+++ b/ee/app/assets/javascripts/ml/ai_agents/views/create_agent.vue
@@ -60,7 +60,7 @@ export default {
<div>
<title-area>
<template #title>
- <div class="gl-flex-grow-1 gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-grow gl-items-center">
<span>{{ s__('AIAgents|New agent') }}</span>
<gl-experiment-badge />
</div>
diff --git a/ee/app/assets/javascripts/ml/ai_agents/views/edit_agent.vue b/ee/app/assets/javascripts/ml/ai_agents/views/edit_agent.vue
index 3967fb73a1ecb..6bea1df98f127 100644
--- a/ee/app/assets/javascripts/ml/ai_agents/views/edit_agent.vue
+++ b/ee/app/assets/javascripts/ml/ai_agents/views/edit_agent.vue
@@ -137,7 +137,7 @@ export default {
<div v-else>
<title-area>
<template #title>
- <div class="gl-flex-grow-1 gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-grow gl-items-center">
<span>{{ s__('AIAgents|Agent Settings') }}</span>
<gl-experiment-badge />
</div>
diff --git a/ee/app/assets/javascripts/ml/ai_agents/views/list_agents.vue b/ee/app/assets/javascripts/ml/ai_agents/views/list_agents.vue
index d157140130829..29b17a41ff581 100644
--- a/ee/app/assets/javascripts/ml/ai_agents/views/list_agents.vue
+++ b/ee/app/assets/javascripts/ml/ai_agents/views/list_agents.vue
@@ -30,7 +30,7 @@ export default {
<div>
<title-area>
<template #title>
- <div class="gl-flex-grow-1 gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-grow gl-items-center">
<span>{{ s__('AIAgents|AI Agents') }}</span>
<gl-experiment-badge />
</div>
diff --git a/ee/app/assets/javascripts/ml/ai_agents/views/show_agent.vue b/ee/app/assets/javascripts/ml/ai_agents/views/show_agent.vue
index 57765afdb64f1..0fa31a5437452 100644
--- a/ee/app/assets/javascripts/ml/ai_agents/views/show_agent.vue
+++ b/ee/app/assets/javascripts/ml/ai_agents/views/show_agent.vue
@@ -139,7 +139,7 @@ export default {
<div v-else-if="latestVersion">
<title-area>
<template #title>
- <div class="gl-flex-grow-1 gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-grow gl-items-center">
<span>{{ agentWithVersion.name }}</span>
<gl-experiment-badge />
</div>
@@ -158,7 +158,7 @@ export default {
:is-loading="isLoading"
:predefined-prompts="$options.predefinedPrompts"
:tool-name="s__('AIAgent|Agent')"
- class="ai-agent-chat !gl-w-full gl-static gl-border-r gl-border-transparent"
+ class="ai-agent-chat gl-border-r gl-static !gl-w-full gl-border-transparent"
:empty-state-title="s__('AIAgent|Try out your agent')"
:empty-state-description="
s__('AIAgent|Your agent\'s system prompt will be applied to the chat input.')
diff --git a/ee/app/assets/javascripts/notes/components/ai_summary.vue b/ee/app/assets/javascripts/notes/components/ai_summary.vue
index 1512467bdaa44..f7c7d87d2810c 100644
--- a/ee/app/assets/javascripts/notes/components/ai_summary.vue
+++ b/ee/app/assets/javascripts/notes/components/ai_summary.vue
@@ -145,7 +145,7 @@ export default {
text: __('Remove summary'),
extraAttrs: {
variant: 'danger',
- class: 'gl-text-red-500!',
+ class: '!gl-text-red-500',
},
},
},
@@ -153,9 +153,9 @@ export default {
</script>
<template>
- <div v-if="markdown || aiLoading" class="ai-summary-card gl-rounded-base gl-border gl-bg-gray-10">
- <div class="gl-px-5 gl-py-4 gl-bg-white gl-rounded-top-base gl-border-b">
- <div class="gl-display-flex gl-align-items-center gl-gap-3">
+ <div v-if="markdown || aiLoading" class="ai-summary-card gl-border gl-rounded-base gl-bg-gray-10">
+ <div class="gl-border-b gl-rounded-t-base gl-bg-white gl-px-5 gl-py-4">
+ <div class="gl-flex gl-items-center gl-gap-3">
<gl-icon name="tanuki-ai" class="gl-text-purple-600" />
<h5 class="gl-my-0">{{ __('AI-generated summary') }}</h5>
<gl-disclosure-dropdown
@@ -191,12 +191,12 @@ export default {
<div v-else>
<div v-if="markdown" ref="markdown" v-safe-html="markdown" class="gl-mb-2"></div>
- <div class="gl-text-secondary gl-font-sm">
- <gl-icon name="eye-slash" class="gl-text-gray-400 gl-mr-2" :size="12" />{{
+ <div class="gl-text-sm gl-text-secondary">
+ <gl-icon name="eye-slash" class="gl-mr-2 gl-text-gray-400" :size="12" />{{
$options.i18n.onlyVisibleToYou
}}
·
- <gl-link :href="$options.feedback.link" target="_blank" class="gl-font-sm">{{
+ <gl-link :href="$options.feedback.link" target="_blank" class="gl-text-sm">{{
__('Leave feedback')
}}</gl-link>
</div>
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/actions.vue b/ee/app/assets/javascripts/on_demand_scans/components/actions.vue
index 32262c32415b0..931f24529b042 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/actions.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/actions.vue
@@ -119,7 +119,7 @@ export default {
</script>
<template>
- <div class="gl-display-flex gl-justify-content-end">
+ <div class="gl-flex gl-justify-end">
<gl-button
v-if="hasResults"
data-testid="view-scan-results-button"
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue b/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
index 5a905c7f85d41..8bd745e755471 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
@@ -161,7 +161,7 @@ export default {
return [...this.fields, ACTION_COLUMN].map((field) => ({
...field,
class: ['gl-text-primary'],
- thClass: ['gl-bg-transparent!', 'gl-whitespace-nowrap'],
+ thClass: ['!gl-bg-transparent', 'gl-whitespace-nowrap'],
}));
},
},
@@ -306,7 +306,7 @@ export default {
</template>
</gl-table>
- <div class="gl-display-flex gl-justify-content-center">
+ <div class="gl-flex gl-justify-center">
<gl-keyset-pagination
data-testid="pagination"
v-bind="pageInfo"
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/tabs/saved.vue b/ee/app/assets/javascripts/on_demand_scans/components/tabs/saved.vue
index 9f0990d2f4144..d275f180d4620 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/tabs/saved.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/tabs/saved.vue
@@ -164,7 +164,7 @@ export default {
extraAttrs: {
'aria-label': this.$options.i18n.deleteProfile,
'data-testid': 'delete-scan-button-desktop',
- class: 'gl-text-red-500!',
+ class: '!gl-text-red-500',
boundary: 'viewport',
variant: 'danger',
},
@@ -213,7 +213,7 @@ export default {
<div
v-if="canEditOnDemandScans"
data-testid="saved-scanners-actions"
- class="gl-md-w-full gl-text-right"
+ class="gl-text-right md:gl-w-full"
>
<gl-button
size="small"
@@ -235,7 +235,7 @@ export default {
size="small"
icon="ellipsis_v"
class="gl-hidden md:!gl-inline-flex"
- toggle-class="gl-border-0! !gl-shadow-none"
+ toggle-class="!gl-border-0 !gl-shadow-none"
:toggle-text="$options.i18n.moreActions"
:title="$options.i18n.moreActions"
>
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/tabs/scheduled.vue b/ee/app/assets/javascripts/on_demand_scans/components/tabs/scheduled.vue
index edb4ad9d01d13..e624f146d6ee7 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/tabs/scheduled.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/tabs/scheduled.vue
@@ -46,7 +46,7 @@ export default {
>
<template #cell(nextRun)="{ value: { date, time, timezone } }">
<div class="gl-whitespace-nowrap"><gl-icon :size="12" name="calendar" /> {{ date }}</div>
- <div class="gl-text-secondary gl-whitespace-nowrap">
+ <div class="gl-whitespace-nowrap gl-text-secondary">
<gl-icon :size="12" name="clock" /> {{ time }} {{ getTimezoneCode(timezone) }}
</div>
</template>
diff --git a/ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue b/ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue
index 0b9abe8e4385f..c12a39536c47b 100644
--- a/ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue
+++ b/ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue
@@ -348,7 +348,7 @@ export default {
@dismiss="hideErrors"
>
{{ errorMessage }}
- <ul v-if="errors.length" class="gl-mt-3 gl-mb-0">
+ <ul v-if="errors.length" class="gl-mb-0 gl-mt-3">
<li v-for="error in errors" :key="error" v-safe-html="error"></li>
</ul>
</gl-alert>
@@ -394,7 +394,7 @@ export default {
<gl-icon
id="scan-type-info"
name="question-o"
- class="gl-ml-2 gl-link gl-cursor-pointer"
+ class="gl-link gl-ml-2 gl-cursor-pointer"
/>
<gl-popover target="scan-type-info" placement="top" triggers="focus hover">
<span>{{ $options.i18n.scanTypeTooltip }}</span>
@@ -402,7 +402,7 @@ export default {
</gl-form-group>
<gl-form-group class="gl-mb-3" :label="__('Branch')">
- <small class="form-text gl-text-secondary gl-mt-0 gl-mb-5">
+ <small class="form-text gl-mb-5 gl-mt-0 gl-text-secondary">
{{ $options.i18n.branchSelectorHelpText }}
</small>
<ref-selector
@@ -413,12 +413,12 @@ export default {
:project-id="projectPath"
:translations="$options.i18n.scanConfigurationBranchDropDown"
/>
- <div v-if="!defaultBranch" class="gl-text-red-500 gl-mt-3">
+ <div v-if="!defaultBranch" class="gl-mt-3 gl-text-red-500">
{{ $options.i18n.scanConfigurationDefaultBranchLabel }}
</div>
</gl-form-group>
<gl-form-group
- class="gl-mt-6 gl-mb-3"
+ class="gl-mb-3 gl-mt-6"
data-testid="on-demand-scan-runner-tags"
optional
:label="$options.i18n.runnerTagsLabel"
diff --git a/ee/app/assets/javascripts/on_demand_scans_form/components/runner_tags.vue b/ee/app/assets/javascripts/on_demand_scans_form/components/runner_tags.vue
index ffc54497fa40b..4e5594b0bbcb6 100644
--- a/ee/app/assets/javascripts/on_demand_scans_form/components/runner_tags.vue
+++ b/ee/app/assets/javascripts/on_demand_scans_form/components/runner_tags.vue
@@ -69,7 +69,7 @@ export default {
</gl-sprintf>
<runner-tags-dropdown
- toggle-class="gl-w-full gl-mb-1! gl-mt-4"
+ toggle-class="gl-w-full !gl-mb-1 gl-mt-4"
:block="true"
:disabled="isRunnerTagsDisabled"
:empty-tags-list-placeholder="$options.i18n.noRunnerTagsText"
diff --git a/ee/app/assets/javascripts/on_demand_scans_form/components/scan_schedule.vue b/ee/app/assets/javascripts/on_demand_scans_form/components/scan_schedule.vue
index 58c12d7b641c1..84bdd52899ae3 100644
--- a/ee/app/assets/javascripts/on_demand_scans_form/components/scan_schedule.vue
+++ b/ee/app/assets/javascripts/on_demand_scans_form/components/scan_schedule.vue
@@ -108,10 +108,10 @@ export default {
/>
<transition name="fade">
<gl-form-group v-if="form.isScheduledScan" data-testid="profile-schedule-form-group">
- <div class="gl-font-bold gl-mb-3">
+ <div class="gl-mb-3 gl-font-bold">
{{ $options.i18n.scanStartTimeLabel }}
</div>
- <div class="gl-display-flex gl-align-items-center gl-mb-5">
+ <div class="gl-mb-5 gl-flex gl-items-center">
<gl-datepicker v-model="form.startDate" @input="handleInput" />
<span class="gl-px-3">
{{ $options.i18n.scanScheduleRepeatLabel }}
@@ -124,7 +124,7 @@ export default {
/>
</div>
- <div class="gl-font-bold gl-mb-3">
+ <div class="gl-mb-3 gl-font-bold">
{{ $options.i18n.scanScheduleTimezoneLabel }}
</div>
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
index 805acf2eca448..c186229a1fc5e 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
@@ -267,15 +267,15 @@ export default {
<div>
<gl-card
class="gl-mt-5"
- :class="{ 'gl-border-bottom-0': !scheduleVisible }"
+ :class="{ 'gl-border-b-0': !scheduleVisible }"
body-class="gl-bg-gray-10 gl-py-0"
:header-class="{ 'gl-bg-white': true, 'gl-rounded-small': !scheduleVisible }"
>
<template #header>
- <div class="gl-display-flex gl-align-items-flex-start" data-testid="schedule-header">
- <div class="gl-flex-grow-1">
- <h2 class="gl-font-bold gl-m-0">{{ schedule.name }}</h2>
- <p class="gl-text-gray-500 gl-m-0">
+ <div class="gl-flex gl-items-start" data-testid="schedule-header">
+ <div class="gl-grow">
+ <h2 class="gl-m-0 gl-font-bold">{{ schedule.name }}</h2>
+ <p class="gl-m-0 gl-text-gray-500">
{{ scheduleInfo }}
</p>
</div>
@@ -283,7 +283,7 @@ export default {
v-if="userCanCreateSchedule"
v-gl-tooltip.hover
:title="$options.i18n.moreActions"
- toggle-class="gl-mr-2 gl-py-2!"
+ toggle-class="gl-mr-2 !gl-py-2"
class="gl-border-r"
data-testid="schedule-edit-button-group"
icon="ellipsis_v"
@@ -318,11 +318,8 @@ export default {
</div>
</template>
<gl-collapse :visible="scheduleVisible">
- <div
- class="gl-mt-3 gl-display-flex gl-justify-content-space-between"
- data-testid="rotations-header"
- >
- <h3 class="gl-font-lg gl-m-0">{{ $options.i18n.rotationTitle }}</h3>
+ <div class="gl-mt-3 gl-flex gl-justify-between" data-testid="rotations-header">
+ <h3 class="gl-m-0 gl-text-lg">{{ $options.i18n.rotationTitle }}</h3>
<gl-button v-if="userCanCreateSchedule" v-gl-modal="addRotationModalId" variant="link"
>{{ $options.i18n.addARotation }}
</gl-button>
@@ -330,9 +327,9 @@ export default {
<hr class="gl-my-3" />
- <div class="gl-display-flex gl-align-items-center gl-mb-3">
- <gl-icon name="calendar" :size="14" class="gl-text-gray-700 gl-mr-2" />
- <div class="gl-flex-grow-1 gl-text-gray-700 gl-font-bold">{{ scheduleRange }}</div>
+ <div class="gl-mb-3 gl-flex gl-items-center">
+ <gl-icon name="calendar" :size="14" class="gl-mr-2 gl-text-gray-700" />
+ <div class="gl-grow gl-font-bold gl-text-gray-700">{{ scheduleRange }}</div>
<gl-collapsible-listbox
:items="$options.presetListboxItems"
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedules_wrapper.vue b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedules_wrapper.vue
index d8872a62766a2..afb7e7ad22b88 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedules_wrapper.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedules_wrapper.vue
@@ -109,7 +109,7 @@ export default {
<gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3" />
<template v-else-if="hasSchedules">
- <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
+ <div class="gl-flex gl-items-center gl-justify-between">
<h1>{{ $options.i18n.title }}</h1>
<gl-button
v-if="userCanCreateSchedule"
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue
index 684f2d7c2805d..c33e69ca8bc7e 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue
@@ -112,7 +112,7 @@ export default {
<template>
<gl-form>
- <div class="gl-w-full gl-sm-w-75p">
+ <div class="gl-w-full sm:gl-w-3/4">
<gl-form-group
:label="$options.i18n.fields.name.title"
label-size="sm"
@@ -166,11 +166,11 @@ export default {
:invalid-feedback="$options.i18n.fields.rotationLength.error"
:state="validationState.rotationLength"
>
- <div class="gl-display-flex">
+ <div class="gl-flex">
<gl-form-input
id="rotation-length"
type="number"
- class="gl-w-12 gl-mr-3"
+ class="gl-mr-3 gl-w-12"
min="1"
:value="form.rotationLength.length"
@input="$emit('update-rotation-form', { type: 'rotationLength.length', value: $event })"
@@ -195,7 +195,7 @@ export default {
:invalid-feedback="$options.i18n.fields.startsAt.error"
:state="validationState.startsAt"
>
- <div class="gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-items-center">
<gl-datepicker
class="gl-mr-3"
:value="form.startsAt.date"
@@ -230,7 +230,7 @@ export default {
</div>
</gl-form-group>
</div>
- <div class="gl-display-inline-block">
+ <div class="gl-inline-block">
<gl-toggle
:value="form.isEndDateEnabled"
:label="$options.i18n.fields.endsAt.enableToggle"
@@ -253,7 +253,7 @@ export default {
:invalid-feedback="$options.i18n.fields.endsAt.error"
class="gl-mb-0"
>
- <div class="gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-items-center">
<gl-datepicker
class="gl-mr-3"
:value="form.endsAt.date"
@@ -313,7 +313,7 @@ export default {
:invalid-feedback="$options.i18n.fields.endsAt.error"
class="gl-mb-0"
>
- <div class="gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-items-center">
<span> {{ __('From') }} </span>
<gl-dropdown
data-testid="restricted-from"
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
index d7c5478cb7a14..9c025c06576eb 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
@@ -11,7 +11,7 @@ export const SHIFT_WIDTHS = {
xs: 20,
};
-const ROTATION_CENTER_CLASS = 'gl-rounded-base gl-display-flex gl-align-items-center';
+const ROTATION_CENTER_CLASS = 'gl-rounded-base gl-flex gl-items-center';
export const TIME_DATE_FORMAT = 'mmmm d, yyyy, HH:MM ("UTC:" o)';
export default {
@@ -85,17 +85,14 @@ export default {
<template>
<div
- class="rotation-asignee-container gl-absolute gl-h-7 gl-mt-3 gl-pr-1"
+ class="rotation-asignee-container gl-absolute gl-mt-3 gl-h-7 gl-pr-1"
:style="containerStyle"
>
<div
:id="rotationAssigneeUniqueID"
class="gl-h-6"
:style="backgroundStyle"
- :class="[
- $options.ROTATION_CENTER_CLASS,
- { 'gl-justify-content-center': hasRotationMobileViewText },
- ]"
+ :class="[$options.ROTATION_CENTER_CLASS, { 'gl-justify-center': hasRotationMobileViewText }]"
data-testid="rotation-assignee"
>
<div
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/current_day_indicator.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/current_day_indicator.vue
index 0d98b8978d9c2..cd71061704b43 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/current_day_indicator.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/current_day_indicator.vue
@@ -39,6 +39,6 @@ export default {
v-if="isVisible"
:style="getIndicatorStyles(presetType, timeframeItem, timelineWidth)"
data-testid="current-day-indicator"
- class="current-day-indicator gl-absolute gl-bg-red-500 gl-pointer-events-none -gl-translate-x-1/2"
+ class="current-day-indicator gl-pointer-events-none gl-absolute -gl-translate-x-1/2 gl-bg-red-500"
></span>
</template>
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_days/days_header_sub_item.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_days/days_header_sub_item.vue
index 9813c36d20cc7..90cf54f4fc697 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_days/days_header_sub_item.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_days/days_header_sub_item.vue
@@ -20,20 +20,20 @@ export default {
return '';
}
- return 'gl-text-gray-900! gl-font-bold';
+ return '!gl-text-gray-900 gl-font-bold';
},
},
};
</script>
<template>
- <div class="item-sublabel gl-pb-3 gl-relative gl-display-flex" data-testid="day-item-sublabel">
+ <div class="item-sublabel gl-relative gl-flex gl-pb-3" data-testid="day-item-sublabel">
<span
v-for="hour in $options.HOURS_IN_DAY"
:key="hour"
ref="dailyHourCell"
:class="getSubItemValueClass(hour)"
- class="sublabel-value gl-text-gray-700 gl-font-normal gl-text-center gl-flex-grow-1 gl-flex-basis-0"
+ class="sublabel-value gl-grow gl-basis-0 gl-text-center gl-font-normal gl-text-gray-700"
data-testid="sublabel-value"
>{{ hour - 1 }}</span
>
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_item.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_item.vue
index 48b2892a8904b..bdccd692a003c 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_item.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_item.vue
@@ -44,7 +44,7 @@ export default {
<template>
<span class="timeline-header-item gl-float-left" :style="timelineHeaderStyles">
- <div class="gl-font-bold gl-text-gray-500 gl-pl-6" data-testid="timeline-header-label">
+ <div class="gl-pl-6 gl-font-bold gl-text-gray-500" data-testid="timeline-header-label">
{{ timelineHeaderLabel }}
</div>
<weeks-header-sub-item :timeframe-item="timeframeItem" />
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_sub_item.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_sub_item.vue
index b34fe8fcf81b9..653336a29e3cc 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_sub_item.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_sub_item.vue
@@ -32,7 +32,7 @@ export default {
getSubItemValueClass(subItem) {
// Show dark color text only for the current date
if (subItem.getTime() === this.$options.currentDate.getTime()) {
- return 'gl-text-gray-900! gl-font-bold';
+ return '!gl-text-gray-900 gl-font-bold';
}
return '';
@@ -45,13 +45,13 @@ export default {
</script>
<template>
- <div class="item-sublabel week-item-sublabel gl-pb-3 gl-relative gl-display-flex">
+ <div class="item-sublabel week-item-sublabel gl-relative gl-flex gl-pb-3">
<span
v-for="(subItem, index) in headerSubItems"
:key="index"
ref="weeklyDayCell"
:class="getSubItemValueClass(subItem)"
- class="sublabel-value gl-text-gray-700 gl-font-normal gl-text-center gl-flex-grow-1 gl-flex-basis-0"
+ class="sublabel-value gl-grow gl-basis-0 gl-text-center gl-font-normal gl-text-gray-700"
data-testid="sublabel-value"
>{{ getSubItemValue(subItem) }}</span
>
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue
index b45f3c646f5a9..53202dd537347 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue
@@ -90,14 +90,14 @@ export default {
<template>
<div class="list-section">
<gl-loading-icon v-if="loading" size="sm" />
- <div v-else-if="rotations.length === 0 && !loading" class="gl-clearfix gl-border-t">
+ <div v-else-if="rotations.length === 0 && !loading" class="gl-border-t gl-clearfix">
<span
- class="details-cell gl-sticky gl-left-0 gl-float-left gl-display-flex gl-justify-content-space-between gl-align-items-center"
+ class="details-cell gl-sticky gl-left-0 gl-float-left gl-flex gl-items-center gl-justify-between"
>
- <span class="gl-text-truncate gl-text-gray-700">{{ $options.i18n.addRotationLabel }}</span>
+ <span class="gl-truncate gl-text-gray-700">{{ $options.i18n.addRotationLabel }}</span>
</span>
<span
- class="timeline-cell gl-float-left gl-overflow-hidden gl-relative"
+ class="timeline-cell gl-relative gl-float-left gl-overflow-hidden"
:style="timelineStyles"
>
<current-day-indicator
@@ -108,13 +108,13 @@ export default {
</span>
</div>
<div v-else>
- <div v-for="rotation in rotations" :key="rotation.id" class="gl-clearfix gl-border-t">
+ <div v-for="rotation in rotations" :key="rotation.id" class="gl-border-t gl-clearfix">
<span
- class="details-cell gl-sticky gl-left-0 gl-float-left gl-display-flex gl-justify-content-space-between gl-align-items-center"
+ class="details-cell gl-sticky gl-left-0 gl-float-left gl-flex gl-items-center gl-justify-between"
>
<span
v-gl-tooltip="{ boundary: 'viewport', title: rotation.name }"
- class="gl-text-truncate gl-text-gray-700"
+ class="gl-truncate gl-text-gray-700"
:aria-label="rotation.name"
:data-testid="`rotation-name-${rotation.id}`"
>{{ rotation.name }}</span
@@ -145,7 +145,7 @@ export default {
</gl-button-group>
</span>
<span
- class="timeline-cell gl-float-left gl-overflow-hidden gl-relative"
+ class="timeline-cell gl-relative gl-float-left gl-overflow-hidden"
:style="timelineStyles"
data-testid="timeline-cell"
>
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/schedule_timeline_section.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/schedule_timeline_section.vue
index db9b4e1c1f1aa..e2b93dc8ca2e7 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/schedule_timeline_section.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/schedule_timeline_section.vue
@@ -54,7 +54,7 @@ export default {
<template>
<div class="timeline-section clearfix gl-sticky gl-top-0">
<div>
- <span class="timeline-header-label gl-text-gray-700 gl-float-left">{{
+ <span class="timeline-header-label gl-float-left gl-text-gray-700">{{
presetIsDay ? __('Hour') : __('Date')
}}</span>
</div>
diff --git a/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_spec.js.snap b/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_spec.js.snap
index 3b5f7d7352dff..6d88b78a1b759 100644
--- a/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_spec.js.snap
+++ b/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_spec.js.snap
@@ -6,25 +6,25 @@ exports[`Reviewer drawer approval rules component renders non-optional rules by
>
<td
aria-colindex="1"
- class="gl-px-0! gl-py-4!"
+ class="!gl-px-0 !gl-py-4"
role="cell"
>
Required rule
</td>
<td
aria-colindex="2"
- class="gl-px-0! gl-py-4!"
+ class="!gl-px-0 !gl-py-4"
role="cell"
>
0 of 1
</td>
<td
aria-colindex="3"
- class="gl-px-0! gl-py-4!"
+ class="!gl-px-0 !gl-py-4"
role="cell"
>
<div
- class="gl-display-flex gl-justify-content-end"
+ class="gl-flex gl-justify-end"
/>
</td>
</tr>
@@ -36,25 +36,25 @@ exports[`Reviewer drawer approval rules component toggles optional rows when cli
>
<td
aria-colindex="1"
- class="gl-px-0! gl-py-4!"
+ class="!gl-px-0 !gl-py-4"
role="cell"
>
Optional rule
</td>
<td
aria-colindex="2"
- class="gl-px-0! gl-py-4!"
+ class="!gl-px-0 !gl-py-4"
role="cell"
>
0 of 0
</td>
<td
aria-colindex="3"
- class="gl-px-0! gl-py-4!"
+ class="!gl-px-0 !gl-py-4"
role="cell"
>
<div
- class="gl-display-flex gl-justify-content-end"
+ class="gl-flex gl-justify-end"
/>
</td>
</tr>
diff --git a/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_wrapper_spec.js.snap b/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_wrapper_spec.js.snap
index 8f06f792c83b5..c27d8a92ae67a 100644
--- a/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_wrapper_spec.js.snap
+++ b/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_wrapper_spec.js.snap
@@ -3,16 +3,16 @@
exports[`Reviewer drawer approval rules wrapper component renders loading skeleton 1`] = `
<div>
<div
- class="gl-animate-skeleton-loader gl-h-4 gl-max-w-30! gl-mb-3 gl-rounded-base"
+ class="!gl-max-w-30 gl-animate-skeleton-loader gl-h-4 gl-mb-3 gl-rounded-base"
/>
<div
- class="gl-animate-skeleton-loader gl-h-4 gl-max-w-30! gl-mb-3 gl-rounded-base"
+ class="!gl-max-w-30 gl-animate-skeleton-loader gl-h-4 gl-mb-3 gl-rounded-base"
/>
<div
- class="gl-animate-skeleton-loader gl-h-4 gl-max-w-30! gl-mb-3 gl-rounded-base"
+ class="!gl-max-w-30 gl-animate-skeleton-loader gl-h-4 gl-mb-3 gl-rounded-base"
/>
<div
- class="gl-animate-skeleton-loader gl-h-4 gl-max-w-30! gl-mb-3 gl-rounded-base"
+ class="!gl-max-w-30 gl-animate-skeleton-loader gl-h-4 gl-mb-3 gl-rounded-base"
/>
</div>
`;
diff --git a/ee/spec/frontend/on_demand_scans/components/__snapshots__/actions_spec.js.snap b/ee/spec/frontend/on_demand_scans/components/__snapshots__/actions_spec.js.snap
index 1aa5ce8e53e91..93767f1e474a1 100644
--- a/ee/spec/frontend/on_demand_scans/components/__snapshots__/actions_spec.js.snap
+++ b/ee/spec/frontend/on_demand_scans/components/__snapshots__/actions_spec.js.snap
@@ -2,6 +2,6 @@
exports[`Actions doesn't render anything if the scan status is not supported 1`] = `
<div
- class="gl-display-flex gl-justify-content-end"
+ class="gl-flex gl-justify-end"
/>
`;
diff --git a/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap b/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap
index 792943ff4fa5e..a942a381d2966 100644
--- a/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap
+++ b/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap
@@ -9,11 +9,11 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
class="gl-border-t gl-clearfix"
>
<span
- class="details-cell gl-align-items-center gl-display-flex gl-float-left gl-justify-content-space-between gl-left-0 gl-sticky"
+ class="details-cell gl-flex gl-float-left gl-items-center gl-justify-between gl-left-0 gl-sticky"
>
<span
aria-label="Rotation 242"
- class="gl-text-gray-700 gl-text-truncate"
+ class="gl-text-gray-700 gl-truncate"
data-testid="rotation-name-gid://gitlab/IncidentManagement::OncallRotation/2"
>
Rotation 242
@@ -75,13 +75,13 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
style="left: 0px; width: 0px;"
>
<div
- class="gl-align-items-center gl-display-flex gl-h-6 gl-justify-content-center gl-rounded-base"
+ class="gl-flex gl-h-6 gl-items-center gl-justify-center gl-rounded-base"
data-testid="rotation-assignee"
id="reference-0"
style="background-color: rgb(97, 122, 226);"
>
<div
- class="gl-align-items-center gl-display-flex gl-rounded-base gl-text-white"
+ class="gl-flex gl-items-center gl-rounded-base gl-text-white"
/>
</div>
<div
@@ -106,13 +106,13 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
style="left: 0px; width: 0px;"
>
<div
- class="gl-align-items-center gl-display-flex gl-h-6 gl-justify-content-center gl-rounded-base"
+ class="gl-flex gl-h-6 gl-items-center gl-justify-center gl-rounded-base"
data-testid="rotation-assignee"
id="reference-1"
style="background-color: rgb(201, 93, 46);"
>
<div
- class="gl-align-items-center gl-display-flex gl-rounded-base gl-text-white"
+ class="gl-flex gl-items-center gl-rounded-base gl-text-white"
/>
</div>
<div
diff --git a/ee/spec/frontend/oncall_schedule/schedule/components/preset_days/days_header_sub_item_spec.js b/ee/spec/frontend/oncall_schedule/schedule/components/preset_days/days_header_sub_item_spec.js
index c13dae0d7797c..f85c7704449a7 100644
--- a/ee/spec/frontend/oncall_schedule/schedule/components/preset_days/days_header_sub_item_spec.js
+++ b/ee/spec/frontend/oncall_schedule/schedule/components/preset_days/days_header_sub_item_spec.js
@@ -47,12 +47,12 @@ describe('ee/oncall_schedules/components/schedule/components/preset_days/days_he
const currentHour = currentDate.getHours();
expect(findSublabels().at(currentHour).classes()).toStrictEqual([
'sublabel-value',
- 'gl-text-gray-700',
- 'gl-font-normal',
+ 'gl-grow',
+ 'gl-basis-0',
'gl-text-center',
- 'gl-flex-grow-1',
- 'gl-flex-basis-0',
- 'gl-text-gray-900!',
+ 'gl-font-normal',
+ 'gl-text-gray-700',
+ '!gl-text-gray-900',
'gl-font-bold',
]);
expect(findDaysHeaderCurrentIndicator().exists()).toBe(true);
diff --git a/ee/spec/frontend/oncall_schedule/schedule/components/preset_weeks/weeks_header_sub_item_spec.js b/ee/spec/frontend/oncall_schedule/schedule/components/preset_weeks/weeks_header_sub_item_spec.js
index ea297ea6ba881..1bbe5a93bda04 100644
--- a/ee/spec/frontend/oncall_schedule/schedule/components/preset_weeks/weeks_header_sub_item_spec.js
+++ b/ee/spec/frontend/oncall_schedule/schedule/components/preset_weeks/weeks_header_sub_item_spec.js
@@ -60,10 +60,10 @@ describe('WeeksHeaderSubItemComponent', () => {
expect(wrapper.find('.current-day-indicator-header.preset-weeks').exists()).toBe(true);
});
- it("sublabel has `gl-text-gray-900! gl-font-bold` classes when it is for today's date", () => {
+ it("sublabel has `!gl-text-gray-900 gl-font-bold` classes when it is for today's date", () => {
// Timeframe starts at Jan 1, 2018, faked today is Jan 3, 2018 (3rd item in a week timeframe)
expect(findSublabelValues().at(2).classes()).toEqual(
- expect.arrayContaining(['gl-text-gray-900!', 'gl-font-bold']),
+ expect.arrayContaining(['!gl-text-gray-900', 'gl-font-bold']),
);
});
});
diff --git a/spec/frontend/members/components/table/__snapshots__/member_activity_spec.js.snap b/spec/frontend/members/components/table/__snapshots__/member_activity_spec.js.snap
index 5ba3b9c1efe8a..9ece3dda10df7 100644
--- a/spec/frontend/members/components/table/__snapshots__/member_activity_spec.js.snap
+++ b/spec/frontend/members/components/table/__snapshots__/member_activity_spec.js.snap
@@ -2,10 +2,10 @@
exports[`MemberActivity with a member that does not have all of the fields renders \`User created\` field 1`] = `
<div
- class="gl-display-flex gl-flex-direction-column gl-gap-2"
+ class="gl-flex gl-flex-col gl-gap-2"
>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
@@ -27,10 +27,10 @@ exports[`MemberActivity with a member that does not have all of the fields rende
exports[`MemberActivity with a member that has all fields and "requestAcceptedAt" field in the member entity is not null should use this field to display an access granted date 1`] = `
<div
- class="gl-display-flex gl-flex-direction-column gl-gap-2"
+ class="gl-flex gl-flex-col gl-gap-2"
>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
@@ -48,7 +48,7 @@ exports[`MemberActivity with a member that has all fields and "requestAcceptedAt
</span>
</div>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
@@ -66,7 +66,7 @@ exports[`MemberActivity with a member that has all fields and "requestAcceptedAt
</span>
</div>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
@@ -88,10 +88,10 @@ exports[`MemberActivity with a member that has all fields and "requestAcceptedAt
exports[`MemberActivity with a member that has all fields renders \`User created\`, \`Access granted\`, and \`Last activity\` fields 1`] = `
<div
- class="gl-display-flex gl-flex-direction-column gl-gap-2"
+ class="gl-flex gl-flex-col gl-gap-2"
>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
@@ -109,7 +109,7 @@ exports[`MemberActivity with a member that has all fields renders \`User created
</span>
</div>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
@@ -127,7 +127,7 @@ exports[`MemberActivity with a member that has all fields renders \`User created
</span>
</div>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
--
GitLab