components: Add Spacer

docs/manifest.json

@@ -1061,6 +1061,12 @@
 		"markdown_source": "../packages/components/src/snackbar/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Spacer",
+		"slug": "spacer",
+		"markdown_source": "../packages/components/src/spacer/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Spinner",
 		"slug": "spinner",

packages/components/src/index.js

@@ -101,6 +101,7 @@ export { default as SandBox } from './sandbox';
 export { default as SelectControl } from './select-control';
 export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';
+export { Spacer as __experimentalSpacer } from './spacer';
 export { default as Spinner } from './spinner';
 export { default as TabPanel } from './tab-panel';
 export { Text as __experimentalText } from './text';

packages/components/src/spacer/README.md

@@ -0,0 +1,112 @@
+# Spacer
+
+`Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.
+
+## Table of contents
+
+## Usage
+
+`Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`).
+
+```jsx
+import { Spacer } from '@wordpress/components';
+
+function Example() {
+	return (
+		<View>
+			<Spacer>
+				<Heading>WordPress.org</Heading>
+			</Spacer>
+			<Text>
+				Code is Poetry
+			</Text>
+		</View>
+	);
+}
+```
+
+## Props
+
+##### m
+
+**Type**: `number`
+
+Adjusts all margins.
+
+##### mb
+
+**Type**: `number`
+
+Adjusts bottom margins.
+
+##### ml
+
+**Type**: `number`
+
+Adjusts left margins.
+
+##### mr
+
+**Type**: `number`
+
+Adjusts right margins.
+
+##### mt
+
+**Type**: `number`
+
+Adjusts top margins.
+
+##### mx
+
+**Type**: `number`
+
+Adjusts left and right margins.
+
+##### my
+
+**Type**: `number`
+
+Adjusts top and bottom margins.
+
+##### p
+
+**Type**: `number`
+
+Adjusts all padding.
+
+##### pb
+
+**Type**: `number`
+
+Adjusts bottom padding.
+
+##### pl
+
+**Type**: `number`
+
+Adjusts left padding.
+
+##### pr
+
+**Type**: `number`
+
+Adjusts right padding.
+
+##### pt
+
+**Type**: `number`
+
+Adjusts top padding.
+
+##### px
+
+**Type**: `number`
+
+Adjusts left and right padding.
+
+##### py
+
+**Type**: `number`
+
+Adjusts top and bottom padding.

packages/components/src/spacer/component.ts

@@ -0,0 +1,36 @@
+/**
+ * Internal dependencies
+ */
+import { createComponent } from '../ui/utils';
+import { useSpacer } from './hook';
+
+/**
+ * `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.
+ *
+ * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`).
+ *
+ * @example
+ * ```jsx
+ * import { Spacer } from `@wordpress/components`
+ *
+ * function Example() {
+ *   return (
+ *     <View>
+ *       <Spacer>
+ *         <Heading>WordPress.org</Heading>
+ *       </Spacer>
+ *       <Text>
+ *         Code is Poetry
+ *       </Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+const Spacer = createComponent( {
+	as: 'div',
+	useHook: useSpacer,
+	name: 'Spacer',
+} );
+
+export default Spacer;

packages/components/src/spacer/hook.ts

@@ -0,0 +1,163 @@
+/**
+ * External dependencies
+ */
+import { css, cx } from 'emotion';
+
+/**
+ * Internal dependencies
+ */
+import { useContextSystem } from '../ui/context';
+// eslint-disable-next-line no-duplicate-imports
+import type { ViewOwnProps } from '../ui/context';
+import { space } from '../ui/utils/space';
+
+const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > =>
+	typeof o !== 'undefined' && o !== null;
+
+export interface SpacerProps {
+	/**
+	 * Adjusts all margins.
+	 */
+	m?: number;
+	/**
+	 * Adjusts top and bottom margins.
+	 */
+	my?: number;
+	/**
+	 * Adjusts left and right margins.
+	 */
+	mx?: number;
+	/**
+	 * Adjusts top margins.
+	 */
+	mt?: number;
+	/**
+	 * Adjusts bottom margins.
+	 *
+	 * @default 2
+	 */
+	mb?: number;
+	/**
+	 * Adjusts left margins.
+	 */
+	ml?: number;
+	/**
+	 * Adjusts right margins.
+	 */
+	mr?: number;
+	/**
+	 * Adjusts all padding.
+	 */
+	p?: number;
+	/**
+	 * Adjusts top and bottom padding.
+	 */
+	py?: number;
+	/**
+	 * Adjusts left and right padding.
+	 */
+	px?: number;
+	/**
+	 * Adjusts top padding.
+	 */
+	pt?: number;
+	/**
+	 * Adjusts bottom padding.
+	 */
+	pb?: number;
+	/**
+	 * Adjusts left padding.
+	 */
+	pl?: number;
+	/**
+	 * Adjusts right padding.
+	 */
+	pr?: number;
+}
+
+export function useSpacer( props: ViewOwnProps< SpacerProps, 'div' > ) {
+	const {
+		className,
+		m,
+		mb = 2,
+		ml,
+		mr,
+		mt,
+		mx,
+		my,
+		p,
+		pb,
+		pl,
+		pr,
+		pt,
+		px,
+		py,
+		...otherProps
+	} = useContextSystem( props, 'Spacer' );
+
+	const classes = cx(
+		isDefined( mt ) &&
+			css`
+				margin-top: ${ space( mt ) };
+			`,
+		isDefined( mb ) &&
+			css`
+				margin-bottom: ${ space( mb ) };
+			`,
+		isDefined( ml ) &&
+			css`
+				margin-left: ${ space( ml ) };
+			`,
+		isDefined( mr ) &&
+			css`
+				margin-right: ${ space( mr ) };
+			`,
+		isDefined( mx ) &&
+			css`
+				margin-left: ${ space( mx ) };
+				margin-right: ${ space( mx ) };
+			`,
+		isDefined( my ) &&
+			css`
+				margin-bottom: ${ space( my ) };
+				margin-top: ${ space( my ) };
+			`,
+		isDefined( m ) &&
+			css`
+				margin: ${ space( m ) };
+			`,
+		isDefined( pt ) &&
+			css`
+				padding-top: ${ space( pt ) };
+			`,
+		isDefined( pb ) &&
+			css`
+				padding-bottom: ${ space( pb ) };
+			`,
+		isDefined( pl ) &&
+			css`
+				padding-left: ${ space( pl ) };
+			`,
+		isDefined( pr ) &&
+			css`
+				padding-right: ${ space( pr ) };
+			`,
+		isDefined( px ) &&
+			css`
+				padding-left: ${ space( px ) };
+				padding-right: ${ space( px ) };
+			`,
+		isDefined( py ) &&
+			css`
+				padding-bottom: ${ space( py ) };
+				padding-top: ${ space( py ) };
+			`,
+		isDefined( p ) &&
+			css`
+				padding: ${ space( p ) };
+			`,
+		className
+	);
+
+	return { ...otherProps, className: classes };
+}

packages/components/src/spacer/index.ts

@@ -0,0 +1,2 @@
+export { default as Spacer } from './component';
+export * from './hook';