feat: extend placeholder builtin with size controls

src/model/pattern-library/builtins/placeholder.ts

@@ -5,6 +5,12 @@ import * as Types from '../../types';
 
 const PATTERN_CONTEXT_ID = 'synthetic:placeholder';
 const SRC_CONTEXT_ID = 'src';
+const WIDTH_CONTEXT_ID = 'width';
+const HEIGHT_CONTEXT_ID = 'height';
+const MIN_WIDTH_CONTEXT_ID = 'min-width';
+const MAX_WIDTH_CONTEXT_ID = 'max-width';
+const MIN_HEIGHT_CONTEXT_ID = 'min-height';
+const MAX_HEIGHT_CONTEXT_ID = 'max-height';
 
 export const Placeholder = (context: BuiltInContext): BuiltInResult => {
 	const patternId = context.options.getGlobalPatternId(PATTERN_CONTEXT_ID);
@@ -16,6 +22,48 @@ export const Placeholder = (context: BuiltInContext): BuiltInResult => {
 			label: 'Source',
 			origin: Types.PatternPropertyOrigin.BuiltIn,
 			propertyName: 'src'
+		}),
+		new PatternProperty.PatternStringProperty({
+			contextId: WIDTH_CONTEXT_ID,
+			id: context.options.getGlobalPropertyId(patternId, WIDTH_CONTEXT_ID),
+			label: 'Width',
+			origin: Types.PatternPropertyOrigin.BuiltIn,
+			propertyName: 'width'
+		}),
+		new PatternProperty.PatternStringProperty({
+			contextId: HEIGHT_CONTEXT_ID,
+			id: context.options.getGlobalPropertyId(patternId, HEIGHT_CONTEXT_ID),
+			label: 'Height',
+			origin: Types.PatternPropertyOrigin.BuiltIn,
+			propertyName: 'height'
+		}),
+		new PatternProperty.PatternStringProperty({
+			contextId: MIN_WIDTH_CONTEXT_ID,
+			id: context.options.getGlobalPropertyId(patternId, MIN_WIDTH_CONTEXT_ID),
+			label: 'Min Width',
+			origin: Types.PatternPropertyOrigin.BuiltIn,
+			propertyName: 'minWidth'
+		}),
+		new PatternProperty.PatternStringProperty({
+			contextId: MIN_HEIGHT_CONTEXT_ID,
+			id: context.options.getGlobalPropertyId(patternId, MIN_HEIGHT_CONTEXT_ID),
+			label: 'Min Height',
+			origin: Types.PatternPropertyOrigin.BuiltIn,
+			propertyName: 'minHeight'
+		}),
+		new PatternProperty.PatternStringProperty({
+			contextId: MAX_WIDTH_CONTEXT_ID,
+			id: context.options.getGlobalPropertyId(patternId, MAX_WIDTH_CONTEXT_ID),
+			label: 'Max Width',
+			origin: Types.PatternPropertyOrigin.BuiltIn,
+			propertyName: 'maxWidth'
+		}),
+		new PatternProperty.PatternStringProperty({
+			contextId: MAX_HEIGHT_CONTEXT_ID,
+			id: context.options.getGlobalPropertyId(patternId, MAX_HEIGHT_CONTEXT_ID),
+			label: 'Max Height',
+			origin: Types.PatternPropertyOrigin.BuiltIn,
+			propertyName: 'maxHeight'
 		})
 	];
 

src/preview/preview-renderer.tsx

@@ -99,7 +99,19 @@ const SYNTHETICS = {
 	box: Box,
 	page: Page,
 	placeholder: props =>
-		props.src ? <img src={props.src} style={{ width: '100%', height: 'auto' }} /> : null,
+		props.src ? (
+			<img
+				src={props.src}
+				style={{
+					width: props.width,
+					height: props.height,
+					minWidth: props.minWidth,
+					maxWidth: props.maxWidth,
+					minHeight: props.minHeight,
+					maxHeight: props.maxHeight
+				}}
+			/>
+		) : null,
 	text: props => <span>{props.text}</span>
 };