@elyra/canvas 12.24.0 → 12.25.0

package/src/common-properties/components/editor-form/editor-form.jsx

@@ -614,22 +614,34 @@ class EditorForm extends React.Component {
 
 		let content = this.genUIContent(uiItems);
 		let wideFly = <div />;
+		let stackedTearsheet;
 
 		const form = this.props.controller.getForm();
 		const title = PropertyUtil.formatMessage(this.props.controller.getReactIntl(),
 			MESSAGE_KEYS.FIELDPICKER_SAVEBUTTON_LABEL) + " " + form.label;
 
-		if (this.props.rightFlyout && this.state.showFieldPicker) {
-			wideFly = (<WideFlyout
-				showPropertiesButtons={false}
-				show
-				title={title}
-				light={this.props.controller.getLight()}
-			>
-				{this.fieldPicker(title)}
-			</WideFlyout>);
-		} else if (this.state.showFieldPicker) {
-			content = this.fieldPicker(title);
+		if (this.state.showFieldPicker) {
+			if (this.props.rightFlyout) {
+				wideFly = (<WideFlyout
+					showPropertiesButtons={false}
+					show
+					title={title}
+					light={this.props.controller.getLight()}
+				>
+					{this.fieldPicker(title)}
+				</WideFlyout>);
+			} else if (this.props.controller.isTearsheetContainer()) {
+				stackedTearsheet = (<TearSheet
+					open
+					stacked
+					tearsheet={{
+						title: title,
+						content: this.fieldPicker()
+					}}
+				/>);
+			} else {
+				content = this.fieldPicker(title);
+			}
 		}
 
 		return (
@@ -639,6 +651,7 @@ class EditorForm extends React.Component {
 			>
 				{content}
 				{wideFly}
+				{stackedTearsheet}
 			</div>
 		);
 	}

package/src/common-properties/components/editor-form/editor-form.scss

@@ -144,9 +144,4 @@ $primary-tab-height: $spacing-08;
 		overflow-y: auto;
 		overflow-x: hidden;
 	}
-
-	&.field-picker {
-		border-top: 1px solid $ui-03;
-		padding: $spacing-05;
-	}
 }

package/src/common-properties/components/field-picker/field-picker.scss

@@ -98,13 +98,24 @@
 }
 
 // This is for field-picker in properties-modal, containerType="Modal"
