From fd1dd39278e80baac2250422255d96d608b43551 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Wed, 28 Oct 2020 16:15:13 -0700
Subject: [PATCH] [web-components] add default hover to fluent card (#15751)

* add hover and focus-within elevation change for card

* Change files
---
 ...users-chhol-add-default-hover-to-fluent-card.json |  8 ++++++++
 packages/web-components/src/card/card.styles.ts      |  8 ++++++++
 packages/web-components/src/card/fixtures/card.html  | 12 +++++++-----
 3 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 change/@fluentui-web-components-2020-10-28-15-20-57-users-chhol-add-default-hover-to-fluent-card.json

diff --git a/change/@fluentui-web-components-2020-10-28-15-20-57-users-chhol-add-default-hover-to-fluent-card.json b/change/@fluentui-web-components-2020-10-28-15-20-57-users-chhol-add-default-hover-to-fluent-card.json
new file mode 100644
index 00000000000000..bfe4210a8cc031
--- /dev/null
+++ b/change/@fluentui-web-components-2020-10-28-15-20-57-users-chhol-add-default-hover-to-fluent-card.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "add hover and focus-within elevation change for card",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-28T22:20:57.255Z"
+}
diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts
index fc86dc88e2083f..e1a0b239a48fe5 100644
--- a/packages/web-components/src/card/card.styles.ts
+++ b/packages/web-components/src/card/card.styles.ts
@@ -15,6 +15,14 @@ export const CardStyles = css`
     border-radius: calc(var(--elevated-corner-radius) * 1px);
     ${elevation}
   }
+
+  :host(:hover) {
+    --elevation: 8;
+  }
+
+  :host(:focus-within) {
+    --elevation: 8;
+  }
 `.withBehaviors(
   neutralFillCardRestBehavior,
   forcedColorsStylesheetBehavior(
diff --git a/packages/web-components/src/card/fixtures/card.html b/packages/web-components/src/card/fixtures/card.html
index 4aae911709df17..04efb73597e70c 100644
--- a/packages/web-components/src/card/fixtures/card.html
+++ b/packages/web-components/src/card/fixtures/card.html
@@ -5,6 +5,12 @@
       width: 300px;
     }
 
+    .state-override {
+      --card-width: 350px;
+      --card-height: 300px;
+      --elevation: 6;
+    }
+
     .state-override:hover {
       --elevation: 12;
     }
@@ -17,11 +23,7 @@
   </style>
   <div>
     <fluent-card style="--card-height: 400px; --card-width: 500px;">
-      Card with text
-    </fluent-card>
-    <br />
-    <fluent-card class="class-override" style="--elevation: 12;">
-      Custom depth with class-based height/width
+      <button>Button</button>Card with text
     </fluent-card>
     <br />
     <fluent-card class="state-override">Custom depth on hover using CSS</fluent-card>