Add props default values, update Docs

WordPress · Jun 3, 2021 · 45c8f4a · 45c8f4a
1 parent 1f852a7
commit 45c8f4a
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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;
 	/**