-.properties-modal, .properties-tearsheet-panel.bx--modal {
+.properties-modal {
 	.properties-fp-table {
 		padding-bottom: $spacing-06;
 		margin-bottom: $spacing-10; // Accommodate footer buttons
 
 		.properties-fp-top-row {
-			display: flex;
+			justify-content: flex-end;
+		}
+	}
+}
+
+// This is for field-picker in tearsheet, containerType="Tearsheet"
+.properties-tearsheet-panel.bx--modal {
+	.properties-fp-table {
+		border-top: 1px solid $ui-03;
+		padding: $spacing-05;
+
+		.properties-fp-top-row {
 			justify-content: flex-end;
 		}
 

package/src/common-properties/components/properties-modal/properties-modal.jsx

@@ -29,6 +29,7 @@ export default class PropertiesModal extends Component {
 		switch (this.props.bsSize) {
 		case Size.SMALL: return CARBON_MODAL_SIZE_XSMALL;
 		case Size.LARGE: return CARBON_MODAL_SIZE_LARGE;
+		case Size.MAX: return CARBON_MODAL_SIZE_LARGE;
 		case Size.MEDIUM:
 		default: return CARBON_MODAL_SIZE_SMALL;
 		}
@@ -70,4 +71,3 @@ PropertiesModal.propTypes = {
 	rejectLabel: PropTypes.string,
 	classNames: PropTypes.string
 };
-

package/src/common-properties/components/properties-modal/properties-modal.scss

@@ -22,7 +22,7 @@
 		padding: 0;
 	}
 	.bx--modal-content {
-		margin-bottom: 0;
+		margin-bottom: $spacing-05;
 		padding: 0;
 	}
 	&.noButtons {

package/src/common-properties/constants/constants.js

@@ -268,3 +268,9 @@ export const CARBON_BUTTON_SIZE = {
 	EXTRA_LARGE: "xl",
 	DEFAULT: "default" // TODO: remove this after upgrading to carbon 11.x
 };
+
+export const CONTAINER_TYPE = {
+	CUSTOM: "Custom",
+	TEARSHEET: "Tearsheet",
+	MODAL: "Modal"
+};

package/src/common-properties/constants/form-constants.js

@@ -36,6 +36,7 @@ const EditStyle = {
 };
 
 const Size = {
+	MAX: "max",
 	LARGE: "large",
 	MEDIUM: "medium",
 	SMALL: "small"

package/src/common-properties/controls/abstract-table.jsx

@@ -434,7 +434,7 @@ export default class AbstractTable extends React.Component {
 	}
 
 	isLightTheme() {
-		return this.props.controller.getLight() && this.props.control.light && !this.props.controller.isTearsheetContainer();
+		return this.props.controller.getLight() && this.props.control.light;
 	}
 
 	makeSelectedEditRow(selectedRows) {

package/src/common-properties/controls/control-factory.js

@@ -17,7 +17,7 @@
 import React from "react";
 
 import { Type, ControlType } from "./../constants/form-constants";
-import { STATES } from "./../constants/constants";
+import { STATES, CONTAINER_TYPE } from "./../constants/constants";
 import classNames from "classnames";
 import { PropertyDef } from "./../form/PropertyDef";
 import { makeControl } from "./../form/EditorForm";
@@ -360,9 +360,11 @@ export default class ControlFactory {
 	* Allows users to user a standard control in a custom control/panel
 	* @param paramDef - see parameter-def schema
 	* @param parameter - name of the parameter to pull from paramDef
+	* @param light - if this control is light themed
+	* @param containerType - the type of container common properties is rendering in
 	* @return control object (form schema) used to create standard react controls
 	*/
-	createFormControl(paramDef, parameter) {
+	createFormControl(paramDef, parameter, light = true, containerType = CONTAINER_TYPE.CUSTOM) {
 		if (!paramDef) {
 			return null;
 		}
@@ -374,7 +376,11 @@ export default class ControlFactory {
 			if (prop.propType() === Type.STRUCTURE && propDef.structureMetadata) {
 				structureDef = propDef.structureMetadata.getStructure(prop.baseType());
 			}
-			const control = makeControl(propDef.parameterMetadata, parameter, null, structureDef, l10nProvider);
+			const additionalInfo = {
+				light: light,
+				containerType: containerType
+			};
+			const control = makeControl(propDef.parameterMetadata, parameter, null, structureDef, l10nProvider, null, null, null, additionalInfo);
 			return control;
 		}
 		return null;

package/src/common-properties/controls/expression/expression.jsx

@@ -329,7 +329,7 @@ class ExpressionControl extends React.Component {
 			applyLabel={applyLabel}
 			rejectLabel={rejectLabel}
 			title={expressonTitle}
-			light={this.props.controller.getLight()}
+			light={this.props.controller.getLight() && this.props.control.light}
 		>
 			<div>
 				<ExpressionBuilder
@@ -341,7 +341,7 @@ class ExpressionControl extends React.Component {
 		</WideFlyout>) : null;
 
 		const className = classNames(`properties-expression-editor ${messageType}`,
-			{ "properties-light-disabled": !this.props.control.light || !this.props.controller.getLight() || this.props.controller.isTearsheetContainer() });
+			{ "properties-light-disabled": !this.props.control.light || !this.props.controller.getLight() });
 
 		const expressionLink = (<div className="properties-expression-link-container" >
 			{button}

package/src/common-properties/controls/list/list.jsx

@@ -150,7 +150,7 @@ class ListControl extends AbstractTable {
 				selectedRows={this.props.selectedRows}
 				rowSelection={this.props.control.rowSelection}
 				updateRowSelections={this.updateRowSelections}
-				light={this.props.controller.getLight() && this.props.control.light && !this.props.controller.isTearsheetContainer()}
+				light={this.props.controller.getLight() && this.props.control.light}
 				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 

package/src/common-properties/controls/selectcolumns/selectcolumns.jsx

@@ -137,7 +137,7 @@ class SelectColumnsControl extends AbstractTable {
 				selectedRows={this.props.selectedRows}
 				rowSelection={this.props.control.rowSelection}
 				updateRowSelections={this.updateRowSelections}
-				light={this.props.controller.getLight() && this.props.control.light && !this.props.controller.isTearsheetContainer()}
+				light={this.props.controller.getLight() && this.props.control.light}
 				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 

package/src/common-properties/controls/someofselect/someofselect.jsx

@@ -109,7 +109,7 @@ class SomeofselectControl extends React.Component {
 					updateRowSelections={this.updateSelections}
 					selectable
 					showHeader={false}
-					light={this.props.controller.getLight() && this.props.control.light && !this.props.controller.isTearsheetContainer()}
+					light={this.props.controller.getLight() && this.props.control.light}
 					emptyTablePlaceholder={this.props.control.additionalText}
 				/>
 				<ValidationMessage state={this.props.state} messageInfo={this.props.messageInfo} inTable={this.props.tableControl} />

package/src/common-properties/form/EditorForm.js

@@ -19,6 +19,7 @@
 import { Control } from "./ControlInfo";
 import { UIItem } from "./UIItem";
 import { GroupType, PanelType, Type, ControlType, ParamRole, ORIENTATIONS } from "../constants/form-constants";
+import { CONTAINER_TYPE } from "../constants/constants";
 import logger from "../../../utils/logger";
 import { StructureDef } from "./StructureInfo";
 import { Action } from "./ActionInfo";
@@ -130,12 +131,17 @@ class NumberGenerator {
 /**
  * Creates tab based on parameter definition
  */
-function makePrimaryTab(propertyDef, group, l10nProvider) {
+function makePrimaryTab(propertyDef, group, l10nProvider, containerType) {
 	const label = l10nProvider.l10nLabel(group, group.name);
-	return new EditorTab(label, group.name, _makeUIItem(propertyDef.parameterMetadata, propertyDef.actionMetadata, group, propertyDef.structureMetadata, l10nProvider));
+	const additionalInfo = {
+		light: true,
+		containerType
+	};
+	return new EditorTab(label, group.name,
+		_makeUIItem(propertyDef.parameterMetadata, propertyDef.actionMetadata, group, propertyDef.structureMetadata, l10nProvider, additionalInfo));
 }
 
-function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light = true) {
+function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, additionalInfo) {
 	const groupName = group.name;
 	let groupItem = null;
 	let groupLabel = null;
@@ -144,13 +150,13 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 	switch (group.groupType()) {
 	case GroupType.CONTROLS:
 		return UIItem.makePanel(new ControlPanel(groupName, PanelType.GENERAL, groupClassName, nestedPanel,
-			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light)));
+			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, additionalInfo)));
 	case GroupType.COLUMN_SELECTION:
 		return UIItem.makePanel(new ControlPanel(groupName, PanelType.COLUMN_SELECTION, groupClassName, nestedPanel,
-			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light)));
+			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, additionalInfo)));
 	case GroupType.ADDITIONAL: {
 		const panel = new ControlPanel(groupName, PanelType.GENERAL, groupClassName, nestedPanel,
-			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light));
+			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, additionalInfo));
 		groupLabel = l10nProvider.l10nLabel(group, group.name);
 		return UIItem.makeAdditionalLink(groupLabel, groupLabel, panel);
 	}
@@ -160,7 +166,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		if (Array.isArray(group.subGroups)) {
 			group.subGroups.forEach(function(subGroup) {
 				const subGroupName = subGroup.name;
-				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, light);
+				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, additionalInfo);
 				groupLabel = l10nProvider.l10nLabel(subGroup, subGroup.name);
 				subTabItems.push(new EditorTab(groupLabel, subGroupName, groupItem));
 			});
@@ -169,14 +175,14 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 	}
 	case GroupType.PANEL_SELECTOR: {
 		// Defines a sub-tab group where each child group represents a sub-tab.
-		const panSelSubItems = _genPanelSelectorPanels(group, parameterMetadata, actionMetadata, structureMetadata, l10nProvider);
+		const panSelSubItems = _genPanelSelectorPanels(group, parameterMetadata, actionMetadata, structureMetadata, l10nProvider, additionalInfo);
 		return UIItem.makePanelSelector(groupName, panSelSubItems, group.dependsOn, groupClassName);
 	}
 	case GroupType.PANELS: {
 		const panSubItems = [];
 		if (Array.isArray(group.subGroups)) {
 			group.subGroups.forEach(function(subGroup) {
-				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, light);
+				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, additionalInfo);
 				panSubItems.push(groupItem);
 			});
 		}
@@ -186,7 +192,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		const panSubItems = [];
 		if (Array.isArray(group.subGroups)) {
 			group.subGroups.forEach(function(subGroup) {
-				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, light);
+				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, additionalInfo);
 				panSubItems.push(groupItem);
 			});
 		}
