From 109ca056c13bef74d3d8d6f62bc87ec8d041401a Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Tue, 20 Jun 2023 15:53:10 +0200
Subject: [PATCH] Adding reusable new card styles

Moves the current overrides for the new card styles into
reusable styles for consistency and better maintainability.
This resulted in fixing wrong spacing used in Work items OKR
empty state and the button alignment in the add form in the
related items widget.

Changelog: changed
---
 .../design_management/pages/index.vue         | 20 ++--
 .../components/related_merge_requests.vue     | 84 +++++++++--------
 .../components/related_issues_block.vue       | 81 ++++++++--------
 .../work_items/components/widget_wrapper.vue  | 28 ++----
 .../work_item_links/work_item_link_child.vue  |  2 +-
 .../work_item_links/work_item_links.vue       | 93 +++++++++---------
 .../work_item_links/work_item_links_form.vue  |  3 +-
 .../work_item_links/work_item_tree.vue        |  8 +-
 app/assets/stylesheets/framework.scss         |  1 +
 .../stylesheets/framework/new_card.scss       | 94 +++++++++++++++++++
 app/views/projects/branches/_panel.html.haml  |  4 +-
 .../components/create_issue_form.vue          | 33 +++----
 .../components/related_items_tree_app.vue     | 24 +++--
 .../components/related_items_tree_body.vue    |  2 +-
 .../components/related_items_tree_header.vue  | 12 +--
 .../components/tree_root.vue                  |  2 +-
 .../mixins/tree_dd_mixin.js                   |  2 +-
 .../components/related_items_tree.scss        |  5 -
 ee/spec/features/epics/epic_issues_spec.rb    |  4 +-
 .../features/epics/epic_related_epics_spec.rb |  4 +-
 ee/spec/features/epics/epic_show_spec.rb      |  2 +-
 .../components/related_items_tree_app_spec.js |  3 +-
 .../related_items_tree_body_spec.js           |  4 -
 .../components/tree_root_spec.js              |  2 +-
 .../components/related_issues_block_spec.js   |  4 +-
 25 files changed, 298 insertions(+), 223 deletions(-)
 create mode 100644 app/assets/stylesheets/framework/new_card.scss

diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index e7308aad785b8b..b55610721a9e05 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -146,12 +146,6 @@ export default {
       }
       return 'col-12';
     },
