@elyra/canvas 12.44.0 → 13.0.0-alpha.0

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

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-
 .properties-vt {
 	width: 100%;
 	height: 100%;
@@ -30,7 +29,7 @@
 		.properties-vt-row-disabled {
 			opacity: 0.5;
 			&:hover {
-				border-bottom: 1px solid $ui-03;
+				border-bottom: 1px solid $layer-accent-01;
 			}
 		}
 	}
@@ -44,26 +43,26 @@
 	}
 
 	div[data-role="properties-header-row"] {
-		background-color: $ui-03;
+		background-color: $layer-accent-01;
 	}
 
 	div[data-role="properties-data-row"] {
-		background-color: $ui-02;
+		background-color: $layer-02;
 	}
 
 	.properties-autosized-vt-header {
 		// Override text-transform: uppercase from .ReactVirtualized__Table__headerRow
 		text-transform: none;
 		margin-left: 0;
-		.properties-vt-column .bx--checkbox-wrapper {
+		.properties-vt-column .cds--checkbox-wrapper {
 			margin-top: 0;
 			margin-bottom: 0;
-			.bx--checkbox-label {
+			.cds--checkbox-label {
 				width: 100%;
 
 				span {
-					@include carbon--type-style("productive-heading-01");
-					color: $text-01;
+					@include type-style("productive-heading-01");
+					color: $text-primary;
 					text-overflow: ellipsis;
 					white-space: nowrap;
 					overflow: hidden;
@@ -86,16 +85,16 @@
 			cursor: col-resize;
 		}
 		.properties-vt-header-resize:hover {
-			background-color: $active-secondary;
+			background-color: $button-secondary-active;
 		}
 
 		.properties-vt-header-resize-active {
 			z-index: 3;
 		}
 		&:hover {
-			background-color: $active-ui;
+			background-color: $layer-active-01;
 			.properties-vt-header-resize {
-				background-color: $active-secondary;
+				background-color: $button-secondary-active;
 			}
 		}
 	}
@@ -118,7 +117,6 @@
 	}
 
 	.properties-vt-row-checkbox {
-		height: $spacing-07;
 		margin-left: $spacing-05;
 		margin-right: $spacing-02;
 	}
@@ -127,18 +125,18 @@
 		.properties-vt-row-class {
 			border-top: 1px solid transparent;
 			&.properties-vt-row-selected {
-				border-top: 1px solid $hover-selected-ui;
+				border-top: 1px solid $layer-accent-hover-01;
 			}
 		}
 	}
 
 	.properties-vt-row-class {
 		line-height: 20px;
-		border-bottom: 1px solid $ui-03;
+		border-bottom: 1px solid $layer-accent-01;
 
 		&:hover:not(.properties-vt-row-non-interactive):not(.properties-vt-row-selected) {
 			// ReadonlyTable with single row selection is non-interactive. Nothing should happen on hover
-			background-color: $hover-ui;
+			background-color: $layer-hover-01;
 		}
 
 		.properties-table-cell-control {
@@ -176,7 +174,7 @@
 				padding-right: $spacing-03; // spacing between column label and sort icon
 			}
 			&:hover {
-				background-color: $active-ui;
+				background-color: $layer-active-01;
 			}
 		}
 
@@ -186,10 +184,10 @@
 	}
 
 	.properties-vt-row-selected {
-		background-color: $selected-ui;
-		border-bottom: 1px solid $hover-selected-ui;
+		background-color: $layer-selected-01;
+		border-bottom: 1px solid $layer-accent-hover-01;
 		&:hover {
-			background-color: $hover-selected-ui;
+			background-color: $layer-accent-hover-01;
 		}
 	}
 
@@ -204,16 +202,16 @@
 			padding-left: 3px;
 		}
 		.properties-vt-row-selected {
-			border-left: 4px solid $interactive-01;
+			border-left: 4px solid $button-primary;
 			padding-left: 0;
 			&:not(.properties-vt-row-disabled):hover {
-				border-left: 4px solid $interactive-01;
+				border-left: 4px solid $button-primary;
 			}
 		}
 	}
 
 	.properties-vt-small-loading svg {
-		stroke: $interactive-01; // Override carbon's small Loading color.
+		stroke: $button-primary; // Override carbon's small Loading color.
 	}
 
 	// Required for Autosizer in VirtualizedTable to set a height and width
