@elyra/canvas 13.0.0-alpha.1 → 13.0.0

package/src/common-properties/controls/datepicker-range/datepicker-range.jsx

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { DatePicker, DatePickerInput, Layer } from "@carbon/react";
+import { DatePicker, DatePickerInput } from "@carbon/react";
 import classNames from "classnames";
 import { v4 as uuid4 } from "uuid";
 
@@ -135,40 +135,38 @@ class DatepickerRangeControl extends React.Component {
 
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<DatePicker
-						datePickerType={DATEPICKER_TYPE.RANGE}
-						dateFormat={this.dateFormat}
-						onChange={this.handleDateRangeChange.bind(this)}
-						locale={this.locale}
-						allowInput
-					>
-						<DatePickerInput
-							{...validationProps}
-							id={`${this.id}-start`}
-							placeholder={this.props.control.additionalText}
-							labelText={!this.props.tableControl && startLabel}
-							disabled={this.props.state === STATES.DISABLED}
-							size={this.getDatepickerSize()}
-							onChange={this.handleInputStartChange.bind(this)}
-							value={this.state.valueStart}
-							onBlur={this.onStartBlur.bind(this)}
-							helperText={!this.props.tableControl && startHelperText}
-						/>
-						<DatePickerInput
-							{...validationProps}
-							id={`${this.id}-end`}
-							placeholder={this.props.control.additionalText}
-							labelText={!this.props.tableControl && endLabel}
-							disabled={this.props.state === STATES.DISABLED}
-							size={this.getDatepickerSize()}
-							onChange={this.handleInputEndChange.bind(this)}
-							value={this.state.valueEnd}
-							onBlur={this.onEndBlur.bind(this)}
-							helperText={!this.props.tableControl && endHelperText}
-						/>
-					</DatePicker>
-				</Layer>
+				<DatePicker
+					datePickerType={DATEPICKER_TYPE.RANGE}
+					dateFormat={this.dateFormat}
+					onChange={this.handleDateRangeChange.bind(this)}
+					locale={this.locale}
+					allowInput
+				>
+					<DatePickerInput
+						{...validationProps}
+						id={`${this.id}-start`}
+						placeholder={this.props.control.additionalText}
+						labelText={!this.props.tableControl && startLabel}
+						disabled={this.props.state === STATES.DISABLED}
+						size={this.getDatepickerSize()}
+						onChange={this.handleInputStartChange.bind(this)}
+						value={this.state.valueStart}
+						onBlur={this.onStartBlur.bind(this)}
+						helperText={!this.props.tableControl && startHelperText}
+					/>
+					<DatePickerInput
+						{...validationProps}
+						id={`${this.id}-end`}
+						placeholder={this.props.control.additionalText}
+						labelText={!this.props.tableControl && endLabel}
+						disabled={this.props.state === STATES.DISABLED}
+						size={this.getDatepickerSize()}
+						onChange={this.handleInputEndChange.bind(this)}
+						value={this.state.valueEnd}
+						onBlur={this.onEndBlur.bind(this)}
+						helperText={!this.props.tableControl && endHelperText}
+					/>
+				</DatePicker>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>
 		);

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { SelectItem, Select, Dropdown, ComboBox, Layer } from "@carbon/react";
+import { SelectItem, Select, Dropdown, ComboBox } from "@carbon/react";
 import { isEqual, isEmpty } from "lodash";
 import * as ControlUtils from "./../../util/control-utils";
 import ValidationMessage from "./../../components/validation-message";
