From e805987ca04eea508bcc03068dd7eb8ee3e197cc Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Thu, 1 Jul 2021 06:58:31 -0700
Subject: [PATCH] Fix missing default prop and update snapshots for new
 classnames

---
 packages/components/src/spacer/component.tsx  | 23 +++++++++++++++++--
 .../spacer/test/__snapshots__/index.js.snap   | 16 +------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/spacer/component.tsx b/packages/components/src/spacer/component.tsx
index 5c93b8ba7ed272..7b6de8ffa70a79 100644
--- a/packages/components/src/spacer/component.tsx
+++ b/packages/components/src/spacer/component.tsx
@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
 /**
  * Internal dependencies
  */
@@ -9,10 +15,23 @@ import {
 import type { Props } from './types';
 import { SpacerView } from './styles';
 
-function Spacer( props: PolymorphicComponentProps< Props, 'div' > ) {
+const DEFAULT_PROPS = {
+	marginBottom: 2,
+};
+
+function Spacer(
+	props: PolymorphicComponentProps< Props, 'div' >,
+	forwardedRef: Ref< any >
+) {
 	const contextProps = useContextSystem( props, 'Spacer' );
 
-	return <SpacerView { ...contextProps } />;
+	return (
+		<SpacerView
+			ref={ forwardedRef }
+			{ ...DEFAULT_PROPS }
+			{ ...contextProps }
+		/>
+	);
 }
 
 /**
diff --git a/packages/components/src/spacer/test/__snapshots__/index.js.snap b/packages/components/src/spacer/test/__snapshots__/index.js.snap
index efbb6cbd02d1df..b11a8cc37124e9 100644
--- a/packages/components/src/spacer/test/__snapshots__/index.js.snap
+++ b/packages/components/src/spacer/test/__snapshots__/index.js.snap
@@ -6,7 +6,7 @@ exports[`props should render correctly 1`] = `
 }
 
 <div
-  class="emotion-0 components-spacer emotion-1 emotion-2"
+  class="components-spacer emotion-0 emotion-1"
   data-wp-c16t="true"
   data-wp-component="Spacer"
 />
@@ -22,7 +22,6 @@ Snapshot Diff:
 -     "margin": "calc(4px * 5)",
       "margin-bottom": "calc(4px * 2)",
     },
-    Object {},
   ]
 `;
 
@@ -36,7 +35,6 @@ Snapshot Diff:
 -     "margin-bottom": "calc(4px * 5)",
 +     "margin-bottom": "calc(4px * 2)",
     },
-    Object {},
   ]
 `;
 
@@ -50,7 +48,6 @@ Snapshot Diff:
       "margin-bottom": "calc(4px * 2)",
 -     "margin-left": "calc(4px * 5)",
     },
-    Object {},
   ]
 `;
 
@@ -64,7 +61,6 @@ Snapshot Diff:
       "margin-bottom": "calc(4px * 2)",
 -     "margin-right": "calc(4px * 5)",
     },
-    Object {},
   ]
 `;
 
@@ -78,7 +74,6 @@ Snapshot Diff:
       "margin-bottom": "calc(4px * 2)",
 -     "margin-top": "calc(4px * 5)",
     },
-    Object {},
   ]
 `;
 
@@ -93,7 +88,6 @@ Snapshot Diff:
 -     "margin-left": "calc(4px * 5)",
 -     "margin-right": "calc(4px * 5)",
     },
-    Object {},
   ]
 `;
 
@@ -108,7 +102,6 @@ Snapshot Diff:
 -     "margin-top": "calc(4px * 5)",
 +     "margin-bottom": "calc(4px * 2)",
     },
-    Object {},
   ]
 `;
 
@@ -122,7 +115,6 @@ Snapshot Diff:
       "margin-bottom": "calc(4px * 2)",
 -     "padding": "calc(4px * 5)",
     },
-    Object {},
   ]
 `;
 
@@ -136,7 +128,6 @@ Snapshot Diff:
       "margin-bottom": "calc(4px * 2)",
 -     "padding-bottom": "calc(4px * 5)",
     },
-    Object {},
   ]
 `;
 
@@ -150,7 +141,6 @@ Snapshot Diff:
       "margin-bottom": "calc(4px * 2)",
 -     "padding-left": "calc(4px * 5)",
     },
-    Object {},
   ]
 `;
 
@@ -164,7 +154,6 @@ Snapshot Diff:
       "margin-bottom": "calc(4px * 2)",
 -     "padding-right": "calc(4px * 5)",
     },
-    Object {},
   ]
 `;
 
@@ -178,7 +167,6 @@ Snapshot Diff:
       "margin-bottom": "calc(4px * 2)",
 -     "padding-top": "calc(4px * 5)",
     },
-    Object {},
   ]
 `;
 
@@ -193,7 +181,6 @@ Snapshot Diff:
 -     "padding-left": "calc(4px * 5)",
 -     "padding-right": "calc(4px * 5)",
     },
-    Object {},
   ]
 `;
 
@@ -208,6 +195,5 @@ Snapshot Diff:
 -     "padding-bottom": "calc(4px * 5)",
 -     "padding-top": "calc(4px * 5)",
     },
-    Object {},
   ]
 `;