Merge branch 'boards-ee-stylelint' into 'master'

Fixes stylelint in EE specific boards SCSS

Closes #10942

See merge request gitlab-org/gitlab-ee!11213

ee/app/assets/javascripts/boards/components/boards_list_selector/assignees_list_item.vue

@@ -25,13 +25,13 @@ export default {
 
 <template>
   <li class="filter-dropdown-item" @click="handleItemClick">
-    <button class="btn btn-link dropdown-user" type="button">
-      <div class="avatar-container s32">
+    <button class="btn btn-link dropdown-user d-flex py-2 px-4" type="button">
+      <div class="avatar-container s32 flex-shrink-0">
         <img :alt="avatarAltText" :src="item.avatar_url" class="avatar s32 lazy" />
       </div>
-      <div class="dropdown-user-details">
-        <div :title="item.name">{{ item.name }}</div>
-        <div :title="item.username" class="dropdown-light-content">@{{ item.username }}</div>
+      <div class="text-truncate dropdown-user-details">
+        <div class="text-truncate">{{ item.name }}</div>
+        <div class="text-truncate dropdown-light-content">@{{ item.username }}</div>
       </div>
     </button>
   </li>

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

-.dropdown.show .dropdown-menu.dropdown-menu-tabs {
-  max-height: 400px;
-  overflow-y: hidden;
-}
-
-.dropdown .dropdown-menu.dropdown-menu-tabs {
-  padding-top: 0;
-  min-width: 240px;
+.boards-add-list {
+  &.show {
+    .dropdown-menu-tabs {
+      max-height: 400px;
+      min-width: 240px;
+      overflow-y: hidden;
+    }
+  }
 
   .dropdown-tabs-list {
-    display: flex;
     box-shadow: 0 0 0 1px $border-color;
+  }
+
+  .dropdown-tab-item {
+    border-left: 1px solid $border-color;
 
-    .dropdown-tab-item {
-      flex: 1;
-      border-left: 1px solid $border-color;
+    a {
+      border-bottom: 2px solid transparent;
+      background-color: $gray-light;
 
-      &:first-of-type {
-        border-left: 0;
+      &:focus,
+      &.active {
+        background-color: $white-light;
       }
 
-      a {
-        width: 100%;
-        padding: $gl-padding $gl-padding-top;
-        text-align: center;
-        border-bottom: 2px solid transparent;
-        background-color: $gray-light;
-
-        &:focus,
-        &.active {
-          background-color: $white-light;
-        }
-
-        &.active {
-          font-weight: bold;
-          border-bottom-color: $indigo-500;
-        }
+      &.active {
+        font-weight: bold;
+        border-bottom-color: $indigo-500;
       }
     }
   }
 
-  .tab-content {
-    .issue-board-dropdown-content {
-      margin: 0;
-      padding: $gl-padding;
-      border-bottom: 0;
-      color: $gl-text-color-secondary;
-    }
+  .issue-board-dropdown-content {
+    margin: 0;
+    padding: $gl-padding;
+    border-bottom: 0;
+    color: $gl-text-color-secondary;
+  }
+}
 
-    .tab-pane-labels {
-      .dropdown-page-one .dropdown-content {
-        height: 140px;
-      }
+.tab-pane-labels {
+  .dropdown-page-one .dropdown-content {
+    height: 140px;
+  }
 
-      .dropdown-page-two {
-        margin-top: 10px;
+  .dropdown-page-two {
+    margin-top: 10px;
 
-        .dropdown-content {
-          max-height: initial;
-          height: 205px;
-        }
-      }
+    .dropdown-content {
+      max-height: initial;
+      height: 205px;
     }
+  }
+}
 
-    .tab-pane-assignees {
-      .dropdown-content {
-        height: 225px;
-        max-height: 252px;
-      }
-
-      .dropdown-user {
-        display: flex;
-        padding: $gl-padding-8 $gl-padding-24;
-      }
-
-      .dropdown-user-details div {
-        max-width: 130px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-
-      .dropdown-loading {
-        display: block;
-      }
-    }
+.tab-pane-assignees {
+  .dropdown-content {
+    height: 225px;
+    max-height: 252px;
   }
 }
 
@@ -103,15 +77,13 @@
   }
 }
 
-.boards-switcher {
-  .boards-selector-wrapper > .show.dropdown .dropdown-menu {
-    // we cannot use d-flex from Bootstrap because of !important
-    // see https://gitlab.com/gitlab-org/gitlab-ui/issues/38
-    display: flex;
+.boards-selector-wrapper > .show.dropdown .dropdown-menu {
+  // we cannot use d-flex from Bootstrap because of !important
+  // see https://gitlab.com/gitlab-org/gitlab-ui/issues/38
+  display: flex;
 
-    &.dropdown-extended-height {
-      max-height: $dropdown-max-height-lg;
-    }
+  &.dropdown-extended-height {
+    max-height: $dropdown-max-height-lg;
   }
 }
 
@@ -137,64 +109,10 @@
   }
 }
 
-.board-promotion-state {
-  .btn.btn-primary {
-    display: block;
-    margin-bottom: 15px;
-  }
-}
-
-.boards-title-holder {
-  padding: 25px 13px $gl-padding;
-
-  .dropdown-menu {
-    margin-top: -15px;
-    margin-left: 8px;
-  }
-}
-
-.board-selector-page-two {
-  padding-left: 10px;
-  padding-right: 10px;
-  white-space: normal;
-}
-
 .form-section-title {
   font-size: 16px;
 }
 
-.board-delete-btns {
-  padding-top: 12px;
-  border-top: 1px solid $border-color;
-}
-
-
-.board-milestone-list {
-  > li {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  a {
-    padding-left: 25px;
-  }
-
-  .fa-check {
-    margin-left: -18px;
-  }
-}
-
-.board-inner-milestone-dropdown {
-  margin-top: 10px;
-
-  .dropdown-menu {
-    position: fixed;
-    left: 10px;
-    top: 175px;
-    min-width: 200px;
-  }
-}
-
 .board-config-modal {
   width: 440px;
 

ee/app/views/shared/issuable/_board_create_list_dropdown.html.haml

@@ -2,24 +2,24 @@
 - milestone_lists_available = board.parent.feature_available?(:board_milestone_lists)
 
 - if assignee_lists_available || milestone_lists_available
-  .dropdown.prepend-left-10#js-add-list
+  .dropdown.boards-add-list.prepend-left-10#js-add-list
     %button.btn.btn-success.btn-inverted.d-flex.js-new-board-list{ type: "button", data: board_list_data }
       %span Add list
       = sprite_icon('chevron-down', size: 16, css_class: 'prepend-left-5 btn-success-board-list-chevron')
-    .dropdown-menu.dropdown-menu-paging.dropdown-menu-right.dropdown-menu-issues-board-new.dropdown-menu-selectable.dropdown-menu-tabs
-      %ul.nav.nav-tabs.dropdown-tabs-list.js-new-board-list-tabs{ role: 'tablist' }
-        %li.nav-item.dropdown-tab-item.js-tab-button-labels
-          %a.active{ href: '#', role: 'tab', data: { is_link: 'true', toggle: 'tab', action: 'tab-labels', target: '#tab-labels' } }
+    .dropdown-menu.dropdown-menu-paging.dropdown-menu-right.dropdown-menu-issues-board-new.dropdown-menu-selectable.dropdown-menu-tabs.pt-0
+      %ul.nav.nav-tabs.dropdown-tabs-list.d-flex.js-new-board-list-tabs{ role: 'tablist' }
+        %li.nav-item.dropdown-tab-item.flex-grow-1.flex-shrink-1.w-0.border-left-0.js-tab-button-labels
+          %a.w-100.text-center.py-3.px-2.active{ href: '#', role: 'tab', data: { is_link: 'true', toggle: 'tab', action: 'tab-labels', target: '#tab-labels' } }
             Label
 
         - if assignee_lists_available
-          %li.nav-item.dropdown-tab-item.js-tab-button-assignees
-            %a{ href: '#', role: 'tab', data: { is_link: 'true', toggle: 'tab', action: 'tab-assignees', target: '#tab-assignees' } }
+          %li.nav-item.dropdown-tab-item.flex-grow-1.flex-shrink-1.w-0.js-tab-button-assignees
+            %a.w-100.text-center.py-3.px-2{ href: '#', role: 'tab', data: { is_link: 'true', toggle: 'tab', action: 'tab-assignees', target: '#tab-assignees' } }
               Assignee
 
         - if milestone_lists_available
-          %li.nav-item.dropdown-tab-item.js-tab-button-milestones
-            %a{ href: '#', role: 'tab', data: { is_link: 'true', toggle: 'tab', action: 'tab-milestones', target: '#tab-milestones' } }
+          %li.nav-item.dropdown-tab-item.flex-grow-1.flex-shrink-1.w-0.js-tab-button-milestones
+            %a.w-100.text-center.py-3.px-2{ href: '#', role: 'tab', data: { is_link: 'true', toggle: 'tab', action: 'tab-milestones', target: '#tab-milestones' } }
               Milestone
       .tab-content
         #tab-labels.tab-pane.tab-pane-labels.active.js-tab-container-labels{ role: 'tabpanel' }

ee/app/views/shared/promotions/_promote_issue_board.html.haml

@@ -20,5 +20,5 @@
         = link_to _('Issue board focus mode'), help_page_path('user/project/issue_board.html', anchor:'focus-mode-starter'), target: '_blank'
   = render 'shared/promotions/promotion_link_project'
   .top-space
-    %button.btn.btn-default.btn-block#hide-btn{ :href => "#", "@click.stop" => "clearPromotionState" }
+    %button.d-block.mb-3.btn.btn-default.btn-block#hide-btn{ :href => "#", "@click.stop" => "clearPromotionState" }
       = _("Thanks! Don't show me this again")