-    designContentWrapperClass() {
-      if (this.hasDesigns) {
-        return 'gl-bg-gray-10 gl-border gl-border-t-0 gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-px-5';
-      }
-      return null;
-    },
   },
   mounted() {
     if (this.$route.path === '/designs') {
@@ -359,6 +353,7 @@ export default {
   <div
     data-testid="designs-root"
     class="gl-mt-4"
+    :class="{ 'gl-new-card': showToolbar }"
     @mouseenter="toggleOnPasteListener"
     @mouseleave="toggleOffPasteListener"
   >
@@ -371,11 +366,7 @@ export default {
     >
       {{ uploadError }}
     </gl-alert>
-    <header
-      v-if="showToolbar"
-      class="gl-border gl-px-5 gl-py-4 gl-display-flex gl-justify-content-space-between gl-bg-white gl-rounded-top-base"
-      data-testid="design-toolbar-wrapper"
-    >
+    <header v-if="showToolbar" class="gl-new-card-header" data-testid="design-toolbar-wrapper">
       <div
         class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full gl-flex-wrap gl-gap-3"
       >
@@ -427,7 +418,12 @@ export default {
         </div>
       </div>
     </header>
-    <div :class="designContentWrapperClass">
+    <div
+      :class="{
+        'gl-mx-5': showToolbar,
+        'gl-new-card-body gl-mx-3!': hasDesigns,
+      }"
+    >
       <gl-loading-icon v-if="isLoading" size="lg" />
       <gl-alert v-else-if="error" variant="danger" :dismissible="false">
         {{ $options.i18n.designLoadingError }}
diff --git a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
index 8490ffd33cd07d..de59210ff191e0 100644
--- a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
+++ b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
@@ -65,29 +65,29 @@ export default {
 
 <template>
   <div v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)">
-    <div class="card card-slim gl-mt-5 gl-mb-0 gl-bg-gray-10">
-      <div class="card-header gl-px-5 gl-py-4 gl-bg-white">
-        <div
-          class="card-title gl-relative gl-display-flex gl-flex-wrap gl-align-items-center gl-line-height-20 gl-font-weight-bold gl-m-0"
-        >
+    <div class="gl-new-card">
+      <div class="gl-new-card-header">
+        <div class="gl-new-card-title-wrapper">
           <gl-link
             class="anchor gl-absolute gl-text-decoration-none"
             href="#related-merge-requests"
             aria-labelledby="related-merge-requests"
           />
-          <h3 id="related-merge-requests" class="gl-font-base gl-m-0">
+          <h3 id="related-merge-requests" class="gl-new-card-title">
             {{ __('Related merge requests') }}
           </h3>
-          <template v-if="totalCount">
-            <gl-icon name="merge-request" class="gl-ml-3 gl-mr-2 gl-text-gray-500" />
-            <span data-testid="count" class="gl-text-gray-500">{{ totalCount }}</span>
-          </template>
-          <p
-            v-if="hasClosingMergeRequest && !isFetchingMergeRequests"
-            class="gl-font-sm gl-font-weight-normal gl-flex-basis-full gl-mb-0 gl-text-gray-500"
-          >
-            {{ closingMergeRequestsText }}
-          </p>
+          <div class="gl-display-inline-flex gl-align-items-center gl-m-0">
+            <template v-if="totalCount">
+              <gl-icon name="merge-request" class="gl-ml-3 gl-mr-2 gl-text-gray-500" />
+              <span data-testid="count" class="gl-text-gray-500">{{ totalCount }}</span>
+            </template>
+            <p
+              v-if="hasClosingMergeRequest && !isFetchingMergeRequests"
+              class="gl-font-sm gl-font-weight-normal gl-flex-basis-full gl-mb-0 gl-text-gray-500"
+            >
+              {{ closingMergeRequestsText }}
+            </p>
+          </div>
         </div>
       </div>
       <gl-loading-icon
@@ -96,30 +96,34 @@ export default {
         label="Fetching related merge requests"
         class="gl-py-4"
       />
-      <ul v-else class="content-list related-items-list gl-px-4! gl-py-3!">
-        <li
-          v-for="mr in mergeRequests"
-          :key="mr.id"
-          class="list-item gl-m-0! gl-p-0! gl-border-b-0!"
-        >
-          <related-issuable-item
-            :id-key="mr.id"
-            :display-reference="mr.reference"
-            :title="mr.title"
-            :milestone="mr.milestone"
-            :assignees="getAssignees(mr)"
-            :created-at="mr.created_at"
-            :closed-at="mr.closed_at"
-            :merged-at="mr.merged_at"
-            :path="mr.web_url"
-            :state="mr.state"
-            :is-merge-request="true"
-            :pipeline-status="mr.head_pipeline && mr.head_pipeline.detailed_status"
-            path-id-separator="!"
-            class="gl-mx-n2"
-          />
-        </li>
-      </ul>
+      <div class="gl-new-card-body">
+        <div class="gl-new-card-content">
+          <ul class="content-list related-items-list">
+            <li
+              v-for="mr in mergeRequests"
+              :key="mr.id"
+              class="list-item gl-m-0! gl-p-0! gl-border-b-0!"
+            >
+              <related-issuable-item
+                :id-key="mr.id"
+                :display-reference="mr.reference"
+                :title="mr.title"
+                :milestone="mr.milestone"
+                :assignees="getAssignees(mr)"
+                :created-at="mr.created_at"
+                :closed-at="mr.closed_at"
+                :merged-at="mr.merged_at"
+                :path="mr.web_url"
+                :state="mr.state"
+                :is-merge-request="true"
+                :pipeline-status="mr.head_pipeline && mr.head_pipeline.detailed_status"
+                path-id-separator="!"
+                class="gl-mx-n2"
+              />
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/related_issues/components/related_issues_block.vue b/app/assets/javascripts/related_issues/components/related_issues_block.vue
index f672acda0624bf..6ccf53624cf0a9 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_block.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_block.vue
@@ -184,21 +184,14 @@ export default {
 <template>
   <div id="related-issues" class="related-issues-block">
     <gl-card
-      class="gl-overflow-hidden gl-mt-5 gl-mb-0"
-      header-class="gl-p-0 gl-border-0"
-      body-class="gl-p-0 gl-bg-gray-10"
+      class="gl-new-card gl-overflow-hidden"
+      header-class="gl-new-card-header"
+      body-class="gl-new-card-body"
+      :aria-expanded="isOpen.toString()"
     >
       <template #header>
-        <div
-          :class="{
-            'gl-border-b-1': isOpen,
-            'gl-border-b-0': !isOpen,
-          }"
-          class="gl-display-flex gl-justify-content-space-between gl-pl-5 gl-pr-4 gl-py-4 gl-bg-white gl-border-b-solid gl-border-b-gray-100"
-        >
-          <h3
-            class="card-title h5 gl-relative gl-my-0 gl-display-flex gl-align-items-center gl-flex-grow-1 gl-line-height-24"
-          >
+        <div class="gl-new-card-title-wrapper">
+          <h3 class="gl-new-card-title" data-testid="card-title">
             <gl-link
               id="user-content-related-issues"
               class="anchor position-absolute gl-text-decoration-none"
@@ -206,48 +199,48 @@ export default {
               aria-hidden="true"
             />
             <slot name="header-text">{{ headerText }}</slot>
-
-            <div
-              class="js-related-issues-header-issue-count gl-display-inline-flex gl-mx-3 gl-text-gray-500"
-            >
-              <span class="gl-display-inline-flex gl-align-items-center">
-                <gl-icon :name="issuableTypeIcon" class="gl-mr-2 gl-text-gray-500" />
-                {{ badgeLabel }}
-              </span>
-            </div>
           </h3>
-          <slot name="header-actions"></slot>
-          <gl-button
-            v-if="canAdmin"
-            size="small"
-            data-testid="related-issues-plus-button"
-            :aria-label="addIssuableButtonText"
-            class="gl-ml-3"
-            @click="addButtonClick"
+          <div
+            class="gl-new-card-count js-related-issues-header-issue-count gl-display-inline-flex gl-mx-3 gl-text-gray-500"
           >
-            <slot name="add-button-text">{{ __('Add') }}</slot>
-          </gl-button>
-          <div class="gl-pl-3 gl-ml-3 gl-border-l-1 gl-border-l-solid gl-border-l-gray-100">
-            <gl-button
-              category="tertiary"
-              size="small"
-              :icon="toggleIcon"
-              :aria-label="toggleLabel"
-              data-testid="toggle-links"
-              @click="handleToggle"
-            />
+            <span class="gl-display-inline-flex gl-align-items-center">
+              <gl-icon :name="issuableTypeIcon" class="gl-mr-2 gl-text-gray-500" />
+              {{ badgeLabel }}
+            </span>
           </div>
         </div>
+        <slot name="header-actions"></slot>
+        <gl-button
+          v-if="canAdmin"
+          size="small"
+          data-testid="related-issues-plus-button"
+          :aria-label="addIssuableButtonText"
+          class="gl-ml-3"
+          @click="addButtonClick"
+        >
+          <slot name="add-button-text">{{ __('Add') }}</slot>
+        </gl-button>
+        <div class="gl-pl-3 gl-ml-3 gl-border-l-1 gl-border-l-solid gl-border-l-gray-100">
+          <gl-button
+            category="tertiary"
+            size="small"
+            :icon="toggleIcon"
+            :aria-label="toggleLabel"
+            data-testid="toggle-links"
+            @click="handleToggle"
+          />
+        </div>
       </template>
       <div
         v-if="isOpen"
-        class="linked-issues-card-body gl-py-3 gl-px-4 gl-bg-gray-10"
+        class="linked-issues-card-body gl-new-card-content"
         data-testid="related-issues-body"
       >
         <div
           v-if="isFormVisible"
-          class="js-add-related-issues-form-area card-body bg-white gl-mt-2 gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base"
+          class="js-add-related-issues-form-area gl-new-card-add-form"
           :class="{ 'gl-mb-5': shouldShowTokenBody, 'gl-show-field-errors': hasError }"
+          data-testid="add-item-form"
         >
           <add-issuable-form
             :show-categorized-issues="showCategorizedIssues"
@@ -290,7 +283,7 @@ export default {
           />
         </template>
         <div v-if="!shouldShowTokenBody && !isFormVisible" data-testid="related-items-empty">
-          <p class="gl-p-2 gl-mb-0 gl-text-gray-500">
+          <p class="gl-new-card-empty">
             {{ emptyStateMessage }}
             <gl-link
               v-if="hasHelpPath"
diff --git a/app/assets/javascripts/work_items/components/widget_wrapper.vue b/app/assets/javascripts/work_items/components/widget_wrapper.vue
index 6ae30e9b084d1e..f343f78735817a 100644
--- a/app/assets/javascripts/work_items/components/widget_wrapper.vue
+++ b/app/assets/javascripts/work_items/components/widget_wrapper.vue
@@ -27,6 +27,9 @@ export default {
     toggleLabel() {
       return this.isOpen ? __('Collapse') : __('Expand');
     },
+    isOpenString() {
+      return this.isOpen ? 'true' : 'false';
+    },
   },
   methods: {
     hide() {
@@ -43,18 +46,10 @@ export default {
 </script>
 
 <template>
-  <div
-    id="tasks"
-    class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-gray-10 gl-mt-5"
-  >
-    <div
-      class="gl-pl-5 gl-pr-4 gl-py-4 gl-display-flex gl-justify-content-space-between gl-bg-white gl-rounded-base"
-      :class="{
-        'gl-border-b-1 gl-border-b-solid gl-border-b-gray-100 gl-rounded-bottom-left-none! gl-rounded-bottom-right-none!': isOpen,
-      }"
-    >
-      <div class="gl-display-flex gl-flex-grow-1">
-        <h3 class="card-title h5 gl-m-0 gl-relative gl-line-height-24">
+  <div id="tasks" class="gl-new-card" :aria-expanded="isOpenString">
+    <div class="gl-new-card-header">
+      <div class="gl-new-card-title-wrapper">
+        <h3 class="gl-new-card-title">
           <gl-link
             id="user-content-tasks-links"
             class="anchor position-absolute gl-text-decoration-none"
@@ -66,7 +61,7 @@ export default {
         <slot name="header-suffix"></slot>
       </div>
       <slot name="header-right"></slot>
-      <div class="gl-border-l-1 gl-border-l-solid gl-border-l-gray-100 gl-pl-3 gl-ml-3">
+      <div class="gl-new-card-toggle">
         <gl-button
           category="tertiary"
           size="small"
@@ -80,12 +75,7 @@ export default {
     <gl-alert v-if="error" variant="danger" @dismiss="$emit('dismissAlert')">
       {{ error }}
     </gl-alert>
-    <div
-      v-if="isOpen"
-      class="gl-bg-gray-10 gl-rounded-bottom-left-base gl-rounded-bottom-right-base"
-      :class="{ 'gl-p-3': !error }"
-      data-testid="widget-body"
-    >
+    <div v-if="isOpen" class="gl-new-card-body" :class="{ error: error }" data-testid="widget-body">
       <slot name="body"></slot>
     </div>
   </div>
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
index 401c8a53eb0cea..ec44a654e89993 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
@@ -271,7 +271,7 @@ export default {
         @click="toggleItem"
       />
       <div
-        class="item-body work-item-link-child gl-relative gl-display-flex gl-flex-grow-1 gl-overflow-break-word gl-min-w-0 gl-pl-3 gl-pr-2 gl-py-2 gl-rounded-base"
+        class="item-body work-item-link-child gl-relative gl-display-flex gl-flex-grow-1 gl-overflow-break-word gl-min-w-0 gl-pl-3 gl-pr-2 gl-py-2 gl-mx-n2 gl-rounded-base"
         data-testid="links-child"
       >
         <div class="item-contents gl-display-flex gl-flex-grow-1 gl-flex-wrap gl-min-w-0">
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
index 19836e622af4f2..9b3b4df5db6429 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue
@@ -236,52 +236,53 @@ export default {
       </gl-dropdown>
     </template>
     <template #body>
-      <gl-loading-icon v-if="isLoading" color="dark" class="gl-my-2" />
-
-      <template v-else>
-        <div v-if="isChildrenEmpty && !isShownAddForm && !error" data-testid="links-empty">
-          <p class="gl-px-3 gl-py-2 gl-mb-0 gl-text-gray-500">
-            {{ $options.i18n.emptyStateMessage }}
-          </p>
-        </div>
-        <work-item-links-form
-          v-if="isShownAddForm"
-          ref="wiLinksForm"
-          data-testid="add-links-form"
-          :issuable-gid="issuableGid"
-          :work-item-iid="iid"
-          :children-ids="childrenIds"
-          :parent-confidential="confidential"
-          :parent-iteration="issuableIteration"
-          :parent-milestone="issuableMilestone"
-          :form-type="formType"
-          :parent-work-item-type="workItem.workItemType.name"
-          @cancel="hideAddForm"
-        />
-        <work-item-children-wrapper
-          :children="children"
-          :can-update="canUpdate"
-          :work-item-id="issuableGid"
-          :work-item-iid="iid"
-          @error="error = $event"
-          @show-modal="openChild"
-        />
-        <work-item-detail-modal
-          ref="modal"
-          :work-item-id="activeChild.id"
-          :work-item-iid="activeChild.iid"
-          @close="closeModal"
-          @workItemDeleted="handleWorkItemDeleted(activeChild)"
-          @openReportAbuse="openReportAbuseDrawer"
-        />
-        <abuse-category-selector
-          v-if="isReportDrawerOpen && reportAbusePath"
-          :reported-user-id="reportedUserId"
-          :reported-from-url="reportedUrl"
-          :show-drawer="isReportDrawerOpen"
-          @close-drawer="toggleReportAbuseDrawer(false)"
-        />
-      </template>
+      <div class="gl-new-card-content">
+        <gl-loading-icon v-if="isLoading" color="dark" class="gl-my-2" />
+        <template v-else>
+          <div v-if="isChildrenEmpty && !isShownAddForm && !error" data-testid="links-empty">
+            <p class="gl-new-card-empty">
+              {{ $options.i18n.emptyStateMessage }}
+            </p>
+          </div>
+          <work-item-links-form
+            v-if="isShownAddForm"
+            ref="wiLinksForm"
+            data-testid="add-links-form"
+            :issuable-gid="issuableGid"
+            :work-item-iid="iid"
+            :children-ids="childrenIds"
+            :parent-confidential="confidential"
+            :parent-iteration="issuableIteration"
+            :parent-milestone="issuableMilestone"
+            :form-type="formType"
+            :parent-work-item-type="workItem.workItemType.name"
+            @cancel="hideAddForm"
+          />
+          <work-item-children-wrapper
+            :children="children"
+            :can-update="canUpdate"
+            :work-item-id="issuableGid"
+            :work-item-iid="iid"
+            @error="error = $event"
+            @show-modal="openChild"
+          />
+          <work-item-detail-modal
+            ref="modal"
+            :work-item-id="activeChild.id"
+            :work-item-iid="activeChild.iid"
+            @close="closeModal"
+            @workItemDeleted="handleWorkItemDeleted(activeChild)"
+            @openReportAbuse="openReportAbuseDrawer"
+          />
+          <abuse-category-selector
+            v-if="isReportDrawerOpen && reportAbusePath"
+            :reported-user-id="reportedUserId"
+            :reported-from-url="reportedUrl"
+            :show-drawer="isReportDrawerOpen"
+            @close-drawer="toggleReportAbuseDrawer(false)"
+          />
+        </template>
+      </div>
     </template>
   </widget-wrapper>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue
index 289a48b5eafde0..db649913602f33 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue
@@ -347,7 +347,8 @@ export default {
 
 <template>
   <gl-form
-    class="gl-bg-white gl-mt-1 gl-mb-3 gl-p-4 gl-border gl-border-gray-100 gl-rounded-base"
+    class="gl-new-card-add-form"
+    data-testid="add-item-form"
     @submit.prevent="addOrCreateMethod"
   >
     <gl-alert v-if="error" variant="danger" class="gl-mb-3" @dismiss="unsetError">
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue
index 44e8dac79c45ae..83f3c391769d30 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue
@@ -127,9 +127,11 @@ export default {
     </template>
     <template #body>
       <div v-if="!isShownAddForm && children.length === 0" data-testid="tree-empty">
-        <p class="gl-mb-0 gl-py-2 gl-ml-3 gl-text-gray-500">
-          {{ $options.WORK_ITEMS_TREE_TEXT_MAP[workItemType].empty }}
-        </p>
+        <div class="gl-new-card-content">
+          <p class="gl-new-card-empty">
+            {{ $options.WORK_ITEMS_TREE_TEXT_MAP[workItemType].empty }}
+          </p>
+        </div>
       </div>
       <work-item-links-form
         v-if="isShownAddForm"
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index e60353578b0ef7..3957f82f658036 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -64,3 +64,4 @@
 @import 'framework/card';
 @import 'framework/source_editor';
 @import 'framework/diffs';
+@import 'framework/new_card';
diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss
new file mode 100644
index 00000000000000..e6a4165980c7e5
--- /dev/null
+++ b/app/assets/stylesheets/framework/new_card.scss
@@ -0,0 +1,94 @@
+.gl-new-card {
+  @include gl-mt-5;
+  @include gl-bg-gray-10;
+  @include gl-border-1;
+  @include gl-border-solid;
+  @include gl-border-gray-100;
+  @include gl-rounded-base;
+
+  &-header {
+    @include gl-pl-5;
+    @include gl-pr-4;
+    @include gl-py-4;
+    @include gl-display-flex;
+    @include gl-justify-content-space-between;
+    @include gl-bg-white;
+    @include gl-border-b-1;
+    @include gl-border-b-solid;
+    @include gl-border-b-gray-100;
+    @include gl-rounded-top-base;
+  }
+
+  &[aria-expanded=false] &-header {
+    @include gl-border-bottom-0;
+    @include gl-rounded-base;
+  }
+
+  &-title-wrapper {
+    @include gl-display-flex;
+    @include gl-flex-grow-1;
+  }
+
+  &-title {
+    @include gl-font-base;
+    @include gl-font-weight-bold;
+    @include gl-relative;
+    @include gl-m-0;
+    @include gl-line-height-24;
+  }
+
+  &-title-lg {
+    @include gl-font-lg;
+  }
+
+  &-count {
+    @include gl-mx-3;
+    @include gl-font-base;
+    @include gl-font-weight-bold;
+    @include gl-text-gray-500;
+  }
+
+  &-description {
+    @include gl-text-gray-500;
+    @include gl-mt-1;
+  }
+
+  &-toggle {
+    @include gl-pl-3;
+    @include gl-ml-3;
+    @include gl-border-l-1;
+    @include gl-border-l-solid;
+    @include gl-border-l-gray-100;
+  }
+
+  &-body {
+    @include gl-rounded-bottom-base;
+    @include gl-px-3;
+    @include gl-py-0;
+  }
+
+  &-content {
+    @include gl-px-2;
+    @include gl-py-3;
+  }
+
+  &-empty {
+    @include gl-p-2;
+    @include gl-mb-0;
+    @include gl-text-gray-500;
+  }
+
+  &-footer {
+    @include gl-bg-white;
+  }
+
+  &-add-form {
+    @include gl-p-4;
+    @include gl-my-2;
+    @include gl-bg-white;
+    @include gl-border-1;
+    @include gl-border-solid;
+    @include gl-border-gray-100;
+    @include gl-rounded-base;
+  }
+}
diff --git a/app/views/projects/branches/_panel.html.haml b/app/views/projects/branches/_panel.html.haml
index a632e29d34f339..c01e3677c19d59 100644
--- a/app/views/projects/branches/_panel.html.haml
+++ b/app/views/projects/branches/_panel.html.haml
@@ -7,9 +7,9 @@
 
 - return unless branches.any?
 
-= render Pajamas::CardComponent.new(card_options: {class: 'gl-mt-5 gl-bg-gray-10'}, header_options: {class: 'gl-px-5 gl-py-4 gl-bg-white'}, body_options: {class: 'gl-px-3 gl-py-0'}, footer_options: {class: 'gl-bg-white'}) do |c|
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }, footer_options: { class: 'gl-new-card-footer' }) do |c|
   - c.with_header do
-    %h3.card-title.h5.gl-line-height-24.gl-m-0
+    %h3.gl-new-card-title.h5
       = panel_title
   - c.with_body do
     %ul.content-list.branches-list.all-branches{ data: { qa_selector: 'all_branches_container' } }
diff --git a/ee/app/assets/javascripts/related_items_tree/components/create_issue_form.vue b/ee/app/assets/javascripts/related_items_tree/components/create_issue_form.vue
index a0b3b2d0819673..d8a40656244927 100644
--- a/ee/app/assets/javascripts/related_items_tree/components/create_issue_form.vue
+++ b/ee/app/assets/javascripts/related_items_tree/components/create_issue_form.vue
@@ -284,24 +284,21 @@ export default {
       </div>
     </div>
 
-    <div class="row my-1">
-      <div class="col-sm flex-sm-grow-0 mb-2 mb-sm-0">
-        <gl-button
-          class="w-100"
-          variant="confirm"
-          category="primary"
-          data-testid="submit-button"
-          :disabled="isIssueCreationDisabled"
-          :loading="itemCreateInProgress || recentItemFetchInProgress"
-          @click="createIssue"
-          >{{ __('Create issue') }}</gl-button
-        >
-      </div>
-      <div class="col-sm flex-sm-grow-0 ml-auto">
-        <gl-button class="w-100" data-testId="cancel-btn" @click="cancel">{{
-          __('Cancel')
-        }}</gl-button>
-      </div>
+    <div>
+      <gl-button
+        variant="confirm"
+        category="primary"
+        size="small"
+        class="gl-mr-2"
+        data-testid="submit-button"
+        :disabled="isIssueCreationDisabled"
+        :loading="itemCreateInProgress || recentItemFetchInProgress"
+        @click="createIssue"
+        >{{ __('Create issue') }}</gl-button
+      >
+      <gl-button size="small" data-testId="cancel-btn" @click="cancel">{{
+        __('Cancel')
+      }}</gl-button>
     </div>
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/related_items_tree/components/related_items_tree_app.vue b/ee/app/assets/javascripts/related_items_tree/components/related_items_tree_app.vue
index 63c881440f9609..13c7b331a0861d 100644
--- a/ee/app/assets/javascripts/related_items_tree/components/related_items_tree_app.vue
+++ b/ee/app/assets/javascripts/related_items_tree/components/related_items_tree_app.vue
@@ -111,6 +111,17 @@ export default {
     enableIssuesAutoComplete() {
       return this.issuableType === TYPE_ISSUE && this.autoCompleteIssues;
     },
+    isOpen() {
+      return (
+        (!this.itemsFetchResultEmpty && this.showRelatedItems) ||
+        this.showAddItemForm ||
+        this.showCreateEpicForm ||
+        this.showCreateIssueForm
+      );
+    },
+    isOpenString() {
+      return this.isOpen ? 'true' : 'false';
+    },
   },
   mounted() {
     this.fetchItems({
@@ -181,16 +192,14 @@ export default {
 <template>
   <div class="related-items-tree-container">
     <div
-      class="related-items-tree card card-slim gl-mt-4 gl-mb-0 gl-bg-gray-10"
+      class="related-items-tree gl-new-card gl-mt-4"
       :class="{
         'disabled-content': disableContents,
         'overflow-auto': directChildren.length > $options.OVERFLOW_AFTER,
       }"
+      :aria-expanded="isOpenString"
     >
-      <related-items-tree-header
-        :class="{ 'border-bottom-0': itemsFetchResultEmpty || !showRelatedItems }"
-        @toggleRelatedItemsView="handleRelatedItemsView"
-      />
+      <related-items-tree-header @toggleRelatedItemsView="handleRelatedItemsView" />
       <slot-switch
         v-if="visibleForm && parentItem.confidential"
         :active-slot-names="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [
@@ -215,11 +224,12 @@ export default {
         :active-slot-names="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [
           visibleForm,
         ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
-        class="card-body add-item-form-container gl-m-4 gl-mb-1 gl-bg-white gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base"
+        class="gl-new-card-add-form gl-m-4"
         :class="{
-          'border-bottom-0': itemsFetchResultEmpty,
+          'gl-mb-1': !itemsFetchResultEmpty,
           'gl-show-field-errors': itemAddFailure,
         }"
+        data-testid="add-item-form"
       >
         <template #[$options.FORM_SLOTS.addItem]>
           <add-item-form
diff --git a/ee/app/assets/javascripts/related_items_tree/components/related_items_tree_body.vue b/ee/app/assets/javascripts/related_items_tree/components/related_items_tree_body.vue
index dd3b055d2e1d05..a334d462864af8 100644
--- a/ee/app/assets/javascripts/related_items_tree/components/related_items_tree_body.vue
+++ b/ee/app/assets/javascripts/related_items_tree/components/related_items_tree_body.vue
@@ -15,7 +15,7 @@ export default {
 </script>
 
 <template>
-  <div class="related-items-tree-body sortable-container gl-bg-gray-10">
+  <div class="gl-new-card-body gl-py-0 gl-mx-n1 gl-mb-n2">
     <tree-root :parent-item="parentItem" :children="children" />
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue b/ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue
index 49e3b234390989..7a496a8e1c39a9 100644
--- a/ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue
+++ b/ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue
@@ -96,14 +96,10 @@ export default {
 </script>
 
 <template>
-  <div
-    class="card-header gl-display-flex gl-pl-5 gl-pr-4 gl-py-4 gl-flex-direction-column gl-sm-flex-direction-row gl-bg-white"
-  >
-    <div
-      class="gl-display-flex gl-flex-grow-1 gl-flex-shrink-0 gl-flex-wrap gl-flex-direction-column gl-sm-flex-direction-row"
-    >
+  <div class="gl-new-card-header">
+    <div class="gl-new-card-title-wrapper">
       <div class="gl-display-flex gl-flex-shrink-0 gl-align-items-center gl-flex-wrap">
-        <h3 class="card-title h5 gl-my-0 gl-flex-shrink-0">
+        <h3 class="gl-new-card-title">
           {{ allowSubEpics ? __('Child issues and epics') : $options.treeTitle[parentItem.type] }}
         </h3>
         <div
@@ -196,7 +192,7 @@ export default {
           @showCreateEpicForm="showCreateEpicForm"
         />
       </div>
-      <div class="gl-pl-3 gl-ml-3 gl-border-l-1 gl-border-l-solid gl-border-l-gray-100">
+      <div class="gl-new-card-toggle">
         <gl-button
           category="tertiary"
           size="small"
diff --git a/ee/app/assets/javascripts/related_items_tree/components/tree_root.vue b/ee/app/assets/javascripts/related_items_tree/components/tree_root.vue
index 2c126a133e70a8..191c01384ee788 100644
--- a/ee/app/assets/javascripts/related_items_tree/components/tree_root.vue
+++ b/ee/app/assets/javascripts/related_items_tree/components/tree_root.vue
@@ -88,7 +88,7 @@ export default {
   <component
     :is="treeRootWrapper"
     v-bind="treeRootOptions"
-    class="list-unstyled related-items-list tree-root gl-p-0 gl-px-4"
+    class="list-unstyled related-items-list tree-root"
     :move="onMove"
     @start="handleDragOnStart"
     @end="handleDragOnEnd"
diff --git a/ee/app/assets/javascripts/related_items_tree/mixins/tree_dd_mixin.js b/ee/app/assets/javascripts/related_items_tree/mixins/tree_dd_mixin.js
index c5bfa5c18de313..4deeaa463c5e53 100644
--- a/ee/app/assets/javascripts/related_items_tree/mixins/tree_dd_mixin.js
+++ b/ee/app/assets/javascripts/related_items_tree/mixins/tree_dd_mixin.js
@@ -13,7 +13,7 @@ export default {
       const options = {
         ...defaultSortableOptions,
         fallbackOnBody: false,
-        group: 'sortable-container',
+        group: 'gl-new-card-body',
         tag: 'ul',
         'ghost-class': 'tree-item-drag-active',
         'data-parent-reference': this.parentItem.reference,
diff --git a/ee/app/assets/stylesheets/components/related_items_tree.scss b/ee/app/assets/stylesheets/components/related_items_tree.scss
index 773650316947b5..7ec57bd56f4fb9 100644
--- a/ee/app/assets/stylesheets/components/related_items_tree.scss
+++ b/ee/app/assets/stylesheets/components/related_items_tree.scss
@@ -55,11 +55,6 @@
   }
 }
 
-.related-items-tree-body {
-  border-bottom-left-radius: $gl-border-radius-base;
-  border-bottom-right-radius: $gl-border-radius-base;
-}
-
 .tree-root > .list-item:last-child .tree-root:last-child {
   margin-bottom: 0;
 }
diff --git a/ee/spec/features/epics/epic_issues_spec.rb b/ee/spec/features/epics/epic_issues_spec.rb
index 2cb05446842e02..8f63b824dadf30 100644
--- a/ee/spec/features/epics/epic_issues_spec.rb
+++ b/ee/spec/features/epics/epic_issues_spec.rb
@@ -77,7 +77,7 @@ def add_issues(references)
       find(".related-items-tree-container .js-add-epics-issues-button").click
       find('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Add an existing issue').click
       fill_in 'Paste issue link', with: "#{references} "
-      within '.add-item-form-container' do
+      within '.gl-new-card-add-form' do
         click_button 'Add'
       end
 
@@ -88,7 +88,7 @@ def add_epics(references)
       find('.related-items-tree-container .js-add-epics-issues-button').click
       find('.related-items-tree-container .js-add-epics-issues-button .dropdown-item', text: 'Add an existing epic').click
       fill_in 'Paste epic link', with: "#{references} "
-      within '.add-item-form-container' do
+      within '.gl-new-card-add-form' do
         click_button 'Add'
       end
 
diff --git a/ee/spec/features/epics/epic_related_epics_spec.rb b/ee/spec/features/epics/epic_related_epics_spec.rb
index 333fea7ceb7c3b..696c941fda1ff2 100644
--- a/ee/spec/features/epics/epic_related_epics_spec.rb
+++ b/ee/spec/features/epics/epic_related_epics_spec.rb
@@ -45,8 +45,8 @@ def add_epic(epic, relationship)
   describe 'epic body section' do
     it 'user can view related epics section under epic description', :aggregate_failures do
       page.within('#related-issues') do
-        card_title = page.find('.card-title')
-        card_body = page.find('.linked-issues-card-body ')
+        card_title = page.find('.gl-new-card-title')
+        card_body = page.find('[data-testid="related-issues-body"]')
         expect(card_title).to have_content('Linked epics')
         expect(card_body).to have_link('', href: '/help/user/group/epics/linked_epics')
         card = page.find('.gl-card')
diff --git a/ee/spec/features/epics/epic_show_spec.rb b/ee/spec/features/epics/epic_show_spec.rb
index b77ac9b277a585..464df416e2da24 100644
--- a/ee/spec/features/epics/epic_show_spec.rb
+++ b/ee/spec/features/epics/epic_show_spec.rb
@@ -159,7 +159,7 @@ def open_colors_dropdown
     describe 'Epic metadata' do
       it 'shows epic tab `Issues`' do
         page.within('.related-items-tree-container') do
-          expect(find('h3.card-title')).to have_content('Issues')
+          expect(find('h3.gl-new-card-title')).to have_content('Issues')
         end
       end
 
diff --git a/ee/spec/frontend/related_items_tree/components/related_items_tree_app_spec.js b/ee/spec/frontend/related_items_tree/components/related_items_tree_app_spec.js
index f3ad6aa6d538ef..76ad5b7dd148de 100644
--- a/ee/spec/frontend/related_items_tree/components/related_items_tree_app_spec.js
+++ b/ee/spec/frontend/related_items_tree/components/related_items_tree_app_spec.js
@@ -240,7 +240,7 @@ describe('RelatedItemsTreeApp', () => {
       });
 
       await nextTick();
-      expect(wrapper.find('.add-item-form-container').isVisible()).toBe(true);
+      expect(wrapper.findByTestId('add-item-form').isVisible()).toBe(true);
     });
 
     it('does not render create issue form', () => {
@@ -320,7 +320,6 @@ describe('RelatedItemsTreeApp', () => {
 
         await nextTick();
 
-        expect(findRelatedItemsTreeHeader().classes().includes('border-bottom-0')).toBe(!toggled);
         expect(wrapper.findByTestId('related-items-container').exists()).toBe(toggled);
       },
     );
diff --git a/ee/spec/frontend/related_items_tree/components/related_items_tree_body_spec.js b/ee/spec/frontend/related_items_tree/components/related_items_tree_body_spec.js
index f63d05fc21a5a5..39ca91637c1357 100644
--- a/ee/spec/frontend/related_items_tree/components/related_items_tree_body_spec.js
+++ b/ee/spec/frontend/related_items_tree/components/related_items_tree_body_spec.js
@@ -24,10 +24,6 @@ describe('RelatedItemsTree', () => {
     });
 
     describe('template', () => {
-      it('renders component container element with class `related-items-tree-body`', () => {
-        expect(wrapper.classes('related-items-tree-body')).toBe(true);
-      });
-
       it('renders tree-root component', () => {
         expect(wrapper.find('tree-root-stub').isVisible()).toBe(true);
       });
diff --git a/ee/spec/frontend/related_items_tree/components/tree_root_spec.js b/ee/spec/frontend/related_items_tree/components/tree_root_spec.js
index 49340c871a1083..27bfefbb98c141 100644
--- a/ee/spec/frontend/related_items_tree/components/tree_root_spec.js
+++ b/ee/spec/frontend/related_items_tree/components/tree_root_spec.js
@@ -110,7 +110,7 @@ describe('RelatedItemsTree', () => {
                   fallbackClass: 'is-dragging',
                   fallbackOnBody: false,
                   ghostClass: 'is-ghost',
-                  group: 'sortable-container',
+                  group: 'gl-new-card-body',
                   tag: 'ul',
                   'ghost-class': 'tree-item-drag-active',
                   'data-parent-reference': mockParentItem.reference,
diff --git a/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js b/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js
index e97c0312181b07..fb154e01c7ae81 100644
--- a/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js
+++ b/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js
@@ -76,7 +76,7 @@ describe('RelatedIssuesBlock', () => {
           helpPath: '/help/user/project/issues/related_issues',
         });
 
-        expect(wrapper.find('.card-title').text()).toContain(titleText);
+        expect(wrapper.findByTestId('card-title').text()).toContain(titleText);
         expect(findIssueCountBadgeAddButton().attributes('aria-label')).toBe(addButtonText);
       },
     );
@@ -99,7 +99,7 @@ describe('RelatedIssuesBlock', () => {
         slots: { 'header-text': headerText },
       });
 
-      expect(wrapper.find('.card-title').html()).toContain(headerText);
+      expect(wrapper.findByTestId('card-title').html()).toContain(headerText);
     });
   });
 
-- 
GitLab