(web-components) Fix issue loading Color Explorer values

microsoft · Jun 3, 2022 · a9be58e · a9be58e
1 parent d32031b
commit a9be58e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/change/@fluentui-web-components-80f9d773-bd90-490e-9d09-9a7c5518fa5b.json b/change/@fluentui-web-components-80f9d773-bd90-490e-9d09-9a7c5518fa5b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "(web-components) Fix issue loading Color Explorer values",
+  "packageName": "@fluentui/web-components",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/_docs/design-system/color-explorer/components/color-block.ts b/packages/web-components/src/_docs/design-system/color-explorer/components/color-block.ts
@@ -424,16 +424,11 @@ export class AppColorBlock extends FASTElement {
 
   @attr color: string;
   private colorChanged(): void {
-    this.updateColor();
+    DOM.queueUpdate(() => this.updateColor());
   }
 
   @attr({ attribute: 'layer-name' }) layerName?: string;
 
-  public connectedCallback() {
-    super.connectedCallback();
-    DOM.queueUpdate(() => this.updateColor());
-  }
-
   private updateColor(): void {
     if (this.color && this.$fastController.isConnected) {
       const color = parseColorHexRGB(this.color)!;

diff --git a/packages/web-components/src/_docs/design-system/color-explorer/components/swatch.ts b/packages/web-components/src/_docs/design-system/color-explorer/components/swatch.ts
@@ -102,6 +102,17 @@ export class AppSwatch extends FoundationElement {
   public connectedCallback() {
     super.connectedCallback();
 
+    const fillColorChangeHandler = () => {
+      this.updateObservables();
+    };
+
+    fillColor.subscribe(
+      {
+        handleChange: fillColorChangeHandler,
+      },
+      this,
+    );
+
     this.updateObservables();
   }