Fix space input types

WordPress · Jun 28, 2021 · b966e09 · b966e09
1 parent d6014ac
commit b966e09
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 35 deletions.
diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx
@@ -15,20 +15,21 @@ import { contextConnect, useContextSystem } from '../ui/context';
 // eslint-disable-next-line no-duplicate-imports
 import type { PolymorphicComponentProps } from '../ui/context';
 import { StyledHorizontalRule } from './styles';
+import type { SpaceInput } from '../ui/utils/space';
 
 export interface DividerProps extends Omit< SeparatorProps, 'children' > {
 	/**
 	 * Adjusts all margins.
 	 */
-	margin?: number;
+	margin?: SpaceInput;
 	/**
 	 * Adjusts top margins.
 	 */
-	marginTop?: number;
+	marginTop?: SpaceInput;
 	/**
 	 * Adjusts bottom margins.
 	 */
-	marginBottom?: number;
+	marginBottom?: SpaceInput;
 }
 
 function Divider(

diff --git a/packages/components/src/divider/styles.ts b/packages/components/src/divider/styles.ts
@@ -8,13 +8,13 @@ import { isNil } from 'lodash';
 /**
  * Internal dependencies
  */
-import { space } from '../ui/utils/space';
+import { space, SpaceInput } from '../ui/utils/space';
 import CONFIG from '../utils/config-values';
 
 type Props = {
-	margin?: number;
-	marginTop?: number;
-	marginBottom?: number;
+	margin?: SpaceInput;
+	marginTop?: SpaceInput;
+	marginBottom?: SpaceInput;
 };
 
 const renderMargin = ( { margin, marginTop, marginBottom }: Props ) => {
@@ -26,8 +26,8 @@ const renderMargin = ( { margin, marginTop, marginBottom }: Props ) => {
 	}
 
 	return css( {
-		marginTop,
-		marginBottom,
+		marginTop: space( marginTop ),
+		marginBottom: space( marginBottom ),
 	} );
 };
 

diff --git a/packages/components/src/flex/types.ts b/packages/components/src/flex/types.ts
@@ -8,6 +8,7 @@ import type { CSSProperties } from 'react';
  * Internal dependencies
  */
 import type { ResponsiveCSSValue } from '../ui/utils/types';
+import type { SpaceInput } from '../ui/utils/space';
 
 export type FlexDirection = ResponsiveCSSValue<
 	CSSProperties[ 'flexDirection' ]
@@ -39,7 +40,7 @@ export type FlexProps = {
 	 *
 	 * @default 2
 	 */
-	gap?: import('react').ReactText;
+	gap?: SpaceInput;
 	/**
 	 * Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
 	 * In the example below, `flex-start` will align the children content to the left.

diff --git a/packages/components/src/spacer/hook.ts b/packages/components/src/spacer/hook.ts
@@ -9,7 +9,7 @@ import { css, cx } from '@emotion/css';
 import { useContextSystem } from '../ui/context';
 // eslint-disable-next-line no-duplicate-imports
 import type { PolymorphicComponentProps } from '../ui/context';
-import { space } from '../ui/utils/space';
+import { space, SpaceInput } from '../ui/utils/space';
 
 const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > =>
 	typeof o !== 'undefined' && o !== null;
@@ -18,61 +18,61 @@ export interface SpacerProps {
 	/**
 	 * Adjusts all margins.
 	 */
-	margin?: number;
+	margin?: SpaceInput;
 	/**
 	 * Adjusts top and bottom margins.
 	 */
-	marginY?: number;
+	marginY?: SpaceInput;
 	/**
 	 * Adjusts left and right margins.
 	 */
-	marginX?: number;
+	marginX?: SpaceInput;
 	/**
 	 * Adjusts top margins.
 	 */
-	marginTop?: number;
+	marginTop?: SpaceInput;
 	/**
 	 * Adjusts bottom margins.
 	 *
 	 * @default 2
 	 */
-	marginBottom?: number;
+	marginBottom?: SpaceInput;
 	/**
 	 * Adjusts left margins.
 	 */
-	marginLeft?: number;
+	marginLeft?: SpaceInput;
 	/**
 	 * Adjusts right margins.
 	 */
-	marginRight?: number;
+	marginRight?: SpaceInput;
 	/**
 	 * Adjusts all padding.
 	 */
-	padding?: number;
+	padding?: SpaceInput;
 	/**
 	 * Adjusts top and bottom padding.
 	 */
-	paddingY?: number;
+	paddingY?: SpaceInput;
 	/**
 	 * Adjusts left and right padding.
 	 */
-	paddingX?: number;
+	paddingX?: SpaceInput;
 	/**
 	 * Adjusts top padding.
 	 */
-	paddingTop?: number;
+	paddingTop?: SpaceInput;
 	/**
 	 * Adjusts bottom padding.
 	 */
-	paddingBottom?: number;
+	paddingBottom?: SpaceInput;
 	/**
 	 * Adjusts left padding.
 	 */
-	paddingLeft?: number;
+	paddingLeft?: SpaceInput;
 	/**
 	 * Adjusts right padding.
 	 */
-	paddingRight?: number;
+	paddingRight?: SpaceInput;
 	/**
 	 * The children elements.
 	 */

diff --git a/packages/components/src/ui/utils/space.ts b/packages/components/src/ui/utils/space.ts
@@ -1,16 +1,14 @@
 /**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import type { ReactText } from 'react';
-/**
- * Internal dependencies
+ * A real number or something parsable as a number
  */
+export type SpaceInput = number | `${ number }`;
 
 const GRID_BASE = '4px';
 
-export function space( value: ReactText ): string {
-	return typeof value === 'number'
-		? `calc(${ GRID_BASE } * ${ value })`
-		: value;
+export function space( value?: SpaceInput ): string | undefined {
+	if ( typeof value === 'undefined' ) {
+		return undefined;
+	}
+
+	return `calc(${ GRID_BASE } * ${ value })`;
 }