react-card - CardPreview top padding fix (#20030)

André Dias (he/him) · web-flow · commit 8398647cf864 · 2021-10-04T06:15:04.000+02:00
diff --git a/change/@fluentui-react-card-eef6d228-043e-411b-87c8-94969a3e7cab.json b/change/@fluentui-react-card-eef6d228-043e-411b-87c8-94969a3e7cab.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "CardPreview removes own top margin when the first element in a Card",
+  "packageName": "@fluentui/react-card",
+  "email": "andredias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-card/src/components/Card.stories.tsx b/packages/react-card/src/components/Card.stories.tsx
@@ -96,7 +96,7 @@ export const GridviewCard = () => (
       maxWidth: '368px',
     }}
   >
-    <CardPreview style={{ marginTop: '-12px' }}>
+    <CardPreview>
       <img src="./sales_template.png" alt="Preview of a sales slide deck" />
     </CardPreview>
     <CardHeader
diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts
@@ -20,6 +20,14 @@ const useStyles = makeStyles({
     padding: '12px',
     gap: '12px',
     borderRadius: theme.borderRadiusMedium,
+
+    '> .fluentui-react-card-preview': {
+      marginLeft: '-12px',
+      marginRight: '-12px',
+      '&:first-child': {
+        marginTop: '-12px',
+      },
+    },
   }),
 
   interactive: theme => ({
diff --git a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`CardPreview renders a default state 1`] = `
 <div>
   <div
-    class=""
+    class="fluentui-react-card-preview"
   >
     Default CardPreview
     <div
diff --git a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
@@ -30,7 +30,7 @@ const useStyles = makeStyles({
  */
 export const useCardPreviewStyles = (state: CardPreviewState): CardPreviewState => {
   const styles = useStyles();
-  state.className = mergeClasses(styles.root, state.className);
+  state.className = mergeClasses('fluentui-react-card-preview', styles.root, state.className);
 
   if (state.logo) {
     state.logo.className = mergeClasses(styles.logo, state.logo.className);

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ export const GridviewCard = () => (`
`96`	`96`	`maxWidth: '368px',`
`97`	`97`	`}}`
`98`	`98`	`>`
`99`		`- <CardPreview style={{ marginTop: '-12px' }}>`
	`99`	`+ <CardPreview>`
`100`	`100`	`<img src="./sales_template.png" alt="Preview of a sales slide deck" />`
`101`	`101`	`</CardPreview>`
`102`	`102`	`<CardHeader`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	exports[`CardPreview renders a default state 1`] = `
`4`	`4`	`<div>`
`5`	`5`	`<div`
`6`		`- class=""`
	`6`	`+ class="fluentui-react-card-preview"`
`7`	`7`	`>`
`8`	`8`	`Default CardPreview`
`9`	`9`	`<div`