Merge branch 'fix-sidebar-editable-item-title-spacing' into 'master'

Fix spacing in blocks on the issuable sidebar [RUN ALL RSPEC] [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!61650

app/assets/javascripts/sidebar/components/assignees/assignee_title.vue

@@ -45,7 +45,7 @@ export default {
 };
 </script>
 <template>
-  <div class="title hide-collapsed">
+  <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
     {{ assigneeTitle }}
     <gl-loading-icon v-if="loading" inline class="align-bottom" />
     <a

app/assets/javascripts/sidebar/components/assignees/assignees.vue

@@ -48,17 +48,15 @@ export default {
     <collapsed-assignee-list :users="sortedAssigness" :issuable-type="issuableType" />
 
     <div data-testid="expanded-assignee" class="value hide-collapsed">
-      <template v-if="hasNoUsers">
-        <span class="assign-yourself no-value">
-          {{ __('None') }}
-          <template v-if="editable">
-            -
-            <button type="button" class="btn-link" @click="assignSelf">
-              {{ __('assign yourself') }}
-            </button>
-          </template>
-        </span>
-      </template>
+      <span v-if="hasNoUsers" class="no-value" data-testid="no-value">
+        {{ __('None') }}
+        <template v-if="editable">
+          -
+          <button type="button" class="btn-link" data-testid="assign-yourself" @click="assignSelf">
+            {{ __('assign yourself') }}
+          </button>
+        </template>
+      </span>
 
       <uncollapsed-assignee-list v-else :users="sortedAssigness" :issuable-type="issuableType" />
     </div>

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue

@@ -149,7 +149,6 @@ export default {
       :users="exposeAvailabilityStatus(store.assignees)"
       :editable="store.editable"
       :issuable-type="issuableType"
-      class="value"
       @assign-self="assignSelf"
     />
   </div>

app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue

@@ -86,7 +86,7 @@ export default {
       <gl-icon :name="lockStatus.icon" class="sidebar-item-icon is-active" />
     </div>
 
-    <div class="title hide-collapsed">
+    <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
       {{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }}
       <a
         v-if="isEditable"

app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue

@@ -33,7 +33,7 @@ export default {
 };
 </script>
 <template>
-  <div class="title hide-collapsed">
+  <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
     {{ reviewerTitle }}
     <gl-loading-icon v-if="loading" inline class="align-bottom" />
     <a

app/assets/javascripts/sidebar/components/reviewers/reviewers.vue

@@ -59,7 +59,7 @@ export default {
 
     <div class="value hide-collapsed">
       <template v-if="hasNoUsers">
-        <span class="assign-yourself no-value">
+        <span class="no-value">
           {{ __('None') }}
         </span>
       </template>

app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue

@@ -103,7 +103,6 @@ export default {
       :users="store.reviewers"
       :editable="store.editable"
       :issuable-type="issuableType"
-      class="value"
       @request-review="requestReview"
     />
   </div>

app/assets/javascripts/sidebar/components/sidebar_editable_item.vue

@@ -109,8 +109,13 @@ export default {
 
 <template>
   <div>
-    <div class="gl-display-flex gl-align-items-center" @click.self="collapse">
-      <span class="hide-collapsed" data-testid="title" @click="collapse">{{ title }}</span>
+    <div
+      class="gl-display-flex gl-align-items-center gl-line-height-20 gl-mb-2 gl-text-gray-900"
+      @click.self="collapse"
+    >
+      <span class="hide-collapsed" data-testid="title" @click="collapse">
+        {{ title }}
+      </span>
       <slot name="title-extra"></slot>
       <gl-loading-icon v-if="loading || initialLoading" inline class="gl-ml-2 hide-collapsed" />
       <gl-loading-icon
@@ -135,7 +140,7 @@ export default {
       </gl-button>
     </div>
     <template v-if="!initialLoading">
-      <div v-show="!edit" data-testid="collapsed-content">
+      <div v-show="!edit" data-testid="collapsed-content" class="gl-line-height-14">
         <slot name="collapsed">{{ __('None') }}</slot>
       </div>
       <div v-show="edit" data-testid="expanded-content" :class="{ 'gl-mt-3': !isClassicSidebar }">

app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue

@@ -70,7 +70,7 @@ export default {
 </script>
 
 <template>
-  <div data-testid="timeTrackingComparisonPane">
+  <div class="gl-mt-2" data-testid="timeTrackingComparisonPane">
     <div
       v-gl-tooltip
       data-testid="compareMeter"

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

@@ -141,7 +141,7 @@ export default {
       :time-spent-human-readable="humanTimeSpent"
       :time-estimate-human-readable="humanTimeEstimate"
     />
-    <div class="title hide-collapsed gl-mb-3">
+    <div class="hide-collapsed gl-line-height-20 gl-text-gray-900">
       {{ __('Time tracking') }}
       <div
         v-if="!showHelpState"
@@ -160,7 +160,7 @@ export default {
         <gl-icon name="close" />
       </div>
     </div>
-    <div class="time-tracking-content hide-collapsed">
+    <div class="hide-collapsed">
       <div v-if="showEstimateOnlyState" data-testid="estimateOnlyPane">
         <span class="gl-font-weight-bold">{{ $options.i18n.estimatedOnlyText }} </span
         >{{ humanTimeEstimate }}
@@ -186,9 +186,9 @@ export default {
           v-gl-modal="'time-tracking-report'"
           data-testid="reportLink"
           href="#"
-          class="btn-link"
-          >{{ __('Time tracking report') }}</gl-link
         >
+          {{ __('Time tracking report') }}
+        </gl-link>
         <gl-modal
           modal-id="time-tracking-report"
           :title="__('Time tracking report')"

app/assets/javascripts/sidebar/mount_sidebar.js

@@ -206,6 +206,7 @@ function mountConfidentialComponent() {
     },
     provide: {
       canUpdate: initialData.is_editable,
+      isClassicSidebar: true,
     },
 
     render: (createElement) =>

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue

@@ -23,17 +23,18 @@ export default {
 </script>
 
 <template>
-  <div class="title hide-collapsed gl-mb-3">
+  <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
     {{ __('Labels') }}
     <template v-if="allowLabelEdit">
       <gl-loading-icon v-show="labelsSelectInProgress" inline />
       <gl-button
         variant="link"
-        class="gl-text-gray-800! float-right js-sidebar-dropdown-toggle"
+        class="float-right gl-text-gray-900! gl-hover-text-blue-800! js-sidebar-dropdown-toggle"
         data-qa-selector="labels_edit_button"
         @click="toggleDropdownContents"
-        >{{ __('Edit') }}</gl-button
       >
+        {{ __('Edit') }}
+      </gl-button>
     </template>
   </div>
 </template>

app/assets/stylesheets/pages/issuable.scss

@@ -267,11 +267,6 @@
 
     .value {
       line-height: 1;
-
-      .assign-yourself {
-        margin-top: 10px;
-        display: block;
-      }
     }
 
     .issuable-sidebar {
@@ -288,10 +283,6 @@
       }
     }
 
-    .assign-yourself .btn-link {
-      padding-left: 0;
-    }
-
     .light {
       font-weight: $gl-font-weight-normal;
     }

app/views/shared/issuable/_sidebar.html.haml

@@ -43,7 +43,7 @@
                 = milestone[:title]
               - else
                 = _('None')
-          .title.hide-collapsed
+          .hide-collapsed.gl-line-height-20.gl-mb-2.gl-text-gray-900{ data: { testid: "milestone_title" } }
             = _('Milestone')
             = loading_icon(css_class: 'gl-vertical-align-text-bottom hidden block-loading')
             - if can_edit_issuable

ee/app/assets/javascripts/sidebar/components/status/status.vue

@@ -153,7 +153,9 @@ export default {
     </div>
 
     <div class="hide-collapsed">
-      <p class="title gl-display-flex justify-content-between">
+      <div
+        class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-line-height-20 gl-mb-2 gl-text-gray-900"
+      >
         <span data-testid="statusTitle">{{ s__('Sidebar|Health status') }}</span>
         <span
           v-if="isEditable"
@@ -172,7 +174,7 @@ export default {
             {{ __('Edit') }}
           </gl-button>
         </span>
-      </p>
+      </div>
 
       <div
         data-testid="dropdownWrapper"

ee/app/assets/javascripts/sidebar/components/weight/weight.vue

@@ -152,7 +152,7 @@ export default {
         }}<template v-if="weight > $options.maxDisplayWeight">&hellip;</template>
       </span>
     </div>
-    <div class="title hide-collapsed">
+    <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
       {{ s__('Sidebar|Weight') }}
       <gl-loading-icon v-if="fetching || loading" :inline="true" class="js-weight-loading-icon" />
       <a

spec/features/issues/issue_sidebar_spec.rb

@@ -266,7 +266,7 @@ RSpec.describe 'Issue Sidebar' do
         let_it_be(:milestone3) { create(:milestone, project: project, title: 'Milestone-3', due_date: 10.days.from_now) }
 
         before do
-          page.within('.block.milestone > .title') do
+          page.within('[data-testid="milestone_title"]') do
             click_on 'Edit'
           end
         end

spec/features/issues/user_edits_issue_spec.rb

@@ -187,7 +187,8 @@ RSpec.describe "Issues > User edits issue", :js do
 
                 click_link 'Edit'
                 click_link 'Unassigned'
-                first('.title').click
+
+                close_dropdown_menu_if_visible
 
                 expect(page).to have_content 'None - assign yourself'
               end
@@ -227,7 +228,7 @@ RSpec.describe "Issues > User edits issue", :js do
 
                 close_dropdown_menu_if_visible
 
-                page.within '.value .assign-yourself' do
+                page.within '[data-testid="no-value"]' do
                   expect(page).to have_content "None"
                 end
               end

spec/frontend/sidebar/assignees_spec.js

@@ -19,7 +19,7 @@ describe('Assignee component', () => {
     });
   };
 
-  const findComponentTextNoUsers = () => wrapper.find('.assign-yourself');
+  const findComponentTextNoUsers = () => wrapper.find('[data-testid="no-value"]');
   const findCollapsedChildren = () => wrapper.findAll('.sidebar-collapsed-icon > *');
 
   afterEach(() => {
@@ -64,7 +64,7 @@ describe('Assignee component', () => {
       });
 
       jest.spyOn(wrapper.vm, '$emit');
-      wrapper.find('.assign-yourself .btn-link').trigger('click');
+      wrapper.find('[data-testid="assign-yourself"]').trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('assign-self')).toBeTruthy();