diff --git a/src/model/pattern-library/builtins/placeholder.ts b/src/model/pattern-library/builtins/placeholder.ts index 8a466babf..16bd5c3b1 100644 --- a/src/model/pattern-library/builtins/placeholder.ts +++ b/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' }) ]; diff --git a/src/preview/preview-renderer.tsx b/src/preview/preview-renderer.tsx index c755da0a1..126c2e047 100644 --- a/src/preview/preview-renderer.tsx +++ b/src/preview/preview-renderer.tsx @@ -99,7 +99,19 @@ const SYNTHETICS = { box: Box, page: Page, placeholder: props => - props.src ? : null, + props.src ? ( + + ) : null, text: props => {props.text} };