feat: design-system-provider now paints CSS color and background color (

#3278) * wiring and testing behavior * add code-comments * bring changes over to components-msft * pretty pretty * update documentation
microsoft · Jun 11, 2020 · 8e97ac4 · 8e97ac4
1 parent 763054f
commit 8e97ac4
Show file tree

Hide file tree

Showing 17 changed files with 126 additions and 32 deletions.
diff --git a/packages/web-components/fast-components-msft/.storybook/preview-head.html b/packages/web-components/fast-components-msft/.storybook/preview-head.html
@@ -0,0 +1,16 @@
+<style>
+    html,
+    body,
+    #root {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    fast-design-system-provider {
+        flex-grow: 1;
+        overflow: auto;
+        padding: calc(var(--design-unit) * 2px);
+    }
+</style>
diff --git a/packages/web-components/fast-components-msft/.storybook/theme.js b/packages/web-components/fast-components-msft/.storybook/theme.js
@@ -0,0 +1,5 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+    brandTitle: "FAST components MSFT storybook",
+});
diff --git a/packages/web-components/fast-components-msft/docs/api-report.md b/packages/web-components/fast-components-msft/docs/api-report.md
@@ -161,6 +161,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements Om
     neutralOutlineRestDelta: number;
     // (undocumented)
     neutralPalette: string[];
+    noPaint: boolean;
     // (undocumented)
     outlineWidth: number;
     // (undocumented)

diff --git a/packages/web-components/fast-components-msft/src/design-system-provider/index.ts b/packages/web-components/fast-components-msft/src/design-system-provider/index.ts
@@ -1,17 +1,32 @@
-import { nullableNumberConverter } from "@microsoft/fast-element";
+import { attr, css, nullableNumberConverter } from "@microsoft/fast-element";
 import {
     DensityOffset,
     DesignSystem,
     DesignSystemDefaults,
+    neutralForegroundRest,
 } from "@microsoft/fast-components-styles-msft";
 import {
+    CSSCustomPropertyBehavior,
     designSystemProperty,
-    designSystemProvider,
     DesignSystemProvider,
+    designSystemProvider,
     DesignSystemProviderTemplate as template,
 } from "@microsoft/fast-foundation";
 import { DesignSystemProviderStyles as styles } from "./design-system-provider.styles";
 
