apply mutator to spritesheets

pull/1927/head
konnorrogers 2024-03-15 16:40:19 -04:00
rodzic 2a4b3ee2e9
commit 27c0cc81c5
3 zmienionych plików z 20 dodań i 2 usunięć

Wyświetl plik

@ -16,6 +16,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
- Added the Slovenian translation [#1893]
- Added support for `contextElement` to `VirtualElements` in `<sl-popup>` [#1874]
- Fixed a bug in `<sl-icon>` that did not properly apply mutators to spritesheets. [#]
- Fixed a bug in `.sl-scroll-lock` causing layout shifts. [#1895]
- Fixed a bug in `<sl-rating>` that caused the rating to not reset in some circumstances [#1877]
- Fixed a bug in `<sl-select>` that caused the menu to not close when rendered in a shadow root [#1878]
@ -1731,4 +1732,4 @@ The following pages demonstrate why this change was necessary.
## 2.0.0-beta.1
- Initial release
- Initial release

Wyświetl plik

@ -42,9 +42,22 @@ export default class SlIcon extends ShoelaceElement {
let fileData: Response;
if (library?.spriteSheet) {
return html`<svg part="svg">
this.svg = html`<svg part="svg">
<use part="use" href="${url}"></use>
</svg>`;
// Using a templateResult requires the SVG to be written to the DOM first before we can grab the SVGElement
// to be passed to the library's mutator function.
await this.updateComplete
const svg = this.shadowRoot?.querySelector("[part='svg']") as SVGSVGElement
if (typeof library.mutator === "function") {
library.mutator(svg)
}
return this.svg
}
try {

Wyświetl plik

@ -204,6 +204,10 @@ describe('<sl-icon>', () => {
const rect = use?.getBoundingClientRect();
expect(rect?.width).to.equal(0);
expect(rect?.width).to.equal(0);
// Make sure the mutator is applied.
// https://github.com/shoelace-style/shoelace/issues/1925
expect(svg?.getAttribute("fill")).to.equal("currentColor")
});
// TODO: <use> svg icons don't emit a "load" or "error" event...if we can figure out how to get the event to emit errors.