fix: updates FluentCard to correctly resolve designSystem properties …

…and set background-color / neutralPalette context (#15509)

* update FAST dependencies

* remove un-necessary palette generation

* Change files

* add implements DesignSystem back in

* update api report

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>

change/@fluentui-web-components-2020-10-14-11-01-46-users-nicholasrice-update-card-background-behavior.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "remove un-necessary palette generation",
+  "packageName": "@fluentui/web-components",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-14T18:01:46.084Z"
+}

packages/web-components/docs/api-report.md

@@ -189,10 +189,8 @@ export class FluentButton extends Button {
 }
 
 // @public
-export class FluentCard extends FluentDesignSystemProvider implements Pick<DesignSystem, 'backgroundColor' | 'neutralPalette'> {
+export class FluentCard extends DesignSystemProvider implements Pick<DesignSystem, 'backgroundColor' | 'neutralPalette'> {
     backgroundColor: string;
-    // (undocumented)
-    protected backgroundColorChanged(): void;
     cardBackgroundColor: string;
     // (undocumented)
     connectedCallback(): void;

packages/web-components/package.json

@@ -94,8 +94,8 @@
   "dependencies": {
     "@microsoft/fast-colors": "^5.1.0",
     "@microsoft/fast-components-styles-msft": "^4.29.0",
-    "@microsoft/fast-element": "^0.19.0",
-    "@microsoft/fast-foundation": "^1.8.0",
+    "@microsoft/fast-element": "^0.19.1",
+    "@microsoft/fast-foundation": "^1.8.1",
     "tslib": "^1.13.0"
   }
 }

packages/web-components/src/card/index.ts

@@ -1,8 +1,12 @@
 import { attr, Notifier, Observable } from '@microsoft/fast-element';
 import { parseColorHexRGB } from '@microsoft/fast-colors';
-import { designSystemProperty, designSystemProvider, CardTemplate as template } from '@microsoft/fast-foundation';
+import {
+  designSystemProperty,
+  DesignSystemProvider,
+  designSystemProvider,
+  CardTemplate as template,
+} from '@microsoft/fast-foundation';
 import { createColorPalette, DesignSystem, neutralFillCard } from '@microsoft/fast-components-styles-msft';
-import { FluentDesignSystemProvider } from '../design-system-provider';
 import { CardStyles as styles } from './card.styles';
 
 /**
@@ -22,7 +26,7 @@ import { CardStyles as styles } from './card.styles';
     mode: 'closed',
   },
 })
-export class FluentCard extends FluentDesignSystemProvider
+export class FluentCard extends DesignSystemProvider
   implements Pick<DesignSystem, 'backgroundColor' | 'neutralPalette'> {
   /**
    * Background color for the banner component. Sets context for the design system.
@@ -35,13 +39,6 @@ export class FluentCard extends FluentDesignSystemProvider
     default: '#FFFFFF',
   })
   public backgroundColor: string;
-  protected backgroundColorChanged(): void {
-    const parsedColor = parseColorHexRGB(this.backgroundColor);
-
-    if (parsedColor !== null) {
-      this.neutralPalette = createColorPalette(parsedColor);
-    }
-  }
 
   /**
    * Background color for the banner component. Sets context for the design system.
@@ -53,12 +50,16 @@ export class FluentCard extends FluentDesignSystemProvider
     attribute: 'card-background-color',
   })
   public cardBackgroundColor: string;
-  private cardBackgroundColorChanged(): void {
-    const parsedColor = parseColorHexRGB(this.cardBackgroundColor);
+  private cardBackgroundColorChanged(prev: string | void, next: string | void): void {
+    if (next) {
+      const parsedColor = parseColorHexRGB(this.cardBackgroundColor);
 
-    if (parsedColor !== null) {
-      this.neutralPalette = createColorPalette(parsedColor);
-      this.backgroundColor = this.cardBackgroundColor;
+      if (parsedColor !== null) {
+        this.neutralPalette = createColorPalette(parsedColor);
+        this.backgroundColor = this.cardBackgroundColor;
+      }
+    } else if (this.provider && this.provider.designSystem) {
+      this.handleChange(this.provider.designSystem as DesignSystem, 'backgroundColor');
     }
   }
 
@@ -84,9 +85,9 @@ export class FluentCard extends FluentDesignSystemProvider
 
   connectedCallback(): void {
     super.connectedCallback();
-    const designSystemNotifier: Notifier = Observable.getNotifier(this.provider?.designSystem);
-    designSystemNotifier.subscribe(this, 'backgroundColor');
-    designSystemNotifier.subscribe(this, 'neutralPalette');
+    const parentDSNotifier: Notifier = Observable.getNotifier(this.provider?.designSystem);
+    parentDSNotifier.subscribe(this, 'backgroundColor');
+    parentDSNotifier.subscribe(this, 'neutralPalette');
     this.handleChange(this.provider?.designSystem as DesignSystem, 'backgroundColor');
   }
 }

yarn.lock

@@ -2395,18 +2395,18 @@
     "@microsoft/fast-jss-utilities" "^4.8.0"
     "@microsoft/fast-web-utilities" "^4.6.0"
 
-"@microsoft/fast-element@^0.19.0":
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.19.0.tgz#f5abbe9facba7488f1df68ce4400caa10358c1b0"
-  integrity sha512-YGVYvENaQBURZXSuHAoO0d3tbOz9HtmUHYJsA75Dszrq6UVaV/EAIDeFe8isqTkTIz/4HyzldFfsjVrvmWYljA==
+"@microsoft/fast-element@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.19.1.tgz#7b7cddc844168eb168f75e41ea63d23d942667cb"
+  integrity sha512-qfEqj4s7E3B0qsNRoiQyKF682fdpEbCINV/GS6tE/ZOFC/B0CKpcZjk3mWyw8XAfsLA50E4YuR9Hn8SuMc2sFg==
 
-"@microsoft/fast-foundation@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.8.0.tgz#8bf1f0ec461557add1f7c89bc04cbcfa11e47a1c"
-  integrity sha512-Q3gthzOXUjNyMo60JgXk2N7mPz0wSK/6Q0eljgIA1YVsZjsJVnhm22ipWkPpSNqXpoa1y7gGn4ky98BeXzYcVw==
+"@microsoft/fast-foundation@^1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.8.1.tgz#9123a0f0dc0420ccff9554789b16f844ca0e9c8d"
+  integrity sha512-eWgp/RsSwCsJHfE/ljS0eTFLlnK0xCaJkjRIzjZN1cdBMDP7EJ+3XfxLsJBQ8tPLKlTjDfIrgnCGfO4GVe6Ggg==
   dependencies:
-    "@microsoft/fast-element" "^0.19.0"
-    "@microsoft/fast-web-utilities" "^4.6.0"
+    "@microsoft/fast-element" "^0.19.1"
+    "@microsoft/fast-web-utilities" "^4.6.1"
     "@microsoft/tsdoc-config" "^0.13.4"
     tabbable "^4.0.0"
     tslib "^1.13.0"
@@ -2437,6 +2437,13 @@
   dependencies:
     exenv-es6 "^1.0.0"
 
+"@microsoft/fast-web-utilities@^4.6.1":
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-4.6.1.tgz#91c39bbd8499009c9e569d1aa309da17efcf9297"
+  integrity sha512-EL1v1xmQlQs5qwPM6gzwQXUgIHtRgKXmHajQJmsUvS0rm8rCu3kvp1eEq3okXuKjPjzToFusOgVapzi5ibjpbA==
+  dependencies:
+    exenv-es6 "^1.0.0"
+
 "@microsoft/load-themed-styles@1.10.26", "@microsoft/load-themed-styles@^1.10.26":
   version "1.10.26"
   resolved "https://registry.yarnpkg.com/@microsoft/load-themed-styles/-/load-themed-styles-1.10.26.tgz#95673415103564e5427ca0d43f41da5cc44f29dc"