fix(b-tags): replace spacing utility with static CSS (fixes bootstrap-vue#5523) (bootstrap-vue#5544)

Hiws · jacobmllr95 · web-flow · commit e0de6871640d · 2020-07-16T18:17:02.000+02:00
* remove spacing utility

* use mt-auto for better centering

* update

* add new class to avoid issues with custom rendering

Co-authored-by: Jacob Müller &lt;jacob.mueller.elz@gmail.com&gt;
diff --git a/src/components/form-tags/_form-tags.scss b/src/components/form-tags/_form-tags.scss
@@ -1,4 +1,12 @@
 .b-form-tags {
+  .b-form-tags-list {
+    margin-top: -0.25rem;
+
+    .b-form-tag {
+      margin-top: 0.25rem;
+    }
+  }
+
   &.focus {
     color: $input-focus-color;
     background-color: $input-focus-bg;
@@ -32,6 +40,7 @@
   font-size: 75%;
   font-weight: normal;
   line-height: $input-line-height;
+  margin-right: 0.25rem;
 
   &.disabled {
     opacity: 0.75;
@@ -43,6 +52,7 @@
     font-size: 125%;
     line-height: 1;
     float: none;
+    margin-left: 0.25rem;
   }
 }
 
diff --git a/src/components/form-tags/form-tag.js b/src/components/form-tags/form-tag.js
@@ -54,7 +54,7 @@ export const BFormTag = /*#__PURE__*/ Vue.extend({
     let $remove = h()
     if (!this.disabled) {
       $remove = h(BButtonClose, {
-        staticClass: 'b-form-tag-remove ml-1',
+        staticClass: 'b-form-tag-remove',
         props: { ariaLabel: this.removeLabel },
         attrs: {
           'aria-controls': tagId,
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
@@ -557,7 +557,6 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
           BFormTag,
           {
             key: `li-tag__${tag}`,
-            staticClass: 'mt-1 mr-1',
             class: tagClass,
             props: {
               // `BFormTag` will auto generate an ID
@@ -639,7 +638,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
         'li',
         {
           key: '__li-input__',
-          staticClass: 'flex-grow-1 mt-1',
+          staticClass: 'flex-grow-1',
           attrs: {
             role: 'none',
             'aria-live': 'off',
@@ -654,7 +653,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
         'ul',
         {
           key: '_tags_list_',
-          staticClass: 'list-unstyled mt-n1 mb-0 d-flex flex-wrap align-items-center',
+          staticClass: 'b-form-tags-list list-unstyled mb-0 d-flex flex-wrap align-items-center',
           attrs: { id: tagListId }
         },
         [$tags, $field]
