@elyra/canvas 12.21.0 → 12.23.0

package/src/common-properties/components/flexible-table/flexible-table.scss

@@ -40,7 +40,7 @@ $row-left-padding: $spacing-02;
 }
 
 .properties-ft-container-panel {
-	height: calc(100% - $spacing-07); // adjust height for table header
+	height: calc(100% - #{$spacing-07}); // adjust height for table header
 }
 
 .properties-ft-control-container {
@@ -130,10 +130,11 @@ $row-left-padding: $spacing-02;
 }
 
 .properties-ft-empty-table {
-	height: calc($spacing-11 + $spacing-08);
+	height: calc(#{$spacing-11} + #{$spacing-08});
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	padding: 0 $spacing-05;
 	@include carbon--type-style("body-long-01");
 }
 

package/src/common-properties/components/virtualized-table/virtualized-table.jsx

@@ -17,7 +17,7 @@
 import { Column, Table, AutoSizer } from "react-virtualized";
 import Draggable from "react-draggable";
 import { Checkbox, Loading } from "carbon-components-react";
-import { ArrowUp16, ArrowDown16, ArrowsVertical16 } from "@carbon/icons-react";
+import { ArrowUp16, ArrowDown16, ArrowsVertical16, Information16 } from "@carbon/icons-react";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import { SORT_DIRECTION, STATES, ROW_SELECTION, MINIMUM_COLUMN_WIDTH, MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL } from "./../../constants/constants";
 import { injectIntl } from "react-intl";
@@ -234,28 +234,25 @@ class VirtualizedTable extends React.Component {
 			</span>);
 		}
 
-		let tooltip = null;
-		if (columnData.description && columnData.headerLabel) {
-			tooltip = (
-				<div className="properties-tooltips">
-					<span style= {{ fontWeight: "bold" }}>{columnData.headerLabel}</span>
-					<br />
-					{columnData.description}
-				</div>
-			);
-		} else if (columnData.description) {
-			tooltip = (
-				<div className="properties-tooltips">
-					{columnData.description}
-				</div>
-			);
-		} else if (columnData.headerLabel) {
-			tooltip = (
-				<div className="properties-tooltips">
-					<span style= {{ fontWeight: "bold" }}>{columnData.headerLabel}</span>
-				</div>
-			);
-		}
+		const tooltip = columnData.headerLabel
+			? (<div className="properties-tooltips">
+				<span style= {{ fontWeight: "bold" }}>{columnData.headerLabel}</span>
+			</div>)
+			: null;
+
+		const infoIcon = isEmpty(columnData.description)
+			? null
+			: (<div className="properties-vt-info-icon-tip">
+				<Tooltip
+					id={`properties-tooltip-${columnData.headerLabel}-info`}
+					tip={columnData.description}
+					direction="bottom"
+					className="properties-tooltips"
+					showToolTipOnClick
+				>
+					<Information16 className="properties-vt-info-icon" />
+				</Tooltip>
+			</div>);
 
 		const tooltipId = uuid4() + "-tooltip-column-" + dataKey;
 
@@ -279,20 +276,27 @@ class VirtualizedTable extends React.Component {
 			</Draggable>)
 			: "";
 
+		const header = isEmpty(tooltip)
+			? (<div className="properties-vt-label-icon">
+				{label}
+				{infoIcon}
+			</div>)
+			: (<div className="properties-vt-label-tip-icon">
+				<Tooltip
+					id={tooltipId}
+					tip={tooltip}
+					direction="bottom"
+					className="properties-tooltips"
+				>
+					{label}
+				</Tooltip>
+				{infoIcon}
+			</div>);
+
 		return (
 			<div className={classNames({ "properties-vt-column-with-resize": resizeElem !== "", "properties-vt-column-without-resize": resizeElem === "" })}>
 				<div className={classNames("properties-vt-column properties-tooltips-container", { "sort-column-active": dataKey === this.props.sortBy })}>
-					{ isEmpty(tooltip)
-						? label
-						: <Tooltip
-							id={tooltipId}
-							tip={tooltip}
-							direction="bottom"
-							className="properties-tooltips"
-						>
-							{label}
-						</Tooltip>
-					}
+					{header}
 					{disableSort === false && sortIcon}
 				</div>
 				{ resizeElem }

package/src/common-properties/components/virtualized-table/virtualized-table.scss

@@ -100,6 +100,23 @@
 		}
 	}
 
