Style engine: refine Box type (#38894)

* Style engine: refine `Box` type * Allow for `BoxVariant` to be `undefined`
WordPress · Feb 21, 2022 · 499fc36 · 499fc36
1 parent 74201da
commit 499fc36
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
@@ -3,17 +3,18 @@
  */
 import type { CSSProperties } from 'react';
 
-export type Box = {
-	top?: CSSProperties[ 'top' ];
-	right?: CSSProperties[ 'right' ];
-	bottom?: CSSProperties[ 'bottom' ];
-	left?: CSSProperties[ 'left' ];
+type BoxVariants = 'margin' | 'padding' | undefined;
+export type Box< T extends BoxVariants = undefined > = {
+	top?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];
+	right?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];
+	bottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];
+	left?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];
 };
 
 export interface Style {
 	spacing?: {
-		margin?: CSSProperties[ 'margin' ] | Box;
-		padding?: CSSProperties[ 'padding' ] | Box;
+		margin?: CSSProperties[ 'margin' ] | Box< 'margin' >;
+		padding?: CSSProperties[ 'padding' ] | Box< 'padding' >;
 	};
 	typography?: {
 		fontSize?: CSSProperties[ 'fontSize' ];