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 `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]
|
- 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 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 `<sl-dialog>` not accounting for elements with hidden dialog controls like `<video>` [#1755]
|
||||||
- Fixed focus trapping not scrolling elements into view. [#1750]
|
- Fixed focus trapping not scrolling elements into view. [#1750]
|
||||||
- Fixed more performance issues with focus trapping performance. [#1750]
|
- Fixed more performance issues with focus trapping performance. [#1750]
|
||||||
|
|
|
@ -144,12 +144,16 @@ export default class SlTree extends ShoelaceElement {
|
||||||
.forEach((status: 'expand' | 'collapse') => {
|
.forEach((status: 'expand' | 'collapse') => {
|
||||||
const existingIcon = item.querySelector(`[slot="${status}-icon"]`);
|
const existingIcon = item.querySelector(`[slot="${status}-icon"]`);
|
||||||
|
|
||||||
|
const expandButtonIcon = this.getExpandButtonIcon(status);
|
||||||
|
|
||||||
|
if (!expandButtonIcon) return;
|
||||||
|
|
||||||
if (existingIcon === null) {
|
if (existingIcon === null) {
|
||||||
// No separator exists, add one
|
// No separator exists, add one
|
||||||
item.append(this.getExpandButtonIcon(status)!);
|
item.append(expandButtonIcon);
|
||||||
} else if (existingIcon.hasAttribute('data-default')) {
|
} else if (existingIcon.hasAttribute('data-default')) {
|
||||||
// A default separator exists, replace it
|
// A default separator exists, replace it
|
||||||
existingIcon.replaceWith(this.getExpandButtonIcon(status)!);
|
existingIcon.replaceWith(expandButtonIcon);
|
||||||
} else {
|
} else {
|
||||||
// The user provided a custom icon, leave it alone
|
// 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