diff --git a/change/@fluentui-web-components-2020-10-14-11-01-46-users-nicholasrice-update-card-background-behavior.json b/change/@fluentui-web-components-2020-10-14-11-01-46-users-nicholasrice-update-card-background-behavior.json new file mode 100644 index 00000000000000..51c924751141fd --- /dev/null +++ b/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" +} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 7c59ad3b461899..a55a30a51c337e 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -189,10 +189,8 @@ export class FluentButton extends Button { } // @public -export class FluentCard extends FluentDesignSystemProvider implements Pick { +export class FluentCard extends DesignSystemProvider implements Pick { backgroundColor: string; - // (undocumented) - protected backgroundColorChanged(): void; cardBackgroundColor: string; // (undocumented) connectedCallback(): void; diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 8564975a45e75b..354d94dc7f2bab 100644 --- a/packages/web-components/package.json +++ b/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" } } diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts index 43689eb95d54e6..1caa1e22a2e7c6 100644 --- a/packages/web-components/src/card/index.ts +++ b/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 { /** * 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'); } } diff --git a/yarn.lock b/yarn.lock index eb6bf0850936c5..29db25817939b6 100644 --- a/yarn.lock +++ b/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"