1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-08 22:56:46 +02:00

Remove .dropdown-menu[style] reset and adjust .dropdown-menu-* modifiers

- Removes the &[style] selector that was used for resetting Popper styles
- Separate Popper-based alignment from static alignment with `data-bs-popover` attribute that separates the --bs-position and custom right/left properties

Co-Authored-By: Rohit Sharma <rohit2sharma95@gmail.com>
This commit is contained in:
Mark Otto
2021-02-05 14:57:43 -08:00
committed by XhmikosR
parent a2b56de707
commit 8f1c882545
4 changed files with 171 additions and 16 deletions

View File

@@ -1006,13 +1006,44 @@ describe('Dropdown', () => {
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
const dropdown = new Dropdown(btnDropdown)
btnDropdown.addEventListener('shown.bs.dropdown', () => {
expect(dropdown._popper).toBeNull()
expect(dropdownMenu.getAttribute('style')).toEqual(null, 'no inline style applied by Popper')
done()
})
btnDropdown.click()
dropdown.show()
})
it('should manage bs attribute `data-bs-popper`="none" when dropdown is in navbar', done => {
fixtureEl.innerHTML = [
'<nav class="navbar navbar-expand-md navbar-light bg-light">',
' <div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
' </div>',
'</nav>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
const dropdown = new Dropdown(btnDropdown)
btnDropdown.addEventListener('shown.bs.dropdown', () => {
expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('none')
dropdown.hide()
})
btnDropdown.addEventListener('hidden.bs.dropdown', () => {
expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()
done()
})
dropdown.show()
})
it('should not use Popper if display set to static', done => {
@@ -1037,6 +1068,33 @@ describe('Dropdown', () => {
btnDropdown.click()
})
it('should manage bs attribute `data-bs-popper`="static" when display set to static', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
const dropdown = new Dropdown(btnDropdown)
btnDropdown.addEventListener('shown.bs.dropdown', () => {
expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')
dropdown.hide()
})
btnDropdown.addEventListener('hidden.bs.dropdown', () => {
expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()
done()
})
dropdown.show()
})
it('should remove "show" class if tabbing outside of menu', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',