diff --git a/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json b/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json index 548c04548..0684d0a18 100644 --- a/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json +++ b/packages/dm-core-plugins/blueprints/stack/StackPluginConfig.json @@ -14,6 +14,14 @@ "attributeType": "CORE:ViewConfig", "dimensions": "*" }, + { + "name": "itemMaxWidths", + "type": "CORE:BlueprintAttribute", + "description": "Pass array maxWidths of child items. Matches based on index. Use 'none' for empty slots.", + "attributeType": "string", + "dimensions": "*", + "optional": true + }, { "name": "direction", "type": "CORE:BlueprintAttribute", diff --git a/packages/dm-core-plugins/src/stack/StackPlugin.tsx b/packages/dm-core-plugins/src/stack/StackPlugin.tsx index 26c9e2190..40941222b 100644 --- a/packages/dm-core-plugins/src/stack/StackPlugin.tsx +++ b/packages/dm-core-plugins/src/stack/StackPlugin.tsx @@ -7,7 +7,7 @@ export const StackPlugin = (props: IUIPlugin) => { const config: StackPluginConfig = { ...defaultConfig, ...props.config } // map plugin language to stack props/css language - const configMap: { [name: string]: string } = { + const configMap: Record = { vertical: 'column', horizontal: 'row', horizontalPlacement: @@ -38,13 +38,20 @@ export const StackPlugin = (props: IUIPlugin) => { className={`dm-plugin-padding dm-parent-plugin ${config.classNames}`} > {config.items?.map((item, index) => ( - + grow={1} + minHeight={0} + fullWidth + style={{ maxWidth: config.itemMaxWidths?.[index] || 'none' }} + > + + ))} ) diff --git a/packages/dm-core-plugins/src/stack/types.ts b/packages/dm-core-plugins/src/stack/types.ts index cc87ac8e9..4b2f00f76 100644 --- a/packages/dm-core-plugins/src/stack/types.ts +++ b/packages/dm-core-plugins/src/stack/types.ts @@ -9,6 +9,7 @@ export type StackPluginConfig = { maxWidth: string wrap: boolean classNames: string[] + itemMaxWidths: string[] } export const defaultConfig: StackPluginConfig = { @@ -20,4 +21,5 @@ export const defaultConfig: StackPluginConfig = { maxWidth: 'none', wrap: false, classNames: [], + itemMaxWidths: [], }