+	.properties-vt-label-tip-icon {
+		width: inherit;
+		display: flex;
+		align-items: center;
+
+		.properties-vt-info-icon-tip {
+			height: $spacing-05;
+			margin-left: $spacing-03;
+
+			.properties-vt-info-icon {
+				&:hover {
+					cursor: pointer;
+				}
+			}
+		}
+	}
+
 	.properties-vt-row-checkbox {
 		height: $spacing-07;
 		margin-left: $spacing-05;

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

@@ -72,11 +72,14 @@ export const MESSAGE_KEYS = {
 	EXPRESSION_FIELDS_TITLE: "expression.fields.title",
 	EXPRESSION_VALUES_TITLE: "expression.values.title",
 	EXPRESSION_FIELD_COLUMN: "expression.field.column",
+	EXPRESSION_FIELD_COLUMN_DESCRIPTION: "expression.field.column.description",
 	EXPRESSION_STORAGE_COLUMN: "expression.storage.column",
 	EXPRESSION_VALUE_COLUMN: "expression.value.column",
+	EXPRESSION_VALUE_COLUMN_DESCRIPTION: "expression.value.column.description",
 	EXPRESSION_FUNCTION_COLUMN: "expression.function.column",
 	EXPRESSION_RETURN_COLUMN: "expression.return.column",
 	EXPRESSION_RECENTLY_USED_COLUMN: "expression.recently.used.column",
+	EXPRESSION_RECENTLY_USED_COLUMN_DESCRIPTION: "expression.recently.used.column.description",
 	EXPRESSION_FIELD_TAB: "expression.field.tab",
 	EXPRESSION_FUNCTIONS_TAB: "expression.functions.tab",
 	EXPRESSION_RECENTLY_USED: "expression.recently.used",

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

@@ -83,7 +83,7 @@ class DatefieldControl extends React.Component {
 					value={this.value}
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
-					light={this.props.controller.getLight()}
+					light={this.props.controller.getLight() && !this.props.control.light}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>

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

@@ -208,7 +208,7 @@ class DropDown extends React.Component {
 				disabled={this.props.state === STATES.DISABLED}
 				onChange={this.handleChange}
 				value={selection}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 			>
 				{ options }
 			</Select>);
@@ -223,7 +223,7 @@ class DropDown extends React.Component {
 				items={dropDown.options}
 				onChange={this.handleComboOnChange}
 				onInputChange={this.handleOnInputChange}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 				translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
 				titleText={this.props.controlItem}
 			/>);
@@ -237,7 +237,7 @@ class DropDown extends React.Component {
 				onChange={this.handleChange}
 				selectedItem={dropDown.selectedOption}
 				label={this.emptyLabel}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 				translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
 				titleText={this.props.controlItem}
 			/>);

package/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx

@@ -29,19 +29,19 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 	constructor(props) {
 		super(props);
 		this.reactIntl = props.controller.getReactIntl();
-		this.recentUseCat = formatMessage(this.reactIntl,
-			MESSAGE_KEYS.EXPRESSION_RECENTLY_USED);
+		this.valueColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN);
+		this.valueColumnDesc = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN_DESCRIPTION);
+		this.recentUseCat = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_RECENTLY_USED);
 		this.recentUseCatInfo = {
 			id: this.recentUseCat,
 			locLabel: this.recentUseCat,
 			field_columns: {
 				field_column_info: {
-					locLabel: formatMessage(this.reactIntl,
-						MESSAGE_KEYS.EXPRESSION_RECENTLY_USED_COLUMN)
+					locLabel: formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_RECENTLY_USED_COLUMN)
 				},
 				value_column_info: {
-					locLabel: formatMessage(this.reactIntl,
-						MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN)
+					locLabel: this.valueColumn,
+					descLabel: this.valueColumnDesc
 				}
 			}
 		};
