Revert "Merge branch 'boards-stylelint' into 'master'"

This reverts merge request !27313

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

@@ -60,15 +60,11 @@ export default {
 </script>
 
 <template>
-  <div class="board-blank-state p-3">
+  <div class="board-blank-state">
     <p>Add the following default lists to your Issue Board with one click:</p>
-    <ul class="list-unstyled board-blank-state-list">
+    <ul class="board-blank-state-list">
       <li v-for="(label, index) in predefinedLabels" :key="index">
-        <span
-          :style="{ backgroundColor: label.color }"
-          class="label-color position-relative d-inline-block rounded"
-        >
-        </span>
+        <span :style="{ backgroundColor: label.color }" class="label-color"> </span>
         {{ label.title }}
       </li>
     </ul>

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

@@ -83,7 +83,7 @@ export default {
     }"
     :index="index"
     :data-issue-id="issue.id"
-    class="board-card position-relative p-3 rounded"
+    class="board-card"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
     @mouseup="showIssue($event)"

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

@@ -221,10 +221,7 @@ export default {
 </script>
 
 <template>
-  <div
-    :class="{ 'd-none': !list.isExpanded, 'd-flex flex-column': list.isExpanded }"
-    class="board-list-component position-relative h-100"
-  >
+  <div class="board-list-component">
     <div v-if="loading" class="board-list-loading text-center" aria-label="Loading issues">
       <gl-loading-icon />
     </div>
@@ -239,7 +236,7 @@ export default {
       :data-board="list.id"
       :data-board-type="list.type"
       :class="{ 'is-smaller': showIssueForm }"
-      class="board-list w-100 h-100 list-unstyled mb-0 p-1 js-board-list"
+      class="board-list js-board-list"
     >
       <board-card
         v-for="(issue, index) in issues"

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

@@ -95,7 +95,7 @@ export default {
 
 <template>
   <div class="board-new-issue-form">
-    <div class="board-card position-relative p-3 rounded">
+    <div class="board-card">
       <form @submit="submit($event)">
         <div v-if="error" class="flash-container">
           <div class="flash-alert">An error occurred. Please try again.</div>

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

@@ -173,7 +173,7 @@ export default {
 </script>
 <template>
   <div>
-    <div class="d-flex board-card-header">
+    <div class="board-card-header">
       <h4 class="board-card-title append-bottom-0 prepend-top-0">
         <icon
           v-if="issue.confidential"
@@ -214,11 +214,11 @@ export default {
     </div>
     <div class="board-card-footer d-flex justify-content-between align-items-end">
       <div
-        class="d-flex align-items-start flex-wrap-reverse board-card-number-container overflow-hidden js-board-card-number-container"
+        class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container"
       >
         <span
           v-if="issue.referencePath"
-          class="board-card-number overflow-hidden d-flex append-right-8 prepend-top-8"
+          class="board-card-number d-flex append-right-8 prepend-top-8"
         >
           <tooltip-on-truncate
             v-if="issueReferencePath"
@@ -235,7 +235,7 @@ export default {
           />
         </span>
       </div>
-      <div class="board-card-assignee d-flex">
+      <div class="board-card-assignee">
         <user-avatar-link
           v-for="(assignee, index) in issue.assignees"
           v-if="shouldRenderAssignee(index)"

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

@@ -82,11 +82,7 @@ export default {
 <template>
   <span>
     <span ref="issueDueDate" :class="cssClass" class="board-card-info card-number">
-      <icon
-        :class="{ 'text-danger': isPastDue }"
-        class="board-card-info-icon align-top"
-        name="calendar"
-      />
+      <icon :class="{ 'text-danger': isPastDue, 'board-card-info-icon': true }" name="calendar" />
       <time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{
         body
       }}</time>

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

@@ -28,7 +28,7 @@ export default {
 <template>
   <span>
     <span ref="issueTimeEstimate" class="board-card-info card-number">
-      <icon name="hourglass" css-classes="board-card-info-icon align-top" /><time
+      <icon name="hourglass" css-classes="board-card-info-icon" /><time
         class="board-card-info-text"
         >{{ timeEstimate }}</time
       >

app/assets/javascripts/boards/components/modal/empty_state.vue

@@ -42,8 +42,8 @@ export default {
 </script>
 
 <template>
-  <section class="empty-state d-flex mt-0 h-100">
-    <div class="row w-100 my-auto mx-0">
+  <section class="empty-state">
+    <div class="row">
       <div class="col-12 col-md-6 order-md-last">
         <aside class="svg-content d-none d-md-block"><img :src="emptyStateSvg" /></aside>
       </div>

app/assets/javascripts/boards/components/modal/header.vue

@@ -50,8 +50,8 @@ export default {
 </script>
 <template>
   <div>
-    <header class="add-issues-header border-top-0 form-actions">
-      <h2 class="m-0">
+    <header class="add-issues-header form-actions">
+      <h2>
         Add issues
         <button
           type="button"
@@ -65,7 +65,7 @@ export default {
       </h2>
     </header>
     <modal-tabs v-if="!loading && issuesCount > 0" />
-    <div v-if="showSearch" class="d-flex append-bottom-10">
+    <div v-if="showSearch" class="add-issues-search append-bottom-10">
       <modal-filters :store="filter" />
       <button
         ref="selectAllBtn"

app/assets/javascripts/boards/components/modal/index.vue

@@ -143,11 +143,8 @@ export default {
 };
 </script>
 <template>
-  <div
-    v-if="showAddIssuesModal"
-    class="add-issues-modal d-flex position-fixed position-top-0 position-bottom-0 position-left-0 position-right-0 h-100"
-  >
-    <div class="add-issues-container d-flex flex-column m-auto rounded">
+  <div v-if="showAddIssuesModal" class="add-issues-modal">
+    <div class="add-issues-container">
       <modal-header
         :project-id="projectId"
         :milestone-path="milestonePath"
@@ -164,10 +161,8 @@ export default {
         :new-issue-path="newIssuePath"
         :empty-state-svg="emptyStateSvg"
       />
-      <section v-if="loading || filterLoading" class="add-issues-list d-flex h-100 text-center">
-        <div class="add-issues-list-loading w-100 align-self-center">
-          <gl-loading-icon size="md" />
-        </div>
+      <section v-if="loading || filterLoading" class="add-issues-list text-center">
+        <div class="add-issues-list-loading"><gl-loading-icon /></div>
       </section>
       <modal-footer />
     </div>

app/assets/javascripts/boards/components/modal/list.vue

@@ -117,7 +117,7 @@ export default {
 };
 </script>
 <template>
-  <section ref="list" class="add-issues-list add-issues-list-columns d-flex h-100">
+  <section ref="list" class="add-issues-list add-issues-list-columns">
     <div
       v-if="issuesCount > 0 && issues.length === 0"
       class="empty-state add-issues-empty-state-filter text-center"
@@ -129,7 +129,7 @@ export default {
       <div v-for="issue in group" v-if="showIssue(issue)" :key="issue.id" class="board-card-parent">
         <div
           :class="{ 'is-active': issue.selected }"
-          class="board-card position-relative p-3 rounded"
+          class="board-card"
           @click="toggleIssue($event, issue)"
         >
           <issue-card-inner :issue="issue" :issue-link-base="issueLinkBase" :root-path="rootPath" />

app/assets/stylesheets/pages/boards.scss

+[v-cloak] {
+  display: none;
+}
+
 .user-can-drag {
   cursor: grab;
 }
@@ -36,15 +40,35 @@
   margin: 0 8px 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid $dropdown-divider-bg;
+
+  > p {
+    margin: 0;
+    font-size: 14px;
+  }
 }
 
 .issue-boards-page {
   .content-wrapper {
     padding-bottom: 0;
   }
+
+  .issues-details-filters {
+    display: flex;
+  }
+
+  .filter-form {
+    width: 100%;
+  }
+}
+
+.board-extra-actions {
+  font-size: 0;
+  white-space: nowrap;
 }
 
 .boards-app {
+  position: relative;
+
   @include media-breakpoint-up(sm) {
     transition: width $sidebar-transition-duration;
     width: 100%;
@@ -55,9 +79,17 @@
   }
 }
 
+.boards-app-loading {
+  width: 100%;
+  font-size: 34px;
+}
+
 .boards-list {
   height: calc(100vh - #{$issue-board-list-difference-xs});
+  width: 100%;
+  padding: $gl-padding ($gl-padding / 2);
   overflow-x: scroll;
+  white-space: nowrap;
   min-height: 200px;
 
   @include media-breakpoint-only(sm) {
@@ -82,7 +114,13 @@
 }
 
 .board {
+  display: inline-block;
   width: calc(85vw - 15px);
+  height: 100%;
+  padding-right: ($gl-padding / 2);
+  padding-left: ($gl-padding / 2);
+  white-space: normal;
+  vertical-align: top;
 
   @include media-breakpoint-up(sm) {
     width: 400px;
@@ -97,7 +135,23 @@
   &.is-collapsed {
     width: 50px;
 
+    .board-header {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+
+      button {
+        display: none;
+      }
+    }
+
     .board-title {
+      padding: 0;
+      border-bottom: 0;
+      justify-content: center;
+
       > span {
         width: 100%;
         margin-top: -12px;
@@ -113,16 +167,34 @@
       left: 50%;
       margin-left: -10px;
     }
+
+    .board-list-component,
+    .issue-count-badge {
+      display: none;
+    }
+  }
+
+  &:not(.is-collapsed) {
+    .board-list-component {
+      display: flex;
+      flex-direction: column;
+    }
   }
 }
 
 .board-inner {
+  position: relative;
+  height: 100%;
   font-size: $issue-boards-font-size;
   background: $gray-light;
   border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+  flex: 1;
 }
 
 .board-header {
+  position: relative;
+
   &.has-border::before {
     border-top: 3px solid;
     border-color: inherit;
@@ -147,9 +219,18 @@
   }
 }
 
+.board-inner-container {
+  border-bottom: 1px solid $border-color;
+  padding: $gl-padding;
+}
+
 .board-title {
+  margin: 0;
+  padding: $gl-padding-8 $gl-padding;
   font-size: 1em;
   border-bottom: 1px solid $border-color;
+  display: flex;
+  align-items: center;
 }
 
 .board-title-text {
@@ -158,8 +239,10 @@
 
 .board-delete {
   margin-right: 10px;
+  padding: 0;
   color: $gray-darkest;
   background-color: transparent;
+  border: 0;
   outline: 0;
 
   &:hover {
@@ -169,6 +252,7 @@
 
 .board-blank-state,
 .board-promotion-state {
+  padding: $gl-padding;
   background-color: $white-light;
   flex: 1;
   overflow-y: auto;
@@ -176,23 +260,35 @@
 }
 
 .board-blank-state-list {
+  list-style: none;
+
   > li:not(:last-child) {
     margin-bottom: 8px;
   }
 
   .label-color {
+    position: relative;
     top: 2px;
+    display: inline-block;
     width: 16px;
     height: 16px;
     margin-right: 3px;
+    border-radius: $border-radius-default;
   }
 }
 
 .board-list-component {
+  position: relative;
+  flex: 1;
   min-height: 0; // firefox fix
 }
 
 .board-list {
+  height: 100%;
+  width: 100%;
+  margin-bottom: 0;
+  padding: $gl-padding-4;
+  list-style: none;
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -203,9 +299,13 @@
 }
 
 .board-card {
+  position: relative;
+  padding: $gl-padding;
   background: $white-light;
+  border-radius: $border-radius-default;
   border: 1px solid $gray-200;
   box-shadow: 0 1px 2px $issue-boards-card-shadow;
+  list-style: none;
   line-height: $gl-padding;
 
   &:not(:last-child) {
@@ -233,6 +333,10 @@
     }
   }
 
+  svg {
+    vertical-align: top;
+  }
+
   .confidential-icon {
     color: $orange-600;
     cursor: help;
@@ -256,7 +360,12 @@
   }
 }
 
+.board-card-header {
+  display: flex;
+}
+
 .board-card-assignee {
+  display: flex;
   margin-top: -$gl-padding-4;
   margin-bottom: -$gl-padding-4;
 
@@ -316,16 +425,34 @@
 .board-card-number {
   font-size: $gl-font-size-xs;
   color: $gl-text-color-secondary;
+  overflow: hidden;
 
   @include media-breakpoint-up(md) {
     font-size: $label-font-size;
   }
 }
 
+.board-card-number-container {
+  overflow: hidden;
+}
+
+.issue-boards-search {
+  width: 395px;
+
+  .form-control {
+    display: inline-block;
+    width: 210px;
+  }
+}
+
 .board-list-count {
   padding: 10px 0;
   color: $gl-text-color-secondary;
   font-size: 13px;
+
+  > .fa {
+    margin-right: 5px;
+  }
 }
 
 .board-new-issue-form {
@@ -333,9 +460,16 @@
   margin: 5px;
 }
 
-.issue-boards-sidebar {
+.page-with-contextual-sidebar.layout-page .issue-boards-sidebar {
+  .issuable-sidebar-header {
+    position: relative;
+  }
+
   .gutter-toggle {
+    position: absolute;
+    top: 0;
     bottom: 15px;
+    right: 0;
     width: 22px;
     color: $gray-darkest;
 
@@ -355,6 +489,10 @@
   .issuable-header-text {
     @include overflow-break-word();
     padding-right: 35px;
+
+    > strong {
+      font-weight: $gl-font-weight-bold;
+    }
   }
 }
 
@@ -373,25 +511,44 @@
 }
 
 .add-issues-modal {
+  display: flex;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   background-color: rgba($black, 0.3);
   z-index: 9999;
 }
 
 .add-issues-container {
+  display: flex;
+  flex-direction: column;
   width: 90vw;
   height: 85vh;
   max-width: 1100px;
   min-height: 500px;
+  margin: auto;
   padding: 25px 15px 0;
   background-color: $white-light;
+  border-radius: $border-radius-default;
   box-shadow: 0 2px 12px rgba($black, 0.5);
 
   .empty-state {
+    display: flex;
+    flex: 1;
+    margin-top: 0;
+
     &.add-issues-empty-state-filter {
       flex-direction: column;
       justify-content: center;
     }
 
+    > .row {
+      width: 100%;
+      margin: auto 0;
+    }
+
     .svg-content {
       margin-top: -40px;
     }
@@ -400,15 +557,25 @@
 
 .add-issues-header {
   margin: -25px -15px -5px;
+  border-top: 0;
   border-bottom: 1px solid $border-color;
   border-top-right-radius: $border-radius-default;
   border-top-left-radius: $border-radius-default;
 
   > h2 {
+    margin: 0;
     font-size: 18px;
   }
 }
 
+.add-issues-search {
+  display: flex;
+
+  .issues-filters {
+    flex: 1;
+  }
+}
+
 .add-issues-list-column {
   width: 100%;
 
@@ -422,6 +589,8 @@
 }
 
 .add-issues-list {
+  display: flex;
+  flex: 1;
   padding-top: 3px;
   margin-left: -$gl-vert-padding;
   margin-right: -$gl-vert-padding;
@@ -438,6 +607,14 @@
   }
 }
 
+.add-issues-list-loading {
+  align-self: center;
+  width: 100%;
+  padding-left: $gl-vert-padding;
+  padding-right: $gl-vert-padding;
+  font-size: 35px;
+}
+
 .add-issues-footer {
   margin: auto -15px 0;
   padding-left: 15px;
@@ -465,6 +642,27 @@
   border-radius: 50%;
 }
 
+.modal-filters {
+  display: flex;
+
+  > .dropdown {
+    display: none;
+    margin-right: 10px;
+
+    @include media-breakpoint-up(sm) {
+      display: block;
+    }
+  }
+
+  .dropdown-menu-toggle {
+    width: 100px;
+
+    @include media-breakpoint-up(md) {
+      width: 140px;
+    }
+  }
+}
+
 .board-card-info {
   color: $gl-text-color-secondary;
   white-space: nowrap;

app/views/shared/boards/_show.html.haml

@@ -13,14 +13,14 @@
   %script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal, show_sorting_dropdown: false
   %script#js-board-promotion{ type: "text/x-template" }= render_if_exists "shared/promotions/promote_issue_board"
 
-#board-app.boards-app.position-relative{ "v-cloak" => "true", data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
+#board-app.boards-app{ "v-cloak" => true, data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
   .d-none.d-sm-none.d-md-block
     = render 'shared/issuable/search_bar', type: :boards, board: board
 
-  .boards-list.w-100.py-3.px-2.text-nowrap
-    .boards-app-loading.w-100.text-center{ "v-if" => "loading" }
-      = icon("spinner spin 2x")
-    %board{ "v-cloak" => "true",
+  .boards-list
+    .boards-app-loading.text-center{ "v-if" => "loading" }
+      = icon("spinner spin")
+    %board{ "v-cloak" => true,
       "v-for" => "list in state.lists",
       "ref" => "board",
       ":list" => "list",

app/views/shared/boards/components/_board.html.haml

-.board.d-inline-block.h-100.px-2.align-top.ws-normal{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }',
+.board{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }',
   ":data-id" => "list.id" }
-  .board-inner.d-flex.flex-column.position-relative.h-100.rounded
-    %header.board-header{ ":class" => '{ "has-border": list.label && list.label.color, "position-relative": list.isExpanded, "position-absolute position-top-0 position-left-0 w-100 h-100": !list.isExpanded }', ":style" => "{ borderTopColor: (list.label && list.label.color ? list.label.color : null) }", "@click" => "toggleExpanded($event)" }
-      %h3.board-title.m-0.d-flex.align-items-center.py-2.px-3.js-board-handle{ ":class" => '{ "user-can-drag": (!disabled && !list.preset), "p-0 border-bottom-0 justify-content-center": !list.isExpanded }' }
+  .board-inner.d-flex.flex-column
+    %header.board-header{ ":class" => '{ "has-border": list.label && list.label.color }', ":style" => "{ borderTopColor: (list.label && list.label.color ? list.label.color : null) }", "@click" => "toggleExpanded($event)" }
+      %h3.board-title.js-board-handle{ ":class" => '{ "user-can-drag": (!disabled && !list.preset) }' }
         %i.fa.fa-fw.board-title-expandable-toggle{ "v-if": "list.isExpandable",
           ":class": "{ \"fa-caret-down\": list.isExpanded, \"fa-caret-right\": !list.isExpanded }",
           "aria-hidden": "true" }
@@ -31,9 +31,9 @@
           %board-delete{ "inline-template" => true,
             ":list" => "list",
             "v-if" => "!list.preset && list.id" }
-            %button.board-delete.p-0.border-0.has-tooltip.float-right{ type: "button", title: _("Delete list"), ":class": "{ 'd-none': !list.isExpanded }", "aria-label" => _("Delete list"), data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
+            %button.board-delete.has-tooltip.float-right{ type: "button", title: _("Delete list"), "aria-label" => _("Delete list"), data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
               = icon("trash")
-        .issue-count-badge.text-secondary{ "v-if" => 'list.type !== "blank" && list.type !== "promotion"', ":title": "counterTooltip", ":class": "{ 'd-none': !list.isExpanded }", "v-tooltip": true, data: { placement: "top" } }
+        .issue-count-badge.text-secondary{ "v-if" => 'list.type !== "blank" && list.type !== "promotion"', ":title": "counterTooltip", "v-tooltip": true, data: { placement: "top" } }
           %span.issue-count-badge-count
             %icon.mr-1{ name: "issues" }
             {{ list.issuesSize }}
@@ -42,7 +42,6 @@
         %button.issue-count-badge-add-button.btn.btn-sm.btn-default.ml-1.has-tooltip.js-no-trigger-collapse{ type: "button",
           "@click" => "showNewIssueForm",
           "v-if" => "isNewIssueShown",
-          ":class": "{ 'd-none': !list.isExpanded }",
           "aria-label" => _("New issue"),
           "title" => _("New issue"),
           data: { placement: "top", container: "body" } }

app/views/shared/boards/components/_sidebar.html.haml

@@ -2,16 +2,16 @@
   %transition{ name: "boards-sidebar-slide" }
     %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
       .issuable-sidebar
-        .block.issuable-sidebar-header.position-relative
+        .block.issuable-sidebar-header
           %span.issuable-header-text.hide-collapsed.float-left
-            %strong.bold
+            %strong
               {{ issue.title }}
             %br/
             %span
               = render_if_exists "shared/boards/components/sidebar/issue_project_path"
               = precede "#" do
                 {{ issue.iid }}
-          %a.gutter-toggle.position-absolute.position-top-0.position-right-0{ role: "button",
+          %a.gutter-toggle.float-right{ role: "button",
             href: "#",
             "@click.prevent" => "closeSidebar",
             "aria-label" => "Toggle sidebar" }

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

@@ -11,7 +11,7 @@
     = dropdown_title(title)
   - if show_boards_content
     .issue-board-dropdown-content
-      %p.m-0
+      %p
         = content_title
   = dropdown_filter(filter_placeholder)
   = dropdown_content

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

@@ -3,11 +3,11 @@
 - block_css_class = type != :boards_modal ? 'row-content-block second-block' : ''
 - user_can_admin_list = board && can?(current_user, :admin_list, board.parent)
 
-.issues-filters{ class: ("w-100" if type == :boards_modal) }
-  .issues-details-filters.filtered-search-block.d-flex{ class: block_css_class, "v-pre" => type == :boards_modal }
+.issues-filters
+  .issues-details-filters.filtered-search-block{ class: block_css_class, "v-pre" => type == :boards_modal }
     - if type == :boards
       = render_if_exists "shared/boards/switcher", board: board
-    = form_tag page_filter_path, method: :get, class: 'filter-form js-filter-form w-100' do
+    = form_tag page_filter_path, method: :get, class: 'filter-form js-filter-form' do
       - if params[:search].present?
         = hidden_field_tag :search, params[:search]
       - if @can_bulk_update