fix: correct palette generation behavior in Card (#15429)

* removes palette generation for every card and adds better null checking to avoid runtime errors * Change files * remove type coersion Co-authored-by: nicholasrice <[email protected]>
microsoft · Oct 9, 2020 · 6e09556 · 6e09556
1 parent fba5c1c
commit 6e09556
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/...ui-web-components-2020-10-08-10-29-03-users-nicholasrice-fix-card-palette-generation.json b/...ui-web-components-2020-10-08-10-29-03-users-nicholasrice-fix-card-palette-generation.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "removes palette generation for every card and adds better null checking to avoid runtime errors",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-08T17:29:03.955Z"
+}
diff --git a/packages/web-components/src/card/card.stories.ts b/packages/web-components/src/card/card.stories.ts
@@ -1,3 +1,5 @@
+import { createColorPalette } from '@microsoft/fast-components-styles-msft';
+import { ColorRGBA64 } from '@microsoft/fast-colors';
 import { FluentDesignSystemProvider } from '../design-system-provider';
 import CardTemplate from './fixtures/card.html';
 import { FluentCard } from './';
@@ -11,3 +13,10 @@ export default {
 };
 
 export const Card = (): string => CardTemplate;
+
+document.addEventListener('readystatechange', e => {
+  if (document.readyState === 'complete') {
+    const red = document.getElementById('red') as FluentDesignSystemProvider;
+    red.neutralPalette = createColorPalette(new ColorRGBA64(1, 0, 0));
+  }
+});
diff --git a/packages/web-components/src/card/fixtures/card.html b/packages/web-components/src/card/fixtures/card.html
@@ -39,7 +39,7 @@
       </fluent-card>
     </fluent-design-system-provider>
 
-    <fluent-design-system-provider use-defaults background-color="#FF0000">
+    <fluent-design-system-provider use-defaults background-color="#FF0000" id="red">
       <fluent-card style="--card-height: 400px; --card-width: 500px;">
         Red
         <div class="controls">

diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts
@@ -1,5 +1,5 @@
 import { attr, Notifier, Observable } from '@microsoft/fast-element';
-import { ColorRGBA64, parseColorHexRGB } from '@microsoft/fast-colors';
+import { parseColorHexRGB } from '@microsoft/fast-colors';
 import { designSystemProperty, designSystemProvider, CardTemplate as template } from '@microsoft/fast-foundation';
 import { createColorPalette, DesignSystem, neutralFillCard } from '@microsoft/fast-components-styles-msft';
 import { FluentDesignSystemProvider } from '../design-system-provider';
@@ -37,7 +37,10 @@ export class FluentCard extends FluentDesignSystemProvider
   public backgroundColor: string;
   protected backgroundColorChanged(): void {
     const parsedColor = parseColorHexRGB(this.backgroundColor);
-    this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64);
+
+    if (parsedColor !== null) {
+      this.neutralPalette = createColorPalette(parsedColor);
+    }
   }
 
   /**
@@ -52,8 +55,11 @@ export class FluentCard extends FluentDesignSystemProvider
   public cardBackgroundColor: string;
   private cardBackgroundColorChanged(): void {
     const parsedColor = parseColorHexRGB(this.cardBackgroundColor);
-    this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64);
-    this.backgroundColor = this.cardBackgroundColor;
+
+    if (parsedColor !== null) {
+      this.neutralPalette = createColorPalette(parsedColor);
+      this.backgroundColor = this.cardBackgroundColor;
+    }
   }
 
   /**
@@ -72,21 +78,15 @@ export class FluentCard extends FluentDesignSystemProvider
    */
   public handleChange(source: DesignSystem, name: string): void {
     if (!this.cardBackgroundColor) {
-      const parsedColor = parseColorHexRGB(source[name]);
-      this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64);
-      const designSystem: DesignSystem = Object.assign({}, this.designSystem, {
-        backgroundColor: source[name],
-        neutralPallette: this.neutralPalette,
-      } as any);
-      this.backgroundColor = neutralFillCard(designSystem);
+      this.backgroundColor = neutralFillCard(source);
     }
   }
 
   connectedCallback(): void {
     super.connectedCallback();
-    const desinSystemNotifier: Notifier = Observable.getNotifier(this.provider?.designSystem);
-    desinSystemNotifier.subscribe(this, 'backgroundColor');
-    desinSystemNotifier.subscribe(this, 'neutralPalette');
+    const designSystemNotifier: Notifier = Observable.getNotifier(this.provider?.designSystem);
+    designSystemNotifier.subscribe(this, 'backgroundColor');
+    designSystemNotifier.subscribe(this, 'neutralPalette');
     this.handleChange(this.provider?.designSystem as DesignSystem, 'backgroundColor');
   }
 }