FEATURE: replaces tag-chooser/tag-group-chooser with select-kit component

These component were also the last using select2. As a consequence select2 is removed from Discourse in this commit.

app/assets/stylesheets/common/base/compose.scss

@@ -229,10 +229,6 @@
       margin: 0;
       flex: 1 1 100%;
     }
-
-    &.select2-dropdown-open, &.select2-container-active {
-      border-color: $tertiary;
-    }
   }
 
   .wmd-controls {

app/assets/stylesheets/common/base/modal.scss

@@ -88,6 +88,10 @@
 
   .select-kit {
     width: 220px;
+
+    &.tag-chooser {
+      width: 100%;
+    }
   }
 }
 

app/assets/stylesheets/common/base/search.scss

@@ -92,7 +92,7 @@
   }
 
   .search-bar {
-    display: flex; 
+    display: flex;
     margin-bottom: 10px;
     max-width: 780px;
     input {
@@ -122,7 +122,7 @@
   position: relative;
   margin: 10px 0 15px;
   max-width: 780px;
-  border-bottom: 3px solid $primary-low; 
+  border-bottom: 3px solid $primary-low;
   width: 100%;
   .term {
     font-weight: bold;
@@ -130,7 +130,7 @@
 
   .result-count {
     float: left;
-    margin-bottom: 4px;    
+    margin-bottom: 4px;
     span {
       line-height: $line-height-large;
       height: 28px;
@@ -163,7 +163,7 @@
   max-width: 780px;
   .search-advanced-options {
     border: 1px solid $primary-low;
-    padding: 0 20px;    
+    padding: 0 20px;
     width: 100%;
     .date-picker-wrapper {
       vertical-align: top;
@@ -183,6 +183,10 @@
     font-weight: bold;
   }
 
+  .tag-chooser {
+    width: 70%;
+  }
+
   .container {
     display: flex;
     flex: 1 1 100%;
@@ -206,4 +210,4 @@
       }
     }
   }
-}
+}

app/assets/stylesheets/common/base/tagging.scss

@@ -25,8 +25,8 @@
 
   .tag-count {
     font-size: $font-down-1;
-    vertical-align: middle;   
-    line-height: $line-height-small; 
+    vertical-align: middle;
+    line-height: $line-height-small;
   }
 }
 
@@ -61,7 +61,7 @@
 
     &.box, &.bullet {
     }
-    
+
     &.box + .topic-header-extra,
     &.bullet + .topic-header-extra,
     &.bar + .topic-header-extra {
@@ -69,25 +69,17 @@
   }
 }
 
-.add-tags .select2 {
-  margin: 0;
-}
-
 $tag-color: $primary-medium;
 
 .discourse-tag-count {
   font-size: $font-down-1;
   color: $tag-color;
   line-height: $line-height-small;
-  vertical-align: middle;  
-}
-
-.select2-result-label .discourse-tag {
-  margin-right: 0;
+  vertical-align: middle;
 }
 
 .discourse-tag {
-  max-width: 14em; 
+  max-width: 14em;
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -131,29 +123,13 @@ $tag-color: $primary-medium;
 }
 
 .d-header .topic-header-extra {
-  .discourse-tags { 
+  .discourse-tags {
     display: inline-block;
-    font-size: $font-down-1;        
+    font-size: $font-down-1;
   }
   .topic-featured-link { margin-left: 8px; }
 }
 
-.select2-container-multi .select2-choices .select2-search-choice.discourse-tag-select2 {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  border: 0;
-  border-radius: 0;
-  background-color: transparent;
-  .discourse-tag {
-    padding: 4px;
-    &.box {
-      padding: 1px 8px;
-      margin: 3px 5px;
-    }
-  }
-}
-
-
 .fps-result .add-full-page-tags {
   display: inline-block;
 }
@@ -213,11 +189,6 @@ header .discourse-tag {color: $tag-color }
   width: 100%;
   max-width: 100%;
   margin: 5px 0;
-  ul.select2-choices {
-    max-height: 30px;
-    padding-left: 10px;    
-    overflow-y: auto;
-  }
 }
 
 .title-wrapper .tag-chooser {
@@ -278,11 +249,7 @@ header .discourse-tag {color: $tag-color }
     }
   }
   .group-tags-list .tag-chooser {
-    height: 250px !important;
-    ul.select2-choices {
-      height: 250px !important; // to fight with select2.scss's important
-      max-height: none;
-    }
+    width: 100%;
   }
   .btn {margin-left: 10px;}
   .saving {

app/assets/stylesheets/common/base/topic.scss

@@ -105,15 +105,15 @@ a.badge-category {
     .private-message-glyph {
       margin: 5px 5px 0 0;
     }
-    .category-chooser, .tag-chooser {
+    .category-chooser, .mini-tag-chooser {
       flex: 1 1 49%;
       margin: 0 0 9px 0;
       @media all and (max-width: 500px) {
-        flex: 1 1 100%;        
+        flex: 1 1 100%;
       }
-        
+
     }
-    .tag-chooser {
+    .mini-tag-chooser {
       margin-left: 2%;
       @media all and (max-width: 500px) {
         margin-left: 0;
@@ -204,7 +204,7 @@ a.badge-category {
   .post-links {
     margin-top: 1em;
     padding-top: 1em;
-    border-top: 1px solid $primary-low; 
+    border-top: 1px solid $primary-low;
     li:last-of-type {
       margin-bottom: 1em;
     }

app/assets/stylesheets/common/base/user.scss

@@ -198,9 +198,9 @@
 
   .staff-counters {
     background: $primary;
-    color: $secondary;    
+    color: $secondary;
     display: flex;
-    padding: 10px;    
+    padding: 10px;
     > div, > div a {
       display: flex;
       align-items: baseline;
@@ -209,9 +209,9 @@
       span {
         padding: 1px 6px;
         border-radius: 10px;
-        margin-right: 5px;        
+        margin-right: 5px;
       }
-    }  
+    }
 
     a {
       color: $secondary;
@@ -404,7 +404,7 @@
     &.linked-stat { // This makes the entire "box" (the li) clickable instead of a narrow area.
       padding: 0;
       a {
-        padding: 10px 14px;        
+        padding: 10px 14px;
         width: 100%;
         height: 100%;
         display: block;
@@ -519,15 +519,6 @@
   .tag-notifications .tag-controls {
     margin-top: 24px;
   }
-
-  .tags .select2-container-multi {
-    border: 1px solid $primary-low;
-    width: 540px;
-    border-radius: 0;
-    .select2-choices {
-      border: none;
-    }
-  }
 }
 
 .paginated-topics-list {