@elyra/canvas 12.44.0 → 13.0.0-alpha.0

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 { PasswordInput } from "carbon-components-react";
+import { TextInput, Layer } 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,21 +49,22 @@ 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)}>
-				<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}
-					light={this.props.controller.getLight() && this.props.control.light}
-					tooltipAlignment="end"
-					showPasswordLabel={showPasswordLabel}
-					hidePasswordLabel={hidePasswordLabel}
-				/>
+				<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>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>);
 	}

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

@@ -21,12 +21,12 @@ 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-components-react";
+import { RadioButton } 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 { Information16 } from "@carbon/icons-react";
+import { Information } from "@carbon/react/icons";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import { isEmpty } from "lodash";
 
@@ -186,7 +186,7 @@ class RadiosetControl extends React.Component {
 						showToolTipOnClick
 						disable={hidden || disabled}
 					>
-						<Information16 disabled={disabled} className="properties-control-description-icon-info" />
+						<Information disabled={disabled} className="properties-control-description-icon-info" />
 					</Tooltip>
 				);
 			}

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

@@ -18,7 +18,7 @@
 	&.hide {
 		display: none;
 	}
-	.bx--form-item {
+	.cds--form-item {
 		margin-bottom: $spacing-02;
 	}
 }
@@ -44,7 +44,7 @@
 		align-items: center;
 		flex-wrap: wrap;
 		overflow: hidden;
-		.bx--radio-button-wrapper{
+		.cds--radio-button-wrapper{
 			margin-right: 0; // We removed the space between radio & tooltip to position it correctly
 		}
 		.properties-radioset-tooltip {

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

@@ -16,19 +16,21 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { Slider } from "carbon-components-react";
+import { Slider, Layer } from "@carbon/react";
 import { connect } from "react-redux";
 import classNames from "classnames";
 import { v4 as uuid4 } from "uuid";
 
 import * as ControlUtils from "../../util/control-utils";
 import ValidationMessage from "../../components/validation-message";
-import { STATES } from "../../constants/constants";
+import { STATES, MESSAGE_KEYS } from "../../constants/constants";
+import { formatMessage } from "./../../util/property-utils";
 
 
 class SliderControl extends React.Component {
 	constructor(props) {
 		super(props);
+		this.reactIntl = props.controller.getReactIntl();
 		this.handleChange = this.handleChange.bind(this);
 		this.uuid = uuid4();
 	}
@@ -48,21 +50,23 @@ 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)}
 			>
-				<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}
-					light={this.props.controller.getLight() && this.props.control.light}
-					formatLabel={
-						(val, label) => label || val
-					}
-				/>
+				<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>
 				<ValidationMessage state={this.props.state} messageInfo={this.props.messageInfo} inTable={this.props.tableControl} />
 			</div>
 		);

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

@@ -15,29 +15,33 @@
  */
  
 .properties-slider {
-	.bx--slider-container { 
+	.cds--slider-container { 
 		min-width: 100%;
 		
-		.bx--slider { 
+		.cds--slider { 
 			min-width: unset; // Default Carbon Component Slider has a fixed min-width of 12.5rem so unset it to make it responsive
 		}
+
+		.cds--slider-text-input {
+			text-align: center;
+		}
 	}
 	&.error {
-		.bx--text-input--invalid, .bx--text-input {
+		.cds--text-input--invalid, .cds--text-input {
 			outline: unset;
 			outline-offset: unset;
 		}
 		input[type="number"]:not([disabled]) {
-			border: 2px solid $support-01;
+			border: 2px solid $support-error;
 		}
 	}
 	&.warning {
-		.bx--text-input--invalid, .bx--text-input {
+		.cds--text-input--invalid, .cds--text-input {
 			outline: unset;
 			outline-offset: unset;
 		}
 		input[type="number"]:not([disabled]) {
-			border: 2px solid $support-03;
+			border: 2px solid $support-warning;
 		}
 	}
 	

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

@@ -19,19 +19,19 @@
 		border-bottom: 0;
 	}
 	.properties-ft-container-absolute-noheader tr:not(.disabled):hover  {
-		border: 1px solid $interactive-01;
+		border: 1px solid $button-primary;
 	}
 	&.hide {
 		display: none;
 	}
 	&.error {
 		.properties-ft-container-absolute-noheader {
-			border: 1px solid $support-01;
+			border: 1px solid $support-error;
 		}
 	}
 	&.warning {
 		.properties-ft-container-absolute-noheader {
-			border: 1px solid $support-03;
+			border: 1px solid $support-warning;
 		}
 	}
 	.properties-vt-row-checkbox {

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 } from "carbon-components-react";
+import { TextArea, Layer } from "@carbon/react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { formatMessage } from "./../../util/property-utils";
@@ -71,30 +71,34 @@ class TextareaControl extends React.Component {
 			};
 			validationProps = ControlUtils.getValidationProps(errorMessage, this.props.tableControl);
 			textArea = (<div>
-				<TextArea
-					{...validationProps}
-					id={this.id}
-					disabled
-					placeholder={this.props.control.additionalText}
-					value={value}
-					labelText={this.props.controlItem}
-					hideLabel={this.props.tableControl}
-					light={this.props.controller.getLight() && this.props.control.light}
-				/>
+				<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>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly={!showValidationMessage} state={""} messageInfo={errorMessage} />
 			</div>);
 		} else {
-			textArea = (<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}
-				light={this.props.controller.getLight() && this.props.control.light}
-			/>);
+			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>
+			);
 		}
 
 		let display = textArea;

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

@@ -15,11 +15,6 @@
  */
 
 .properties-textarea {
-	.bx--form-item { // carbon overrides
-		margin-right: 0;
-		margin-bottom: 0;
-	}
-
 	&.hide {
 		display: none;
 	}

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 } from "carbon-components-react";
+import { TextInput, Layer } from "@carbon/react";
 import ReadonlyControl from "./../readonly";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
@@ -95,19 +95,22 @@ class TextfieldControl extends React.Component {
 			</div>);
 		} else {
 			const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
-			textInput = (<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}
-				light={this.props.controller.getLight() && this.props.control.light}
-				ref={(ref) => (this.textInputRef = ref)}
-			/>);
+			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>
+			);
 		}
 
 		let display = textInput;

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

