fix: updates FluentCard to correctly resolve designSystem properties and set background-color / neutralPalette context

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"