+const color = new CSSCustomPropertyBehavior(
+    "neutral-foreground-rest",
+    neutralForegroundRest,
+    (el: FASTDesignSystemProvider) => el
+);
+
+const backgroundStyles = css`
+    :host {
+        background-color: var(--background-color);
+        color: ${color.var};
+    }
+`.withBehaviors(color);
+
 @designSystemProvider({
     name: "fast-design-system-provider",
     template,
@@ -27,6 +42,24 @@ export class FASTDesignSystemProvider extends DesignSystemProvider
             | "neutralForegroundDarkIndex"
             | "neutralForegroundLightIndex"
         > {
+    /**
+     * Used to instruct the FASTDesignSystemProvider
+     * that it should not set the CSS
+     * background-color and color properties
+     *
+     * @remarks
+     * HTML boolean boolean attribute: no-paint
+     */
+    @attr({ attribute: "no-paint", mode: "boolean" })
+    public noPaint = false;
+    private noPaintChanged() {
+        if (!this.noPaint && this.backgroundColor !== void 0) {
+            this.$fastController.addStyles(backgroundStyles);
+        } else {
+            this.$fastController.removeStyles(backgroundStyles);
+        }
+    }
+
     /**
      * Define design system property attributes
      */
@@ -35,6 +68,11 @@ export class FASTDesignSystemProvider extends DesignSystemProvider
         default: DesignSystemDefaults.backgroundColor,
     })
     public backgroundColor: string;
+    private backgroundColorChanged() {
+        // If background changes or is removed, we need to
+        // re-evaluate whether we should have paint styles applied
+        this.noPaintChanged();
+    }
 
     @designSystemProperty({
         attribute: "accent-base-color",

diff --git a/packages/web-components/fast-components-msft/temp/api-report.md b/packages/web-components/fast-components-msft/temp/api-report.md
@@ -161,6 +161,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements Om
     neutralOutlineRestDelta: number;
     // (undocumented)
     neutralPalette: string[];
+    noPaint: boolean;
     // (undocumented)
     outlineWidth: number;
     // (undocumented)

diff --git a/packages/web-components/fast-components/.storybook/preview-head.html b/packages/web-components/fast-components/.storybook/preview-head.html
@@ -1,9 +1,16 @@
 <style>
-    body {
-        background-color: #181818;
+    html,
+    body,
+    #root {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
     }
-
-    h1, h2, h3, h4, h5, h6 {
-        color: #FFF;
+
+    fast-design-system-provider {
+        flex-grow: 1;
+        overflow: auto;
+        padding: calc(var(--design-unit) * 2px);
     }
 </style>
diff --git a/packages/web-components/fast-components/.storybook/theme.js b/packages/web-components/fast-components/.storybook/theme.js
@@ -1,9 +1,5 @@
 import { create } from "@storybook/theming/create";
 
 export default create({
-    base: "dark",
-    colorPrimary: "#DA1A5F",
-    appContentBg: "#181818",
-    textColor: "#FFF",
     brandTitle: "FAST components storybook",
 });
diff --git a/packages/web-components/fast-components/docs/api-report.md b/packages/web-components/fast-components/docs/api-report.md
@@ -316,6 +316,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements FA
     // (undocumented)
     neutralOutlineRestDelta: number;
     neutralPalette: string[];
+    noPaint: boolean;
     // (undocumented)
     outlineWidth: number;
     // (undocumented)

diff --git a/packages/web-components/fast-components/src/design-system-provider/index.ts b/packages/web-components/fast-components/src/design-system-provider/index.ts
@@ -1,20 +1,53 @@
-import { nullableNumberConverter } from "@microsoft/fast-element";
+import { attr, css, nullableNumberConverter } from "@microsoft/fast-element";
 import {
+    CSSCustomPropertyBehavior,
     designSystemProperty,
-    designSystemProvider,
     DesignSystemProvider,
+    designSystemProvider,
     DesignSystemProviderTemplate as template,
 } from "@microsoft/fast-foundation";
 import { FASTDesignSystem, fastDesignSystemDefaults } from "../fast-design-system";
+import { neutralForegroundRest } from "../color";
 import { DesignSystemProviderStyles as styles } from "./design-system-provider.styles";
 
+const color = new CSSCustomPropertyBehavior(
+    "neutral-foreground-rest",
+    neutralForegroundRest,
+    (el: FASTDesignSystemProvider) => el
+);
+
+const backgroundStyles = css`
+    :host {
+        background-color: var(--background-color);
+        color: ${color.var};
+    }
+`.withBehaviors(color);
+
 @designSystemProvider({
     name: "fast-design-system-provider",
     template,
     styles,
 })
 export class FASTDesignSystemProvider extends DesignSystemProvider
     implements FASTDesignSystem {
+    /**
+     * Used to instruct the FASTDesignSystemProvider
+     * that it should not set the CSS
+     * background-color and color properties
+     *
+     * @remarks
+     * HTML boolean boolean attribute: no-paint
+     */
+    @attr({ attribute: "no-paint", mode: "boolean" })
+    public noPaint = false;
+    private noPaintChanged() {
+        if (!this.noPaint && this.backgroundColor !== void 0) {
+            this.$fastController.addStyles(backgroundStyles);
+        } else {
+            this.$fastController.removeStyles(backgroundStyles);
+        }
+    }
+
     /**
      * Define design system property attributes
      */
@@ -23,6 +56,11 @@ export class FASTDesignSystemProvider extends DesignSystemProvider
         default: fastDesignSystemDefaults.backgroundColor,
     })
     public backgroundColor: string;
+    private backgroundColorChanged() {
+        // If background changes or is removed, we need to
+        // re-evaluate whether we should have paint styles applied
+        this.noPaintChanged();
+    }
 
     /**
      * This color is intended to be the *source color* of the FASTDesignSystem.accentPalette.

diff --git a/packages/web-components/fast-components/temp/api-report.md b/packages/web-components/fast-components/temp/api-report.md
@@ -316,6 +316,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements FA
     // (undocumented)
     neutralOutlineRestDelta: number;
     neutralPalette: string[];
+    noPaint: boolean;
     // (undocumented)
     outlineWidth: number;
     // (undocumented)

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -197,13 +197,13 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
     constructor(
     name: string,
     value: CSSCustomPropertyDefinition["value"],
-    host: (source: typeof FASTElement & HTMLElement) => Partial<CSSCustomPropertyTarget> | null);
+    host: (source: HTMLElement) => Partial<CSSCustomPropertyTarget> | null);
     // @internal
-    bind(source: typeof FASTElement & HTMLElement): void;
+    bind(source: HTMLElement): void;
     readonly name: CSSCustomPropertyDefinition["name"];
     readonly propertyName: string;
     // @internal
-    unbind(source: typeof FASTElement & HTMLElement): void;
+    unbind(source: HTMLElement): void;
     readonly value: CSSCustomPropertyDefinition["value"];
     readonly var: string;
 }

diff --git a/packages/web-components/fast-foundation/docs/guide/aspnet.doc.md b/packages/web-components/fast-foundation/docs/guide/aspnet.doc.md
@@ -100,7 +100,6 @@ For a splash of style, add the following to your `wwwroot/css/site.css` file:
 
 fast-design-system-provider {
   display: inline-block;
-  color: var(--neutral-foreground-rest);
 }
 
 fast-card {

diff --git a/packages/web-components/fast-foundation/docs/guide/aurelia.doc.md b/packages/web-components/fast-foundation/docs/guide/aurelia.doc.md
@@ -77,7 +77,6 @@ To add a splash of style, replace your `my-app.css` content with this:
 ```css
 fast-design-system-provider {
   display: inline-block;
-  color: var(--neutral-foreground-rest);
 }
 
 fast-card {

diff --git a/packages/web-components/fast-foundation/docs/guide/blazor.doc.md b/packages/web-components/fast-foundation/docs/guide/blazor.doc.md
@@ -82,7 +82,6 @@ For a splash of style, add the following to your `wwwroot/css/app.css` file:
 ```css
 fast-design-system-provider {
   display: inline-block;
-  color: var(--neutral-foreground-rest);
 }
 
 fast-card {

diff --git a/packages/web-components/fast-foundation/docs/guide/webpack.doc.md b/packages/web-components/fast-foundation/docs/guide/webpack.doc.md
@@ -192,7 +192,6 @@ This code imports the `<fast-design-system-provider>` component as well as the `
     
     fast-design-system-provider {
       display: inline-block;
-      color: var(--neutral-foreground-rest);
     }
 
     fast-card {

diff --git a/packages/web-components/fast-foundation/src/custom-properties/behavior.ts b/packages/web-components/fast-foundation/src/custom-properties/behavior.ts
@@ -70,9 +70,7 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
          * This element should also be responsible for resolving
          * and function value.
          */
-        host: (
-            source: typeof FASTElement & HTMLElement
-        ) => Partial<CSSCustomPropertyTarget> | null
+        host: (source: HTMLElement) => Partial<CSSCustomPropertyTarget> | null
     ) {
         this.name = name;
         this.value = value;
@@ -81,16 +79,14 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
         this.var = `var(${this.propertyName})`;
     }
 
-    private host: (
-        source: typeof FASTElement & HTMLElement
-    ) => Partial<CSSCustomPropertyTarget> | null;
+    private host: (source: HTMLElement) => Partial<CSSCustomPropertyTarget> | null;
 
     /**
      * Binds the behavior to a source element
      * @param source The source element being bound
      * @internal
      */
-    bind(source: typeof FASTElement & HTMLElement): void {
+    bind(source: HTMLElement): void {
         const target = this.host(source);
 
         if (target !== null) {
@@ -115,7 +111,7 @@ export class CSSCustomPropertyBehavior implements Behavior, CSSCustomPropertyDef
      * @param source The source element being unbound
      * @internal
      */
-    unbind(source: typeof FASTElement & HTMLElement): void {
+    unbind(source: HTMLElement): void {
         const target = this.host(source);
 
         if (target !== null && typeof target.unregisterCSSCustomProperty === "function") {

diff --git a/sites/website/src/docs/fast-foundation/getting-started.md b/sites/website/src/docs/fast-foundation/getting-started.md
@@ -31,12 +31,10 @@ If you are looking to leverage a tool like Webpack, see our [Webpack Guide](./we
 
 The [Design System Provider](fast-foundation/fast-design-system-provider.md) will provide design information to child FAST components. 
 
-By default, the background color and text color won't be set by the `fast-design-system-provider` ([but there will be a solution soon](https://github.com/microsoft/fast-dna/issues/3213)), so you'll want to apply the CSS *background-color* and *color* properties.
-
 ```html
 <!-- ... -->
 <body>
-    <fast-design-system-provider use-defaults style="background-color: var(--background-color); color: #E5E5E5;">
+    <fast-design-system-provider use-defaults>
     </fast-design-system-provider>
 </body>
 <!-- ... -->
@@ -48,7 +46,7 @@ Add any FAST elements (or any element) as a child of the `fast-design-system-pro
 
 ```html
 <!-- ... -->
-<fast-design-system-provider use-defaults style="background-color: var(--background-color); color: #E5E5E5;">
+<fast-design-system-provider use-defaults>
     <fast-button>Hello world<fast-button>
 </fast-design-system-provider>
 <!-- ... -->