From 45c8f4a51ef4829b2f5cba7211418d0dfd1fd511 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 3 Jun 2021 19:45:17 +0200
Subject: [PATCH] Add props default values, update Docs

---
 packages/components/src/surface/README.md | 38 ++++++++++++++---------
 packages/components/src/surface/hook.js   | 10 +++---
 packages/components/src/surface/types.ts  | 16 ++++++++++
 3 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/surface/README.md b/packages/components/src/surface/README.md
index d04e399f77cb8..8017353b7d63a 100644
--- a/packages/components/src/surface/README.md
+++ b/packages/components/src/surface/README.md
@@ -27,48 +27,58 @@ function Example() {
 
 ## Props
 
-##### backgroundSize
+### `backgroundSize`: number
 
-**Type**: `number`
+- Required: No
+- Default: `12`
 
 Determines the grid size for "dotted" and "grid" variants.
 
-##### border
+### `border`: `boolean`
 
-**Type**: `boolean`
+- Required: No
+- Default: `false`
 
 Renders a border around the entire `Surface`.
 
-##### borderBottom
+### `borderBottom`: `boolean`
 
-**Type**: `boolean`
+- Required: No
+- Default: `false`
 
 Renders a bottom border.
 
-##### borderLeft
+### `borderLeft`: `boolean`
 
-**Type**: `boolean`
+- Required: No
+- Default: `false`
 
 Renders a left border.
 
-##### borderRight
+### `borderRight`: `boolean`
 
-**Type**: `boolean`
+- Required: No
+- Default: `false`
 
 Renders a right border.
 
-##### borderTop
+### `borderTop`: `boolean`
 
-**Type**: `boolean`
+- Required: No
+- Default: `false`
 
 Renders a top border.
 
-##### variant
+### `variant`: `string`
 
-**Type**: `"grid"`,`"primary"`,`"secondary"`,`"tertiary"`,`"dotted"`
+- Required: No
+- Default: `false`
+- Allowed values: `primary`, `secondary`, `tertiary`, `dotted`, `grid`
 
 Modifies the background color of `Surface`.
 
 -   `primary`: Used for almost all cases.
 -   `secondary`: Used as a secondary background for inner `Surface` components.
 -   `tertiary`: Used as the app/site wide background. Visible in **dark mode** only. Use case is rare.
+-   `grid`: Used to show a grid.
+-   `dotted`: Used to show a dots grid.
diff --git a/packages/components/src/surface/hook.js b/packages/components/src/surface/hook.js
index d7b5152c13a90..e4dd555f48751 100644
--- a/packages/components/src/surface/hook.js
+++ b/packages/components/src/surface/hook.js
@@ -20,11 +20,11 @@ import * as styles from './styles';
 export function useSurface( props ) {
 	const {
 		backgroundSize = 12,
-		border,
-		borderBottom,
-		borderLeft,
-		borderRight,
-		borderTop,
+		border = false,
+		borderBottom = false,
+		borderLeft = false,
+		borderRight = false,
+		borderTop = false,
 		className,
 		variant = 'primary',
 		...otherProps
diff --git a/packages/components/src/surface/types.ts b/packages/components/src/surface/types.ts
index e00255581d69a..4d4a7e9bb2e19 100644
--- a/packages/components/src/surface/types.ts
+++ b/packages/components/src/surface/types.ts
@@ -8,26 +8,38 @@ export type SurfaceVariant =
 export type Props = {
 	/**
 	 * Determines the grid size for "dotted" and "grid" variants.
+	 *
+	 * @default 12
 	 */
 	backgroundSize?: number;
 	/**
 	 * Renders a border around the entire `Surface`.
+	 *
+	 * @default false
 	 */
 	border?: boolean;
 	/**
 	 * Renders a bottom border.
+	 *
+	 * @default false
 	 */
 	borderBottom?: boolean;
 	/**
 	 * Renders a left border.
+	 *
+	 * @default false
 	 */
 	borderLeft?: boolean;
 	/**
 	 * Renders a right border.
+	 *
+	 * @default false
 	 */
 	borderRight?: boolean;
 	/**
 	 * Renders a top border.
+	 *
+	 * @default false
 	 */
 	borderTop?: boolean;
 	/**
@@ -36,6 +48,10 @@ export type Props = {
 	 * * `primary`: Used for almost all cases.
 	 * * `secondary`: Used as a secondary background for inner `Surface` components.
 	 * * `tertiary`: Used as the app/site wide background. Visible in **dark mode** only. Use case is rare.
+	 * * `grid`: Used to show a grid.
+	 * * `dotted`: Used to show a dots grid.
+	 *
+	 * @default 'primary'
 	 */
 	variant?: SurfaceVariant;
 	/**