@@ -200,7 +206,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		const panSubItems = [];
 		if (Array.isArray(group.subGroups)) {
 			group.subGroups.forEach(function(subGroup) {
-				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, light);
+				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, additionalInfo);
 				panSubItems.push(groupItem);
 			});
 		}
@@ -232,7 +238,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		const panSubItems = [];
 		if (Array.isArray(group.subGroups)) {
 			group.subGroups.forEach(function(subGroup) {
-				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, light);
+				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, additionalInfo);
 				panSubItems.push(groupItem);
 			});
 		}
@@ -247,7 +253,8 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		const panSubItems = [];
 		if (Array.isArray(group.subGroups)) {
 			group.subGroups.forEach(function(subGroup) {
-				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, false);
+				const additionalInfoUpdated = Object.assign({}, additionalInfo, { light: false });
+				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, additionalInfoUpdated);
 				panSubItems.push(groupItem);
 			});
 		}
@@ -262,7 +269,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 /**
  * Called on a base property group.
  */
-function _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light = true) {
+function _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, additionalInfo) {
 	const uiItems = [];
 	const panelInsertedFor = [];
 	if (!Array.isArray(group.parameterNames())) {
@@ -276,7 +283,7 @@ function _makeControls(parameterMetadata, actionMetadata, group, structureMetada
 			structureDef = structureMetadata.getStructure(prop.baseType());
 		}
 		if (!(group instanceof StructureDef) || (group instanceof StructureDef && prop.isSubPanelEdit())) {
-			const ctrl = _makeControl(parameterMetadata, paramName, group, structureDef, l10nProvider, actionMetadata, structureMetadata, null, light);
+			const ctrl = _makeControl(parameterMetadata, paramName, group, structureDef, l10nProvider, actionMetadata, structureMetadata, null, additionalInfo);
 			const control = UIItem.makeControl(ctrl);
 			if (prop.separatorBefore()) {
 				uiItems.push(UIItem.makeHSeparator());
@@ -308,7 +315,7 @@ function _makeControls(parameterMetadata, actionMetadata, group, structureMetada
 							group.subGroups[i].dependsOn === control.control.name) {
 						panelInsertedFor.push(group.subGroups[i].dependsOn);
 						control.additionalItems =
-							_genPanelSelectorPanels(group.subGroups[i], parameterMetadata, actionMetadata, structureMetadata, l10nProvider);
+							_genPanelSelectorPanels(group.subGroups[i], parameterMetadata, actionMetadata, structureMetadata, l10nProvider, additionalInfo);
 					}
 				}
 			}
@@ -320,7 +327,7 @@ function _makeControls(parameterMetadata, actionMetadata, group, structureMetada
 	if (Array.isArray(group.subGroups)) {
 		group.subGroups.forEach(function(subGroup) {
 			if (!_hasPanelBeenInserted(panelInsertedFor, subGroup.dependsOn)) {
-				const uiItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, light);
+				const uiItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, additionalInfo);
 				uiItems.push(uiItem);
 			}
 		});
@@ -347,12 +354,12 @@ function _hasPanelBeenInserted(panelInsertedFor, dependsOn) {
  * and its ID. The ID is subsequently used by the radioset control to decide
  * which panel is displayed with which radio button.
  */
-function _genPanelSelectorPanels(group, parameterMetadata, actionMetadata, structureMetadata, l10nProvider) {
+function _genPanelSelectorPanels(group, parameterMetadata, actionMetadata, structureMetadata, l10nProvider, additionalInfo) {
 	const panSelSubItems = [];
 	if (Array.isArray(group.subGroups)) {
 		group.subGroups.forEach(function(subGroup) {
 			const subGroupName = subGroup.name;
-			const groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider);
+			const groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, additionalInfo);
 			const groupLabel = l10nProvider.l10nLabel(subGroup, subGroup.name);
 			panSelSubItems.push(new EditorTab(groupLabel, subGroupName, groupItem));
 		});
@@ -415,7 +422,7 @@ function _makeStringControl(parameter, isSubControl) {
 /**
  * Creates a control for the supplied property.
  */
-function _makeControl(parameterMetadata, paramName, group, structureDefinition, l10nProvider, actionMetadata, structureMetadata, subControl, light = true) {
+function _makeControl(parameterMetadata, paramName, group, structureDefinition, l10nProvider, actionMetadata, structureMetadata, subControl, additionalInfo) {
 	const isSubControl = typeof subControl !== "undefined" && subControl;
 
 	// Assume the property is defined
@@ -505,7 +512,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 
 			if (structureDef) {
 				if (structureDef.hasSubPanel()) {
-					childItem = _makeEditStyleSubPanel(structureDef, l10nProvider, structureMetadata);
+					childItem = _makeEditStyleSubPanel(structureDef, l10nProvider, structureMetadata, additionalInfo);
 				}
 				keyIndex = structureDef.keyAttributeIndex();
 				// The defaultRow allows the UI to create a new row with sensible settings
@@ -515,14 +522,14 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 				subControls = [];
 				if (structureDef.parameterMetadata && Array.isArray(structureDef.parameterMetadata.paramDefs)) {
 					structureDef.parameterMetadata.paramDefs.forEach(function(param) {
-						const newSubControl = _makeSubControl(param, l10nProvider, structureMetadata);
+						const newSubControl = _makeSubControl(param, l10nProvider, structureMetadata, additionalInfo);
 						subControls.push(newSubControl);
 					});
 				}
 				// If the property is a keyed property or a structure list then the key should not be included in the
 				// structure definition. However it will still need to be included in the table column definitions.
 				if ((parameter.isMapValue() || parameter.isList()) && structureDef.keyDefinition) {
-					const newSubControl = _makeSubControl(structureDef.keyDefinition, l10nProvider, structureMetadata);
+					const newSubControl = _makeSubControl(structureDef.keyDefinition, l10nProvider, structureMetadata, additionalInfo);
 					subControls.unshift(newSubControl);
 				}
 				if (parameter.isList() || parameter.isMapValue()) {
@@ -643,7 +650,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.customValueAllowed = parameter.customValueAllowed;
 	settings.className = parameter.className;
 	settings.buttons = buttons;
-	settings.light = light;
+	settings.light = _isControlLight(additionalInfo.light, additionalInfo.containerType, parameter.isSubPanelEdit());
 	if (isSubControl) {
 		settings.visible = parameter.visible;
 		settings.width = parameter.columns(8);
@@ -654,6 +661,12 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	return new Control(settings);
 }
 
+function _isControlLight(light, containerType, isSubPanelEdit) {
+	return light &&
+		(containerType !== CONTAINER_TYPE.TEARSHEET || // Controls displayed in a Tearsheet are not light themed
+		(containerType === CONTAINER_TYPE.TEARSHEET && isSubPanelEdit)); // Controls inside a subpanel of tearsheet container are light themed
+}
+
 function _processListParameter(parameter) {
 	const controlObj = {};
 	switch (parameter.getRole()) {
@@ -677,7 +690,7 @@ function _processListParameter(parameter) {
 	return controlObj;
 }
 
-function _makeEditStyleSubPanel(structureDef, l10nProvider, structureMetadata) {
+function _makeEditStyleSubPanel(structureDef, l10nProvider, structureMetadata, additionalInfo) {
 	// If we"re not editing in-line then create a sub-panel that can be used to edit the attributes
 	const panel = new ControlPanel(
 		structureDef.name,
@@ -688,7 +701,8 @@ function _makeEditStyleSubPanel(structureDef, l10nProvider, structureMetadata) {
 			structureDef.actionMetadata,
 			structureDef,
 			structureMetadata,
-			l10nProvider)
+			l10nProvider,
+			additionalInfo)
 	);
 	const groupLabel = l10nProvider.l10nLabel(structureDef, structureDef.name);
 	return UIItem.makeAdditionalLink("...", groupLabel, panel);
@@ -697,14 +711,14 @@ function _makeEditStyleSubPanel(structureDef, l10nProvider, structureMetadata) {
 /**
  * Creates a column control for the supplied property/attribute.
  */
-function _makeSubControl(parameter, l10nProvider, structureMetadata) {
+function _makeSubControl(parameter, l10nProvider, structureMetadata, additionalInfo) {
 	const parameterMetadata = null;
 	const paramName = null;
 	const group = null;
 	const structureDef = parameter.propType() === Type.STRUCTURE ? structureMetadata.getStructure(parameter.baseType()) : null;
 	const actionMetadata = null;
 	const subControl = parameter;
-	return _makeControl(parameterMetadata, paramName, group, structureDef, l10nProvider, actionMetadata, structureMetadata, subControl);
+	return _makeControl(parameterMetadata, paramName, group, structureDef, l10nProvider, actionMetadata, structureMetadata, subControl, additionalInfo);
 }
 
 /**

package/src/common-properties/form/Form.js

@@ -21,6 +21,7 @@ import { UIItem } from "./UIItem";
 import { L10nProvider } from "../util/L10nProvider";
 import { translateMessages } from "./Conditions";
 import { Size } from "../constants/form-constants";
+import { CONTAINER_TYPE } from "../constants/constants";
 
 export default class Form {
 	constructor(componentId, label, labelEditable, help, editorSize, pixelWidth, uiItems, buttons, data, conditions, resources, icon, heading) {
@@ -42,9 +43,9 @@ export default class Form {
 	/**
 	* Returns a new Form
 	* @param paramDef Parameter definition
-	* @param isModal True for modal dialogs
+	* @param containerType Type of container common properties will be displayed in, set in propertiesConfig
 	*/
-	static makeForm(paramDef, isModal) {
+	static makeForm(paramDef, containerType) {
 		const propDef = PropertyDef.makePropertyDef(propertyOf(paramDef)("titleDefinition"), propertyOf(paramDef)("parameters"), propertyOf(paramDef)("complex_types"),
 			propertyOf(paramDef)("uihints"));
 		const resources = propertyOf(paramDef)("resources");
@@ -54,7 +55,7 @@ export default class Form {
 			const tabs = [];
 			if (propDef.groupMetadata && propDef.groupMetadata.groups) {
 				for (const group of propDef.groupMetadata.groups) {
-					tabs.push(makePrimaryTab(propDef, group, l10nProvider, conditions));
+					tabs.push(makePrimaryTab(propDef, group, l10nProvider, containerType));
 				}
 			}
 
@@ -63,6 +64,7 @@ export default class Form {
 				uiCurrentParameters: propertyOf(paramDef)("current_ui_parameters"),
 				datasetMetadata: propertyOf(paramDef)("dataset_metadata")
 			};
+			const isModal = containerType === CONTAINER_TYPE.TEARSHEET || containerType === CONTAINER_TYPE.MODAL;
 			const editorSizeDefault = isModal ? Size.LARGE : Size.SMALL;
 			return new Form(propDef.name,
 				propDef.label,

package/src/common-properties/panels/sub-panel/sub-panel.scss

@@ -27,4 +27,8 @@ button.properties-subpanel-button {
 	.properties-light-disabled {
 		background-color: $ui-01;
 	}
+
+	.properties-modal-children {
+		padding: 0 $spacing-05;
+	}
 }

package/src/common-properties/panels/tearsheet/tearsheet.jsx

@@ -44,7 +44,7 @@ class TearSheet extends Component {
 		return (
 			<Portal>
 				<ComposedModal
-					className="properties-tearsheet-panel"
+					className={classNames("properties-tearsheet-panel", { "properties-tearsheet-stacked": this.props.stacked })}
 					open={this.props.open}
 					size="lg"
 					preventCloseOnClickOutside
@@ -72,6 +72,7 @@ class TearSheet extends Component {
 }
 TearSheet.propTypes = {
 	open: PropTypes.bool,
+	stacked: PropTypes.bool,
 	onCloseCallback: PropTypes.func,
 	tearsheet: PropTypes.shape({
 		title: PropTypes.string.isRequired,
@@ -92,7 +93,8 @@ TearSheet.propTypes = {
 TearSheet.defaultProps = {
 	open: false,
 	showPropertiesButtons: false,
-	applyOnBlur: false
+	applyOnBlur: false,
+	stacked: false
 };
 
 export default TearSheet;

package/src/common-properties/panels/tearsheet/tearsheet.scss

@@ -16,6 +16,13 @@
 
 $properties-buttons-height: $spacing-10;
 
+.properties-tearsheet-panel.properties-tearsheet-stacked.bx--modal {
+	.bx--modal-container {
+		max-height: calc(100% - 104px);
+		width: calc(100% - 96px);
+	}
+}
+
 .properties-tearsheet-panel.bx--modal {
 	align-items: flex-end;
 	&.is-visible {

package/src/common-properties/properties-controller.js

@@ -131,8 +131,8 @@ export default class PropertiesController {
 	}
 
 	setParamDef(paramDef) {
-		const rightFlyout = get(this.getPropertiesConfig(), "rightFlyout", true);
-		const formData = Form.makeForm(paramDef, !rightFlyout);
+		const containerType = get(this.getPropertiesConfig(), "containerType");
+		const formData = Form.makeForm(paramDef, containerType);
 		this.setForm(formData);
 	}
 
@@ -1754,7 +1754,8 @@ export default class PropertiesController {
 	* @param parameter (string) - name of the parameter to pull out of paramDef
 	*/
 	createControl(propertyId, paramDef, parameter) {
-		const control = this.controlFactory.createFormControl(paramDef, parameter);
+		const containerType = get(this.getPropertiesConfig(), "containerType");
+		const control = this.controlFactory.createFormControl(paramDef, parameter, this.getLight(), containerType);
 		const controls = [];
 		// need to preserve parentCategoryId which is set during initial parsing of all controls
 		const parentCategoryId = this.getControl(propertyId).parentCategoryId;

package/src/common-properties/properties-main/properties-main-widths.scss

@@ -17,11 +17,13 @@
 $common-properties-small-flyout-width: 320px; // This aligns the right-flyout with the divider in DSX header
 $common-properties-medium-flyout-width: 480px; // This is an arbitrary width for medium sized flyout panels
 $common-properties-large-flyout-width: 640px; // This is an arbitrary width for large sized flyout panels
+$common-properties-max-flyout-width: 900px; // This is an arbitrary width for max sized flyout panels
 
 // sass-lint:disable no-misspelled-properties
 :export {
 	flyoutWidthSmall: $common-properties-small-flyout-width;
 	flyoutWidthMedium: $common-properties-medium-flyout-width;
 	flyoutWidthLarge: $common-properties-large-flyout-width;
+	flyoutWidthMax: $common-properties-max-flyout-width;
 }
 // sass-lint:enable no-misspelled-properties