kopia lustrzana https://github.com/shoelace-style/shoelace
fix(tree) icons rendering as null (#1922)
* fix icons rendering as null * prettier * prettier * Update docs/pages/resources/changelog.md --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net>pull/1928/head
rodzic
77d6f27248
commit
cd5a6486da
|
@ -46,6 +46,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
|
|||
- Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
|
||||
- Added the `loading` attribute and the `spinner` and `spinner__base` part to `<sl-menu-item>` [#1700]
|
||||
- Fixed files that did not have `.js` extensions. [#1770]
|
||||
- Fixed a bug in `<sl-tree>` when providing custom expand / collapse icons [#1922]
|
||||
- Fixed `<sl-dialog>` not accounting for elements with hidden dialog controls like `<video>` [#1755]
|
||||
- Fixed focus trapping not scrolling elements into view. [#1750]
|
||||
- Fixed more performance issues with focus trapping performance. [#1750]
|
||||
|
|
|
@ -144,12 +144,16 @@ export default class SlTree extends ShoelaceElement {
|
|||
.forEach((status: 'expand' | 'collapse') => {
|
||||
const existingIcon = item.querySelector(`[slot="${status}-icon"]`);
|
||||
|
||||
const expandButtonIcon = this.getExpandButtonIcon(status);
|
||||
|
||||
if (!expandButtonIcon) return;
|
||||
|
||||
if (existingIcon === null) {
|
||||
// No separator exists, add one
|
||||
item.append(this.getExpandButtonIcon(status)!);
|
||||
item.append(expandButtonIcon);
|
||||
} else if (existingIcon.hasAttribute('data-default')) {
|
||||
// A default separator exists, replace it
|
||||
existingIcon.replaceWith(this.getExpandButtonIcon(status)!);
|
||||
existingIcon.replaceWith(expandButtonIcon);
|
||||
} else {
|
||||
// The user provided a custom icon, leave it alone
|
||||
}
|
||||
|
|
|
@ -752,4 +752,29 @@ describe('<sl-tree>', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
// https://github.com/shoelace-style/shoelace/issues/1916
|
||||
it("Should not render 'null' if it can't find a custom icon", async () => {
|
||||
const tree = await fixture<SlTree>(html`
|
||||
<sl-tree>
|
||||
<sl-tree-item>
|
||||
Item 1
|
||||
<sl-icon name="1-circle" slot="expand-icon"></sl-icon>
|
||||
<sl-tree-item> Item A </sl-tree-item>
|
||||
</sl-tree-item>
|
||||
<sl-tree-item>
|
||||
Item 2
|
||||
<sl-tree-item>Item A</sl-tree-item>
|
||||
<sl-tree-item>Item B</sl-tree-item>
|
||||
</sl-tree-item>
|
||||
<sl-tree-item>
|
||||
Item 3
|
||||
<sl-tree-item>Item A</sl-tree-item>
|
||||
<sl-tree-item>Item B</sl-tree-item>
|
||||
</sl-tree-item>
|
||||
</sl-tree>
|
||||
`);
|
||||
|
||||
expect(tree.textContent).to.not.includes('null');
|
||||
});
|
||||
});
|
||||
|
|
Ładowanie…
Reference in New Issue