@@ -224,10 +222,10 @@
 
 	.properties-light-disabled {
 		div[data-role="properties-data-row"] {
-			background-color: $ui-01;
+			background-color: $layer-01;
 		}
-		.bx--select--inline .bx--select-input[disabled] {
-			background-color: $ui-background;
+		.cds--select--inline .cds--select-input[disabled] {
+			background-color: $background;
 		}
 	}
 

package/src/common-properties/components/wide-flyout/wide-flyout.scss

@@ -24,7 +24,7 @@ $properties-modal-buttons-height: 64px;
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background-color: $overlay-01;
+	background-color: $overlay;
 	z-index: 1000;
 	cursor: default;
 	&.show {
@@ -38,7 +38,7 @@ $properties-modal-buttons-height: 64px;
 	width: 675px;
 	margin-right: -675px;
 	z-index: 1001;
-	background-color: $ui-01;
+	background-color: $layer-01;
 	right: 0;
 	transition: margin-right 0.1s;
 	&.show {
@@ -46,12 +46,12 @@ $properties-modal-buttons-height: 64px;
 		transition: margin-right 0.3s;
 	}
 	.properties-wf-title {
-		@include carbon--type-style("productive-heading-01");
+		@include type-style("productive-heading-01");
 		padding-left: $spacing-06;
 		display: flex;
 		align-items: center;
 		height: $properties-wf-title-height;
-		border-bottom: 1px solid $ui-03;
+		border-bottom: 1px solid $layer-accent-01;
 	}
 	.properties-wf-children {
 		padding: $spacing-05;
@@ -61,5 +61,5 @@ $properties-modal-buttons-height: 64px;
 }
 
 .properties-light-disabled {
-	background-color: $ui-background;
+	background-color: $background;
 }

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

@@ -118,7 +118,10 @@ export const MESSAGE_KEYS = {
 	LABEL_INDICATOR_REQUIRED: "label.indicator.required",
 	LABEL_INDICATOR_OPTIONAL: "label.indicator.optional",
 	DATEPICKER_RANGE_START_LABEL: "datepickerRangeStart.default.label",
-	DATEPICKER_RANGE_END_LABEL: "datepickerRangeEnd.default.label"
+	DATEPICKER_RANGE_END_LABEL: "datepickerRangeEnd.default.label",
+	SLIDER_NUMBER_INPUT_LABEL: "slider.numberInput.label",
+	EDITORFORM_TABLIST_LABEL: "editorForm.tabList.label",
+	SUBTABS_TABLIST_LABEL: "subTabs.tabList.label"
 };
 
 export const TRUNCATE_LIMIT = 10000;
@@ -278,8 +281,7 @@ export const CARBON_BUTTON_SIZE = {
 	SMALL: "sm",
 	MEDIUM: "md",
 	LARGE: "lg",
-	EXTRA_LARGE: "xl",
-	DEFAULT: "default" // TODO: remove this after upgrading to carbon 11.x
+	EXTRA_LARGE: "xl"
 };
 
 export const CONTAINER_TYPE = {

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

@@ -17,14 +17,14 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { Button, Checkbox } from "carbon-components-react";
+import { Button, Checkbox } from "@carbon/react";
 import FlexibleTable from "./../components/flexible-table";
 import TableButtons from "./../components/table-buttons";
 import SubPanelCell from "./../panels/sub-panel/cell.jsx";
 import ReadonlyControl from "./readonly";
 import * as PropertyUtils from "./../util/property-utils";
 import classNames from "classnames";
-import { Add16, TrashCan16, Edit16 } from "@carbon/icons-react";
+import { Add, TrashCan, Edit } from "@carbon/react/icons";
 import { ControlType, EditStyle } from "./../constants/form-constants";
 import { v4 as uuid4 } from "uuid";
 
@@ -505,9 +505,9 @@ export default class AbstractTable extends React.Component {
 					className="properties-remove-fields-button"
 					disabled={removeDisabled}
 					onClick={removeOnClick}
-					size="small"
+					size="sm"
 					kind="ghost"
-					renderIcon={TrashCan16}
+					renderIcon={TrashCan}
 				>
 					{removeButtonLabel}
 				</Button>
@@ -515,9 +515,9 @@ export default class AbstractTable extends React.Component {
 					className="properties-add-fields-button"
 					disabled={addButtonDisabled}
 					onClick={this.addOnClick.bind(this, this.props.propertyId)}
-					size="small"
+					size="sm"
 					kind="ghost"
-					renderIcon={Add16}
+					renderIcon={Add}
 				>
 					{addButtonLabel}
 				</Button>
@@ -534,9 +534,9 @@ export default class AbstractTable extends React.Component {
 				<Button
 					className="properties-edit-button"
 					onClick={this.editOnClick.bind(this, this.props.propertyId)}
-					size="small"
+					size="sm"
 					kind="ghost"
-					renderIcon={Edit16}
+					renderIcon={Edit}
 				>
 					{tableButtonConfig.label}
 				</Button>
@@ -568,7 +568,7 @@ export default class AbstractTable extends React.Component {
 		}
 	}
 
-	checkedAllValue(colIndex, checked) {
+	checkedAllValue(colIndex, evt, { checked, id }) {
 		const controlValue = this.props.value;
 		if (Array.isArray(controlValue)) {
 			for (let i = 0; i < controlValue.length; i++) {

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

@@ -27,12 +27,12 @@
 }
 
 .properties-at-selectedEditRows {
-	background-color: $interactive-02;
+	background-color: $button-secondary;
 	.properties-selectedEditRows-title {
 		padding-top: 10px;
 		padding-bottom: 10px;
 		padding-left: 12px;
-		color: $ui-01;
+		color: $layer-01;
 	}
 
 	.properties-ft-table-header {
@@ -45,10 +45,10 @@
 	}
 
 	.properties-vt-row-class {
-		background-color: $selected-ui;
+		background-color: $layer-selected-01;
 		&:hover {
 			border: 1px solid transparent;
-			background-color: $hover-selected-ui;
+			background-color: $layer-accent-hover-01;
 		}
 	}
 }

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

@@ -18,7 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { isEmpty } from "lodash";
-import { Checkbox } from "carbon-components-react";
+import { Checkbox } from "@carbon/react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES, CARBON_ICONS } from "./../../constants/constants.js";
@@ -33,8 +33,8 @@ class CheckboxControl extends React.Component {
 		this.id = ControlUtils.getControlId(this.props.propertyId);
 	}
 
-	handleChange(value) {
-		this.props.controller.updatePropertyValue(this.props.propertyId, value);
+	handleChange(evt, { checked, id }) {
+		this.props.controller.updatePropertyValue(this.props.propertyId, checked);
 	}
 
 	render() {
@@ -69,18 +69,18 @@ class CheckboxControl extends React.Component {
 			</span>
 		);
 		return (
-			<div className={classNames("properties-checkbox", { "hide": this.props.state === STATES.HIDDEN }, this.props.messageInfo ? this.props.messageInfo.type : null)}
-				data-id={ControlUtils.getDataId(this.props.propertyId)}
-			>
-				<Checkbox
-					disabled={this.props.state === STATES.DISABLED}
-					id={this.id}
-					labelText={checkboxLabel}
-					onChange={this.handleChange.bind(this)}
-					checked={Boolean(this.props.value)}
-					hideLabel={this.props.tableControl}
-				/>
-				{tooltipIcon}
+			<div data-id={ControlUtils.getDataId(this.props.propertyId)}>
+				<div className={classNames("properties-checkbox", { "hide": this.props.state === STATES.HIDDEN }, this.props.messageInfo ? this.props.messageInfo.type : null)}>
+					<Checkbox
+						disabled={this.props.state === STATES.DISABLED}
+						id={this.id}
+						labelText={checkboxLabel}
+						onChange={this.handleChange.bind(this)}
+						checked={Boolean(this.props.value)}
+						hideLabel={this.props.tableControl}
+					/>
+					{tooltipIcon}
+				</div>
 				<ValidationMessage inTable={this.props.tableControl} state={this.props.state} messageInfo={this.props.controller.getErrorMessage(this.props.propertyId)} />
 			</div>
 		);

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

@@ -24,18 +24,16 @@
 			display: flex;
 		}
 	}
-	.bx--form-item.bx--checkbox-wrapper {
+	.cds--form-item.cds--checkbox-wrapper {
 		flex: initial; // override carbon style to show tooltipIcon next to checkbox label
-	}
-	.properties-validation-message {
-		flex: 0 1 100%;
+		margin-block-start: 0.1875rem;
 	}
 	&.hide {
 		display: none;
 	}
 }
 .table {
-	.bx--form-item.bx--checkbox-wrapper:first-of-type {
+	.cds--form-item.cds--checkbox-wrapper:first-of-type {
 		margin-top: 0;
 		padding: 1px; // Allow space for checkbox borders to show when embedded within a table.
 	}

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

@@ -17,13 +17,13 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Checkbox } from "carbon-components-react";
+import { Checkbox } from "@carbon/react";
 import * as ControlUtils from "./../../util/control-utils";
 import classNames from "classnames";
 import ValidationMessage from "./../../components/validation-message";
 import { v4 as uuid4 } from "uuid";
 import { intersection, isEqual } from "lodash";
-import { Information16 } from "@carbon/icons-react";
+import { Information } from "@carbon/react/icons";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import { STATES } from "./../../constants/constants.js";
 import { isEmpty } from "lodash";
@@ -59,7 +59,7 @@ class CheckboxsetControl extends React.Component {
 		}
 	}
 
-	handleChange(val, checked) {
+	handleChange(val, evt, { checked, id }) {
 		let values = this.props.controller.getPropertyValue(this.props.propertyId);
 		if (typeof values === "undefined" || values === null) {
 			values = [];
@@ -101,7 +101,7 @@ class CheckboxsetControl 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>);
 			}
 			const id = {

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

@@ -18,8 +18,9 @@
 	&.hide {
 		display: none;
 	}
-	.bx--form-item.bx--checkbox-wrapper:first-of-type { //override carbon checkbox styling
-		margin-bottom: $spacing-03;
+	.cds--form-item.cds--checkbox-wrapper:first-of-type { //override carbon checkbox styling
+		margin-block-start: 0.1875rem;
+		margin-block-end: $spacing-03;
 		flex: 0 1 auto; // Do not allow value to take up entire width
 	}
 	.properties-checkboxset-container {

package/src/common-properties/controls/datefield/datefield.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 ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { parse, format, isValid } from "date-fns";
@@ -73,18 +73,19 @@ class DatefieldControl 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/datepicker/datepicker.jsx

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { DatePicker, DatePickerInput } from "carbon-components-react";
+import { DatePicker, DatePickerInput, Layer } from "@carbon/react";
 import classNames from "classnames";
 
 import ValidationMessage from "../../components/validation-message";
@@ -71,27 +71,28 @@ class DatepickerControl extends React.Component {
 
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<DatePicker
-					className="properties-datepicker-wrapper-parent"
-					datePickerType={DATEPICKER_TYPE.SINGLE}
-					dateFormat={this.dateFormat}
-					light={this.props.controller.getLight() && this.props.control.light}
-					onChange={this.handleChange.bind(this)}
-					locale={this.locale}
-				>
-					<DatePickerInput
-						{...validationProps}
-						id={this.id}
-						className="properties-datepicker-wrapper-input"
-						placeholder={this.props.control.additionalText}
-						labelText={!this.props.tableControl && this.props.controlItem}
-						disabled={this.props.state === STATES.DISABLED}
-						size={this.getDatepickerSize()}
-						onChange={this.handleInputChange.bind(this)}
-						value={this.state.value}
-						helperText={!this.props.tableControl && helperText}
-					/>
-				</DatePicker>
+				<Layer level={this.props.controller.getLight() && this.props.control.light ? 1 : 0}>
+					<DatePicker
+						className="properties-datepicker-wrapper-parent"
+						datePickerType={DATEPICKER_TYPE.SINGLE}
+						dateFormat={this.dateFormat}
+						onChange={this.handleChange.bind(this)}
+						locale={this.locale}
+					>
+						<DatePickerInput
+							{...validationProps}
+							id={this.id}
+							className="properties-datepicker-wrapper-input"
+							placeholder={this.props.control.additionalText}
+							labelText={!this.props.tableControl && this.props.controlItem}
+							disabled={this.props.state === STATES.DISABLED}
+							size={this.getDatepickerSize()}
+							onChange={this.handleInputChange.bind(this)}
+							value={this.state.value}
+							helperText={!this.props.tableControl && helperText}
+						/>
+					</DatePicker>
+				</Layer>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>
 		);

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

@@ -16,17 +16,8 @@
 
 .properties-table-cell-control {
 	.properties-datepicker {
-		.bx--date-picker.bx--date-picker--single .bx--date-picker__input {
+		.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
 			width: unset; // Unset width when displayed within a table
 		}
 	}
 }
-
-.properties-datepicker {
-	.bx--date-picker-container {
-		.bx--form-requirement,
-		.bx--form__helper-text {
-			max-width: 18rem; // https://github.com/carbon-design-system/carbon/issues/12937
-		}
-	}
-}

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 } from "carbon-components-react";
+import { DatePicker, DatePickerInput, Layer } from "@carbon/react";
 import classNames from "classnames";
 import { v4 as uuid4 } from "uuid";
 
@@ -135,39 +135,40 @@ class DatepickerRangeControl extends React.Component {
 
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<DatePicker
-					datePickerType={DATEPICKER_TYPE.RANGE}
-					dateFormat={this.dateFormat}
-					light={this.props.controller.getLight() && this.props.control.light}
-					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 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>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>
 		);

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

@@ -15,7 +15,7 @@
  */
 
 .properties-datepicker-range {
-	.bx--date-picker-container {
+	.cds--date-picker-container {
 		justify-content: normal; // Override carbon to fix layout when only one has helper text
 	}
 }