Fix missing default prop and update snapshots for new classnames

WordPress · Jul 1, 2021 · e805987 · e805987
1 parent e0a3dc4
commit e805987
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git 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
@@ -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 {},
   ]
 `;