rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Don't add empty content holder when there is no content available (#33982)

Browse Source 
* Remove content holder when there is no content

* Add tests to check the removal of header/content

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Rohit Sharma 2021-05-18 11:32:39 +05:30 committed by GitHub
parent 0b2d20b975
commit 153cf3a235
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
js/src/popover.js
View File

@ -30,7 +30,7 @@ const Default = {
content: '',
template: '<div class="popover" role="tooltip">' +
'<div class="popover-arrow"></div>' +
'<h3 class="popover-header"></h3>' +
'<h3 class="popover-header"></h3>' +
'<div class="popover-body"></div>' +
'</div>'
}
@ -90,6 +90,24 @@ class Popover extends Tooltip {
return this.getTitle() || this._getContent()
}
getTipElement() {
if (this.tip) {
return this.tip
}
this.tip = super.getTipElement()
if (!this.getTitle()) {
this.tip.removeChild(SelectorEngine.findOne(SELECTOR_TITLE, this.tip))
}
if (!this._getContent()) {
this.tip.removeChild(SelectorEngine.findOne(SELECTOR_CONTENT, this.tip))
}
return this.tip
}
setContent() {
const tip = this.getTipElement()

40
js/tests/unit/popover.spec.js
View File

@ -117,6 +117,46 @@ describe('Popover', () => {
popover.show()
})
it('should show a popover with just content without having header', done => {
fixtureEl.innerHTML = '<a href="#">Nice link</a>'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl, {
content: 'Some beautiful content :)'
})
popoverEl.addEventListener('shown.bs.popover', () => {
const popoverDisplayed = document.querySelector('.popover')
expect(popoverDisplayed).not.toBeNull()
expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
done()
})
popover.show()
})
it('should show a popover with just title without having body', done => {
fixtureEl.innerHTML = '<a href="#">Nice link</a>'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl, {
title: 'Title, which does not require content'
})
popoverEl.addEventListener('shown.bs.popover', () => {
const popoverDisplayed = document.querySelector('.popover')
expect(popoverDisplayed).not.toBeNull()
expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title, which does not require content')
done()
})
popover.show()
})
it('should show a popover with provided custom class', done => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap" data-bs-custom-class="custom-class">BS twitter</a>'