From 97604432b9b156d1fed7a5c4bbb0adbec3eef6fb Mon Sep 17 00:00:00 2001 From: eljefe223 Date: Thu, 17 Sep 2020 15:17:23 -0700 Subject: [PATCH 1/2] fix: design system property inheritance --- ...ponents-2020-09-17-15-15-13-users-jes-card-fix.json | 8 ++++++++ packages/web-components/src/card/index.ts | 10 +++++----- .../web-components/src/design-system-provider/index.ts | 2 +- 3 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 change/@fluentui-web-components-2020-09-17-15-15-13-users-jes-card-fix.json 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 new file mode 100644 index 00000000000000..fd6da345b68b6f --- /dev/null +++ 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": "jes@microsoft.com", + "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 index 78a92719ddf226..2f517bfbb3097f 100644 --- 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: \ */ -@customElement({ +@designSystemProvider({ name: 'fluent-card', template, styles, }) -export class FluentCard extends DesignSystemProvider +export class FluentCard extends FluentDesignSystemProvider implements Pick { /** * 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 index a5636f5cc95319..abb0e65494f469 100644 --- 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(); From 14f6994c010a7776a2b7fe1bc29c6089322acc2c Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Thu, 17 Sep 2020 15:23:58 -0700 Subject: [PATCH 2/2] point to design system provider file --- packages/web-components/src/card/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts index 2f517bfbb3097f..80fe1c18524c2e 100644 --- a/packages/web-components/src/card/index.ts +++ b/packages/web-components/src/card/index.ts @@ -1,7 +1,7 @@ import { ColorRGBA64, parseColorHexRGB } from '@microsoft/fast-colors'; import { designSystemProperty, designSystemProvider, CardTemplate as template } from '@microsoft/fast-foundation'; import { createColorPalette, DesignSystem } from '@microsoft/fast-components-styles-msft'; -import { FluentDesignSystemProvider } from '..'; +import { FluentDesignSystemProvider } from '../design-system-provider'; import { CardStyles as styles } from './card.styles'; /**