Fix duplicate dropdown dividers (#32760)
Fix #27466 The problem is that any item in the menu could be hidden, pure CSS won't work, and dropdown's builtin "hideDividers" doesn't work with our "scope dividers". The newly introduced "archived" label makes the dividers regression more.
This commit is contained in:
parent
2d13eafd69
commit
5675efb3e0
10 changed files with 179 additions and 42 deletions
56
web_src/js/modules/fomantic/dropdown.test.ts
Normal file
56
web_src/js/modules/fomantic/dropdown.test.ts
Normal file
|
@ -0,0 +1,56 @@
|
|||
import {createElementFromHTML} from '../../utils/dom.ts';
|
||||
import {hideScopedEmptyDividers} from './dropdown.ts';
|
||||
|
||||
test('hideScopedEmptyDividers-simple', () => {
|
||||
const container = createElementFromHTML(`<div>
|
||||
<div class="divider"></div>
|
||||
<div class="item">a</div>
|
||||
<div class="divider"></div>
|
||||
<div class="divider"></div>
|
||||
<div class="divider"></div>
|
||||
<div class="item">b</div>
|
||||
<div class="divider"></div>
|
||||
</div>`);
|
||||
hideScopedEmptyDividers(container);
|
||||
expect(container.innerHTML).toEqual(`
|
||||
<div class="divider hidden transition"></div>
|
||||
<div class="item">a</div>
|
||||
<div class="divider hidden transition"></div>
|
||||
<div class="divider hidden transition"></div>
|
||||
<div class="divider"></div>
|
||||
<div class="item">b</div>
|
||||
<div class="divider hidden transition"></div>
|
||||
`);
|
||||
});
|
||||
|
||||
test('hideScopedEmptyDividers-hidden1', () => {
|
||||
const container = createElementFromHTML(`<div>
|
||||
<div class="item">a</div>
|
||||
<div class="divider" data-scope="b"></div>
|
||||
<div class="item tw-hidden" data-scope="b">b</div>
|
||||
</div>`);
|
||||
hideScopedEmptyDividers(container);
|
||||
expect(container.innerHTML).toEqual(`
|
||||
<div class="item">a</div>
|
||||
<div class="divider hidden transition" data-scope="b"></div>
|
||||
<div class="item tw-hidden" data-scope="b">b</div>
|
||||
`);
|
||||
});
|
||||
|
||||
test('hideScopedEmptyDividers-hidden2', () => {
|
||||
const container = createElementFromHTML(`<div>
|
||||
<div class="item" data-scope="">a</div>
|
||||
<div class="divider" data-scope="b"></div>
|
||||
<div class="item tw-hidden" data-scope="b">b</div>
|
||||
<div class="divider" data-scope=""></div>
|
||||
<div class="item" data-scope="">c</div>
|
||||
</div>`);
|
||||
hideScopedEmptyDividers(container);
|
||||
expect(container.innerHTML).toEqual(`
|
||||
<div class="item" data-scope="">a</div>
|
||||
<div class="divider hidden transition" data-scope="b"></div>
|
||||
<div class="item tw-hidden" data-scope="b">b</div>
|
||||
<div class="divider hidden transition" data-scope=""></div>
|
||||
<div class="item" data-scope="">c</div>
|
||||
`);
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue