feat: convert card to be design system provider (#15068)

* Feat: convert card to be design system provider * Change files
microsoft · Sep 17, 2020 · 7ea84b6 · 7ea84b6
1 parent c1dfa56
commit 7ea84b6
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 3 deletions.
diff --git a/change/@fluentui-web-components-2020-09-16-09-06-16-users-jes-card-DSP.json b/change/@fluentui-web-components-2020-09-16-09-06-16-users-jes-card-DSP.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Feat: convert card to be design system provider",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-09-16T16:06:16.034Z"
+}
diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts
@@ -11,7 +11,7 @@ export const CardStyles = css`
     height: var(--card-height, 100%);
     width: var(--card-width, 100%);
     box-sizing: border-box;
-    background: ${neutralFillCardRestBehavior.var};
+    background: var(--background-color);
     border-radius: calc(var(--elevated-corner-radius) * 1px);
     ${elevation}
   }

diff --git a/packages/web-components/src/card/fixtures/card.html b/packages/web-components/src/card/fixtures/card.html
@@ -8,6 +8,12 @@
     .state-override:hover {
       --elevation: 12;
     }
+
+    .controls {
+      display: flex;
+      margin: 20px;
+      flex-direction: column;
+    }
   </style>
   <div>
     <fluent-card style="--card-height: 400px; --card-width: 500px;">
@@ -19,5 +25,15 @@
     </fluent-card>
     <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
+      <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>
   </div>
 </fluent-design-system-provider>
diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts
@@ -1,5 +1,7 @@
 import { customElement } from '@microsoft/fast-element';
-import { Card, CardTemplate as template } from '@microsoft/fast-foundation';
+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 { CardStyles as styles } from './card.styles';
 
 /**
@@ -16,7 +18,43 @@ import { CardStyles as styles } from './card.styles';
   template,
   styles,
 })
-export class FluentCard extends Card {}
+export class FluentCard extends DesignSystemProvider
+  implements Pick<DesignSystem, 'backgroundColor' | 'neutralPalette'> {
+  /**
+   * Background color for the banner component. Sets context for the design system.
+   * @public
+   * @remarks
+   * HTML Attribute: background-color
+   */
+  @designSystemProperty({
+    attribute: 'background-color',
+    default: '#FFFFFF',
+  })
+  public backgroundColor: string;
+  private backgroundColorChanged(): void {
+    const parsedColor = parseColorHexRGB(this.backgroundColor);
+    this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64);
+  }
+
+  /**
+   * Neutral pallette for the the design system provider.
+   * @internal
+   */
+  @designSystemProperty({
+    attribute: false,
+    default: createColorPalette(parseColorHexRGB('#FFFFFF')!),
+    cssCustomProperty: false,
+  })
+  public neutralPalette: string[];
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    if (this.backgroundColor === undefined) {
+      this.setAttribute('use-defaults', '');
+    }
+  }
+}
 
 /**
  * Styles for Card