From ba03f7c93e7dc587b60e76b954d8953030600956 Mon Sep 17 00:00:00 2001 From: nicholasrice Date: Thu, 8 Oct 2020 10:28:37 -0700 Subject: [PATCH 1/3] removes palette generation for every card and adds better null checking to avoid runtime errors --- .../web-components/src/card/card.stories.ts | 9 +++++++ .../src/card/fixtures/card.html | 2 +- packages/web-components/src/card/index.ts | 26 +++++++++---------- 3 files changed, 23 insertions(+), 14 deletions(-) diff --git a/packages/web-components/src/card/card.stories.ts b/packages/web-components/src/card/card.stories.ts index ccfb4727bf02b2..92cfc35a50966f 100644 --- 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 index f120a3c5975567..4aae911709df17 100644 --- a/packages/web-components/src/card/fixtures/card.html +++ b/packages/web-components/src/card/fixtures/card.html @@ -39,7 +39,7 @@ - + Red
diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts index c2dbb7a426dd32..fdb9d1f6bd2c79 100644 --- a/packages/web-components/src/card/index.ts +++ b/packages/web-components/src/card/index.ts @@ -34,7 +34,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 as ColorRGBA64); + } } /** @@ -49,8 +52,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 as ColorRGBA64); // This palette should *probably* come from the parent. Also, I'm not sure that + this.backgroundColor = this.cardBackgroundColor; + } } /** @@ -69,21 +75,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'); } } From ebbcea8552fbf76e4583c1e7266e86376171683a Mon Sep 17 00:00:00 2001 From: nicholasrice Date: Thu, 8 Oct 2020 10:29:03 -0700 Subject: [PATCH 2/3] Change files --- ...03-users-nicholasrice-fix-card-palette-generation.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 change/@fluentui-web-components-2020-10-08-10-29-03-users-nicholasrice-fix-card-palette-generation.json diff --git a/change/@fluentui-web-components-2020-10-08-10-29-03-users-nicholasrice-fix-card-palette-generation.json b/change/@fluentui-web-components-2020-10-08-10-29-03-users-nicholasrice-fix-card-palette-generation.json new file mode 100644 index 00000000000000..e1f38c0c1e4518 --- /dev/null +++ b/change/@fluentui-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": "nicholasrice@users.noreply.github.com", + "dependentChangeType": "patch", + "date": "2020-10-08T17:29:03.955Z" +} From d8ad6b4a8a914821564f7b391eba2861169fc714 Mon Sep 17 00:00:00 2001 From: nicholasrice Date: Thu, 8 Oct 2020 10:38:14 -0700 Subject: [PATCH 3/3] remove type coersion --- packages/web-components/src/card/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts index fdb9d1f6bd2c79..f96a776f94de63 100644 --- 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'; @@ -36,7 +36,7 @@ export class FluentCard extends FluentDesignSystemProvider const parsedColor = parseColorHexRGB(this.backgroundColor); if (parsedColor !== null) { - this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64); + this.neutralPalette = createColorPalette(parsedColor); } } @@ -54,7 +54,7 @@ export class FluentCard extends FluentDesignSystemProvider const parsedColor = parseColorHexRGB(this.cardBackgroundColor); if (parsedColor !== null) { - this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64); // This palette should *probably* come from the parent. Also, I'm not sure that + this.neutralPalette = createColorPalette(parsedColor); this.backgroundColor = this.cardBackgroundColor; } }