Merge branch 'ce-to-ee-bootstrap4' into 'master'

Ce to ee bootstrap4

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

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

@@ -184,7 +184,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({
         v-if="showLabelFooter"
       >
         <button
-          class="label color-label has-tooltip"
+          class="badge color-label has-tooltip"
           v-for="label in issue.labels"
           type="button"
           v-if="showLabel(label)"

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

@@ -41,10 +41,10 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
   template: `
     <section class="empty-state">
       <div class="row">
-        <div class="col-12 col-sm-6 col-sm-last">
+        <div class="col-xs-12 col-sm-6 order-sm-last">
           <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
         </div>
-        <div class="col-12 col-sm-6 col-sm-first">
+        <div class="col-xs-12 col-sm-6 order-sm-first">
           <div class="text-content">
             <h4>{{ contents.title }}</h4>
             <p v-html="contents.content"></p>

app/assets/javascripts/clusters/components/applications.vue

@@ -195,7 +195,7 @@ export default {
                     <clipboard-button
                       :text="ingressExternalIp"
                       :title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')"
-                      class="js-clipboard-btn"
+                      class="input-group-text js-clipboard-btn"
                     />
                   </span>
                 </div>

app/assets/javascripts/compare_autocomplete.js

@@ -54,7 +54,7 @@ export default function initCompareAutocomplete(limitTo = null, clickHandler = (
             .attr('href', '#')
             .addClass(ref === selected ? 'is-active' : '')
             .text(ref)
-            .attr('data-ref', escape(ref));
+            .attr('data-ref', ref);
           return $('<li />').append(link);
         }
       },

app/assets/javascripts/create_merge_request_dropdown.js

@@ -61,8 +61,8 @@ export default class CreateMergeRequestDropdown {
   }
 
   available() {
-    this.availableButton.classList.remove('hide');
-    this.unavailableButton.classList.add('hide');
+    this.availableButton.classList.remove('hidden');
+    this.unavailableButton.classList.add('hidden');
   }
 
   bindEvents() {
@@ -232,7 +232,7 @@ export default class CreateMergeRequestDropdown {
   }
 
   hide() {
-    this.wrapperEl.classList.add('hide');
+    this.wrapperEl.classList.add('hidden');
   }
 
   init() {
@@ -406,8 +406,8 @@ export default class CreateMergeRequestDropdown {
   }
 
   unavailable() {
-    this.availableButton.classList.add('hide');
-    this.unavailableButton.classList.remove('hide');
+    this.availableButton.classList.add('hidden');
+    this.unavailableButton.classList.remove('hidden');
   }
 
   updateBranchName(suggestedBranchName) {

app/assets/javascripts/ide/components/new_dropdown/modal.vue

@@ -73,7 +73,9 @@ export default {
     <form
       slot="body"
       @submit.prevent="createEntryInStore"
+      class="form-group row append-bottom-0"
     >
+      <fieldset class="form-group append-bottom-0">
         <label class="label-light col-form-label col-sm-3 ide-new-modal-label">
           {{ __('Name') }}
         </label>
@@ -85,6 +87,7 @@ export default {
             ref="fieldName"
           />
         </div>
+      </fieldset>
     </form>
   </deprecated-modal>
 </template>

app/assets/javascripts/jobs/components/sidebar_details_block.vue

@@ -104,8 +104,7 @@ export default {
       <button
         type="button"
         :aria-label="__('Toggle Sidebar')"
-        class="btn btn-blank gutter-toggle float-right
-          d-block d-md-none js-sidebar-build-toggle"
+        class="btn btn-blank gutter-toggle float-right d-block d-md-none js-sidebar-build-toggle"
       >
         <i
           aria-hidden="true"

app/assets/javascripts/merge_request_tabs.js

@@ -362,7 +362,7 @@ export default class MergeRequestTabs {
   //
   // status - Boolean, true to show, false to hide
   toggleLoading(status) {
-    $('.mr-loading-status .loading').toggle(status);
+    $('.mr-loading-status .loading').toggleClass('hidden', status);
   }
 
   diffViewType() {

app/assets/javascripts/notes.js

@@ -1231,8 +1231,8 @@ export default class Notes {
       const isForced = forceShow === true || forceShow === false;
       const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
 
-      targetRow.toggle(showNow);
-      notesContent.toggle(showNow);
+      targetRow.toggleClass('hide', !showNow);
+      notesContent.toggleClass('hide', !showNow);
     }
 
     if (addForm) {

app/assets/javascripts/pages/users/user_tabs.js

@@ -181,7 +181,7 @@ export default class UserTabs {
 
   toggleLoading(status) {
     return this.$parentEl.find('.loading-status .loading')
-      .toggle(status);
+      .toggleClass('hidden', status);
   }
 
   setCurrentAction(source) {

app/assets/javascripts/project_fork.js

@@ -4,6 +4,6 @@ export default () => {
   $('.js-fork-thumbnail').on('click', function forkThumbnailClicked() {
     if ($(this).hasClass('disabled')) return false;
 
-    return $('.js-fork-content').toggle();
+    return $('.js-fork-content').toggleClass('hidden');
   });
 };

app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue

@@ -18,10 +18,10 @@ export default {
 <template>
   <div class="mr-widget-body mr-widget-empty-state">
     <div class="row">
-      <div class="artwork col-sm-5 order-md-last col-12 text-center">
+      <div class="artwork col-md-5 order-md-last col-12 text-center">
         <span v-html="emptyStateSVG"></span>
       </div>
-      <div class="text col-sm-7 order-md-first col-12">
+      <div class="text col-md-7 order-md-first col-12">
         <span>
           Merge requests are a place to propose changes you have made to a project
           and discuss those changes with others.

app/assets/javascripts/vue_shared/components/gl_modal.vue

@@ -53,6 +53,11 @@ export default {
       <div class="modal-content">
         <div class="modal-header">
           <slot name="header">
+            <h4 class="modal-title">
+              <slot name="title">
+                {{ headerTitleText }}
+              </slot>
+            </h4>
             <button
               type="button"
               class="close js-modal-close-action"
@@ -62,11 +67,6 @@ export default {
             >
               <span aria-hidden="true">&times;</span>
             </button>
-            <h4 class="modal-title">
-              <slot name="title">
-                {{ headerTitleText }}
-              </slot>
-            </h4>
           </slot>
         </div>
 

app/assets/stylesheets/framework/dropdowns.scss

@@ -209,7 +209,7 @@
 }
 
 .dropdown-menu,
-.dropdown-menu {
+.dropdown-menu-nav {
   display: none;
   position: absolute;
   width: auto;
@@ -328,7 +328,7 @@
   }
 
   .badge.badge-pill + span:not(.badge.badge-pill) {
-    // Expects up to 3 digits on the .badge.badge-pill
+    // Expects up to 3 digits on the badge
     margin-right: 40px;
   }
 }

app/assets/stylesheets/framework/pagination.scss

@@ -45,7 +45,7 @@
       display: none;
     }
 
-    .page {
+    .page-item {
       display: none;
 
       &.active {
@@ -64,7 +64,7 @@
       padding: 6px 10px;
     }
 
-    .page {
+    .page-item {
       display: none;
 
       &.active {
@@ -79,7 +79,7 @@
  */
 @media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)) {
   .gl-pagination {
-    .page {
+    .page-item {
       display: none;
 
       &.active,

app/assets/stylesheets/framework/panels.scss

@@ -7,8 +7,7 @@
   margin-bottom: $gl-vert-padding;
 }
 
-
-.card-heading {
+.card-header {
   padding: $gl-vert-padding $gl-padding;
   line-height: 36px;
 
@@ -21,7 +20,7 @@
     line-height: 20px;
   }
 
-  .badge {
+  .badge.badge-pill {
     margin-top: -2px;
     margin-left: 5px;
   }

app/assets/stylesheets/pages/builds.scss

@@ -277,10 +277,6 @@
     &.coverage {
       padding: 0 16px 11px;
     }
-
-    .btn-group.d-flex {
-      margin-top: 5px;
-    }
   }
 
   .block-last {

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -213,7 +213,7 @@
   .stage-panel {
     min-width: 968px;
 
-    .card-heading {
+    .card-header {
       padding: 0;
       background-color: transparent;
     }

app/assets/stylesheets/pages/diff.scss

@@ -610,10 +610,6 @@
       top: 76px;
     }
 
-    &:not(.is-stuck) .diff-stats-additions-deletions-collapsed {
-      display: none;
-    }
-
     &.is-stuck {
       padding-top: 0;
       padding-bottom: 0;
@@ -622,7 +618,15 @@
 
       .diff-stats-additions-deletions-expanded,
       .inline-parallel-buttons {
-        display: none;
+        display: none !important;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    &.is-stuck {
+      .diff-stats-additions-deletions-collapsed {
+        display: block !important;
       }
     }
   }

app/assets/stylesheets/pages/groups.scss

@@ -2,7 +2,7 @@
   @include str-truncated(90%);
 }
 
-.dashboard .side .card .card-heading .input-group {
+.dashboard .side .card .card-header .input-group {
 
   .form-control {
     height: 42px;

app/assets/stylesheets/pages/issues.scss

@@ -223,7 +223,7 @@ ul.related-merge-requests > li {
     }
   }
 
-  .btn-group:not(.hide) {
+  .btn-group:not(.hidden) {
     display: flex;
   }
 
@@ -276,7 +276,7 @@ ul.related-merge-requests > li {
     }
 
     .create-mr-dropdown-wrap {
-      .btn-group:not(.hide) {
+      .btn-group:not(.hidden) {
         display: inline-flex;
       }
     }

app/assets/stylesheets/pages/labels.scss

@@ -68,7 +68,7 @@
       margin-bottom: 0;
     }
 
-    .label {
+    .badge {
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 100%;
@@ -110,7 +110,7 @@
     }
   }
 
-  .label {
+  .badge {
     padding: 4px $grid-size;
     font-size: $label-font-size;
     position: relative;
@@ -122,6 +122,7 @@
   padding: 0 $grid-size;
   line-height: 16px;
   border-radius: $label-border-radius;
+  color: $white-light;
 }
 
 .dropdown-labels-error {

app/assets/stylesheets/pages/members.scss

@@ -211,7 +211,7 @@
 }
 
 .card {
-  .card-heading {
+  .card-header {
     .badge.badge-pill {
       margin-top: 0;
     }

app/assets/stylesheets/pages/merge_requests.scss

@@ -491,7 +491,7 @@
 }
 
 .card-new-merge-request {
-  .card-heading {
+  .card-header {
     padding: 5px 10px;
     font-weight: $gl-font-weight-bold;
     line-height: 25px;

app/assets/stylesheets/pages/milestone.scss

@@ -31,7 +31,7 @@
     }
   }
 
-  .card-heading {
+  .card-header {
     line-height: $line-height-base;
     padding: 14px 16px;
     display: -webkit-flex;

app/assets/stylesheets/pages/settings.scss

@@ -174,7 +174,7 @@
 
     .option-description,
     .option-disabled-reason {
-      margin-left: 29px;
+      margin-left: 45px;
       color: $project-option-descr-color;
     }
 
@@ -234,7 +234,7 @@
       line-height: 12px;
     }
 
-    .card-heading .label-count {
+    .card-header .label-count {
       color: $white-light;
       background: $common-gray-dark;
     }

app/helpers/ci_status_helper.rb

@@ -92,7 +92,7 @@ module CiStatusHelper
     "pipeline-status/#{pipeline_status.sha}-#{pipeline_status.status}"
   end
 
-  def render_project_pipeline_status(pipeline_status, tooltip_placement: 'auto left')
+  def render_project_pipeline_status(pipeline_status, tooltip_placement: 'left')
     project = pipeline_status.project
     path = pipelines_project_commit_path(project, pipeline_status.sha, ref: pipeline_status.ref)
 
@@ -103,7 +103,7 @@ module CiStatusHelper
       tooltip_placement: tooltip_placement)
   end
 
-  def render_commit_status(commit, ref: nil, tooltip_placement: 'auto left')
+  def render_commit_status(commit, ref: nil, tooltip_placement: 'left')
     project = commit.project
     path = pipelines_project_commit_path(project, commit, ref: ref)
 
@@ -114,7 +114,7 @@ module CiStatusHelper
       tooltip_placement: tooltip_placement)
   end
 
-  def render_pipeline_status(pipeline, tooltip_placement: 'auto left')
+  def render_pipeline_status(pipeline, tooltip_placement: 'left')
     project = pipeline.project
     path = project_pipeline_path(project, pipeline)
     render_status_with_link('pipeline', pipeline.status, path, tooltip_placement: tooltip_placement)
@@ -125,7 +125,7 @@ module CiStatusHelper
       Ci::Runner.shared.blank?
   end
 
-  def render_status_with_link(type, status, path = nil, tooltip_placement: 'auto left', cssclass: '', container: 'body')
+  def render_status_with_link(type, status, path = nil, tooltip_placement: 'left', cssclass: '', container: 'body')
     klass = "ci-status-link ci-status-icon-#{status.dasherize} #{cssclass}"
     title = "#{type.titleize}: #{ci_label_for_status(status)}"
     data = { toggle: 'tooltip', placement: tooltip_placement, container: container }

app/helpers/commits_helper.rb

@@ -62,7 +62,7 @@ module CommitsHelper
 
   # Returns a link formatted as a commit branch link
   def commit_branch_link(url, text)
-    link_to(url, class: 'label label-gray ref-name branch-link') do
+    link_to(url, class: 'badge badge-gray ref-name branch-link') do
       sprite_icon('branch', size: 12, css_class: 'fork-svg') + "#{text}"
     end
   end
@@ -76,7 +76,7 @@ module CommitsHelper
 
   # Returns a link formatted as a commit tag link
   def commit_tag_link(url, text)
-    link_to(url, class: 'label label-gray ref-name') do
+    link_to(url, class: 'badge badge-gray ref-name') do
       sprite_icon('tag', size: 12, css_class: 'append-right-5 vertical-align-middle') + "#{text}"
     end
   end

app/helpers/icons_helper.rb

@@ -60,7 +60,7 @@ module IconsHelper
 
   def spinner(text = nil, visible = false)
     css_class = 'loading'
-    css_class << ' hide' unless visible
+    css_class << ' hidden' unless visible
 
     content_tag :div, class: css_class do
       icon('spinner spin') + text

app/helpers/labels_helper.rb

@@ -81,7 +81,7 @@ module LabelsHelper
 
     # Intentionally not using content_tag here so that this method can be called
     # by LabelReferenceFilter
-    span = %(<span class="label color-label #{"has-tooltip" if tooltip}" ) +
+    span = %(<span class="badge color-label #{"has-tooltip" if tooltip}" ) +
       %(style="background-color: #{label.color}; color: #{text_color}" ) +
       %(title="#{escape_once(label.description)}" data-container="body">) +
       %(#{escape_once(label.name)}#{label_suffix}</span>)

app/helpers/milestones_helper.rb

@@ -172,6 +172,8 @@ module MilestonesHelper
   def milestone_tooltip_due_date(milestone)
     if milestone.due_date
       "#{milestone.due_date.to_s(:medium)} (#{remaining_days_in_words(milestone)})"
+    else
+      _('Milestone')
     end
   end
 

app/views/abuse_reports/new.html.haml

@@ -7,12 +7,12 @@
 
   = f.hidden_field :user_id
   .form-group.row
-    = f.label :user_id, class: 'col-form-label'
+    = f.label :user_id, class: 'col-sm-2 col-form-label'
     .col-sm-10
       - name = "#{@abuse_report.user.name} (@#{@abuse_report.user.username})"
       = text_field_tag :user_name, name, class: "form-control", readonly: true
   .form-group.row
-    = f.label :message, class: 'col-form-label'
+    = f.label :message, class: 'col-sm-2 col-form-label'
     .col-sm-10
       = f.text_area :message, class: "form-control", rows: 2, required: true, value: sanitize(@ref_url)
       .form-text.text-muted

app/views/admin/abuse_reports/_abuse_report.html.haml

 - reporter = abuse_report.reporter
 - user = abuse_report.user
 %tr
-  %th.d-block.d-md-none
+  %th.d-block.d-sm-none.d-md-none
     %strong User
   %td
     - if user
@@ -11,7 +11,7 @@
     - else
       (removed)
   %td
-    %strong.subheading.d-block.d-md-none Reported by
+    %strong.subheading.d-block.d-sm-none.d-md-none Reported by
     - if reporter
       = link_to reporter.name, reporter
     - else
@@ -19,7 +19,7 @@
     .light.small
       = time_ago_with_tooltip(abuse_report.created_at)
   %td
-    %strong.subheading.d-block.d-md-none Message
+    %strong.subheading.d-block.d-sm-none.d-md-none Message
     .message
       = markdown_field(abuse_report, :message)
   %td

app/views/admin/appearances/_form.html.haml

@@ -5,7 +5,7 @@
     %legend
       Navigation bar:
   .form-group.row
-    = f.label :header_logo, 'Header logo', class: 'col-form-label'
+    = f.label :header_logo, 'Header logo', class: 'col-sm-2 col-form-label'
     .col-sm-10
       - if @appearance.header_logo?
         = image_tag @appearance.header_logo_url, class: 'appearance-light-logo-preview'
@@ -24,17 +24,17 @@
     %legend
       Sign in/Sign up pages:
   .form-group.row
-    = f.label :title, class: 'col-form-label'
+    = f.label :title, class: 'col-sm-2 col-form-label'
     .col-sm-10
       = f.text_field :title, class: "form-control"
   .form-group.row
-    = f.label :description, class: 'col-form-label'
+    = f.label :description, class: 'col-sm-2 col-form-label'
     .col-sm-10
       = f.text_area :description, class: "form-control", rows: 10
       .hint
         Description parsed with #{link_to "GitLab Flavored Markdown", help_page_path('user/markdown'), target: '_blank'}.
   .form-group.row
-    = f.label :logo, class: 'col-form-label'
+    = f.label :logo, class: 'col-sm-2 col-form-label'
     .col-sm-10
       - if @appearance.logo?
         = image_tag @appearance.logo_url, class: 'appearance-logo-preview'
@@ -51,7 +51,7 @@
     %legend
       New project pages:
   .form-group.row
-    = f.label :new_project_guidelines, class: 'col-form-label'
+    = f.label :new_project_guidelines, class: 'col-sm-2 col-form-label'
     .col-sm-10
       = f.text_area :new_project_guidelines, class: "form-control", rows: 10
       .hint

app/views/admin/application_settings/_help_page.html.haml

@@ -3,7 +3,7 @@
 
   %fieldset
     .form-group.row
-      = f.label :help_text, class: 'col-form-label'
+      = f.label :help_text, class: 'col-form-label col-sm-2'
       .col-sm-10
         = f.text_area :help_text, class: 'form-control', rows: 4
         .form-text.text-muted Markdown enabled

app/views/admin/broadcast_messages/_form.html.haml

@@ -10,7 +10,7 @@
   = form_errors(@broadcast_message)
 
   .form-group.row
-    = f.label :message, class: 'col-form-label'
+    = f.label :message, class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.text_area :message, class: "form-control js-autosize",
         required: true,
@@ -27,11 +27,11 @@
     .col-sm-10
       = f.color_field :font, class: "form-control"
   .form-group.row
-    = f.label :starts_at, _("Starts at (UTC)"), class: 'col-form-label'
+    = f.label :starts_at, _("Starts at (UTC)"), class: 'col-form-label col-sm-2'
     .col-sm-10.datetime-controls
       = f.datetime_select :starts_at, {}, class: 'form-control form-control-inline'
   .form-group.row
-    = f.label :ends_at, _("Ends at (UTC)"), class: 'col-form-label'
+    = f.label :ends_at, _("Ends at (UTC)"), class: 'col-form-label col-sm-2'
     .col-sm-10.datetime-controls
       = f.datetime_select :ends_at, {}, class: 'form-control form-control-inline'
   .form-actions

app/views/admin/conversational_development_index/show.html.haml

@@ -25,7 +25,7 @@
         - @metric.cards.each do |card|
           = render 'card', card: card
 
-      .convdev-steps.d-none.d-lg-block
+      .convdev-steps.d-none.d-lg-block.d-xl-block
         - @metric.idea_to_production_steps.each_with_index do |step, index|
           .convdev-step{ class: "convdev-#{score_level(step.percentage_score)}-score" }
             = custom_icon("i2p_step_#{index + 1}")

app/views/admin/groups/_form.html.haml

@@ -8,7 +8,7 @@
     = render 'admin/namespace_plan', f: f
 
   .form-group.row.group-description-holder
-    = f.label :avatar, "Group avatar", class: 'col-form-label'
+    = f.label :avatar, "Group avatar", class: 'col-form-label col-sm-2'
     .col-sm-10
       = render 'shared/choose_group_avatar_button', f: f
 

app/views/admin/identities/_form.html.haml

@@ -2,12 +2,12 @@
   = form_errors(@identity)
 
   .form-group.row
-    = f.label :provider, class: 'col-form-label'
+    = f.label :provider, class: 'col-form-label col-sm-2'
     .col-sm-10
       - values = Gitlab::Auth::OAuth::Provider.providers.map { |name| ["#{Gitlab::Auth::OAuth::Provider.label_for(name)} (#{name})", name] }
       = f.select :provider, values, { allow_blank: false }, class: 'form-control'
   .form-group.row
-    = f.label :extern_uid, "Identifier", class: 'col-form-label'
+    = f.label :extern_uid, "Identifier", class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.text_field :extern_uid, class: 'form-control', required: true
 

app/views/admin/labels/_form.html.haml

@@ -2,15 +2,15 @@
   = form_errors(@label)
 
   .form-group.row
-    = f.label :title, class: 'col-form-label'
+    = f.label :title, class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.text_field :title, class: "form-control", required: true
   .form-group.row
-    = f.label :description, class: 'col-form-label'
+    = f.label :description, class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.text_field :description, class: "form-control js-quick-submit"
   .form-group.row
-    = f.label :color, "Background color", class: 'col-form-label'
+    = f.label :color, "Background color", class: 'col-form-label col-sm-2'
     .col-sm-10
       .input-group
         .input-group-prepend

app/views/admin/labels/destroy.js.haml

 - if @labels.size == 0
-  $('.labels').load(document.URL + ' .light-well').hide().fadeIn(1000)
+  $('.labels').load(document.URL + ' .card.bg-light').hide().fadeIn(1000)

app/views/admin/labels/index.html.haml

@@ -13,6 +13,6 @@
       = render @labels
     = paginate @labels, theme: 'gitlab'
   - else
-    .light-well
+    .card.bg-light
       .nothing-here-block There are no labels yet
 

app/views/admin/projects/show.html.haml

@@ -118,7 +118,7 @@
       .card-body
         = form_for @project, url: transfer_admin_project_path(@project), method: :put do |f|
           .form-group.row
-            = f.label :new_namespace_id, "Namespace", class: 'col-form-label'
+            = f.label :new_namespace_id, "Namespace", class: 'col-form-label col-sm-2'
             .col-sm-10
               .dropdown
                 = dropdown_toggle('Search for Namespace', { toggle: 'dropdown', field_name: 'new_namespace_id' }, { toggle_class: 'js-namespace-select large' })

app/views/admin/requests_profiles/index.html.haml

@@ -13,7 +13,7 @@
   - if @profiles.present?
     .prepend-top-default
       - @profiles.each do |path, profiles|
-        .card.panel-small
+        .card.card-small
           .card-header
             %code= path
           %ul.content-list

app/views/admin/users/_form.html.haml

@@ -5,17 +5,17 @@
     %fieldset
       %legend Account
       .form-group.row
-        = f.label :name, class: 'col-form-label'
+        = f.label :name, class: 'col-form-label col-sm-2'
         .col-sm-10
           = f.text_field :name, required: true, autocomplete: 'off', class: 'form-control'
           %span.help-inline * required
       .form-group.row
-        = f.label :username, class: 'col-form-label'
+        = f.label :username, class: 'col-form-label col-sm-2'
         .col-sm-10
           = f.text_field :username, required: true, autocomplete: 'off', autocorrect: 'off', autocapitalize: 'off', spellcheck: false, class: 'form-control'
           %span.help-inline * required
       .form-group.row
-        = f.label :email, class: 'col-form-label'
+        = f.label :email, class: 'col-form-label col-sm-2'
         .col-sm-10
           = f.text_field :email, required: true, autocomplete: 'off', class: 'form-control'
           %span.help-inline * required
@@ -24,7 +24,7 @@
       %fieldset
         %legend Password
         .form-group.row
-          = f.label :password, class: 'col-form-label'
+          = f.label :password, class: 'col-form-label col-sm-2'
           .col-sm-10
             %strong
               Reset link will be generated and sent to the user.
@@ -34,10 +34,10 @@
       %fieldset
         %legend Password
         .form-group.row
-          = f.label :password, class: 'col-form-label'
+          = f.label :password, class: 'col-form-label col-sm-2'
           .col-sm-10= f.password_field :password, disabled: f.object.force_random_password, class: 'form-control'
         .form-group.row
-          = f.label :password_confirmation, class: 'col-form-label'
+          = f.label :password_confirmation, class: 'col-form-label col-sm-2'
           .col-sm-10= f.password_field :password_confirmation, disabled: f.object.force_random_password, class: 'form-control'
 
     = render partial: 'access_levels', locals: { f: f }
@@ -53,21 +53,21 @@
     %fieldset
       %legend Profile
       .form-group.row
-        = f.label :avatar, class: 'col-form-label'
+        = f.label :avatar, class: 'col-form-label col-sm-2'
         .col-sm-10
           = f.file_field :avatar
 
       .form-group.row
-        = f.label :skype, class: 'col-form-label'
+        = f.label :skype, class: 'col-form-label col-sm-2'
         .col-sm-10= f.text_field :skype, class: 'form-control'
       .form-group.row
-        = f.label :linkedin, class: 'col-form-label'
+        = f.label :linkedin, class: 'col-form-label col-sm-2'
         .col-sm-10= f.text_field :linkedin, class: 'form-control'
       .form-group.row
         = f.label :twitter, class: 'col-form-label'
         .col-sm-10= f.text_field :twitter, class: 'form-control'
       .form-group.row
-        = f.label :website_url, 'Website', class: 'col-form-label'
+        = f.label :website_url, 'Website', class: 'col-form-label col-sm-2'
         .col-sm-10= f.text_field :website_url, class: 'form-control'
 
     %fieldset

app/views/ci/status/_dropdown_graph_badge.html.haml

@@ -6,12 +6,12 @@
 - tooltip = "#{subject.name} - #{status.status_tooltip}"
 
 - if status.has_details?
-  = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, html: true, container: 'body' }  do
+  = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, html: 'true', container: 'body' }  do
     %span{ class: klass }= sprite_icon(status.icon)
     %span.ci-build-text= subject.name
 
 - else
-  .menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', html: true, title: tooltip, container: 'body' } }
+  .menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', html: 'true', title: tooltip, container: 'body' } }
     %span{ class: klass }= sprite_icon(status.icon)
     %span.ci-build-text= subject.name
 

app/views/dashboard/todos/index.html.haml

@@ -60,7 +60,7 @@
               - else
                 = sort_title_recently_created
               = icon('chevron-down')
-            %ul.dropdown-menu.dropdown-menu-sort
+            %ul.dropdown-menu.dropdown-menu-sort.dropdown-menu-right
               %li
                 = link_to todos_filter_path(sort: sort_value_label_priority) do
                   = sort_title_label_priority

app/views/explore/groups/index.html.haml

@@ -9,7 +9,7 @@
   = render 'nav'
 
 - if cookies[:explore_groups_landing_dismissed] != 'true'
-  .explore-groups.landing.content-block.js-explore-groups-landing.hidden
+  .explore-groups.landing.content-block.js-explore-groups-landing.hide
     %button.dismiss-button{ type: 'button', 'aria-label' => 'Dismiss' }= icon('times')
     .svg-container
       = custom_icon('icon_explore_groups_splash')

app/views/groups/milestones/_form.html.haml

@@ -4,11 +4,11 @@
 
     .col-md-6
       .form-group.row
-        = f.label :title, "Title", class: "col-form-label"
+        = f.label :title, "Title", class: "col-form-label col-sm-2"
         .col-sm-10
           = f.text_field :title, maxlength: 255, class: "form-control", required: true, autofocus: true
       .form-group.row.milestone-description
-        = f.label :description, "Description", class: "col-form-label"
+        = f.label :description, "Description", class: "col-form-label col-sm-2"
         .col-sm-10
           = render layout: 'projects/md_preview', locals: { url: group_preview_markdown_path } do
             = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: 'Write milestone description...', supports_autocomplete: false

app/views/help/ui.html.haml

@@ -205,7 +205,7 @@
   %h2#buttons Buttons
 
   .example
-    %button.btn.btn-default{ :type => "button" } Default
+    %button.btn.btn-default{ :type => "button" } Secondary
     %button.btn.btn-primary{ :type => "button" } Primary
     %button.btn.btn-success{ :type => "button" } Success
     %button.btn.btn-info{ :type => "button" } Info

app/views/import/_githubish_status.html.haml

@@ -52,7 +52,7 @@
                   - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner.login, path: repo.owner.login) } : {}
                   = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'input-group-text select2 js-select-namespace', tabindex: 1 }
                 - else
-                  = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true
+                  = text_field_tag :path, current_user.namespace_path, class: "input-group-text input-large form-control", tabindex: 1, disabled: true
               %span.input-group-prepend
                 .input-group-text /
               = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true

app/views/import/bitbucket/status.html.haml

@@ -60,7 +60,7 @@
                   - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner, path: repo.owner) } : {}
                   = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'input-group-text select2 js-select-namespace', tabindex: 1 }
                 - else
-                  = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true
+                  = text_field_tag :path, current_user.namespace_path, class: "input-group-text input-large form-control", tabindex: 1, disabled: true
               %span.input-group-prepend
                 .input-group-text /
               = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
@@ -74,7 +74,7 @@
             = link_to repo.full_name, "https://bitbucket.org/#{repo.full_name}", target: '_blank', rel: 'noopener noreferrer'
           %td.import-target
           %td.import-actions-job-status
-            = label_tag 'Incompatible Project', nil, class: 'label label-danger'
+            = label_tag 'Incompatible Project', nil, class: 'label badge-danger'
 
 - if @incompatible_repos.any?
   %p

app/views/import/fogbugz/new.html.haml

@@ -11,15 +11,15 @@
     In the next steps, you'll be able to map users and select the projects
     you want to import.
   .form-group.row
-    = label_tag :uri, 'FogBugz URL', class: 'col-form-label'
+    = label_tag :uri, 'FogBugz URL', class: 'col-form-label col-sm-8'
     .col-sm-4
       = text_field_tag :uri, nil, placeholder: 'https://mycompany.fogbugz.com', class: 'form-control'
   .form-group.row
-    = label_tag :email, 'FogBugz Email', class: 'col-form-label'
+    = label_tag :email, 'FogBugz Email', class: 'col-form-label col-sm-8'
     .col-sm-4
       = text_field_tag :email, nil, class: 'form-control'
   .form-group.row
-    = label_tag :password, 'FogBugz Password', class: 'col-form-label'
+    = label_tag :password, 'FogBugz Password', class: 'col-form-label col-sm-8'
     .col-sm-4
       = password_field_tag :password, nil, class: 'form-control'
   .form-actions

app/views/import/gitea/new.html.haml

@@ -12,11 +12,11 @@
 
 = form_tag personal_access_token_import_gitea_path do
   .form-group.row
-    = label_tag :gitea_host_url, 'Gitea Host URL', class: 'col-form-label'
+    = label_tag :gitea_host_url, 'Gitea Host URL', class: 'col-form-label col-sm-8'
     .col-sm-4
       = text_field_tag :gitea_host_url, nil, placeholder: 'https://try.gitea.io', class: 'form-control'
   .form-group.row
-    = label_tag :personal_access_token, 'Personal Access Token', class: 'col-form-label'
+    = label_tag :personal_access_token, 'Personal Access Token', class: 'col-form-label col-sm-8'
     .col-sm-4
       = text_field_tag :personal_access_token, nil, class: 'form-control'
   .form-actions

app/views/import/google_code/status.html.haml

@@ -66,7 +66,7 @@
             = link_to repo.name, "https://code.google.com/p/#{repo.name}", target: "_blank", rel: 'noopener noreferrer'
           %td.import-target
           %td.import-actions-job-status
-            = label_tag "Incompatible Project", nil, class: "label label-danger"
+            = label_tag "Incompatible Project", nil, class: "label badge-danger"
 
 - if @incompatible_repos.any?
   %p

app/views/layouts/devise.html.haml

@@ -11,7 +11,7 @@
         .content
           = render "layouts/flash"
           .row
-            .col-sm-7.brand-holder.float-left
+            .col-sm-7.brand-holder
               %h1
                 = brand_title
               = brand_image
@@ -27,12 +27,13 @@
 
               - if Gitlab::CurrentSettings.sign_in_text.present?
                 = markdown_field(Gitlab::CurrentSettings.current_application_settings, :sign_in_text)
+
               - if Gitlab::CurrentSettings.help_text.present?
                 %h3 Need help?
                 %hr
                 %p.slead
                   = markdown(Gitlab::CurrentSettings.help_text)
-            .col-sm-5.float-right.new-session-forms-container
+            .col-sm-5.new-session-forms-container
               = yield
 
       %hr.footer-fixed

app/views/layouts/nav/_dashboard.html.haml

@@ -13,17 +13,17 @@
         Groups
 
   - if dashboard_nav_link?(:activity)
-    = nav_link(path: 'dashboard#activity', html_options: { class: "d-none d-lg-block" }) do
+    = nav_link(path: 'dashboard#activity', html_options: { class: "d-none d-lg-block d-xl-block" }) do
       = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do
         Activity
 
   - if dashboard_nav_link?(:milestones)
-    = nav_link(controller: 'dashboard/milestones', html_options: { class: "d-none d-lg-block" }) do
+    = nav_link(controller: 'dashboard/milestones', html_options: { class: "d-none d-lg-block d-xl-block" }) do
       = link_to dashboard_milestones_path, class: 'dashboard-shortcuts-milestones', title: 'Milestones' do
         Milestones
 
   - if dashboard_nav_link?(:snippets)
-    = nav_link(controller: 'dashboard/snippets', html_options: { class: "d-none d-lg-block" }) do
+    = nav_link(controller: 'dashboard/snippets', html_options: { class: "d-none d-lg-block d-xl-block" }) do
       = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets', title: 'Snippets' do
         Snippets
 

app/views/layouts/terms.html.haml

@@ -29,6 +29,6 @@
                         = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
                           = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar qa-user-avatar"
                           = sprite_icon('angle-down', css_class: 'caret-down')
-                        .dropdown-menu-nav.dropdown-menu-right
+                        .dropdown-menu.dropdown-menu-right
                           = render 'layouts/header/current_user_dropdown'
               = yield

app/views/profiles/passwords/new.html.haml

@@ -12,13 +12,13 @@
 
   - unless @user.password_automatically_set?
     .form-group.row
-      = f.label :current_password, class: 'col-form-label'
+      = f.label :current_password, class: 'col-form-label col-sm-2'
       .col-sm-10= f.password_field :current_password, required: true, class: 'form-control'
   .form-group.row
-    = f.label :password, class: 'col-form-label'
+    = f.label :password, class: 'col-form-label col-sm-2'
     .col-sm-10= f.password_field :password, required: true, class: 'form-control'
   .form-group.row
-    = f.label :password_confirmation, class: 'col-form-label'
+    = f.label :password_confirmation, class: 'col-form-label col-sm-2'
     .col-sm-10
       = f.password_field :password_confirmation, required: true, class: 'form-control'
   .form-actions

app/views/projects/_new_project_push_tip.html.haml

@@ -3,7 +3,7 @@
     = label_tag(:push_to_create_tip, _("Private projects can be created in your personal namespace with:"), class: "weight-normal")
 
   %p.input-group.project-tip-command
-    %span.input-group-btn
+    %span
       = text_field_tag :push_to_create_tip, push_to_create_project_command, class: "js-select-on-focus form-control monospace", readonly: true, aria: { label: _("Push project from command line") }
     %span.input-group-append
       = clipboard_button(text: push_to_create_project_command, title: _("Copy command to clipboard"), class: 'input-group-text', placement: "right")

app/views/projects/blob/_new_dir.html.haml

@@ -7,7 +7,7 @@
       .modal-body
         = form_tag project_create_dir_path(@project, @id), method: :post, remote: false, class: 'js-create-dir-form js-quick-submit js-requires-input' do
           .form-group.row
-            = label_tag :dir_name, _('Directory name'), class: 'col-form-label'
+            = label_tag :dir_name, _('Directory name'), class: 'col-form-label col-sm-2'
             .col-sm-10
               = text_field_tag :dir_name, params[:dir_name], required: true, class: 'form-control'
 

app/views/projects/branches/new.html.haml

@@ -11,12 +11,12 @@
 
 = form_tag namespace_project_branches_path, method: :post, id: "new-branch-form", class: "js-create-branch-form js-requires-input" do
   .form-group.row
-    = label_tag :branch_name, nil, class: 'col-form-label'
+    = label_tag :branch_name, nil, class: 'col-form-label col-sm-2'
     .col-sm-10
       = text_field_tag :branch_name, params[:branch_name], required: true, autofocus: true, class: 'form-control js-branch-name'
       .form-text.text-muted.text-danger.js-branch-name-error
   .form-group.row
-    = label_tag :ref, 'Create from', class: 'col-form-label'
+    = label_tag :ref, 'Create from', class: 'col-form-label col-sm-2'
     .col-sm-10.create-from
       .dropdown
         = hidden_field_tag :ref, default_ref

app/views/projects/clusters/gcp/_show.html.haml

@@ -29,7 +29,7 @@
       .input-group
         = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token js-select-on-focus', type: 'password', placeholder: s_('ClusterIntegration|Token'), readonly: true
         %span.input-group-append
-          %button.btn.btn-default.js-show-cluster-token{ type: 'button' }
+          %button.btn.btn-default.input-group-text.js-show-cluster-token{ type: 'button' }
             = s_('ClusterIntegration|Show')
           = clipboard_button(text: @cluster.platform_kubernetes.token, title: s_('ClusterIntegration|Copy Token'), class: 'btn-default')
 

app/views/projects/commit/_change.html.haml

@@ -22,7 +22,7 @@
           %p.append-bottom-20= description
         = form_tag [type.underscore, @project.namespace.becomes(Namespace), @project, commit], method: :post, remote: false, class: "js-#{type}-form js-requires-input" do
           .form-group.row.branch
-            = label_tag 'start_branch', branch_label, class: 'col-form-label'
+            = label_tag 'start_branch', branch_label, class: 'col-form-label col-sm-2'
             .col-sm-10
               = hidden_field_tag :start_branch, @project.default_branch, id: 'start_branch'
               = dropdown_tag(@project.default_branch, options: { title: s_("BranchSwitcherTitle|Switch branch"), filter: true, placeholder: s_("BranchSwitcherPlaceholder|Search branches"), toggle_class: 'js-project-refs-dropdown dynamic', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "start_branch", selected: @project.default_branch, start_branch: @project.default_branch, refs_url: project_branches_path(@project), submit_form_on_click: false } })

app/views/projects/commits/_commit.html.haml

@@ -31,11 +31,11 @@
           = link_to commit.title, project_commit_path(project, commit.id, merge_request_iid: merge_request.iid), class: "commit-row-message item-title"
         - else
           = link_to_markdown_field(commit, :title, link, class: "commit-row-message item-title")
-        %span.commit-row-message.d-inline.d-sm-none
+        %span.commit-row-message.d-block.d-sm-none
           ·
           = commit.short_id
         - if commit.status(ref)
-          .d-inline.d-sm-none
+          .d-block.d-sm-none
             = render_commit_status(commit, ref: ref)
         - if commit.description?
           %button.text-expander.d-none.d-sm-inline-block.js-toggle-button{ type: "button" } ...

app/views/projects/compare/show.html.haml

@@ -10,7 +10,7 @@
     = render "projects/commits/commit_list"
     = render "projects/diffs/diffs", diffs: @diffs, environment: @environment
   - else
-    .light-well
+    .card.bg-light
       .center
         %h4
           = s_("CompareBranches|There isn't anything to compare.")

app/views/projects/empty.html.haml

@@ -44,14 +44,14 @@
       .git-empty
         %fieldset
           %h5 Git global setup
-          %pre.light-well
+          %pre.card.bg-light
             :preserve
               git config --global user.name "#{h git_user_name}"
               git config --global user.email "#{h git_user_email}"
 
         %fieldset
           %h5 Create a new repository
-          %pre.light-well
+          %pre.card.bg-light
             :preserve
               git clone #{ content_tag(:span, default_url_to_repo, class: 'clone')}
               cd #{h @project.path}
@@ -64,7 +64,7 @@
 
         %fieldset
           %h5 Existing folder
-          %pre.light-well
+          %pre.card.bg-light
             :preserve
               cd existing_folder
               git init
@@ -77,7 +77,7 @@
 
         %fieldset
           %h5 Existing Git repository
-          %pre.light-well
+          %pre.card.bg-light
             :preserve
               cd existing_repo
               git remote rename origin old-origin

app/views/projects/issues/_new_branch.html.haml

@@ -14,7 +14,7 @@
         = icon('spinner', class: 'fa-spin')
         %span.text
           Checking branch availability…
-    .btn-group.available.hide
+    .btn-group.available.hidden
       %button.btn.js-create-merge-request.btn-success.btn-inverted{ type: 'button', data: { action: data_action } }
         = value
 

app/views/projects/jobs/_sidebar.html.haml

@@ -83,7 +83,7 @@
         - builds.select{|build| build.status == build_status}.each do |build|
           .build-job{ class: sidebar_build_class(build, @build), data: { stage: build.stage } }
             - tooltip = build.tooltip_message
-            = link_to(project_job_path(@project, build), data: { toggle: 'tooltip', html: true, title: tooltip, container: 'body' }) do
+            = link_to(project_job_path(@project, build), data: { toggle: 'tooltip', html: 'true', title: tooltip, container: 'body' }) do
               = sprite_icon('arrow-right', size:16, css_class: 'icon-arrow-right')
               %span{ class: "ci-status-icon-#{build.status}" }
                 = ci_icon_for_status(build.status)

app/views/projects/merge_requests/creations/_new_compare.html.haml

@@ -5,7 +5,7 @@
   .hide.alert.alert-danger.mr-compare-errors
   .js-merge-request-new-compare.row{ 'data-source-branch-url': project_new_merge_request_branch_from_path(@source_project), 'data-target-branch-url': project_new_merge_request_branch_to_path(@source_project) }
     .col-lg-6
-      .card.panel-new-merge-request
+      .card.card-new-merge-request
         .card-header
           Source branch
         .card-body.clearfix
@@ -32,7 +32,7 @@
           %ul.list-unstyled.mr_source_commit
 
     .col-lg-6
-      .card.panel-new-merge-request
+      .card.card-new-merge-request
         .card-header
           Target branch
         .card-body.clearfix

app/views/projects/new.html.haml

@@ -75,7 +75,7 @@
         = render 'new_ci_cd_only_project_pane', active_tab: active_tab
         -# EE-specific end
 
-.save-project-loader.hide
+.save-project-loader.d-none
   .center
     %h2
       %i.fa.fa-spinner.fa-spin

app/views/projects/pages/_destroy.haml

 - if @project.pages_deployed?
   - if can?(current_user, :remove_pages, @project)
-    .card.card.bg-danger
+    .card.bg-danger
       .card-header Remove pages
       .errors-holder
       .card-body

app/views/projects/pages_domains/_form.html.haml

@@ -5,21 +5,21 @@
         %p= msg
 
 .form-group.row
-  = f.label :domain, class: 'col-form-label' do
+  = f.label :domain, class: 'col-form-label col-sm-2' do
     Domain
   .col-sm-10
     = f.text_field :domain, required: true, autocomplete: 'off', class: 'form-control', disabled: @domain.persisted?
 
 - if Gitlab.config.pages.external_https
   .form-group.row
-    = f.label :certificate, class: 'col-form-label' do
+    = f.label :certificate, class: 'col-form-label col-sm-2' do
       Certificate (PEM)
     .col-sm-10
       = f.text_area :certificate, rows: 5, class: 'form-control'
       %span.help-inline Upload a certificate for your domain with all intermediates
 
   .form-group.row
-    = f.label :key, class: 'col-form-label' do
+    = f.label :key, class: 'col-form-label col-sm-2' do
       Key (PEM)
     .col-sm-10
       = f.text_area :key, rows: 5, class: 'form-control'

app/views/projects/pipeline_schedules/_form.html.haml

-= form_for [@project.namespace.becomes(Namespace), @project, @schedule], as: :schedule, html: { id: "new-pipeline-schedule-form", class: " js-pipeline-schedule-form" } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @schedule], as: :schedule, html: { id: "new-pipeline-schedule-form", class: "js-pipeline-schedule-form" } do |f|
   = form_errors(@schedule)
   .form-group.row
     .col-md-9

app/views/projects/pipeline_schedules/index.html.haml

@@ -18,5 +18,5 @@
     %ul.content-list
       = render partial: "table"
   - else
-    .light-well
+    .card.bg-light
       .nothing-here-block= _("No schedules")

app/views/projects/project_members/import.html.haml

@@ -7,7 +7,7 @@
 %hr
 = form_tag apply_import_project_project_members_path(@project), method: 'post' do
   .form-group.row
-    = label_tag :source_project_id, "Project", class: 'col-form-label'
+    = label_tag :source_project_id, "Project", class: 'col-form-label col-sm-2'
     .col-sm-10= select_tag(:source_project_id, options_from_collection_for_select(@projects, :id, :name_with_namespace), prompt: "Select project", class: "select2 lg", required: true)
 
   .form-actions

app/views/projects/settings/ci_cd/_form.html.haml

@@ -7,7 +7,7 @@
           = f.label :runners_token, "Runner token", class: 'label-light'
           .form-control.js-secret-value-placeholder
             = '*' * 20
-          = f.text_field :runners_token, class: "form-control hide js-secret-value", placeholder: 'xEeFCaDAB89'
+          = f.text_field :runners_token, class: "form-control hidden js-secret-value", placeholder: 'xEeFCaDAB89'
           %p.form-text.text-muted The secure token used by the Runner to checkout the project
           %button.btn.btn-info.prepend-top-10.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: 'false' } }
             = _('Reveal value')

app/views/projects/wikis/_form.html.haml

@@ -8,7 +8,7 @@
     = f.hidden_field :last_commit_sha, value: @page.last_commit_sha
 
   .form-group.row
-    .col-sm-12= f.label :title, class: 'col-form-label-full-width'
+    .col-sm-12= f.label :title, class: 'control-label-full-width'
     .col-sm-12
       = f.text_field :title, class: 'form-control', value: @page.title
       - if @page.persisted?
@@ -17,12 +17,12 @@
           = s_("WikiEditPageTip|Tip: You can move this page by adding the path to the beginning of the title.")
           = link_to icon('question-circle'), help_page_path('user/project/wiki/index', anchor: 'moving-a-wiki-page'), target: '_blank'
   .form-group.row
-    .col-sm-12= f.label :format, class: 'col-form-label-full-width'
+    .col-sm-12= f.label :format, class: 'control-label-full-width'
     .col-sm-12
       = f.select :format, options_for_select(ProjectWiki::MARKUPS, {selected: @page.format}), {}, class: 'form-control'
 
   .form-group.row
-    .col-sm-12= f.label :content, class: 'col-form-label-full-width'
+    .col-sm-12= f.label :content, class: 'control-label-full-width'
     .col-sm-12
       = render layout: 'projects/md_preview', locals: { url: project_wiki_preview_markdown_path(@project, @page.slug) } do
         = render 'projects/zen', f: f, attr: :content, classes: 'note-textarea', placeholder: s_("WikiPage|Write your content or drag files here...")
@@ -40,7 +40,7 @@
           = (s_("WikiMarkdownDocs|More examples are in the %{docs_link}") % { docs_link: markdown_link }).html_safe
 
   .form-group.row
-    .col-sm-12= f.label :commit_message, class: 'col-form-label-full-width'
+    .col-sm-12= f.label :commit_message, class: 'control-label-full-width'
     .col-sm-12= f.text_field :message, class: 'form-control', rows: 18, value: commit_message
 
   .form-actions

app/views/projects/wikis/_sidebar.html.haml

 %aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } }
   .sidebar-container
     .block.wiki-sidebar-header.append-bottom-default
-      %a.gutter-toggle.float-right.d-block.d-md-none.js-sidebar-wiki-toggle{ href: "#" }
+      %a.gutter-toggle.float-right.d-block.d-sm-block.d-md-none.js-sidebar-wiki-toggle{ href: "#" }
         = icon('angle-double-right')
 
       - git_access_url = project_wikis_git_access_path(@project)

app/views/projects/wikis/git_access.html.haml

@@ -2,7 +2,7 @@
 - page_title s_("WikiClone|Git Access"), _("Wiki")
 
 .wiki-page-header.has-sidebar-toggle
-  %button.btn.btn-default.d-block.d-lg-none.float-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+  %button.btn.btn-default.d-block.d-sm-block.d-md-none.float-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
 
   .git-access-header

app/views/shared/_commit_message_container.html.haml

 .form-group.row.commit_message-group
   - nonce = SecureRandom.hex
   - descriptions = local_assigns.slice(:message_with_description, :message_without_description)
-  = label_tag "commit_message-#{nonce}", class: 'col-form-label' do
+  = label_tag "commit_message-#{nonce}", class: 'col-form-label col-sm-2' do
     #{ _('Commit message') }
   .col-sm-10
     .commit-message-container

app/views/shared/_issues.html.haml

 - if @issues.to_a.any?
-  .card.panel-small.card-without-border
+  .card.card-small.card-without-border
     %ul.content-list.issues-list.issuable-list
       = render partial: 'projects/issues/issue', collection: @issues
   = paginate @issues, theme: "gitlab"

app/views/shared/_label.html.haml

@@ -9,7 +9,7 @@
 %li.label-list-item{ id: label_css_id, data: { id: label.id } }
   = render "shared/label_row", label: label
 
-  .d-inline-block.d-sm-inline-block.d-md-none.dropdown
+  .d-inline-block.d-sm-none.dropdown
     %button.btn.btn-default.label-options-toggle{ type: 'button', data: { toggle: "dropdown" } }
       Options
       = icon('caret-down')

app/views/shared/_merge_requests.html.haml

 - if @merge_requests.to_a.any?
-  .card.panel-small.card-without-border
+  .card.card-small.card-without-border
     %ul.content-list.mr-list.issuable-list
       = render partial: 'projects/merge_requests/merge_request', collection: @merge_requests
 

app/views/shared/_new_commit_form.html.haml

@@ -8,7 +8,7 @@
 - else
   - if can?(current_user, :push_code, @project)
     .form-group.row.branch
-      = label_tag 'branch_name', _('Target Branch'), class: 'col-form-label'
+      = label_tag 'branch_name', _('Target Branch'), class: 'col-form-label col-sm-2'
       .col-sm-10
         = text_field_tag 'branch_name', branch_name, required: true, class: "form-control js-branch-name ref-name"
 

app/views/shared/_service_settings.html.haml

@@ -9,13 +9,13 @@
 .service-settings
   - if @service.show_active_box?
     .form-group.row
-      = form.label :active, "Active", class: "col-form-label"
+      = form.label :active, "Active", class: "col-form-label col-sm-2"
       .col-sm-10
         = form.check_box :active, disabled: disable_fields_service?(@service)
 
   - if @service.configurable_events.present?
     .form-group.row
-      = form.label :url, "Trigger", class: 'col-form-label'
+      = form.label :url, "Trigger", class: 'col-form-label col-sm-2'
 
       .col-sm-10
         - @service.configurable_events.each do |event|

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

@@ -14,7 +14,7 @@
         %span.has-tooltip{ "v-if": "list.type === \"label\"",
           ":title" => '(list.label ? list.label.description : "")',
           data: { container: "body", placement: "bottom" },
-          class: "label color-label title board-title-text",
+          class: "badge color-label title board-title-text",
           ":style" => "{ backgroundColor: (list.label && list.label.color ? list.label.color : null), color: (list.label && list.label.textColor ? list.label.textColor : \"#2e2e2e\") }" }
           {{ list.title }}
 

app/views/shared/boards/components/sidebar/_labels.html.haml

@@ -9,7 +9,7 @@
       None
     %a{ href: "#",
       "v-for" => "label in issue.labels" }
-      %span.label.color-label.has-tooltip{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
+      %span.badge.color-label.has-tooltip{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
         {{ label.title }}
   - if can_admin_issue?
     .selectbox

app/views/shared/deploy_keys/_form.html.haml

@@ -5,26 +5,26 @@
 = form_errors(deploy_key)
 
 .form-group
-  = form.label :title, class: 'col-form-label'
+  = form.label :title, class: 'col-form-label col-sm-2'
   .col-sm-10= form.text_field :title, class: 'form-control'
 
 .form-group
   - if deploy_key.new_record?
-    = form.label :key, class: 'col-form-label'
+    = form.label :key, class: 'col-form-label col-sm-2'
     .col-sm-10
       %p.light
         Paste a machine public key here. Read more about how to generate it
         = link_to 'here', help_page_path('ssh/README')
       = form.text_area :key, class: 'form-control thin_area', rows: 5
   - else
-    = form.label :fingerprint, class: 'col-form-label'
+    = form.label :fingerprint, class: 'col-form-label col-sm-2'
     .col-sm-10
       = form.text_field :fingerprint, class: 'form-control', readonly: 'readonly'
 
 - if deploy_keys_project.present?
   = form.fields_for :deploy_keys_projects, deploy_keys_project do |deploy_keys_project_form|
     .form-group
-      .col-form-label
+      .col-form-label.col-sm-2
       .col-sm-10
         = deploy_keys_project_form.label :can_push do
           = deploy_keys_project_form.check_box :can_push

app/views/shared/hook_logs/_status_label.html.haml

-- label_status = hook_log.success? ? 'label-success' : 'label-danger'
+- label_status = hook_log.success? ? 'badge-success' : 'badge-danger'
 %span{ class: "label #{label_status}" }
   = hook_log.response_status

app/views/shared/members/_requests.html.haml

@@ -4,7 +4,7 @@
 
 - return if requesters.empty?
 
-.card.prepend-top-default{ class: ('panel-mobile' if force_mobile_view ) }
+.card.prepend-top-default{ class: ('card-mobile' if force_mobile_view ) }
   .card-header
     Users requesting access to
     %strong= membership_source.name

app/views/shared/milestones/_issuables.html.haml

 - show_counter = local_assigns.fetch(:show_counter, false)
 - primary = local_assigns.fetch(:primary, false)
-- panel_class = primary ? 'bg-primary' : ''
+- panel_class = primary ? 'bg-primary text-white' : ''
 
 .card{ class: panel_class }
   .card-header

app/views/shared/plugins/_index.html.haml

@@ -19,5 +19,5 @@
               .monospace
                 = File.basename(file)
     - else
-      %p.light-well.text-center
+      %p.card.bg-light.text-center
         No plugins found.

app/views/shared/runners/_form.html.haml

 = form_for runner, url: runner_form_url do |f|
   = form_errors(runner)
   .form-group.row
-    = label :active, "Active", class: 'col-form-label'
+    = label :active, "Active", class: 'col-form-label col-sm-2'
     .col-sm-10
       .form-check
         = f.check_box :active
         %span.light Paused Runners don't accept new jobs
   .form-group.row
-    = label :protected, "Protected", class: 'col-form-label'
+    = label :protected, "Protected", class: 'col-form-label col-sm-2'
     .col-sm-10
       .form-check
         = f.check_box :access_level, {}, 'ref_protected', 'not_protected'
         %span.light This runner will only run on pipelines triggered on protected branches
   .form-group.row
-    = label :run_untagged, 'Run untagged jobs', class: 'col-form-label'
+    = label :run_untagged, 'Run untagged jobs', class: 'col-form-label col-sm-2'
     .col-sm-10
       .form-check
         = f.check_box :run_untagged
         %span.light Indicates whether this runner can pick jobs without tags
   - unless runner.group_type?
     .form-group.row
-      = label :locked, _('Lock to current projects'), class: 'col-form-label'
+      = label :locked, _('Lock to current projects'), class: 'col-form-label col-sm-2'
       .col-sm-10
-        .checkbox
+        .form-check
           = f.check_box :locked
           %span.light= _('When a runner is locked, it cannot be assigned to other projects')
   .form-group.row
-    = label_tag :token, class: 'col-form-label' do
+    = label_tag :token, class: 'col-form-label col-sm-2' do
       Token
     .col-sm-10
       = f.text_field :token, class: 'form-control', readonly: true
   .form-group.row
-    = label_tag :ip_address, class: 'col-form-label' do
+    = label_tag :ip_address, class: 'col-form-label col-sm-2' do
       IP Address
     .col-sm-10
       = f.text_field :ip_address, class: 'form-control', readonly: true
   .form-group.row
-    = label_tag :description, class: 'col-form-label' do
+    = label_tag :description, class: 'col-form-label col-sm-2' do
       Description
     .col-sm-10
       = f.text_field :description, class: 'form-control'
   .form-group.row
-    = label_tag :maximum_timeout_human_readable, class: 'col-form-label' do
+    = label_tag :maximum_timeout_human_readable, class: 'col-form-label col-sm-2' do
       Maximum job timeout
     .col-sm-10
       = f.text_field :maximum_timeout_human_readable, class: 'form-control'
       .form-text.text-muted This timeout will take precedence when lower than Project-defined timeout
   .form-group.row
-    = label_tag :tag_list, class: 'col-form-label' do
+    = label_tag :tag_list, class: 'col-form-label col-sm-2' do
       Tags
     .col-sm-10
       = f.text_field :tag_list, value: runner.tag_list.sort.join(', '), class: 'form-control'

changelogs/unreleased/winh-new-merge-request-encoding.yml

+---
+title: Fix encoding of branch names on compare and new merge request page
+merge_request: 19143
+author:
+type: fixed

spec/features/boards/sidebar_spec.rb

@@ -247,7 +247,7 @@ describe 'Issue Boards', :js do
         wait_for_requests
 
         page.within('.value') do
-          expect(page).to have_selector('.label', count: 2)
+          expect(page).to have_selector('.badge', count: 2)
           expect(page).to have_content(development.title)
           expect(page).to have_content(stretch.title)
         end
@@ -269,12 +269,12 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.label', count: 3)
+          expect(page).to have_selector('.badge', count: 3)
           expect(page).to have_content(bug.title)
         end
       end
 
-      expect(card).to have_selector('.label', count: 3)
+      expect(card).to have_selector('.badge', count: 3)
       expect(card).to have_content(bug.title)
     end
 
@@ -294,13 +294,13 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.label', count: 4)
+          expect(page).to have_selector('.badge', count: 4)
           expect(page).to have_content(bug.title)
           expect(page).to have_content(regression.title)
         end
       end
 
-      expect(card).to have_selector('.label', count: 4)
+      expect(card).to have_selector('.badge', count: 4)
       expect(card).to have_content(bug.title)
       expect(card).to have_content(regression.title)
     end
@@ -322,12 +322,12 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.label', count: 1)
+          expect(page).to have_selector('.badge', count: 1)
           expect(page).not_to have_content(stretch.title)
         end
       end
 
-      expect(card).to have_selector('.label', count: 1)
+      expect(card).to have_selector('.badge', count: 1)
       expect(card).not_to have_content(stretch.title)
     end
 

spec/features/issues/filtered_search/filter_issues_spec.rb

@@ -265,7 +265,7 @@ describe 'Filter issues', :js do
 
     context 'issue label clicked' do
       it 'filters and displays in search bar' do
-        find('.issues-list .issue .issue-main-info .issuable-info a .label', text: multiple_words_label.title).click
+        find('.issues-list .issue .issue-main-info .issuable-info a .badge', text: multiple_words_label.title).click
 
         expect_issues_list_count(1)
         expect_tokens([label_token("\"#{multiple_words_label.title}\"")])

spec/features/issues/user_creates_branch_and_merge_request_spec.rb

@@ -139,8 +139,8 @@ describe 'User creates branch and merge request on issue page', :js do
       end
 
       it 'disables the create branch button' do
-        expect(page).to have_css('.create-mr-dropdown-wrap .unavailable:not(.hide)')
-        expect(page).to have_css('.create-mr-dropdown-wrap .available.hide', visible: false)
+        expect(page).to have_css('.create-mr-dropdown-wrap .unavailable:not(.hidden)')
+        expect(page).to have_css('.create-mr-dropdown-wrap .available.hidden', visible: false)
         expect(page).to have_content /1 Related Merge Request/
       end
     end

spec/features/labels_hierarchy_spec.rb

@@ -34,7 +34,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do
 
         wait_for_requests
 
-        expect(page).to have_selector('span.label', text: label.title)
+        expect(page).to have_selector('span.badge', text: label.title)
       end
     end
 
@@ -45,7 +45,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do
 
       wait_for_requests
 
-      expect(page).not_to have_selector('span.label', text: child_group_label.title)
+      expect(page).not_to have_selector('span.badge', text: child_group_label.title)
     end
   end
 
@@ -159,9 +159,9 @@ feature 'Labels Hierarchy', :js, :nested_groups do
       find('.btn-create').click
 
       expect(page.find('.issue-details h2.title')).to have_content('new created issue')
-      expect(page).to have_selector('span.label', text: grandparent_group_label.title)
-      expect(page).to have_selector('span.label', text: parent_group_label.title)
-      expect(page).to have_selector('span.label', text: project_label_1.title)
+      expect(page).to have_selector('span.badge', text: grandparent_group_label.title)
+      expect(page).to have_selector('span.badge', text: parent_group_label.title)
+      expect(page).to have_selector('span.badge', text: project_label_1.title)
     end
   end
 

spec/features/merge_request/user_selects_branches_for_new_mr_spec.rb

@@ -4,6 +4,12 @@ describe 'Merge request > User selects branches for new MR', :js do
   let(:project) { create(:project, :public, :repository) }
   let(:user) { project.creator }
 
+  def select_source_branch(branch_name)
+    find('.js-source-branch', match: :first).click
+    find('.js-source-branch-dropdown .dropdown-input-field').native.send_keys branch_name
+    find('.js-source-branch-dropdown .dropdown-content a', text: branch_name, match: :first).click
+  end
+
   before do
     project.add_master(user)
     sign_in(user)
@@ -43,8 +49,7 @@ describe 'Merge request > User selects branches for new MR', :js do
   it 'generates a diff for an orphaned branch' do
     visit project_new_merge_request_path(project)
 
-    find('.js-source-branch', match: :first).click
-    find('.js-source-branch-dropdown .dropdown-content a', text: 'orphaned-branch', match: :first).click
+    select_source_branch('orphaned-branch')
 
     click_button "Compare branches"
     click_link "Changes"
@@ -198,4 +203,31 @@ describe 'Merge request > User selects branches for new MR', :js do
       end
     end
   end
+
+  context 'with special characters in branch names' do
+    it 'escapes quotes in branch names' do
+      special_branch_name = '"with-quotes"'
+      CreateBranchService.new(project, user)
+        .execute(special_branch_name, 'add-pdf-file')
+
+      visit project_new_merge_request_path(project)
+      select_source_branch(special_branch_name)
+
+      source_branch_input = find('[name="merge_request[source_branch]"]', visible: false)
+      expect(source_branch_input.value).to eq special_branch_name
+    end
+
+    it 'does not escape unicode in branch names' do
+      special_branch_name = 'ʕ•ᴥ•ʔ'
+      CreateBranchService.new(project, user)
+        .execute(special_branch_name, 'add-pdf-file')
+
+      visit project_new_merge_request_path(project)
+      select_source_branch(special_branch_name)
+
+      click_button "Compare branches"
+
+      expect(page).to have_button("Submit merge request")
+    end
+  end
 end

spec/javascripts/behaviors/secret_values_spec.js

@@ -9,7 +9,7 @@ function generateValueMarkup(
     <div class="${placeholderClass}">
       ***
     </div>
-    <div class="hide ${valueClass}">
+    <div class="hidden ${valueClass}">
       ${secret}
     </div>
   `;

spec/javascripts/boards/issue_card_spec.js

@@ -251,13 +251,13 @@ describe('Issue card component', () => {
 
     it('renders list label', () => {
       expect(
-        component.$el.querySelectorAll('.label').length,
+        component.$el.querySelectorAll('.badge').length,
       ).toBe(2);
     });
 
     it('renders label', () => {
       const nodes = [];
-      component.$el.querySelectorAll('.label').forEach((label) => {
+      component.$el.querySelectorAll('.badge').forEach((label) => {
         nodes.push(label.title);
       });
 
@@ -268,13 +268,13 @@ describe('Issue card component', () => {
 
     it('sets label description as title', () => {
       expect(
-        component.$el.querySelector('.label').getAttribute('title'),
+        component.$el.querySelector('.badge').getAttribute('title'),
       ).toContain(label1.description);
     });
 
     it('sets background color of button', () => {
       const nodes = [];
-      component.$el.querySelectorAll('.label').forEach((label) => {
+      component.$el.querySelectorAll('.badge').forEach((label) => {
         nodes.push(label.style.backgroundColor);
       });
 
@@ -291,7 +291,7 @@ describe('Issue card component', () => {
       Vue.nextTick()
         .then(() => {
           expect(
-            component.$el.querySelectorAll('.label').length,
+            component.$el.querySelectorAll('.badge').length,
           ).toBe(2);
           expect(
             component.$el.textContent,
@@ -313,7 +313,7 @@ describe('Issue card component', () => {
       Vue.nextTick()
         .then(() => {
           expect(
-            component.$el.querySelectorAll('.label').length,
+            component.$el.querySelectorAll('.badge').length,
           ).toBe(3);
           expect(
             component.$el.textContent,
@@ -335,7 +335,7 @@ describe('Issue card component', () => {
       Vue.nextTick()
         .then(() => {
           expect(
-            component.$el.querySelectorAll('.label').length,
+            component.$el.querySelectorAll('.badge').length,
           ).toBe(3);
           expect(
             component.$el.textContent,

spec/lib/banzai/filter/label_reference_filter_spec.rb

@@ -59,7 +59,7 @@ describe Banzai::Filter::LabelReferenceFilter do
   describe 'label span element' do
     it 'includes default classes' do
       doc = reference_filter("Label #{reference}")
-      expect(doc.css('a span').first.attr('class')).to eq 'label color-label has-tooltip'
+      expect(doc.css('a span').first.attr('class')).to eq 'badge color-label has-tooltip'
     end
 
     it 'includes a style attribute' do

yarn.lock

@@ -1285,8 +1285,8 @@ boom@5.x.x:
     hoek "4.x.x"
 
 bootstrap@4.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.1.tgz#3aec85000fa619085da8d2e4983dfd67cf2114cb"
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.0.tgz#110b05c31a236d56dbc9adcda6dd16f53738a28a"
 
 boxen@^1.2.1:
   version "1.3.0"