Merge branch '334129-epic-board-sidebar-design-tweaks' into 'master'

Boards sidebar design tweaks

See merge request gitlab-org/gitlab!65297

app/assets/javascripts/boards/components/board_content_sidebar.vue

@@ -87,6 +87,7 @@ export default {
       v-bind="$attrs"
       :open="isSidebarOpen"
       class="boards-sidebar gl-absolute"
+      variant="sidebar"
       @close="handleClose"
     >
       <template #title>

app/assets/javascripts/boards/components/sidebar/board_editable_item.vue

@@ -87,7 +87,7 @@ export default {
   <div>
     <header
       v-show="showHeader"
-      class="gl-display-flex gl-justify-content-space-between gl-align-items-flex-start gl-mb-3"
+      class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-mb-2"
     >
       <span class="gl-vertical-align-middle">
         <slot name="title">
@@ -97,7 +97,8 @@ export default {
       </span>
       <gl-button
         v-if="canUpdate"
-        variant="link"
+        category="tertiary"
+        size="small"
         class="gl-text-gray-900! gl-ml-5 js-sidebar-dropdown-toggle edit-link"
         data-testid="edit-button"
         @click="toggle"

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

@@ -50,7 +50,7 @@ export default {
     <gl-loading-icon v-if="loading" size="sm" inline class="align-bottom" />
     <a
       v-if="editable"
-      class="js-sidebar-dropdown-toggle edit-link float-right"
+      class="js-sidebar-dropdown-toggle edit-link btn gl-text-gray-900! gl-ml-auto hide-collapsed btn-default btn-sm gl-button btn-default-tertiary float-right"
       href="#"
       data-test-id="edit-link"
       data-track-event="click_edit_button"

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

@@ -90,7 +90,7 @@ export default {
       {{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }}
       <a
         v-if="isEditable"
-        class="float-right lock-edit"
+        class="float-right lock-edit btn gl-text-gray-900! gl-ml-auto hide-collapsed btn-default btn-sm gl-button btn-default-tertiary gl-mr-n2"
         href="#"
         data-testid="edit-link"
         data-track-event="click_edit_button"

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

@@ -33,6 +33,11 @@ export default {
       required: false,
       default: true,
     },
+    lazy: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -95,7 +100,7 @@ export default {
       <gl-loading-icon v-if="loading" size="sm" />
       <span v-else data-testid="collapsed-count"> {{ participantCount }} </span>
     </div>
-    <div v-if="showParticipantLabel" class="title hide-collapsed gl-mb-2">
+    <div v-if="showParticipantLabel" class="title hide-collapsed gl-mb-2 gl-line-height-20">
       <gl-loading-icon v-if="loading" size="sm" :inline="true" />
       {{ participantLabel }}
     </div>
@@ -107,7 +112,7 @@ export default {
       >
         <a :href="participant.web_url || participant.webUrl" class="author-link">
           <user-avatar-image
-            :lazy="true"
+            :lazy="lazy"
             :img-src="participant.avatar_url || participant.avatarUrl"
             :size="24"
             :tooltip-text="participant.name"

app/assets/javascripts/sidebar/components/participants/sidebar_participants_widget.vue

@@ -64,6 +64,7 @@ export default {
     :loading="isLoading"
     :participants="participants"
     :number-of-less-participants="7"
+    :lazy="false"
     class="block participants"
   />
 </template>

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

@@ -38,7 +38,7 @@ export default {
     <gl-loading-icon v-if="loading" size="sm" inline class="align-bottom" />
     <a
       v-if="editable"
-      class="js-sidebar-dropdown-toggle edit-link float-right"
+      class="js-sidebar-dropdown-toggle edit-link btn gl-text-gray-900! gl-ml-auto hide-collapsed btn-default btn-sm gl-button btn-default-tertiary float-right"
       href="#"
       data-track-event="click_edit_button"
       data-track-label="right_sidebar"

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

@@ -132,8 +132,9 @@ export default {
       <slot name="collapsed-right"></slot>
       <gl-button
         v-if="canUpdate && !initialLoading && canEdit"
-        variant="link"
-        class="gl-text-gray-900! gl-hover-text-blue-800! gl-ml-auto hide-collapsed"
+        category="tertiary"
+        size="small"
+        class="gl-text-gray-900! gl-ml-auto hide-collapsed gl-mr-n2"
         data-testid="edit-button"
         :data-track-event="tracking.event"
         :data-track-label="tracking.label"

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

@@ -28,8 +28,9 @@ export default {
     <template v-if="allowLabelEdit">
       <gl-loading-icon v-show="labelsSelectInProgress" size="sm" inline />
       <gl-button
-        variant="link"
-        class="float-right gl-text-gray-900! gl-hover-text-blue-800! js-sidebar-dropdown-toggle"
+        category="tertiary"
+        size="small"
+        class="float-right gl-text-gray-900! js-sidebar-dropdown-toggle gl-mr-n2"
         data-qa-selector="labels_edit_button"
         @click="toggleDropdownContents"
       >

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

@@ -28,8 +28,9 @@ export default {
     <template v-if="allowLabelEdit">
       <gl-loading-icon v-show="labelsSelectInProgress" size="sm" inline />
       <gl-button
-        variant="link"
-        class="float-right js-sidebar-dropdown-toggle"
+        category="tertiary"
+        size="small"
+        class="float-right js-sidebar-dropdown-toggle gl-mr-n2"
         data-qa-selector="labels_edit_button"
         @click="toggleDropdownContents"
         >{{ __('Edit') }}</gl-button

app/assets/stylesheets/framework/sidebar.scss

@@ -237,3 +237,7 @@
   @include side-panel-toggle;
   border-bottom: 1px solid $border-color;
 }
+
+.edit-link {
+  margin-right: -$gl-spacing-scale-2;
+}

app/assets/stylesheets/page_bundles/boards.scss

@@ -476,6 +476,10 @@
   .gl-drawer-header {
     align-items: flex-start;
   }
+
+  .labels-select-wrapper.is-embedded .labels-select-wrapper.is-embedded {
+    width: auto;
+  }
 }
 
 .board-header-collapsed-info-icon:hover {

app/assets/stylesheets/utilities.scss

@@ -197,6 +197,10 @@
   margin-bottom: -$gl-spacing-scale-3;
 }
 
+.gl-mr-n2 {
+  margin-right: -$gl-spacing-scale-2;
+}
+
 // Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1408
 $gl-line-height-42: px-to-rem(42px);
 

ee/app/assets/javascripts/boards/components/epic_board_content_sidebar.vue

@@ -55,6 +55,7 @@ export default {
       v-bind="$attrs"
       class="boards-sidebar gl-absolute"
       :open="isSidebarOpen"
+      variant="sidebar"
       @close="handleClose"
     >
       <template #title>

ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue

@@ -156,10 +156,10 @@ export default {
 <template>
   <div :class="blockClass" class="block date">
     <collapsed-calendar-icon :text="collapsedText" class="sidebar-collapsed-icon" />
-    <div class="title">
+    <div class="title gl-mb-2">
       {{ label }}
       <gl-loading-icon v-if="dateSaveInProgress" size="sm" :inline="true" />
-      <div class="float-right d-flex">
+      <div class="float-right gl-display-flex gl-align-items-center">
         <gl-icon
           ref="epicDatePopover"
           name="question-o"
@@ -181,8 +181,9 @@ export default {
         <gl-button
           v-show="canUpdate && !editing"
           ref="editButton"
-          variant="link"
-          class="btn-sidebar-action"
+          category="tertiary"
+          size="small"
+          class="btn-sidebar-action gl-mr-n2"
           @click="startEditing"
         >
           {{ __('Edit') }}

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

@@ -73,7 +73,7 @@ export default {
     <gl-tooltip :target="() => $refs.sidebarIcon" placement="left" boundary="viewport">
       <span v-html="tooltipText"></span>
     </gl-tooltip>
-    <div class="title hide-collapsed">{{ __('Ancestors') }}</div>
+    <div class="title hide-collapsed gl-mb-2">{{ __('Ancestors') }}</div>
 
     <ul v-if="!isFetching && ancestors.length" class="vertical-timeline hide-collapsed">
       <li v-for="(ancestor, id) in ancestors" :key="id" class="vertical-timeline-row d-flex">
@@ -87,7 +87,7 @@ export default {
     </ul>
 
     <div v-if="!isFetching && !ancestors.length" class="value hide-collapsed">
-      <span class="no-value">{{ __('None') }}</span>
+      <span class="no-value gl-text-gray-500">{{ __('None') }}</span>
     </div>
 
     <gl-loading-icon v-if="isFetching" size="sm" />

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

@@ -165,8 +165,9 @@ export default {
         >
           <gl-button
             ref="editButton"
-            variant="link"
-            class="edit-link btn-link-hover gl-text-gray-900! gl-hover-text-blue-800!"
+            category="tertiary"
+            size="small"
+            class="edit-link btn-link-hover gl-text-gray-900!"
             :disabled="!isOpen"
             @click.stop="toggleFormDropdown"
             @keydown.esc="hideDropdown"

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

@@ -162,7 +162,7 @@ export default {
       />
       <a
         v-if="editable"
-        class="float-right edit-link js-weight-edit-link"
+        class="float-right edit-link btn gl-text-gray-900! gl-ml-auto hide-collapsed btn-default btn-sm gl-button btn-default-tertiary js-weight-edit-link"
         data-qa-selector="edit_weight_link"
         href="#"
         @click.prevent="onEditClick(!shouldShowEditField)"

ee/app/assets/stylesheets/pages/issuable_form.scss

@@ -25,7 +25,7 @@
     }
   }
 
-  .labels-select-dropdown-contents {
+  .labels-select-wrapper.is-embedded {
     @include gl-left-0;
     @include gl-shadow-x0-y2-b4-s0;
 

spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

@@ -61,6 +61,7 @@ exports[`Design management design index page renders design index 1`] = `
      
     <participants-stub
       class="gl-mb-4"
+      lazy="true"
       numberoflessparticipants="7"
       participants="[object Object]"
     />
@@ -221,6 +222,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
      
     <participants-stub
       class="gl-mb-4"
+      lazy="true"
       numberoflessparticipants="7"
       participants="[object Object]"
     />