adds automatic card background color calculation based on parent cont…

…ext (#15126) * Feat: adds automatic card background color calculation * addressed PR comment * added spec back
microsoft · Sep 23, 2020 · c32b0e3 · c32b0e3
1 parent 7b57bf7
commit c32b0e3
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 8 deletions.
diff --git a/change/@fluentui-web-components-2020-09-18-12-06-28-users-jes-card-improvements.json b/change/@fluentui-web-components-2020-09-18-12-06-28-users-jes-card-improvements.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Feat: adds automatic card background color calculation",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-09-18T19:06:28.570Z"
+}
diff --git a/packages/web-components/src/card/README.md b/packages/web-components/src/card/README.md
@@ -0,0 +1,34 @@
+---
+id: card
+title: fluent-card
+sidebar_label: card
+custom_edit_url: https://github.com/microsoft/fluentui/edit/master/packages/web-components/src/card/README.md
+---
+
+The `fluent-card` component is a visual container and design system provider. By default `fluent-card` applies `neutralFillCard` to its background that is calculated from its parent design system provider. If a custom background color is desired the attribute `card-background-color` is available, this will reset the cards design system to that value. Cards are snapshots of content that are typically used in a group to present collections of related information.
+
+## Usage
+
+```html live
+<fast-design-system-provider use-defaults>
+  <fast-card>
+    <h3>Card title</h3>
+    <p>
+      At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus et
+      ultricies augue aliquet.
+    </p>
+    <fast-button>Learn more</fast-button>
+  </fast-card>
+</fast-design-system-provider>
+
+<fast-design-system-provider use-defaults>
+  <fast-card card-background-color="#FF0000">
+    <h3>Card title</h3>
+    <p>
+      At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus et
+      ultricies augue aliquet.
+    </p>
+    <fast-button>Learn more</fast-button>
+  </fast-card>
+</fast-design-system-provider>
+```
diff --git a/packages/web-components/src/card/fixtures/card.html b/packages/web-components/src/card/fixtures/card.html
@@ -1,4 +1,4 @@
-<fluent-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults background-color="#F7F7F7">
   <style>
     .class-override {
       height: 163px;
@@ -26,8 +26,33 @@
     <br />
     <fluent-card class="state-override">Custom depth on hover using CSS</fluent-card>
     <br />
-    <fluent-card background-color="#333333" style="--card-height: 400px; --card-width: 500px; color: white">
-      Custom background
+
+    <fluent-design-system-provider use-defaults background-color="#333333">
+      <fluent-card style="--card-height: 400px; --card-width: 500px; color: white">
+        Dark
+        <div class="controls">
+          <fluent-button appearance="accent">Accent</fluent-button>
+          <fluent-button appearance="stealth">Stealth</fluent-button>
+          <fluent-button appearance="outline">Outline</fluent-button>
+          <fluent-button appearance="lightweight">Lightweight</fluent-button>
+        </div>
+      </fluent-card>
+    </fluent-design-system-provider>
+
+    <fluent-design-system-provider use-defaults background-color="#FF0000">
+      <fluent-card style="--card-height: 400px; --card-width: 500px;">
+        Red
+        <div class="controls">
+          <fluent-button appearance="accent">Accent</fluent-button>
+          <fluent-button appearance="stealth">Stealth</fluent-button>
+          <fluent-button appearance="outline">Outline</fluent-button>
+          <fluent-button appearance="lightweight">Lightweight</fluent-button>
+        </div>
+      </fluent-card>
+    </fluent-design-system-provider>
+
+    <fluent-card card-background-color="#333333" style="--card-height: 400px; --card-width: 500px; color: white">
+      Custom card background
       <div class="controls">
         <fluent-button appearance="accent">Accent</fluent-button>
         <fluent-button appearance="stealth">Stealth</fluent-button>

diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts
@@ -1,6 +1,7 @@
+import { attr, Notifier, Observable } from '@microsoft/fast-element';
 import { ColorRGBA64, parseColorHexRGB } from '@microsoft/fast-colors';
 import { designSystemProperty, designSystemProvider, CardTemplate as template } from '@microsoft/fast-foundation';
-import { createColorPalette, DesignSystem } from '@microsoft/fast-components-styles-msft';
+import { createColorPalette, DesignSystem, neutralFillCard } from '@microsoft/fast-components-styles-msft';
 import { FluentDesignSystemProvider } from '../design-system-provider';
 import { CardStyles as styles } from './card.styles';
 
@@ -36,6 +37,22 @@ export class FluentCard extends FluentDesignSystemProvider
     this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64);
   }
 
+  /**
+   * Background color for the banner component. Sets context for the design system.
+   * @public
+   * @remarks
+   * HTML Attribute: background-color
+   */
+  @attr({
+    attribute: 'card-background-color',
+  })
+  public cardBackgroundColor: string;
+  private cardBackgroundColorChanged(): void {
+    const parsedColor = parseColorHexRGB(this.cardBackgroundColor);
+    this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64);
+    this.backgroundColor = this.cardBackgroundColor;
+  }
+
   /**
    * Neutral pallette for the the design system provider.
    * @internal
@@ -47,12 +64,27 @@ export class FluentCard extends FluentDesignSystemProvider
   })
   public neutralPalette: string[];
 
+  /**
+   * @internal
+   */
+  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);
+    }
+  }
+
   connectedCallback(): void {
     super.connectedCallback();
-
-    if (this.backgroundColor === undefined) {
-      this.setAttribute('use-defaults', '');
-    }
+    const desinSystemNotifier: Notifier = Observable.getNotifier(this.provider?.designSystem);
+    desinSystemNotifier.subscribe(this, 'backgroundColor');
+    desinSystemNotifier.subscribe(this, 'neutralPalette');
+    this.handleChange(this.provider?.designSystem as DesignSystem, 'backgroundColor');
   }
 }