@@ -20,10 +20,6 @@ $textinput-bottom-padding: 5px;
 	&.hide {
 		display: none;
 	}
-	.bx--form-item { // carbon overrides
-		margin-right: 0;
-		margin-bottom: 0;
-	}
 	input {
 		min-width: unset;
 	}
@@ -48,17 +44,17 @@ $textinput-bottom-padding: 5px;
 		}
 		&.error {
 			input:not([disabled]) {
-				box-shadow: 0 2px 0 0 $support-01;
+				box-shadow: 0 2px 0 0 $support-error;
 			}
 		}
 		&.warning {
 			input:not([disabled]) {
-				box-shadow: 0 2px 0 0 $support-03;
+				box-shadow: 0 2px 0 0 $support-warning;
 			}
 		}
 	}
 	input:disabled:hover {
-		box-shadow: 0 2px 0 0 $text-02;
+		box-shadow: 0 2px 0 0 $text-secondary;
 	}
 
 	// Readonly control for error handling in table cells

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 } from "carbon-components-react";
+import { TextInput, Layer } from "@carbon/react";
 import { parse, format, isValid } from "date-fns";
 import classNames from "classnames";
 
@@ -71,18 +71,19 @@ 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)}>
-				<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}
-					light={this.props.controller.getLight() && this.props.control.light}
-				/>
+				<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>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>
 		);

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Toggle } from "carbon-components-react";
+import { Toggle } from "@carbon/react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES, MESSAGE_KEYS } from "./../../constants/constants.js";
@@ -54,11 +54,20 @@ class ToggleControl extends React.Component {
 			labelB={labelOn}
 			labelA={labelOff}
 			onToggle={this.handleChange.bind(this)}
-			labelText={this.props.tableControl ? null : this.props.controlItem}
+			aria-labelledby={`${this.props.propertyId?.name}-toggle-label`}
 		/>);
 		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)}>
+				{
+					this.props.tableControl
+						? null
+						: (
+							<div id={`${this.props.propertyId?.name}-toggle-label`} className="properties-toggle-label">
+								{this.props.tableControl ? null : this.props.controlItem}
+							</div>
+						)
+				}
 				{toggleControl}
 				<ValidationMessage inTable={this.props.tableControl} state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>

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

@@ -19,8 +19,6 @@
 		padding-bottom: 0;
 	}
 }
