fix: design system property inheritance

microsoft · Sep 17, 2020 · 9760443 · 9760443
1 parent 8912d32
commit 9760443
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/change/@fluentui-web-components-2020-09-17-15-15-13-users-jes-card-fix.json b/change/@fluentui-web-components-2020-09-17-15-15-13-users-jes-card-fix.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "fix design system properties inheritance",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-09-17T22:15:13.616Z"
+}
diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts
@@ -1,7 +1,7 @@
-import { customElement } from '@microsoft/fast-element';
 import { ColorRGBA64, parseColorHexRGB } from '@microsoft/fast-colors';
-import { designSystemProperty, DesignSystemProvider, CardTemplate as template } from '@microsoft/fast-foundation';
+import { designSystemProperty, designSystemProvider, CardTemplate as template } from '@microsoft/fast-foundation';
 import { createColorPalette, DesignSystem } from '@microsoft/fast-components-styles-msft';
+import { FluentDesignSystemProvider } from '..';
 import { CardStyles as styles } from './card.styles';
 
 /**
@@ -13,12 +13,12 @@ import { CardStyles as styles } from './card.styles';
  * @remarks
  * HTML Element: \<fluent-card\>
  */
-@customElement({
+@designSystemProvider({
   name: 'fluent-card',
   template,
   styles,
 })
-export class FluentCard extends DesignSystemProvider
+export class FluentCard extends FluentDesignSystemProvider
   implements Pick<DesignSystem, 'backgroundColor' | 'neutralPalette'> {
   /**
    * Background color for the banner component. Sets context for the design system.
@@ -31,7 +31,7 @@ export class FluentCard extends DesignSystemProvider
     default: '#FFFFFF',
   })
   public backgroundColor: string;
-  private backgroundColorChanged(): void {
+  protected backgroundColorChanged(): void {
     const parsedColor = parseColorHexRGB(this.backgroundColor);
     this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64);
   }

diff --git a/packages/web-components/src/design-system-provider/index.ts b/packages/web-components/src/design-system-provider/index.ts
@@ -71,7 +71,7 @@ export class FluentDesignSystemProvider extends DesignSystemProvider
     default: DesignSystemDefaults.backgroundColor,
   })
   public backgroundColor: string;
-  private backgroundColorChanged() {
+  protected backgroundColorChanged(): void {
     // If background changes or is removed, we need to
     // re-evaluate whether we should have paint styles applied
     this.noPaintChanged();