Merge pull request #129 from umbraco/bugfix/uui-icon-request-at-firstupdate

Fix uui-icon for light-DOM context

Author: iOvergaard

packages/uui-button/lib/uui-button.element.ts

@@ -11,6 +11,7 @@ import {
   iconCheck,
   iconWrong,
 } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
+import '@umbraco-ui/uui-icon/lib';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -592,10 +593,14 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
         element = html`<uui-loader-circle id="loader"></uui-loader-circle>`;
         break;
       case 'success':
-        element = html`<div id="icon-check" style="">${iconCheck}</div>`;
+        element = html`<uui-icon
+          name="check"
+          .fallback=${iconCheck.strings[0]}></uui-icon>`;
         break;
       case 'failed':
-        element = html`<div id="icon-wrong" style="">${iconWrong}</div>`;
+        element = html`<uui-icon
+          name="wrong"
+          .fallback=${iconWrong.strings[0]}></uui-icon>`;
         break;
       default:
         return '';

packages/uui-icon-registry-essential/lib/uui-icon-registry-essential.test.ts

@@ -1,6 +1,7 @@
 import { html, fixture, expect } from '@open-wc/testing';
 import { UUIIconRegistryEssentialElement } from './uui-icon-registry-essential.element';
 import '.';
+import { UUIIconElement } from '@umbraco-ui/uui-icon/lib';
 
 describe('UUIIconRegistryEssentialElement', () => {
   let element: UUIIconRegistryEssentialElement;
@@ -14,4 +15,23 @@ describe('UUIIconRegistryEssentialElement', () => {
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });
+
+  describe('UUIIcon retrieves SVG data from icon registry', () => {
+    let registryElement: UUIIconRegistryEssentialElement;
+    let iconElement: UUIIconElement;
+
+    beforeEach(async () => {
+      registryElement = await fixture(
+        html`<uui-icon-registry-essential
+          ><uui-icon name="check"></uui-icon
+        ></uui-icon-registry-essential>`
+      );
+
+      iconElement = registryElement.querySelector('uui-icon') as UUIIconElement;
+    });
+
+    it('Child uui-icon retrieved some SVG data', () => {
+      expect(iconElement.shadowRoot!.querySelector('svg')).to.exist;
+    });
+  });
 });

packages/uui-icon-registry/lib/uui-icon-registry.element.ts

@@ -11,6 +11,8 @@ import { UUIIconRegistry } from './UUIIconRegistry';
 export class UUIIconRegistryElement extends LitElement {
   /**
    * Provide a Dictionary/Record/Object where key is the icon name and the value is the SVGs to define in the icon registry.
+   * @type {Record<string, string>}
+   * @default {}
    */
   @property({ attribute: false })
   private _icons: Record<string, string> = {};
@@ -20,38 +22,28 @@ export class UUIIconRegistryElement extends LitElement {
   set icons(icons) {
     this._icons = icons;
     if (this._registry) {
-      this.defineIconsInRegistry();
+      Object.entries(this._icons).forEach(([key, value]) =>
+        this._registry.defineIcon(key, value)
+      );
     }
   }
 
-  private defineIconsInRegistry() {
-    Object.entries(this._icons).forEach(([key, value]) =>
-      this._registry.defineIcon(key, value)
-    );
-  }
-
   private _registry: UUIIconRegistry = new UUIIconRegistry();
 
   public get registry(): UUIIconRegistry {
     return this._registry;
   }
   public set registry(newRegistry: UUIIconRegistry) {
-    if (this.shadowRoot) {
-      if (this.registry) {
-        this.registry.detach(this);
-      }
-      newRegistry.attach(this);
+    if (this.registry) {
+      this.registry.detach(this);
     }
+    newRegistry.attach(this);
     this._registry = newRegistry;
   }
 
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.registry.attach(this);
-  }
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.registry.detach(this);
+  constructor() {
+    super();
+    this._registry.attach(this);
   }
 
   render() {

packages/uui-icon/lib/uui-icon.element.ts

@@ -28,6 +28,7 @@ export class UUIIconElement extends LitElement {
   ];
 
   private _name: string | null = null;
+  private _retrievedNameIcon: boolean = false;
 
   @state()
   private _nameSvg: string | null = null;
@@ -45,7 +46,9 @@ export class UUIIconElement extends LitElement {
   }
   set name(newValue) {
     this._name = newValue;
-    this.requestIcon();
+    if (this.shadowRoot) {
+      this.requestIcon();
+    }
   }
   private requestIcon() {
     if (this._name !== '' && this._name !== null) {
@@ -54,11 +57,13 @@ export class UUIIconElement extends LitElement {
       });
       this.dispatchEvent(event);
       if (event.icon !== null) {
+        this._retrievedNameIcon = true;
         event.icon.then((iconSvg: string) => {
           this._useFallback = false;
           this._nameSvg = iconSvg;
         });
       } else {
+        this._retrievedNameIcon = false;
         this._useFallback = true;
       }
     }
@@ -87,15 +92,20 @@ export class UUIIconElement extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    if (this._name !== '' && this._name !== null) {
-      if (this._nameSvg === null) {
-        this.requestIcon();
-      }
+    if (this._retrievedNameIcon === false) {
+      this.requestIcon();
     }
   }
 
   disconnectedCallback(): void {
-    this._nameSvg = null;
+    this._retrievedNameIcon = false;
+  }
+
+  firstUpdated() {
+    // Registry might not have been created then this icon was connected, so therefor we will make another attempt to retrieve the icon.
+    if (this._retrievedNameIcon === false) {
+      this.requestIcon();
+    }
   }
 
   render() {