-.properties-table-cell-control { // overrides when in a table cell
-	.bx--toggle__switch { // override carbon when inside a table
-		margin-bottom: $spacing-05;
-	}
+.properties-toggle-label {
+	margin-bottom: $spacing-05;
 }

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

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button } from "carbon-components-react";
+import { Button } from "@carbon/react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { formatMessage } from "./../../util/property-utils";
@@ -52,10 +52,10 @@ class ToggletextControl extends React.Component {
 			const imgSource = this.iconsMap[this.props.value];
 			if (typeof imgSource === "string" && imgSource.slice(imgSource.length - 4) === ".svg") {
 				// svg image
-				icon = <Isvg className="bx--btn__icon" src={imgSource} />;
+				icon = <Isvg className="cds--btn__icon" src={imgSource} />;
 			} else {
 				icon = (<img
-					className="bx--btn__icon"
+					className="cds--btn__icon"
 					src={imgSource}
 					alt=""
 				/>);
@@ -75,7 +75,7 @@ class ToggletextControl extends React.Component {
 			button = (
 				<Button
 					kind={buttonType}
-					size="small"
+					size="sm"
 					onClick={this.onClick.bind(this)}
 					renderIcon={this.renderIcon.bind(this)}
 					iconDescription={formatMessage(this.reactIntl, MESSAGE_KEYS.TOGGLETEXT_ICON_DESCRIPTION, { toggletext_label: this.props.value })}

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

@@ -21,19 +21,26 @@
 	}
 	&.error {
 		button {
-			border-bottom: 2px solid $support-01;
+			border-bottom: 2px solid $support-error;
 		}
 	}
 	&.warning {
 		button {
-			border-bottom: 2px solid $support-03;
+			border-bottom: 2px solid $support-warning;
 		}
 	}
 }
 
 // toggle control in table needs to fit within column
 .properties-table-cell-control {
-	.properties-toggletext button {
-		padding: 0 $spacing-02;
+	.properties-toggletext {
+		button {
+			padding: 0 $spacing-02;
+			align-items: center;
+		}
+		.cds--btn--ghost:not([disabled]) svg {
+			fill: currentColor;
+		}
+		
 	}
 }

package/src/common-properties/index.scss

@@ -38,7 +38,7 @@
 }
 
 .properties-error-content {
-	@include carbon--type-style("label-02");
+	@include type-style("label-02");
 	padding: 0 $spacing-06;
 }
 
@@ -47,7 +47,7 @@
 	align-items: left;
 }
 
-.bx--tabs--scrollable .bx--tabs--scrollable__nav-item.properties-hidden-container,
+.cds--tabs .cds--tabs__nav-item.properties-hidden-container,
 .properties-hidden-container {
 	display: none;
 }

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

@@ -41,11 +41,11 @@
 
 .properties-control-nested-panel {
 	padding: 0 0 0 $spacing-05; // Ensure nested panels have a padding
-	border-left: 1px solid $ui-04;
+	border-left: 1px solid $border-strong-01;
 }
 
 .properties-control-nested-panel .properties-control-nested-panel {
-	border-left: 1px solid $ui-03;
+	border-left: 1px solid $layer-accent-01;
 }
 
 // Set the height of the very first panel to be full width inside a tearsheet

package/src/common-properties/panels/sub-panel/button.jsx

@@ -17,7 +17,7 @@
 import logger from "./../../../../utils/logger";
 import React from "react";
 import PropTypes from "prop-types";
-import { Button } from "carbon-components-react";
+import { Button } from "@carbon/react";
 import { formatMessage } from "./../../util/property-utils";
 import { MESSAGE_KEYS } from "./../../constants/constants";
 
@@ -47,7 +47,7 @@ export default class SubPanelButton extends React.Component {
 		const button = (<Button
 			className="properties-subpanel-button"
 			type="button"
-			small
+			size="sm"
 			kind="secondary"
 			onClick={this.showSubPanel}
 		>

package/src/common-properties/panels/sub-panel/cell.jsx

@@ -16,8 +16,8 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { Button } from "carbon-components-react";
-import { Settings16 } from "@carbon/icons-react";
+import { Button } from "@carbon/react";
+import { Settings } from "@carbon/react/icons";
 import { formatMessage } from "./../../util/property-utils";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import { cloneDeep } from "lodash";
@@ -59,7 +59,6 @@ export default class SubPanelCell extends React.Component {
 		const applyLabel = formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.APPLYBUTTON_LABEL);
 		const rejectLabel = formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.REJECTBUTTON_LABEL);
 		return (
-
 			<SubPanelInvoker ref={ (ref) => (this.subPanelInvoker = ref) }
 				rightFlyout={this.props.rightFlyout}
 				applyLabel={applyLabel}
@@ -75,7 +74,7 @@ export default class SubPanelCell extends React.Component {
 					<Button
 						className="properties-subpanel-button"
 						kind="ghost"
-						renderIcon={Settings16}
+						renderIcon={Settings}
 						onClick={this.showSubPanel}
 						disabled={disabled}
 						iconDescription={subPanelToolTip}

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

@@ -20,12 +20,12 @@ button.properties-subpanel-button {
 	height: 2rem;
 	width: 2rem;
 	display: flex;
-	justify-content: center;
+	align-items: center;
 }
 
 .properties-subpanel-modal-in-tearsheet {
 	.properties-light-disabled {
-		background-color: $ui-01;
+		background-color: $layer-01;
 	}
 
 	.properties-modal-children {