Skip to content

Commit

Permalink
fix(b-form-tags): ensure same height with or without tags (#5752)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jacobmllr95
jacobmllr95 authored Sep 9, 2020
1 parent e67d341 commit 07102f9
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 28 deletions.
1 change: 1 addition & 0 deletions src/components/form-tags/_form-tags.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
.b-form-tags-list {
margin-top: -0.25rem;

.b-from-tags-field,
.b-form-tag {
margin-top: 0.25rem;
}
Expand Down
71 changes: 43 additions & 28 deletions src/components/form-tags/form-tags.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -572,7 +572,6 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
return h(
BFormTag,
{
key: `li-tag__${tag}`,
class: tagClass,
props: {
// `BFormTag` will auto generate an ID
Expand All @@ -584,7 +583,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
pill: tagPills,
removeLabel: tagRemoveLabel
},
on: { remove: () => removeTag(tag) }
on: { remove: () => removeTag(tag) },
key: `tags_${tag}`
},
tag
)
Expand Down Expand Up @@ -640,40 +640,52 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
invisible: disableAddButton
},
style: { fontSize: '90%' },
props: { variant: addButtonVariant, disabled: disableAddButton || isLimitReached },
props: {
variant: addButtonVariant,
disabled: disableAddButton || isLimitReached
},
on: { click: () => addTag() }
},
[this.normalizeSlot('add-button-text') || addButtonText]
)

// ID of the tags+input `<ul>` list
// Note we could concatenate inputAttrs.id with `__TAG__LIST__`
// But note that the inputID may be null until after mount
// `safeId` returns `null`, if no user provided ID, until after
// mount when a unique ID is generated
const tagListId = this.safeId('__TAG__LIST__')
// ID of the tags + input `<ul>` list
// Note we could concatenate `inputAttrs.id` with '__tag_list__'
// but `inputId` may be `null` until after mount
// `safeId()` returns `null`, if no user provided ID,
// until after mount when a unique ID is generated
const tagListId = this.safeId('__tag_list__')

const $field = h(
'li',
{
key: '__li-input__',
staticClass: 'flex-grow-1',
staticClass: 'b-from-tags-field flex-grow-1',
attrs: {
role: 'none',
'aria-live': 'off',
'aria-controls': tagListId
}
},
key: 'tags_field'
},
[h('div', { staticClass: 'd-flex', attrs: { role: 'group' } }, [$input, $button])]
[
h(
'div',
{
staticClass: 'd-flex',
attrs: { role: 'group' }
},
[$input, $button]
)
]
)

// Wrap in an unordered list element (we use a list for accessibility)
const $ul = h(
'ul',
{
key: '_tags_list_',
staticClass: 'b-form-tags-list list-unstyled mb-0 d-flex flex-wrap align-items-center',
attrs: { id: tagListId }
attrs: { id: tagListId },
key: 'tags_list'
},
[$tags, $field]
)
Expand All @@ -691,8 +703,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
$invalid = h(
BFormInvalidFeedback,
{
key: '_tags_invalid_feedback_',
props: { id: invalidFeedbackId, forceShow: true }
props: { id: invalidFeedbackId, forceShow: true },
key: 'tags_invalid_feedback'
},
[this.invalidTagText, ': ', this.invalidTags.join(joiner)]
)
Expand All @@ -704,8 +716,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
$duplicate = h(
BFormText,
{
key: '_tags_duplicate_feedback_',
props: { id: duplicateFeedbackId }
props: { id: duplicateFeedbackId },
key: 'tags_duplicate_feedback'
},
[this.duplicateTagText, ': ', this.duplicateTags.join(joiner)]
)
Expand All @@ -717,8 +729,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
$limit = h(
BFormText,
{
key: '_tags_limit_feedback_',
props: { id: limitFeedbackId }
props: { id: limitFeedbackId },
key: 'tags_limit_feedback'
},
[limitTagsText]
)
Expand All @@ -727,8 +739,11 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
$feedback = h(
'div',
{
key: '_tags_feedback_',
attrs: { 'aria-live': 'polite', 'aria-atomic': 'true' }
attrs: {
'aria-live': 'polite',
'aria-atomic': 'true'
},
key: 'tags_feedback'
},
[$invalid, $duplicate, $limit]
)
Expand Down Expand Up @@ -789,7 +804,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
{
staticClass: 'sr-only',
attrs: {
id: this.safeId('_selected-tags_'),
id: this.safeId('__selected_tags__'),
role: 'status',
for: this.computedInputId,
'aria-live': this.hasFocus ? 'polite' : 'off',
Expand All @@ -806,7 +821,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
{
staticClass: 'sr-only',
attrs: {
id: this.safeId('_removed-tags_'),
id: this.safeId('__removed_tags__'),
role: 'status',
'aria-live': this.hasFocus ? 'assertive' : 'off',
'aria-atomic': 'true'
Expand All @@ -822,13 +837,13 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
// for native submission of forms
$hidden = this.tags.map(tag => {
return h('input', {
key: tag,
attrs: {
type: 'hidden',
value: tag,
name: this.name,
form: this.form || null
}
},
key: `tag_input_${tag}`
})
})
}
Expand All @@ -849,7 +864,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
id: this.safeId(),
role: 'group',
tabindex: this.disabled || this.noOuterFocus ? null : '-1',
'aria-describedby': this.safeId('_selected_')
'aria-describedby': this.safeId('__selected_tags__')
},
on: {
click: this.onClick,
Expand Down

0 comments on commit 07102f9

Please sign in to comment.