Merge branch 'tz-select2-only-lazy-css-bundle' into 'master'

CSS Select2 Lazy Bundle Changes only

See merge request gitlab-org/gitlab!47611

.scss-lint.yml

@@ -8,6 +8,7 @@ scss_files:
 exclude:
   - 'app/assets/stylesheets/pages/emojis.scss'
   - 'app/assets/stylesheets/startup/startup-*.scss'
+  - 'app/assets/stylesheets/lazy_bundles/select2.scss'
 
 linters:
   # Reports when you use improper spacing around ! (the "bang") in !default,

app/assets/javascripts/lib/utils/css_utils.js

 export function loadCSSFile(path) {
   return new Promise(resolve => {
+    if (!path) resolve();
+
     if (document.querySelector(`link[href="${path}"]`)) {
       resolve();
     } else {

app/assets/stylesheets/lazy_bundles/select2_overrides.scss

+@import 'page_bundles/mixins_and_variables_and_functions';
+/** Select2 selectbox style override **/
+.select2-container {
+  width: 100% !important;
+
+  &.input-md,
+  &.input-lg {
+    display: block;
+  }
+}
+
+.select2-container,
+.select2-container.select2-drop-above {
+  .select2-choice {
+    background: $white;
+    color: $gl-text-color;
+    border-color: $border-color;
+    height: 34px;
+    padding: $gl-vert-padding $gl-input-padding;
+    font-size: $gl-font-size;
+    line-height: 1.42857143;
+    border-radius: $gl-border-radius-base;
+
+    .select2-arrow {
+      background-image: none;
+      background-color: transparent;
+      border: 0;
+      padding-top: 12px;
+      padding-right: 20px;
+      font-size: 10px;
+
+      b {
+        display: none;
+      }
+
+      &::after {
+        content: '\f078';
+        position: absolute;
+        z-index: 1;
+        text-align: center;
+        pointer-events: none;
+        box-sizing: border-box;
+        color: $gray-darkest;
+        display: inline-block;
+        font: normal normal normal 14px/1 FontAwesome;
+        font-size: inherit;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+    }
+
+    .select2-chosen {
+      margin-right: 15px;
+    }
+
+    &:hover {
+      border-color: $gray-darkest;
+      color: $gl-text-color;
+    }
+  }
+
+  // Essentially we’re doing @include form-control-focus here (from
+  // bootstrap/scss/mixins/_forms.scss), except that the bootstrap mixin adds a
+  // `&:focus` selector and we’re never actually focusing the .select2-choice
+  // link nor the .select2-container, the Select2 library focuses an off-screen
+  // .select2-focusser element instead.
+  &.select2-container-active:not(.select2-dropdown-open) {
+    .select2-choice {
+      color: $input-focus-color;
+      background-color: $input-focus-bg;
+      border-color: $input-focus-border-color;
+      outline: 0;
+    }
+
+    // Reusable focus “glow” box-shadow
+    @mixin form-control-focus-glow {
+      @if $enable-shadows {
+        box-shadow: $input-box-shadow, $input-focus-box-shadow;
+      } @else {
+        box-shadow: $input-focus-box-shadow;
+      }
+    }
+
+    // Apply the focus “glow” shadow to the .select2-container if it also has
+    // the .block-truncated class as that applies an overflow: hidden, thereby
+    // hiding the glow of the nested .select2-choice element.
+    &.block-truncated {
+      @include form-control-focus-glow;
+    }
+
+    // Apply the glow directly to the .select2-choice link if we’re not
+    // block-truncating the container.
+    &:not(.block-truncated) .select2-choice {
+      @include form-control-focus-glow;
+    }
+  }
+
+  &.is-invalid {
+    ~ .invalid-feedback {
+      display: block;
+    }
+
+    .select2-choices,
+    .select2-choice {
+      border-color: $red-500;
+    }
+  }
+}
+
+.select2-drop,
+.select2-drop.select2-drop-above {
+  background: $white;
+  box-shadow: 0 2px 4px $dropdown-shadow-color;
+  border-radius: $gl-border-radius-base;
+  border: 1px solid $border-color;
+  min-width: 175px;
+  color: $gl-text-color;
+  z-index: 999;
+
+  .modal-open & {
+    z-index: $zindex-modal + 200;
+  }
+}
+
+.select2-drop-mask {
+  z-index: 998;
+
+  .modal-open & {
+    z-index: $zindex-modal + 100;
+  }
+}
+
+.select2-drop.select2-drop-above.select2-drop-active {
+  border-top: 1px solid $border-color;
+  margin-top: -6px;
+}
+
+.select2-container-active {
+  .select2-choice,
+  .select2-choices {
+    box-shadow: none;
+  }
+}
+
+.select2-dropdown-open,
+.select2-dropdown-open.select2-drop-above {
+  .select2-choice {
+    border-color: $gray-darkest;
+    outline: 0;
+  }
+}
+
+.select2-container-multi {
+  .select2-choices {
+    border-radius: $border-radius-default;
+    border-color: $border-color;
+    background: none;
+
+    .select2-search-field input {
+      padding: 5px $gl-input-padding;
+      height: auto;
+      font-family: inherit;
+      font-size: inherit;
+    }
+
+    .select2-search-choice {
+      margin: 5px 0 0 8px;
+      box-shadow: none;
+      border-color: $border-color;
+      color: $gl-text-color;
+      line-height: 15px;
+      background-color: $gray-light;
+      background-image: none;
+      padding: 3px 18px 3px 5px;
+
+      .select2-search-choice-close {
+        top: 5px;
+        left: initial;
+        right: 3px;
+      }
+
+      &.select2-search-choice-focus {
+        border-color: $gl-text-color;
+      }
+    }
+  }
+}
+
+.select2-drop-active {
+  margin-top: $dropdown-vertical-offset;
+  font-size: 14px;
+
+  .select2-results {
+    max-height: 350px;
+  }
+}
+
+.select2-search {
+  padding: $grid-size;
+
+  .select2-drop-auto-width & {
+    padding: $grid-size;
+  }
+
+  input {
+    padding: $grid-size;
+    background: transparent image-url('select2.png');
+    color: $gl-text-color;
+    background-clip: content-box;
+    background-origin: content-box;
+    background-repeat: no-repeat;
+    background-position: right 0 bottom 0 !important;
+    border: 1px solid $border-color;
+    border-radius: $border-radius-default;
+    line-height: 16px;
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+
+    &:focus {
+      border-color: $blue-300;
+    }
+
+    &.select2-active {
+      background-color: $white;
+      background-image: image-url('select2-spinner.gif') !important;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+      background-position: right 6px center !important;
+      background-size: 16px 16px !important;
+    }
+  }
+
+  + .select2-results {
+    padding-top: 0;
+  }
+}
+
+.select2-results {
+  margin: 0;
+  padding: #{$gl-padding / 2} 0;
+
+  .select2-no-results,
+  .select2-searching,
+  .select2-ajax-error,
+  .select2-selection-limit {
+    background: transparent;
+    padding: #{$gl-padding / 2} $gl-padding;
+  }
+
+  .select2-result-label,
+  .select2-more-results {
+    padding: #{$gl-padding / 2} $gl-padding;
+  }
+
+  .select2-highlighted {
+    background: transparent;
+    color: $gl-text-color;
+
+    .select2-result-label {
+      background: $gray-darker;
+    }
+  }
+
+  .select2-result {
+    padding: 0 1px;
+  }
+
+  li.select2-result-with-children > .select2-result-label {
+    font-weight: $gl-font-weight-bold;
+    color: $gl-text-color;
+  }
+}
+
+.select2-highlighted {
+  .group-result {
+    .group-path {
+      color: $gray-700;
+    }
+  }
+}
+
+.select2-result-selectable,
+.select2-result-unselectable {
+  .select2-match {
+    font-weight: $gl-font-weight-bold;
+    text-decoration: none;
+  }
+}
+
+.input-group {
+  .select2-container {
+    display: table-cell;
+    max-width: 180px;
+  }
+}
+
+.file-editor {
+  .select2 {
+    float: right;
+  }
+}
+
+.import-namespace-select {
+  > .select2-choice {
+    border-radius: $border-radius-default 0 0 $border-radius-default;
+    position: relative;
+    left: 1px;
+  }
+}
+
+.issue-form {
+  .select2-container {
+    width: 250px !important;
+  }
+}
+
+.new_project,
+.edit-project,
+.import-project {
+  .input-group {
+    .select2-container {
+      display: unset;
+      max-width: unset;
+      flex-grow: 1;
+    }
+  }
+
+  .input-group-prepend,
+  .input-group-append {
+    + .select2 a {
+      border-radius: 0 $gl-border-radius-base $gl-border-radius-base 0;
+    }
+  }
+}
+
+.project-path {
+  .select2-choice {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.transfer-project .select2-container {
+  min-width: 200px;
+}
+
+.right-sidebar {
+  .block {
+    .select2-container span {
+      margin-top: 0;
+    }
+  }
+}
+
+.block-truncated {
+  > div:not(.block):not(.select2-display-none) {
+    display: inline;
+  }
+}

config/application.rb

@@ -202,6 +202,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/xterm.css"
     config.assets.precompile << "page_bundles/alert_management_settings.css"
     config.assets.precompile << "lazy_bundles/cropper.css"
+    config.assets.precompile << "lazy_bundles/select2.css"
     config.assets.precompile << "performance_bar.css"
     config.assets.precompile << "disable_animations.css"
     config.assets.precompile << "snippets.css"

lib/gitlab/gon_helper.rb

@@ -28,6 +28,7 @@ module Gitlab
       gon.sprite_icons           = IconsHelper.sprite_icon_path
       gon.sprite_file_icons      = IconsHelper.sprite_file_icons_path
       gon.emoji_sprites_css_path = ActionController::Base.helpers.stylesheet_path('emoji_sprites')
+      gon.select2_css_path       = ActionController::Base.helpers.stylesheet_path('lazy_bundles/select2.css')
       gon.test_env               = Rails.env.test?
       gon.disable_animations     = Gitlab.config.gitlab['disable_animations']
       gon.suggested_label_colors = LabelsHelper.suggested_colors