@elyra/canvas 12.23.1 → 12.24.0

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

@@ -22,7 +22,7 @@ import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import { Search } from "carbon-components-react";
 import VirtualizedTable from "./../virtualized-table/virtualized-table.jsx";
-import { SORT_DIRECTION, STATES, ROW_HEIGHT, ROW_SELECTION } from "./../../constants/constants";
+import { REM_ROW_HEIGHT, REM_HEADER_HEIGHT, ONE_REM_HEIGHT, SORT_DIRECTION, STATES, ROW_HEIGHT, ROW_SELECTION } from "./../../constants/constants";
 import ReactResizeDetector from "react-resize-detector";
 import classNames from "classnames";
 import { has, isEmpty } from "lodash";
@@ -45,7 +45,9 @@ class FlexibleTable extends React.Component {
 			columnSortDir: sortDirs,
 			currentSortColumn: "",
 			tableWidth: 0,
-			tableHeight: 0
+			tableHeight: 0,
+			rows: typeof props.rows !== "undefined" ? props.rows : 5.5,
+			dynamicHeight: null
 		};
 
 		this.rowHeight = this.rowHeight.bind(this);
@@ -243,29 +245,30 @@ class FlexibleTable extends React.Component {
 			return;
 		}
 		let newHeight = this.state.tableHeight;
-		const rowHeight = 2; // in rem
-		const headerHeight = 2; // in rem
-		const rows = typeof this.props.rows !== "undefined" ? this.props.rows : 5.5;
-		if (Array.isArray(this.props.data) && this.props.data.length < rows) {
-			newHeight = (rowHeight * this.props.data.length + headerHeight) + "rem";
-		} else if (rows > 0) {
-			newHeight = (rowHeight * rows + headerHeight) + "rem";
-		} else if (rows === 0) { // only display header
-			newHeight = headerHeight + "rem";
-		} else if (rows === -1) {
+		let dynamicH = this.state.dynamicHeight;
+		const multiSelectTableHeight = REM_ROW_HEIGHT + REM_HEADER_HEIGHT;
+		if (Array.isArray(this.props.data) && this.props.data.length < this.state.rows) {
+			newHeight = (REM_ROW_HEIGHT * this.props.data.length + REM_HEADER_HEIGHT + (this.props.selectedEditRow ? multiSelectTableHeight : 0)) + "rem";
+		} else if (this.state.rows > 0) {
+			newHeight = (REM_ROW_HEIGHT * this.state.rows + REM_HEADER_HEIGHT + (this.props.selectedEditRow ? multiSelectTableHeight : 0)) + "rem";
+		} else if (this.state.rows === 0) { // only display header
+			newHeight = REM_HEADER_HEIGHT + "rem";
+		} else if (this.state.rows === -1) {
 			if (this.flexibleTable) {
 				const labelAndDescriptionHeight = 50; // possible dynamically set this in the future
 				const ftHeaderHeight = (typeof this.flexibleTableHeader !== "undefined") ? ReactDOM.findDOMNode(this.flexibleTableHeader).getBoundingClientRect().height : 0;
 				const flyoutHeight = this.findPropertyNodeHeight(this.flexibleTable, "properties-wf-children");
 				if (flyoutHeight === 0) {
 					newHeight = "100vh"; // set full window height if flyout height not found
+					dynamicH = -1;
 				} else {
 					newHeight = `calc(${flyoutHeight - ftHeaderHeight - labelAndDescriptionHeight}px - 3.5rem)`; // 3.5rem to adjust padding
+					dynamicH = (flyoutHeight - ftHeaderHeight - labelAndDescriptionHeight) - (3.5 * 16);
 				}
 			}
 		}
 		if (newHeight !== this.state.tableHeight) {
-			this.setState({ tableHeight: newHeight });
+			this.setState({ tableHeight: newHeight, dynamicHeight: dynamicH });
 		}
 	}
 
