Skip to content

Commit

Permalink
feat: design-system-provider now paints CSS color and background color (
Browse files Browse the repository at this point in the history
#3278)

* wiring and testing behavior

* add code-comments

* bring changes over to components-msft

* pretty pretty

* update documentation
  • Loading branch information
nicholasrice authored Jun 11, 2020
1 parent 763054f commit 8e97ac4
Show file tree
Hide file tree
Showing 17 changed files with 126 additions and 32 deletions.
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { create } from "@storybook/theming/create";

export default create({
brandTitle: "FAST components MSFT storybook",
});
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements Om
neutralOutlineRestDelta: number;
// (undocumented)
neutralPalette: string[];
noPaint: boolean;
// (undocumented)
outlineWidth: number;
// (undocumented)
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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
*/
Expand All @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements Om
neutralOutlineRestDelta: number;
// (undocumented)
neutralPalette: string[];
noPaint: boolean;
// (undocumented)
outlineWidth: number;
// (undocumented)
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 0 additions & 4 deletions packages/web-components/fast-components/.storybook/theme.js
Original file line number Diff line number Diff line change
@@ -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",
});
1 change: 1 addition & 0 deletions packages/web-components/fast-components/docs/api-report.md
Original file line number Diff line number Diff line change
Expand Up @@ -316,6 +316,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements FA
// (undocumented)
neutralOutlineRestDelta: number;
neutralPalette: string[];
noPaint: boolean;
// (undocumented)
outlineWidth: number;
// (undocumented)
Expand Down
Original file line number Diff line number Diff line change
@@ -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
*/
Expand All @@ -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.
Expand Down
1 change: 1 addition & 0 deletions packages/web-components/fast-components/temp/api-report.md
Original file line number Diff line number Diff line change
Expand Up @@ -316,6 +316,7 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements FA
// (undocumented)
neutralOutlineRestDelta: number;
neutralPalette: string[];
noPaint: boolean;
// (undocumented)
outlineWidth: number;
// (undocumented)
Expand Down
6 changes: 3 additions & 3 deletions packages/web-components/fast-foundation/docs/api-report.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {
Expand All @@ -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") {
Expand Down
6 changes: 2 additions & 4 deletions sites/website/src/docs/fast-foundation/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
<!-- ... -->
Expand All @@ -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>
<!-- ... -->
Expand Down

0 comments on commit 8e97ac4

Please sign in to comment.