@@ -220,54 +220,48 @@ class DropDown extends React.Component {
 				options.push(<SelectItem text={option.label} key={this.id + "-" + option.value} value={option.value} />);
 			}
 			dropdownComponent = (
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<Select
-						id={this.id}
-						hideLabel
-						inline
-						labelText={this.props.control.label ? this.props.control.label.text : ""}
-						disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
-						onChange={this.handleChange}
-						value={selection}
-					>
-						{ options }
-					</Select>
-				</Layer>
+				<Select
+					id={this.id}
+					hideLabel
+					inline
+					labelText={this.props.control.label ? this.props.control.label.text : ""}
+					disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
+					onChange={this.handleChange}
+					value={selection}
+				>
+					{ options }
+				</Select>
 			);
 		} else if (this.props.control.customValueAllowed) { // combobox dropdown not allowed in tables
 			dropdownComponent = (
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<ComboBox
-						{...validationProps}
-						aria-label={this.props.control.label ? this.props.control.label.text : ""}
-						id={`${ControlUtils.getDataId(this.props.propertyId)}-dropdown`}
-						disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
-						placeholder={dropDown.selectedOption.label}
-						selectedItem={dropDown.selectedOption.label}
-						items={dropDown.options}
-						onChange={this.handleComboOnChange}
-						onInputChange={this.handleOnInputChange}
-						translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
-						titleText={this.props.controlItem}
-					/>
-				</Layer>
+				<ComboBox
+					{...validationProps}
+					aria-label={this.props.control.label ? this.props.control.label.text : ""}
+					id={`${ControlUtils.getDataId(this.props.propertyId)}-dropdown`}
+					disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
+					placeholder={dropDown.selectedOption.label}
+					selectedItem={dropDown.selectedOption.label}
+					items={dropDown.options}
+					onChange={this.handleComboOnChange}
+					onInputChange={this.handleOnInputChange}
+					translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
+					titleText={this.props.controlItem}
+				/>
 			);
 		} else {
 			dropdownComponent = (
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<Dropdown
-						{...validationProps}
-						id={`${ControlUtils.getDataId(this.props.propertyId)}-dropdown`}
-						disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
-						type="default"
-						items={dropDown.options}
-						onChange={this.handleChange}
-						selectedItem={dropDown.selectedOption}
-						label={this.emptyLabel}
-						translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
-						titleText={this.props.controlItem}
-					/>
-				</Layer>
+				<Dropdown
+					{...validationProps}
+					id={`${ControlUtils.getDataId(this.props.propertyId)}-dropdown`}
+					disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
+					type="default"
+					items={dropDown.options}
+					onChange={this.handleChange}
+					selectedItem={dropDown.selectedOption}
+					label={this.emptyLabel}
+					translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
+					titleText={this.props.controlItem}
+				/>
 			);
 		}
 

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

@@ -24,7 +24,7 @@
 
 }
 .properties-table-cell-control {
-	>.properties-dropdown {
+	.properties-dropdown {
 		.cds--select.cds--select--inline {
 			.cds--select-input--inline__wrapper {
 				width: 100%;

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { MultiSelect, FilterableMultiSelect, Layer } from "@carbon/react";
+import { MultiSelect, FilterableMultiSelect } from "@carbon/react";
 import * as ControlUtils from "./../../util/control-utils";
 import ValidationMessage from "./../../components/validation-message";
 import classNames from "classnames";
@@ -145,35 +145,31 @@ class MultiSelectControl extends React.Component {
 		let dropdownComponent = null;
 		if (this.props.control.filterable) {
 			dropdownComponent = (
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<FilterableMultiSelect
-						{...validationProps}
-						id={`${ControlUtils.getDataId(this.props.propertyId)}-multiselect-filterable`}
-						disabled={this.props.state === STATES.DISABLED}
-						translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
-						items={multiSelectDropdown.options}
-						initialSelectedItems={multiSelectDropdown.selectedOptions}
-						onChange={this.handleOnChange}
-						placeholder={label}
-						titleText={this.props.tableControl ? null : this.props.controlItem}
-					/>
-				</Layer>
+				<FilterableMultiSelect
+					{...validationProps}
+					id={`${ControlUtils.getDataId(this.props.propertyId)}-multiselect-filterable`}
+					disabled={this.props.state === STATES.DISABLED}
+					translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
+					items={multiSelectDropdown.options}
+					initialSelectedItems={multiSelectDropdown.selectedOptions}
+					onChange={this.handleOnChange}
+					placeholder={label}
+					titleText={this.props.tableControl ? null : this.props.controlItem}
+				/>
 			);
 		} else {
 			dropdownComponent = (
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<MultiSelect
-						{...validationProps}
-						id={`${ControlUtils.getDataId(this.props.propertyId)}-multiselect`}
-						disabled={this.props.state === STATES.DISABLED}
-						translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
-						items={multiSelectDropdown.options}
-						selectedItems={multiSelectDropdown.selectedOptions}
-						onChange={this.handleOnChange}
-						label={label}
-						titleText={this.props.tableControl ? null : this.props.controlItem}
-					/>
-				</Layer>
+				<MultiSelect
+					{...validationProps}
+					id={`${ControlUtils.getDataId(this.props.propertyId)}-multiselect`}
+					disabled={this.props.state === STATES.DISABLED}
+					translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
+					items={multiSelectDropdown.options}
+					selectedItems={multiSelectDropdown.selectedOptions}
+					onChange={this.handleOnChange}
+					label={label}
+					titleText={this.props.tableControl ? null : this.props.controlItem}
+				/>
 			);
 		}
 

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { NumberInput, Button, Layer } from "@carbon/react";
+import { NumberInput, Button } from "@carbon/react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { formatMessage } from "./../../util/property-utils";
@@ -158,23 +158,21 @@ class NumberfieldControl extends React.Component {
 		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<Layer className="properties-numberfield-layer" level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<NumberInput
-						{...validationProps}
-						ref= { (ref) => (this.numberInput = ref)}
-						id={this.id}
-						onChange={this.handleChange.bind(this)}
-						disabled={disabled}
-						step={this.props.control.increment}
-						value={controlValue}
-						placeholder={this.props.control.additionalText}
-						label={this.props.controlItem}
-						hideLabel={this.props.tableControl}
-						allowEmpty
-						hideSteppers={this.props.tableControl || (this.props.control.controlType === ControlType.NUMBERFIELD)}
-						onInput={this.onInput.bind(this)}
-					/>
-				</Layer>
+				<NumberInput
+					{...validationProps}
+					ref= { (ref) => (this.numberInput = ref)}
+					id={this.id}
+					onChange={this.handleChange.bind(this)}
+					disabled={disabled}
+					step={this.props.control.increment}
+					value={controlValue}
+					placeholder={this.props.control.additionalText}
+					label={this.props.controlItem}
+					hideLabel={this.props.tableControl}
+					allowEmpty
+					hideSteppers={this.props.tableControl || (this.props.control.controlType === ControlType.NUMBERFIELD)}
+					onInput={this.onInput.bind(this)}
+				/>
 				{numberGenerator}
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>

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, Layer } from "@carbon/react";
+import { TextInput } from "@carbon/react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES, MESSAGE_KEYS } from "./../../constants/constants.js";
@@ -49,22 +49,20 @@ class PasswordControl extends React.Component {
 		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<TextInput.PasswordInput
-						{...validationProps}
-						autoComplete="off"
-						id={this.id}
-						disabled={this.props.state === STATES.DISABLED}
-						placeholder={this.props.control.additionalText}
-						onChange={this.handleChange.bind(this)}
-						value={value}
-						labelText={this.props.controlItem}
-						hideLabel={this.props.tableControl}
-						tooltipAlignment="end"
-						showPasswordLabel={showPasswordLabel}
-						hidePasswordLabel={hidePasswordLabel}
-					/>
-				</Layer>
+				<TextInput.PasswordInput
+					{...validationProps}
+					autoComplete="off"
+					id={this.id}
+					disabled={this.props.state === STATES.DISABLED}
+					placeholder={this.props.control.additionalText}
+					onChange={this.handleChange.bind(this)}
+					value={value}
+					labelText={this.props.controlItem}
+					hideLabel={this.props.tableControl}
+					tooltipAlignment="end"
+					showPasswordLabel={showPasswordLabel}
+					hidePasswordLabel={hidePasswordLabel}
+				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>);
 	}

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

@@ -21,10 +21,9 @@ import { isEqual } from "lodash";
 import * as ControlUtils from "./../../util/control-utils";
 import * as ConditionsUtils from "./../../ui-conditions/conditions-utils.js";
 import ValidationMessage from "./../../components/validation-message";
-import { RadioButton } from "@carbon/react";
+import { RadioButton, RadioButtonGroup } from "@carbon/react";
 import classNames from "classnames";
 import { STATES, UPDATE_TYPE } from "./../../constants/constants.js";
-import { ORIENTATIONS } from "./../../constants/form-constants.js";
 import { v4 as uuid4 } from "uuid";
 import { Information } from "@carbon/react/icons";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
@@ -200,6 +199,10 @@ class RadiosetControl extends React.Component {
 				name: this.props.propertyId.name,
 				row: i
 			};
+			const labelWithInfo = (<div className="label-tooltip-container">
+				{valueSet.valueLabels[i]}
+				{tooltipIcon}
+			</div>);
 			buttons.push(
 				<div key={i} className="properties-radioset-panel">
 					<div className="properties-radioset-tooltip">
@@ -207,12 +210,11 @@ class RadiosetControl extends React.Component {
 							key={i}
 							id={ControlUtils.getControlId(id, this.uuid)}
 							disabled={disabled || itemDisabled}
-							labelText={valueSet.valueLabels[i]}
+							labelText={labelWithInfo}
 							value={val}
 							onChange={this.handleChange}
 							checked={checked}
 						/>
-						{tooltipIcon}
 					</div>
 					{optionalPanel}
 				</div>
@@ -223,12 +225,13 @@ class RadiosetControl extends React.Component {
 			<div data-id={ControlUtils.getDataId(this.props.control, this.props.propertyId)}
 				className={classNames("properties-radioset ", { "hide": this.props.state === STATES.HIDDEN })}
 			>
-				<div
-					className={classNames("properties-radio-button-group", this.props.messageInfo ? this.props.messageInfo.type : null,
-						{ "horizontal": this.props.control.orientation !== ORIENTATIONS.VERTICAL })} disabled={this.props.state === STATES.DISABLED}
+				<RadioButtonGroup className={classNames("properties-radio-button-group", this.props.messageInfo ? this.props.messageInfo.type : null)}
+					disabled={this.props.state === STATES.DISABLED}
+					name="radio-button-group"
+					orientation={this.props.control.orientation}
 				>
 					{buttons}
-				</div>
+				</RadioButtonGroup>
 				<ValidationMessage state={this.props.state} messageInfo={this.props.messageInfo} inTable={this.props.tableControl} />
 			</div>
 		);

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

@@ -26,24 +26,12 @@
 
 .properties-radio-button-group {
 	display: block;
-	&.horizontal {
+	.cds--radio-button-group--label-right { // Horizontal-long labels to wrap properly
 		display: inline-flex;
 		flex-wrap: wrap;
-		.properties-radioset-panel {
-			display: flex;
-			height: auto;
-			align-items: center;
-			margin-bottom: 0;
-		}
 	}
 	.properties-radioset-panel {
-		margin-bottom: $spacing-02;
-		margin-right: $spacing-04;
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		flex-wrap: wrap;
-		overflow: hidden;
+		margin-right: $spacing-04; // space between first label and next radiobtn
 		.cds--radio-button-wrapper{
 			margin-right: 0; // We removed the space between radio & tooltip to position it correctly
 		}
@@ -52,6 +40,10 @@
 			align-items: center;
 			margin: 2.5px 0 1.5px 0;
 		}
+		.label-tooltip-container {
+			display: flex;
+			align-items: center;
+		}
 		.properties-control-nested-panel{
 			flex-basis: 100%;
 			width: 100%;

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

@@ -16,7 +16,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { Slider, Layer } from "@carbon/react";
+import { Slider } from "@carbon/react";
 import { connect } from "react-redux";
 import classNames from "classnames";
 import { v4 as uuid4 } from "uuid";
@@ -50,23 +50,21 @@ class SliderControl extends React.Component {
 			<div className={classNames("properties-slider ", { "hide": this.props.state === STATES.HIDDEN },
 				this.props.messageInfo ? this.props.messageInfo.type : null)} data-id={ControlUtils.getDataId(this.props.propertyId)}
 			>
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<Slider
-						value={this.props.value !== null && typeof this.props.value !== "undefined" ? this.props.value : minValue}
-						min={minValue}
-						max={maxValue}
-						minLabel={minLabel}
-						maxLabel={maxLabel}
-						step={step}
-						labelText={this.props.controlItem}
-						onChange={this.handleChange}
-						disabled={this.props.state === STATES.DISABLED}
-						ariaLabelInput={formatMessage(this.reactIntl, MESSAGE_KEYS.SLIDER_NUMBER_INPUT_LABEL)}
-						formatLabel={
-							(val, label) => label || val
-						}
-					/>
-				</Layer>
+				<Slider
+					value={this.props.value !== null && typeof this.props.value !== "undefined" ? this.props.value : minValue}
+					min={minValue}
+					max={maxValue}
+					minLabel={minLabel}
+					maxLabel={maxLabel}
+					step={step}
+					labelText={this.props.controlItem}
+					onChange={this.handleChange}
+					disabled={this.props.state === STATES.DISABLED}
+					ariaLabelInput={formatMessage(this.reactIntl, MESSAGE_KEYS.SLIDER_NUMBER_INPUT_LABEL)}
+					formatLabel={
+						(val, label) => label || val
+					}
+				/>
 				<ValidationMessage state={this.props.state} messageInfo={this.props.messageInfo} inTable={this.props.tableControl} />
 			</div>
 		);

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { TextArea, Layer } from "@carbon/react";
+import { TextArea } from "@carbon/react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { formatMessage } from "./../../util/property-utils";
@@ -71,33 +71,29 @@ class TextareaControl extends React.Component {
 			};
 			validationProps = ControlUtils.getValidationProps(errorMessage, this.props.tableControl);
 			textArea = (<div>
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<TextArea
-						{...validationProps}
-						id={this.id}
-						disabled
-						placeholder={this.props.control.additionalText}
-						value={value}
-						labelText={this.props.controlItem}
-						hideLabel={this.props.tableControl}
-					/>
-				</Layer>
+				<TextArea
+					{...validationProps}
+					id={this.id}
+					disabled
+					placeholder={this.props.control.additionalText}
+					value={value}
+					labelText={this.props.controlItem}
+					hideLabel={this.props.tableControl}
+				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly={!showValidationMessage} state={""} messageInfo={errorMessage} />
 			</div>);
 		} else {
 			textArea = (
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<TextArea
-						{...validationProps}
-						id={this.id}
-						disabled={this.props.state === STATES.DISABLED}
-						placeholder={this.props.control.additionalText}
-						onChange={this.handleChange.bind(this)}
-						value={value}
-						labelText={this.props.controlItem}
-						hideLabel={this.props.tableControl}
-					/>
-				</Layer>
+				<TextArea
+					{...validationProps}
+					id={this.id}
+					disabled={this.props.state === STATES.DISABLED}
+					placeholder={this.props.control.additionalText}
+					onChange={this.handleChange.bind(this)}
+					value={value}
+					labelText={this.props.controlItem}
+					hideLabel={this.props.tableControl}
+				/>
 			);
 		}
 

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { TextInput, Layer } from "@carbon/react";
+import { TextInput } from "@carbon/react";
 import ReadonlyControl from "./../readonly";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
@@ -96,20 +96,18 @@ class TextfieldControl extends React.Component {
 		} else {
 			const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 			textInput = (
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<TextInput
-						{...validationProps}
-						autoComplete={this.props.tableControl === true ? "off" : "on"}
-						id={this.id}
-						disabled={ this.props.state === STATES.DISABLED}
-						placeholder={this.props.control.additionalText}
-						onChange={this.handleChange.bind(this)}
-						value={value}
-						labelText={this.props.controlItem}
-						hideLabel={this.props.tableControl}
-						ref={(ref) => (this.textInputRef = ref)}
-					/>
-				</Layer>
+				<TextInput
+					{...validationProps}
+					autoComplete={this.props.tableControl === true ? "off" : "on"}
+					id={this.id}
+					disabled={ this.props.state === STATES.DISABLED}
+					placeholder={this.props.control.additionalText}
+					onChange={this.handleChange.bind(this)}
+					value={value}
+					labelText={this.props.controlItem}
+					hideLabel={this.props.tableControl}
+					ref={(ref) => (this.textInputRef = ref)}
+				/>
 			);
 		}
 

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { TextInput, Layer } from "@carbon/react";
+import { TextInput } from "@carbon/react";
 import { parse, format, isValid } from "date-fns";
 import classNames from "classnames";
 
@@ -71,19 +71,17 @@ class TimefieldControl extends React.Component {
 		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
-					<TextInput
-						{...validationProps}
-						autoComplete="off"
-						id={this.id}
-						disabled={this.props.state === STATES.DISABLED}
-						placeholder={this.props.control.additionalText}
-						onChange={this.handleChange.bind(this)}
-						value={this.value}
-						labelText={this.props.controlItem}
-						hideLabel={this.props.tableControl}
-					/>
-				</Layer>
+				<TextInput
+					{...validationProps}
+					autoComplete="off"
+					id={this.id}
+					disabled={this.props.state === STATES.DISABLED}
+					placeholder={this.props.control.additionalText}
+					onChange={this.handleChange.bind(this)}
+					value={this.value}
+					labelText={this.props.controlItem}
+					hideLabel={this.props.tableControl}
+				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>
 		);