@@ -498,7 +501,7 @@ class FlexibleTable extends React.Component {
 		}
 
 		const containerClass = this.props.showHeader ? "properties-ft-container-absolute " : "properties-ft-container-absolute-noheader ";
-		const messageClass = (!this.props.messageInfo) ? containerClass + STATES.INFO : containerClass + this.props.messageInfo.type;
+		const messageClass = (!this.props.messageInfo) ? containerClass + STATES.INFO : containerClass;
 		const ftHeader = (searchBar || this.props.topRightPanel)
 			? (<div className="properties-ft-table-header" ref={ (ref) => (this.flexibleTableHeader = ref) }>
 				{searchBar}
@@ -514,16 +517,29 @@ class FlexibleTable extends React.Component {
 			)
 			: null;
 
+		const ftClassname = classNames("properties-ft-control-container", { "properties-light-disabled": !this.props.light });
+
+		let tableHeight = 0;
+		const multiSelectEditRowsRem = 2 * REM_HEADER_HEIGHT; // multi-select adds two rows when selectedEditRow
+		const multiSelectEditRowsPixels = multiSelectEditRowsRem * ONE_REM_HEIGHT;
+		if (this.state.rows !== -1 && this.state.tableHeight) {
+			const remHeight = parseInt(this.state.tableHeight, 10);
+			tableHeight = (remHeight - (this.props.selectedEditRow ? multiSelectEditRowsRem : 0)) * ONE_REM_HEIGHT;
+		} else if (this.state.rows === -1 && this.state.dynamicHeight && this.state.dynamicHeight !== -1) {
+			tableHeight = this.state.dynamicHeight - (this.props.selectedEditRow ? multiSelectEditRowsPixels : 0);
+		}
+
 		return (
-			<div data-id={"properties-ft-" + this.props.scrollKey} className="properties-ft-control-container" ref={ (ref) => (this.flexibleTable = ref) }>
+			<div data-id={"properties-ft-" + this.props.scrollKey} className={ftClassname} ref={ (ref) => (this.flexibleTable = ref) }>
 				{ftHeader}
 				<div className="properties-ft-container-panel">
 					<ReactResizeDetector handleWidth onResize={this._updateTableWidth}>
-						<div className="properties-ft-container-wrapper" style={ heightStyle }>
+						<div className={classNames("properties-ft-container-wrapper", this.props.messageInfo ? this.props.messageInfo.type : "")} style={ heightStyle }>
 							<div className={messageClass}>
 								{this.props.selectedEditRow}
 								<VirtualizedTable
 									tableLabel={this.props.tableLabel}
+									tableHeight={tableHeight}
 									columns={headers}
 									onHeaderClick={this.sortHeaderClick}
 									rowCount={this.props.data.length}

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

@@ -52,6 +52,12 @@ $row-left-padding: $spacing-02;
 	width: 100%;
 	position: relative;
 	overflow: hidden;
+	&.error {
+		border: 1px solid $support-01;
+	}
+	&.warning {
+		border: 1px solid $support-03;
+	}
 }
 
 // selectcolumns and tables without headers
@@ -64,24 +70,12 @@ $row-left-padding: $spacing-02;
 	background-color: $ui-01;
 	display: flex; // address scrollbar with mouse issue
 	flex-direction: column; // address scrollbar with mouse issue
-	&.error {
-		border: 1px solid $support-01;
-	}
-	&.warning {
-		border: 1px solid $support-03;
-	}
 }
 
 .properties-ft-container-absolute {
 	height: 100%;
 	width: 100%;
 	background-color: $ui-01;
-	&.error {
-		border: 1px solid $support-01;
-	}
-	&.warning {
-		border: 1px solid $support-03;
-	}
 	.properties-ft-container {
 		height: 100%;
 	}

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

@@ -40,7 +40,7 @@ export default class PropertiesModal extends Component {
 		return (
 			<Portal>
 				<Modal
-					className={classNames("properties-modal", { "noButtons": this.props.showPropertiesButtons === false })}
+					className={classNames("properties-modal", { "noButtons": this.props.showPropertiesButtons === false }, this.props.classNames)}
 					open
 					modalHeading={this.props.title}
 					primaryButtonText={this.props.applyLabel}
@@ -68,4 +68,6 @@ PropertiesModal.propTypes = {
 	showPropertiesButtons: PropTypes.bool,
 	applyLabel: PropTypes.string,
 	rejectLabel: PropTypes.string,
+	classNames: PropTypes.string
 };
+

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

@@ -29,6 +29,7 @@
 		.bx--modal-footer {
 			opacity: 0;
 			pointer-events: none;
+			display: none;
 		}
 	}
 }

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

@@ -111,6 +111,7 @@ class TableButtons extends React.Component {
 			<Toolbar
 				config={toolbarConfig}
 				instanceId={0}
+				size="sm"
 				toolbarActionHandler={this.customButtonOnClick}
 			/>
 		</div>);

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

@@ -16,34 +16,12 @@
 
 .properties-custom-table-buttons {
 	.toolbar-div {
-		height: $spacing-07;
-
-		.toolbar-left-bar {
-			padding-right: 0;
-
-			.toolbar-item button {
-				height: $spacing-07;
-			}
-
-			.toolbar-item-content {
-				padding: $spacing-02 $spacing-03;
-				height: $spacing-07;
-				min-width: $spacing-07;
-				align-items: center;
-			}
-
-			.toolbar-overflow-item button {
-				height: $spacing-07;
-			}
-
-			.toolbar-popover-list {
-				top: $spacing-07;
-				right: 0;
-			}
-		}
-
 		.toolbar-right-bar {
 			display: none;
 		}
 	}
+	.toolbar-popover-list {
+		top: $spacing-07;
+		right: 0;
+	}
 }

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

@@ -461,10 +461,6 @@ class VirtualizedTable extends React.Component {
 	render() {
 		const defaultTestHeight = 2000; // 2000 is set to accommodate test data "category-selection-data" with all categories expanded
 
-		// AutoSizer manages width and height properties so the table fills the available space.
-		// It does a direct DOM manipulation to the parent, outside React's VirtualDOM.
-		// Since the actual DOM is not available when unit testing, we are passing in a default
-		// width of 500 and a default height of 300.
 		return (
 			<div className="properties-vt">
 				<div className={classNames("properties-vt-autosizer",
@@ -476,7 +472,11 @@ class VirtualizedTable extends React.Component {
 							<Table
 								ref={this.virtualizedTableRef}
 								width={width ? width : 500}
-								height={height ? height : defaultTestHeight}
+								// AutoSizer manages width and height properties so the table fills the available space.
+								// It does a direct DOM manipulation to the parent, outside React's VirtualDOM.
+								// Since the actual DOM is not available when unit testing, we are passing in a default
+								// width of 500 and a default height of 300.
+								height={this.props.tableHeight || height || defaultTestHeight}
 
 								className="properties-autosized-vt"
 								aria-label={this.props.tableLabel ? this.props.tableLabel : ""}
@@ -530,6 +530,7 @@ VirtualizedTable.defaultProps = {
 
 VirtualizedTable.propTypes = {
 	tableLabel: PropTypes.string,
+	tableHeight: PropTypes.number.isRequired,
 	selectable: PropTypes.bool,
 	summaryTable: PropTypes.bool,
 	rowSelection: PropTypes.string,

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

@@ -21,7 +21,7 @@ export const MESSAGE_KEYS = {
 	STRUCTURETABLE_ADDBUTTON_LABEL: "structureTable.addButton.label",
 	STRUCTURETABLE_REMOVEBUTTON_LABEL: "structureTable.removeButton.label",
 	FIELDPICKER_SAVEBUTTON_LABEL: "fieldPicker.saveButton.label",
-	FIELDPICKER_SAVEBUTTON_TOOLTIP: "fieldPicker.saveButton.tooltip",
+	FIELDPICKER_SAVEBUTTON_MODAL_LABEL: "fieldPicker.saveButton.modal.label",
 	FIELDPICKER_RESETBUTTON_LABEL: "fieldPicker.resetButton.label",
 	FIELDPICKER_FILTER_LABEL: "fieldPicker.filter.label",
 	FIELDPICKER_FIELDCOLUMN_LABEL: "fieldPicker.fieldColumn.label",
@@ -58,6 +58,7 @@ export const MESSAGE_KEYS = {
 	REQUIRED_ERROR: "required.error",
 	DATETIME_FORMAT_ERROR: "datetime.format.error",
 	INVALID_FIELD_ERROR: "invalid.field.error",
+	INVALID_NUMBER_ERROR: "invalid.number.error",
 	EXPRESSION_VALIDATE_LABEL: "expression.validate.label",
 	EXPRESSION_VALIDATING_LABEL: "expression.validating.label",
 	EXPRESSION_BUILDER_TITLE: "expression.builder.title",
@@ -86,6 +87,8 @@ export const MESSAGE_KEYS = {
 	EXPRESSION_ALL_FUNCTIONS: "expression.all.functions",
 	EXPRESSION_MIN_LABEL: "expression.min.label",
 	EXPRESSION_MAX_LABEL: "expression.max.label",
+	EXPRESSION_MAXIMIZE_LABEL: "expression.maximize.label",
+	EXPRESSION_MINIMIZE_LABEL: "expression.minimize.label",
 	EXPRESSION_NO_FUNCTIONS: "expression.no.functions",
 	MULTI_SELECTED_ROW_LABEL: "multi.selected.row.label",
 	MULTI_SELECTED_ROW_ACTION: "multi.selected.row.action",
@@ -107,7 +110,9 @@ export const MESSAGE_KEYS = {
 	MULTISELECT_DROPDOWN_OPTIONS_SELECTED_LABEL: "multiselect.dropdown.options.selected.label",
 	PROPERTIES_EMPTY_TABLE_TEXT: "properties.empty.table.text",
 	TOGGLE_ON_LABEL: "toggle.on.label",
-	TOGGLE_OFF_LABEL: "toggle.off.label"
+	TOGGLE_OFF_LABEL: "toggle.off.label",
+	SHOW_PASSWORD_TOOLTIP: "passwordShow.tooltip",
+	HIDE_PASSWORD_TOOLTIP: "passwordHide.tooltip"
 };
 
 export const TRUNCATE_LIMIT = 10000;
@@ -188,6 +193,10 @@ export const DEFAULT_LABEL_EDITABLE = true;
 
 export const ROW_HEIGHT = 32;
 
+export const ONE_REM_HEIGHT = 16;
+export const REM_ROW_HEIGHT = 2; // in rem
+export const REM_HEADER_HEIGHT = 2; // in rem
+
 export const EXPRESSION_TABLE_ROWS = 7;
 
 export const TABLE_SUBPANEL_BUTTON_WIDTH = "36px";

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

@@ -71,7 +71,7 @@ export default class AbstractTable extends React.Component {
 		this.buildChildItem = this.buildChildItem.bind(this);
 		this.makeCells = this.makeCells.bind(this);
 		this.checkedAll = this.checkedAll.bind(this);
-
+		this.isLightTheme = this.isLightTheme.bind(this);
 
 		if (props.selectedRows && props.selectedRows.length > 0) {
 			this.scrollToRow = props.selectedRows[props.selectedRows.length - 1];
@@ -258,16 +258,20 @@ export default class AbstractTable extends React.Component {
 		const summaryPropertyId = {
 			name: this.selectSummaryPropertyName
 		};
+		const tableControl = this.props.controller.getControl({ name: this.props.control.name });
 		const newSelectedSummaryRow = this.props.controller.getPropertyValue(summaryPropertyId);
 		if (newSelectedSummaryRow && Array.isArray(newSelectedSummaryRow)) {
 			newSelectedSummaryRow[0].forEach((cellValue, colIndex) => {
-				if (!isEqual(cellValue, this.selectedSummaryRowValue[0][colIndex])) {
+				if (cellValue !== null && !isEqual(cellValue, this.selectedSummaryRowValue[0][colIndex])) {
 					// if a column does not have a value, the default value is null and the value returned
 					// from getPropertyValue is undefined causing unneccessary updates and an infinite loop during intialization
 					const testCell = (typeof cellValue === "undefined") ? null : cellValue;
 					this.props.selectedRows.forEach((rowIndex) => {
 						this.props.controller.updatePropertyValue({ name: this.props.control.name, row: rowIndex, col: colIndex }, testCell, true);
 					});
+					if (tableControl.subControls[colIndex].controlType === ControlType.ONEOFSELECT) {
+						this.props.controller.updatePropertyValue({ name: this.selectSummaryPropertyName, row: 0, col: colIndex }, null);
+					}
 				}
 			});
 			this.selectedSummaryRowValue = cloneDeep(newSelectedSummaryRow);
@@ -429,6 +433,10 @@ export default class AbstractTable extends React.Component {
 		}
 	}
 
+	isLightTheme() {
+		return this.props.controller.getLight() && this.props.control.light && !this.props.controller.isTearsheetContainer();
+	}
+
 	makeSelectedEditRow(selectedRows) {
 		if (selectedRows && Array.isArray(selectedRows) && selectedRows.length > 1) {
 			const rowsSelectedLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(),
@@ -457,7 +465,7 @@ export default class AbstractTable extends React.Component {
 					tableLabel={tableLabel}
 					summaryTable
 					rowSelection={ROW_SELECTION.MULTIPLE}
-					light={this.props.controller.getLight()}
+					light={this.isLightTheme()}
 					emptyTablePlaceholder={this.props.control.additionalText}
 				/>
 			</div>);
@@ -677,7 +685,7 @@ export default class AbstractTable extends React.Component {
 				updateRowSelections={rowClickCallback}
 				selectedRows= {this.props.selectedRows}
 				rowSelection={this.props.control.rowSelection}
-				light={this.props.controller.getLight()}
+				light={this.isLightTheme()}
 				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 		return (

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() && !this.props.control.light}
+					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() && !this.props.control.light}
+				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() && !this.props.control.light}
+				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() && !this.props.control.light}
+				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

@@ -24,8 +24,9 @@ import { formatMessage } from "./../../../util/property-utils";
 import { sortBy, get } from "lodash";
 import { v4 as uuid4 } from "uuid";
 
-export default class ExpressionSelectFieldOrFunction extends React.Component {
+const FIELDS_SPECIAL_CHARACTERS_REGEX = new RegExp("[0-9- _$]", "g");
 
+export default class ExpressionSelectFieldOrFunction extends React.Component {
 	constructor(props) {
 		super(props);
 		this.reactIntl = props.controller.getReactIntl();
@@ -76,6 +77,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		this.onValueTableDblClick = this.onValueTableDblClick.bind(this);
 
 		this.sortTableRows = this.sortTableRows.bind(this);
+		this.shouldQuoteField = this.shouldQuoteField.bind(this);
 	}
 
 	onSwitch(switchName, evt) {
@@ -125,7 +127,9 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		}
 		if (this.props.onChange) {
 			const quote = (this.language === "CLEM" && this.state.fieldCategory !== "globals") ? "'" : "";
-			value = quote + field.id + quote;
+			if (this.shouldQuoteField(field.id)) {
+				value = quote + field.id + quote;
+			}
 			this.props.onChange(value);
 		}
 	}
@@ -229,6 +233,11 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		return data;
 	}
 
+	// Determine if field should be quoted - quote if the field name contains special characters
+	shouldQuoteField(field) {
+		return field.match(FIELDS_SPECIAL_CHARACTERS_REGEX) !== null;
+	}
+
 	createContentObject(label) {
 		let disabled = true;
 		if (label) {

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

@@ -20,14 +20,14 @@ import PropTypes from "prop-types";
 import { injectIntl } from "react-intl";
 import { Button } from "carbon-components-react";
 import { Maximize16, Minimize16 } from "@carbon/icons-react";
-
-const maximizeId = "expression.maximize.label";
-const minimizeId = "expression.minimize.label";
+import { formatMessage } from "../../../util/property-utils";
+import { MESSAGE_KEYS } from "../../../constants/constants";
 
 class ExpressionToggle extends React.Component {
 	constructor(props) {
 		super(props);
 		this.buttonHandler = props.controller.getHandlers().buttonHandler || (() => null);
+		this.reactIntl = props.controller.getReactIntl();
 	}
 	render() {
 		return (
@@ -40,7 +40,7 @@ class ExpressionToggle extends React.Component {
 						kind="ghost"
 						renderIcon={Maximize16}
 						hasIconOnly
-						iconDescription={this.props.intl.formatMessage({ id: maximizeId })}
+						iconDescription={formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_MAXIMIZE_LABEL)}
 						onClick={() => {
 							const handlerStatus = this.buttonHandler({
 								type: "maximize_tearsheet",
@@ -57,7 +57,7 @@ class ExpressionToggle extends React.Component {
 						kind="ghost"
 						hasIconOnly
 						renderIcon={Minimize16}
-						iconDescription={this.props.intl.formatMessage({ id: minimizeId })}
+						iconDescription={formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_MINIMIZE_LABEL)}
 						onClick={() => this.props.controller.clearActiveTearsheet()}
 					/>)
 					}
@@ -66,7 +66,6 @@ class ExpressionToggle extends React.Component {
 	}
 }
 ExpressionToggle.propTypes = {
-	intl: PropTypes.object.isRequired,
 	control: PropTypes.object.isRequired,
 	controller: PropTypes.object.isRequired,
 	enableMaximize: PropTypes.bool

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

@@ -265,6 +265,7 @@ class ExpressionControl extends React.Component {
 	_showBuilderButton() {
 		// only show the button if there are function lists available and
 		// not explicitly told not to by the this.props.builder
+		// TODO: Design: how to display builder outside of right flyout?
 		return this.props.builder && this.props.rightFlyout && this.expressionInfo.functionCategories && Object.keys(this.expressionInfo.functionCategories).length > 0;
 	}
 
@@ -339,7 +340,8 @@ class ExpressionControl extends React.Component {
 			</div>
 		</WideFlyout>) : null;
 
-		const className = classNames(`properties-expression-editor ${messageType}`, { "properties-light-disabled": this.props.control.light || !this.props.controller.getLight() });
+		const className = classNames(`properties-expression-editor ${messageType}`,
+			{ "properties-light-disabled": !this.props.control.light || !this.props.controller.getLight() || this.props.controller.isTearsheetContainer() });
 
 		const expressionLink = (<div className="properties-expression-link-container" >
 			{button}

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

@@ -105,11 +105,10 @@
 
 .properties-light-disabled {
 	.CodeMirror {
-		background: $ui-01;
+		background: $field-01;
 	}
 }
 
-
 .properties-expression-link-container {
 	display: flex;
 	justify-content: space-between;

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

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

@@ -20,7 +20,8 @@ import { connect } from "react-redux";
 import { NumberInput, Button } from "carbon-components-react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
-import { STATES } from "./../../constants/constants.js";
+import { formatMessage } from "./../../util/property-utils";
+import { STATES, MESSAGE_KEYS } from "./../../constants/constants.js";
 import classNames from "classnames";
 import { ControlType } from "./../../constants/form-constants";
 import { Shuffle16 } from "@carbon/icons-react";
@@ -32,6 +33,7 @@ class NumberfieldControl extends React.Component {
 		this.onDirection = this.onDirection.bind(this);
 		this.generateNumber = this.generateNumber.bind(this);
 		this.id = ControlUtils.getControlId(this.props.propertyId);
+		this.reactIntl = props.controller.getReactIntl();
 	}
 
 	onDirection(direction) {
@@ -59,12 +61,34 @@ class NumberfieldControl extends React.Component {
 			this.onDirection(direction);
 			return;
 		}
-		if (evt.target.validity && evt.target.validity.badInput) {
-			this.setState({
-				invalid: true // TODO need to hook into validations
-			});
+
+		if (
+			evt.target.validity && evt.target.validity.badInput ||
+			(!isFinite(evt.target.value))
+		) {
+			// Note - When user enters an invalid number, evt.target.value is set to "".
+			// It is difficult to differentiate between empty value and invalid input because both return "".
+			// It's not possible to add a seaparte condition for invalid input because we never get the actual invalid number entered by the user.
+			// So, setting error message for invalid input here instead of using conditions.
+			if (this.props.controller.getErrorMessage(this.props.propertyId) === null) {
+				const errorMessage = {
+					type: "error",
+					text: formatMessage(this.reactIntl, MESSAGE_KEYS.INVALID_NUMBER_ERROR),
+					propertyId: this.props.propertyId,
+					validation_id: "invalid_number"
+				};
+				this.props.controller.updateErrorMessage(this.props.propertyId, errorMessage);
+			}
+			// Return without updating property value
 			return;
 		}
+		// Number is valid, clear invalid number error if it exists
+		const invalidNumberError = this.props.controller.getErrorMessage(this.props.propertyId) !== null &&
+		this.props.controller.getErrorMessage(this.props.propertyId).validation_id === "invalid_number";
+		if (invalidNumberError) {
+			this.props.controller.updateErrorMessage(this.props.propertyId, null);
+		}
+
 		const actualValue = evt.target.value;
 		if (typeof actualValue === "undefined" || actualValue === null || actualValue === "") {
 			this.props.controller.updatePropertyValue(this.props.propertyId, null);
@@ -125,7 +149,7 @@ class NumberfieldControl extends React.Component {
 					label={this.props.controlItem}
 					hideLabel={this.props.tableControl}
 					allowEmpty
-					light={this.props.controller.getLight() && !this.props.control.light}
+					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

@@ -20,8 +20,9 @@ import { connect } from "react-redux";
 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";
+import { STATES, MESSAGE_KEYS } from "./../../constants/constants.js";
 import classNames from "classnames";
+import { formatMessage } from "./../../util/property-utils";
 
 class PasswordControl extends React.Component {
 	constructor(props) {
@@ -34,6 +35,14 @@ class PasswordControl extends React.Component {
 	}
 
 	render() {
+		const overrideShowPasswordLabel = `${this.props.control.name}.passwordShow.tooltip`;
+		const overrideHidePasswordLabel = `${this.props.control.name}.passwordHide.tooltip`;
+
+		const defaultShowPasswordLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.SHOW_PASSWORD_TOOLTIP);
+		const defaultHidePasswordLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.HIDE_PASSWORD_TOOLTIP);
+
+		const showPasswordLabel = this.props.controller.getResource(overrideShowPasswordLabel, defaultShowPasswordLabel);
+		const hidePasswordLabel = this.props.controller.getResource(overrideHidePasswordLabel, defaultHidePasswordLabel);
 		const value = this.props.value ? this.props.value : "";
 		const className = classNames("properties-pwdfield", "properties-input-control", { "hide": this.props.state === STATES.HIDDEN },
 			this.props.messageInfo ? this.props.messageInfo.type : null);
@@ -51,8 +60,10 @@ class PasswordControl extends React.Component {
 						value={value}
 						labelText={this.props.controlItem}
 						hideLabel={this.props.tableControl}
-						light={this.props.controller.getLight() && !this.props.control.light}
+						light={this.props.controller.getLight() && this.props.control.light}
 						tooltipAlignment="end"
+						showPasswordLabel={showPasswordLabel}
+						hidePasswordLabel={hidePasswordLabel}
 					/>
 				</Form>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />