From 6e09556ae9cd59f9174a211e6987237e8f22f54f Mon Sep 17 00:00:00 2001 From: Nicholas Rice <3213292+nicholasrice@users.noreply.github.com> Date: Fri, 9 Oct 2020 10:13:59 -0700 Subject: [PATCH] fix: correct palette generation behavior in Card (#15429) * removes palette generation for every card and adds better null checking to avoid runtime errors * Change files * remove type coersion Co-authored-by: nicholasrice --- ...holasrice-fix-card-palette-generation.json | 8 ++++++ .../web-components/src/card/card.stories.ts | 9 ++++++ .../src/card/fixtures/card.html | 2 +- packages/web-components/src/card/index.ts | 28 +++++++++---------- 4 files changed, 32 insertions(+), 15 deletions(-) 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 0000000000000..e1f38c0c1e451 --- /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" +} diff --git a/packages/web-components/src/card/card.stories.ts b/packages/web-components/src/card/card.stories.ts index ccfb4727bf02b..92cfc35a50966 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 f120a3c597556..4aae911709df1 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 9a50c04ae0dfc..43689eb95d54e 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'; @@ -37,7 +37,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); + } } /** @@ -52,8 +55,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); + this.backgroundColor = this.cardBackgroundColor; + } } /** @@ -72,21 +78,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'); } }