@@ -256,23 +256,21 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 	}
 
 	_makeDatasetFields(dataset, fieldDataset) {
-		const fieldColumn = formatMessage(this.reactIntl,
-			MESSAGE_KEYS.EXPRESSION_FIELD_COLUMN);
-		const storageColumn = formatMessage(this.reactIntl,
-			MESSAGE_KEYS.EXPRESSION_STORAGE_COLUMN);
-		const valueColumn = formatMessage(this.reactIntl,
-			MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN);
-		const dropdownLabel = formatMessage(this.reactIntl,
-			MESSAGE_KEYS.EXPRESSION_FIELDS_DROPDOWN_TITLE);
+		const fieldColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELD_COLUMN);
+		const fieldColumnDesc = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELD_COLUMN_DESCRIPTION);
+		const storageColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_STORAGE_COLUMN);
+		const dropdownLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELDS_DROPDOWN_TITLE);
 		const fieldsCatInfo = {
 			id: "fields",
 			locLabel: dropdownLabel,
 			field_columns: {
 				field_column_info: {
-					locLabel: fieldColumn
+					locLabel: fieldColumn,
+					descLabel: fieldColumnDesc
 				},
 				value_column_info: {
-					locLabel: valueColumn
+					locLabel: this.valueColumn,
+					descLabel: this.valueColumnDesc
 				},
 				additional_column_info: [
 					{
@@ -369,8 +367,17 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		}
 
 		if (categoryInfo) {
-			fieldHeaders.push({ key: "fieldName", label: categoryInfo.field_columns.field_column_info.locLabel, resizable: true });
-			valueHeader.push({ key: "values", label: categoryInfo.field_columns.value_column_info.locLabel });
+			fieldHeaders.push({
+				key: "fieldName",
+				label: categoryInfo.field_columns.field_column_info.locLabel,
+				description: categoryInfo.field_columns.field_column_info.descLabel,
+				resizable: true
+			});
+			valueHeader.push({
+				key: "values",
+				label: categoryInfo.field_columns.value_column_info.locLabel,
+				description: categoryInfo.field_columns.value_column_info.descLabel
+			});
 			if (categoryInfo.field_columns.additional_column_info) {
 				for (let i = 0; i < categoryInfo.field_columns.additional_column_info.length; i++) {
 					sortable.push(categoryInfo.field_columns.additional_column_info[i].id);

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

@@ -339,7 +339,7 @@ class ExpressionControl extends React.Component {
 			</div>
 		</WideFlyout>) : null;
 
-		const className = classNames(`properties-expression-editor ${messageType}`, { "properties-light-disabled": !this.props.controller.getLight() });
+		const className = classNames(`properties-expression-editor ${messageType}`, { "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/expression/expressionInfo-parser.js

@@ -57,8 +57,19 @@ function setExpressionInfo(inExpressionInfo) {
 				if (inExpressionInfo.fields.field_categories) {
 					inExpressionInfo.fields.field_categories.forEach((fieldCat) => {
 						fieldCat.locLabel = l10nProvider.l10nLabel(fieldCat, fieldCat.id);
+
 						fieldCat.field_columns.field_column_info.locLabel = l10nProvider.l10nLabel(fieldCat.field_columns.field_column_info, fieldCat.id + ".field_column_info");
 						fieldCat.field_columns.value_column_info.locLabel = l10nProvider.l10nLabel(fieldCat.field_columns.value_column_info, fieldCat.id + ".value_column_info");
+
+						const fieldColInfoDesc = l10nProvider.l10nDesc(fieldCat.field_columns.field_column_info, fieldCat.id + ".field_column_info");
+						if (fieldColInfoDesc !== fieldCat.id + ".field_column_info") {
+							fieldCat.field_columns.field_column_info.descLabel = fieldColInfoDesc;
+						}
+						const valueColInfoDesc = l10nProvider.l10nDesc(fieldCat.field_columns.value_column_info, fieldCat.id + ".value_column_info");
+						if (valueColInfoDesc !== fieldCat.id + ".value_column_info") {
+							fieldCat.field_columns.value_column_info.descLabel = valueColInfoDesc;
+						}
+
 						if (fieldCat.field_columns.additional_column_info) {
 							fieldCat.field_columns.additional_column_info.forEach((col) => {
 								col.locLabel = l10nProvider.l10nLabel(col, fieldCat.id + ".additional_column_info." + col.id);

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()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 

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

@@ -154,7 +154,7 @@ class MultiSelectControl extends React.Component {
 				onChange={this.handleOnChange}
 				placeholder={label}
 				titleText={this.props.tableControl ? null : this.props.controlItem}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 			/>);
 		} else {
 			dropdownComponent = (<MultiSelect
@@ -167,7 +167,7 @@ class MultiSelectControl extends React.Component {
 				onChange={this.handleOnChange}
 				label={label}
 				titleText={this.props.tableControl ? null : this.props.controlItem}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 			/>);
 		}
 

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

@@ -125,7 +125,7 @@ class NumberfieldControl extends React.Component {
 					label={this.props.controlItem}
 					hideLabel={this.props.tableControl}
 					allowEmpty
-					light={this.props.controller.getLight()}
+					light={this.props.controller.getLight() && !this.props.control.light}
 					hideSteppers={this.props.tableControl || (this.props.control.controlType === ControlType.NUMBERFIELD)}
 				/>
 				{numberGenerator}

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { TextInput, Form } from "carbon-components-react";
+import { PasswordInput, Form } from "carbon-components-react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES } from "./../../constants/constants.js";
@@ -41,7 +41,7 @@ class PasswordControl extends React.Component {
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
 				<Form>
-					<TextInput.PasswordInput
+					<PasswordInput
 						{...validationProps}
 						autoComplete="off"
 						id={this.id}
@@ -51,7 +51,7 @@ class PasswordControl extends React.Component {
 						value={value}
 						labelText={this.props.controlItem}
 						hideLabel={this.props.tableControl}
-						light={this.props.controller.getLight()}
+						light={this.props.controller.getLight() && !this.props.control.light}
 						tooltipAlignment="end"
 					/>
 				</Form>

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()}
+				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()}
+					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/controls/textarea/textarea.jsx

@@ -78,7 +78,7 @@ class TextareaControl extends React.Component {
 					value={value}
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
-					light={this.props.controller.getLight()}
+					light={this.props.controller.getLight() && !this.props.control.light}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly={!showValidationMessage} state={""} messageInfo={errorMessage} />
 			</div>);
@@ -92,7 +92,7 @@ class TextareaControl extends React.Component {
 				value={value}
 				labelText={this.props.controlItem}
 				hideLabel={this.props.tableControl}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 			/>);
 		}
 

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

@@ -103,7 +103,7 @@ class TextfieldControl extends React.Component {
 				value={value}
 				labelText={this.props.controlItem}
 				hideLabel={this.props.tableControl}
-				light={this.props.controller.getLight()}
+				light={this.props.controller.getLight() && !this.props.control.light}
 			/>);
 		}
 

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

@@ -81,7 +81,7 @@ class TimefieldControl extends React.Component {
 					value={this.value}
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
-					light={this.props.controller.getLight()}
+					light={this.props.controller.getLight() && !this.props.control.light}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>

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

@@ -54,10 +54,8 @@ class ToggleControl extends React.Component {
 			labelB={labelOn}
 			labelA={labelOff}
 			onToggle={this.handleChange.bind(this)}
-			labelText={this.props.controlItem}
+			labelText={this.props.tableControl ? null : this.props.controlItem}
 		/>);
-
-
 		const className = classNames("properties-toggle", { "hide": this.props.state === STATES.HIDDEN }, this.props.messageInfo ? this.props.messageInfo.type : null);
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>

package/src/common-properties/controls/toggle/toggle.scss

@@ -14,10 +14,13 @@
  * limitations under the License.
  */
 
+.properties-toggle {
+	.properties-label-container {
+		padding-bottom: 0;
+	}
+}
 .properties-table-cell-control { // overrides when in a table cell
-	.properties-toggle {
-		.bx--toggle__switch { // override carbon when inside a table
-			margin: $spacing-02 0;
-		}
+	.bx--toggle__switch { // override carbon when inside a table
+		margin-bottom: $spacing-05;
 	}
 }

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

@@ -184,5 +184,6 @@ export class Control {
 		if (settings.buttons) {
 			this.buttons = settings.buttons;
 		}
+		this.light = settings.light || false;
 	}
 }

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

@@ -135,7 +135,7 @@ function makePrimaryTab(propertyDef, group, l10nProvider) {
 	return new EditorTab(label, group.name, _makeUIItem(propertyDef.parameterMetadata, propertyDef.actionMetadata, group, propertyDef.structureMetadata, l10nProvider));
 }
 
-function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider) {
+function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light = false) {
 	const groupName = group.name;
 	let groupItem = null;
 	let groupLabel = null;
@@ -144,7 +144,7 @@ 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)));
+			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light)));
 	case GroupType.COLUMN_SELECTION:
 		return UIItem.makePanel(new ControlPanel(groupName, PanelType.COLUMN_SELECTION, groupClassName, nestedPanel,
 			_makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider)));
@@ -240,14 +240,18 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 	}
 	case GroupType.TEARSHEET_PANEL: {
 		groupLabel = l10nProvider.l10nLabel(group, group.name);
+		let groupDesc;
+		if (group.description) {
+			groupDesc = new Description(l10nProvider.l10nResource(group.description));
+		}
 		const panSubItems = [];
 		if (Array.isArray(group.subGroups)) {
 			group.subGroups.forEach(function(subGroup) {
-				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider);
+				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, true);
 				panSubItems.push(groupItem);
 			});
 		}
-		return UIItem.makeTearsheetPanel(new ControlPanel(groupName, PanelType.TEARSHEET, groupClassName, nestedPanel, panSubItems, groupLabel, false), group.description);
+		return UIItem.makeTearsheetPanel(new ControlPanel(groupName, PanelType.TEARSHEET, groupClassName, nestedPanel, panSubItems, groupLabel, false), groupDesc);
 	}
 	default:
 		logger.warn("(Unknown group type '" + group.groupType() + "')");
@@ -258,7 +262,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 /**
  * Called on a base property group.
  */
-function _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider) {
+function _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light = false) {
 	const uiItems = [];
 	const panelInsertedFor = [];
 	if (!Array.isArray(group.parameterNames())) {
@@ -272,7 +276,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);
+			const ctrl = _makeControl(parameterMetadata, paramName, group, structureDef, l10nProvider, actionMetadata, structureMetadata, null, light);
 			const control = UIItem.makeControl(ctrl);
 			if (prop.separatorBefore()) {
 				uiItems.push(UIItem.makeHSeparator());
@@ -316,7 +320,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);
+				const uiItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, light);
 				uiItems.push(uiItem);
 			}
 		});
@@ -411,8 +415,8 @@ function _makeStringControl(parameter, isSubControl) {
 /**
  * Creates a control for the supplied property.
  */
-function _makeControl(parameterMetadata, paramName, group, structureDefinition, l10nProvider, actionMetadata, structureMetadata, subControl) {
-	const isSubControl = typeof subControl !== "undefined";
+function _makeControl(parameterMetadata, paramName, group, structureDefinition, l10nProvider, actionMetadata, structureMetadata, subControl, light = false) {
+	const isSubControl = typeof subControl !== "undefined" && subControl;
 
 	// Assume the property is defined
 	const parameter = isSubControl ? subControl : parameterMetadata.getParameter(paramName);
@@ -463,8 +467,10 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 			controlType = ControlType.PASSWORDFIELD;
 			break;
 		case Type.BOOLEAN:
-			labelVisible = false;
-			controlType = ControlType.CHECKBOX;
+			if (!parameter.control || parameter.control === ControlType.CHECKBOX) {
+				labelVisible = false;
+				controlType = ControlType.CHECKBOX;
+			}
 			break;
 		case Type.INTEGER:
 		case Type.LONG:
@@ -637,6 +643,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.customValueAllowed = parameter.customValueAllowed;
 	settings.className = parameter.className;
 	settings.buttons = buttons;
+	settings.light = light;
 	if (isSubControl) {
 		settings.visible = parameter.visible;
 		settings.width = parameter.columns(8);

package/src/common-properties/index.scss

@@ -49,6 +49,11 @@
 	align-items: left;
 }
 
+.bx--tabs--scrollable .bx--tabs--scrollable__nav-item.properties-hidden-container,
+.properties-hidden-container {
+	display: none;
+}
+
 .properties-modal-error {
 	button:first-of-type { // hides the secondary button
 		display: none;

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

@@ -4,51 +4,38 @@ import { ComposedModal, ModalHeader, ModalBody } from "carbon-components-react";
 import { Portal } from "react-portal";
 
 class TearSheet extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			open: false
-		};
-	}
-	componentDidMount() {
-		setTimeout(() => {
-			this.setState({
-				open: true
-			});
-		}, 0);
-	}
 	render() {
-		const title = this.props.panel.label ? this.props.panel.label : null;
-		const description = this.props.panel.description ? this.props.panel.description.default : null;
+		const title = this.props.tearsheet ? this.props.tearsheet.title : null;
+		const description = this.props.tearsheet ? this.props.tearsheet.description : null;
+		const content = this.props.tearsheet ? this.props.tearsheet.content : null;
 		return (
 			<Portal>
 				<ComposedModal
 					className="properties-tearsheet-panel"
-					open={this.state.open}
+					open={this.props.open}
 					size="lg"
 					preventCloseOnClickOutside
 				>
 					<ModalHeader
 						title={title}
 						buttonOnClick={() => {
-							setTimeout(() => {
-								this.props.controller.clearActiveTearsheet();
-							}, 500);
+							this.props.controller.clearActiveTearsheet();
 						}}
 					>
 						{description ? (<p>{description}</p>) : null}
 					</ModalHeader>
 					<ModalBody>
-						{this.props.children}
+						{content}
 					</ModalBody>
 				</ComposedModal>
 			</Portal>);
 	}
 }
 TearSheet.propTypes = {
-	panel: PropTypes.object.isRequired,
+	open: PropTypes.bool,
 	controller: PropTypes.object.isRequired,
-	children: PropTypes.array
+	children: PropTypes.array,
+	tearsheet: PropTypes.object
 };
 
 export default TearSheet;