diff --git a/packages/icon/src/Icon.ts b/packages/icon/src/Icon.ts index 1495ba95ab..5cc6d3ea59 100644 --- a/packages/icon/src/Icon.ts +++ b/packages/icon/src/Icon.ts @@ -70,6 +70,16 @@ export class Icon extends IconBase { } }; + private announceIconImageSrcError(): void { + this.dispatchEvent( + new Event('error', { + cancelable: true, + bubbles: true, + composed: true, + }) + ); + } + protected override render(): TemplateResult { if (this.name) { return html` @@ -77,7 +87,11 @@ export class Icon extends IconBase { `; } else if (this.src) { return html` - ${ifDefined(this.label)} + ${ifDefined(this.label)} `; } return super.render(); diff --git a/packages/icon/stories/icon.stories.ts b/packages/icon/stories/icon.stories.ts index 9db5298dc4..aaee5008fb 100644 --- a/packages/icon/stories/icon.stories.ts +++ b/packages/icon/stories/icon.stories.ts @@ -57,6 +57,27 @@ export const imageIcon = (): TemplateResult => { imageIcon.storyName = 'Image Icon'; +export const imageIconSrcError = (): TemplateResult => { + const error = (): void => { + console.error('Invalid sp-icon src provided'); + }; + + return html` + ${sizes.map( + (size) => html` + + ` + )} + `; +}; + +imageIcon.storyName = 'Image Icon src invalid error'; + export const svgIcon = (): TemplateResult => { return html` ${sizes.map( diff --git a/packages/icon/test/icon.test.ts b/packages/icon/test/icon.test.ts index a40ceb7950..fef9ef90c4 100644 --- a/packages/icon/test/icon.test.ts +++ b/packages/icon/test/icon.test.ts @@ -15,6 +15,7 @@ import { Icon } from '@spectrum-web-components/icon'; import '@spectrum-web-components/icons/sp-icons-medium.js'; import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; +import Sinon from 'sinon'; describe('Icon', () => { before(async () => { @@ -69,6 +70,25 @@ describe('Icon', () => { await expect(el).to.be.accessible(); }); + it('loads w/ invalid src, error dispatching', async () => { + const error = Sinon.spy(); + const el = await fixture( + html` + + ` + ); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + + expect(error).to.be.calledWithExactly(new Event('error')); + }); + it('loads w/ label', async () => { const label = 'Chevron'; const el = await fixture(