From 278f2d8894da25308d13f5f910e1ee3eac86b0b0 Mon Sep 17 00:00:00 2001 From: Rasmus Nielsen - Nova Consult ApS Date: Thu, 2 Jul 2020 10:43:25 +0200 Subject: [PATCH 1/4] remove spacing utility --- src/components/form-tags/_form-tags.scss | 2 ++ src/components/form-tags/form-tags.js | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/form-tags/_form-tags.scss b/src/components/form-tags/_form-tags.scss index ef35ba52b4c..e1eb8f17441 100644 --- a/src/components/form-tags/_form-tags.scss +++ b/src/components/form-tags/_form-tags.scss @@ -32,6 +32,8 @@ font-size: 75%; font-weight: normal; line-height: $input-line-height; + margin-right: 0.25rem; + margin-top: 0.25rem; &.disabled { opacity: 0.75; diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js index 9ee8593cb37..8066d3fe3ff 100644 --- a/src/components/form-tags/form-tags.js +++ b/src/components/form-tags/form-tags.js @@ -530,7 +530,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 From c28d6222f197fe66e23290bc36ee4aaeab570ec8 Mon Sep 17 00:00:00 2001 From: Rasmus Nielsen - Nova Consult ApS Date: Thu, 2 Jul 2020 11:10:27 +0200 Subject: [PATCH 2/4] use mt-auto for better centering --- src/components/form-tags/_form-tags.scss | 1 - src/components/form-tags/form-tags.js | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form-tags/_form-tags.scss b/src/components/form-tags/_form-tags.scss index e1eb8f17441..f667d49bb7b 100644 --- a/src/components/form-tags/_form-tags.scss +++ b/src/components/form-tags/_form-tags.scss @@ -33,7 +33,6 @@ font-weight: normal; line-height: $input-line-height; margin-right: 0.25rem; - margin-top: 0.25rem; &.disabled { opacity: 0.75; diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js index 8066d3fe3ff..274f675bd84 100644 --- a/src/components/form-tags/form-tags.js +++ b/src/components/form-tags/form-tags.js @@ -530,6 +530,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ BFormTag, { key: `li-tag__${tag}`, + staticClass: 'mt-auto', class: tagClass, props: { // `BFormTag` will auto generate an ID From c27b13a9442976fbc65bef92ece8ceafde937f74 Mon Sep 17 00:00:00 2001 From: Rasmus Nielsen - Nova Consult ApS Date: Thu, 2 Jul 2020 13:44:32 +0200 Subject: [PATCH 3/4] update --- src/components/form-tags/_form-tags.scss | 9 +++++++++ src/components/form-tags/form-tag.js | 2 +- src/components/form-tags/form-tags.js | 5 ++--- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/form-tags/_form-tags.scss b/src/components/form-tags/_form-tags.scss index f667d49bb7b..2dbbbd8eeb2 100644 --- a/src/components/form-tags/_form-tags.scss +++ b/src/components/form-tags/_form-tags.scss @@ -1,4 +1,12 @@ .b-form-tags { + > ul { + margin-top: -0.25rem; + + > li { + margin-top: 0.25rem; + } + } + &.focus { color: $input-focus-color; background-color: $input-focus-bg; @@ -44,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 index 969d2eb47bc..a53e694c254 100644 --- 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 index 274f675bd84..6ea13c90fa4 100644 --- a/src/components/form-tags/form-tags.js +++ b/src/components/form-tags/form-tags.js @@ -530,7 +530,6 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ BFormTag, { key: `li-tag__${tag}`, - staticClass: 'mt-auto', class: tagClass, props: { // `BFormTag` will auto generate an ID @@ -612,7 +611,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', @@ -627,7 +626,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: 'list-unstyled mb-0 d-flex flex-wrap align-items-center', attrs: { id: tagListId } }, // `concat()` is faster than array spread when args are known to be arrays From 4a1363fcb270f0779eb2d4441d5f5315382e5da7 Mon Sep 17 00:00:00 2001 From: Hiws Date: Thu, 16 Jul 2020 17:59:59 +0200 Subject: [PATCH 4/4] add new class to avoid issues with custom rendering --- src/components/form-tags/_form-tags.scss | 4 ++-- src/components/form-tags/form-tags.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/form-tags/_form-tags.scss b/src/components/form-tags/_form-tags.scss index 2dbbbd8eeb2..dcf5382b441 100644 --- a/src/components/form-tags/_form-tags.scss +++ b/src/components/form-tags/_form-tags.scss @@ -1,8 +1,8 @@ .b-form-tags { - > ul { + .b-form-tags-list { margin-top: -0.25rem; - > li { + .b-form-tag { margin-top: 0.25rem; } } diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js index 6ea13c90fa4..ae2f7441436 100644 --- a/src/components/form-tags/form-tags.js +++ b/src/components/form-tags/form-tags.js @@ -626,7 +626,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ 'ul', { key: '_tags_list_', - staticClass: 'list-unstyled 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 } }, // `concat()` is faster than array spread when args are known to be arrays