[web-components] add default hover to fluent card (microsoft#15751)

* add hover and focus-within elevation change for card * Change files
SethDonohue · Nov 23, 2020 · fd1dd39 · fd1dd39
1 parent 500c459
commit fd1dd39
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/...ntui-web-components-2020-10-28-15-20-57-users-chhol-add-default-hover-to-fluent-card.json b/...ntui-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
@@ -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
@@ -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>