@elyra/canvas 12.44.0 → 13.0.0-alpha.0

package/src/common-canvas/svg-canvas-d3.scss

@@ -15,70 +15,70 @@
  */
 
 // Canvas background color
-$canvas-background-color: $ui-background;
+$canvas-background-color: $background;
 
 // Region selection colors
-$region-selector-stroke-color: $ui-05;
-$region-selector-fill-color: $ui-03;
+$region-selector-stroke-color: $layer-selected-inverse;
+$region-selector-fill-color: $layer-accent-01;
 
 // Node colors
-$node-body-stroke: $ui-05;
-$node-body-fill: $ui-01;
+$node-body-stroke: $layer-selected-inverse;
+$node-body-fill: $layer-01;
 
-$node-body-stroke-hover: $ui-03;
-$node-body-fill-hover: $hover-selected-ui;
+$node-body-stroke-hover: $layer-accent-01;
+$node-body-fill-hover: $layer-accent-hover-01;
 
-$node-selection-color: $inverse-link;
+$node-selection-color: $link-inverse;
 
-$node-decoration-outline: $ui-05;
+$node-decoration-outline: $layer-selected-inverse;
 
-$node-super-expand-icon-color: $brand-01;
-$node-super-expand-icon-background-hover-color: $ui-03;
+$node-super-expand-icon-color: $link-primary;
+$node-super-expand-icon-background-hover-color: $layer-accent-01;
 
-$node-ellipsis-color: $brand-01;
-$node-ellipsis-background-hover-color: $ui-03;
+$node-ellipsis-color: $link-primary;
+$node-ellipsis-background-hover-color: $layer-accent-01;
 
-$node-error-color: $support-01; // Error red
-$node-warning-color: $support-03; // Warning yellow
+$node-error-color: $support-error; // Error red
+$node-warning-color: $support-warning; // Warning yellow
 
 // Node label properties
-$node-label-color: $text-01;
+$node-label-color: $text-primary;
 $node-label-font-size: 12px;
 $node-label-font-weight: 500;
 $node-label-display-border: 2px;
 $node-label-entry-border: 6px;
-$node-label-edit-icon-hover-color: $ui-03;
+$node-label-edit-icon-hover-color: $layer-accent-01;
 
 // Output port styles
 
-$node-port-output-stroke-color: $inverse-02;
+$node-port-output-stroke-color: $background-inverse;
 $node-port-output-fill-color: $node-body-fill;
 
-$node-port-output-connected-stroke-color: $inverse-02;
-$node-port-output-connected-fill-color: $inverse-02;
+$node-port-output-connected-stroke-color: $background-inverse;
+$node-port-output-connected-fill-color: $background-inverse;
 
-$node-port-output-hover-stroke: $inverse-02;
-$node-port-output-hover-fill: $inverse-02;
+$node-port-output-hover-stroke: $background-inverse;
+$node-port-output-hover-fill: $background-inverse;
 
 // Input port styles
 
-$node-port-input-stroke-color: $inverse-02;
+$node-port-input-stroke-color: $background-inverse;
 $node-port-input-fill-color: $node-body-fill;
 
 $node-port-input-connected-stroke-color: $node-body-fill;
 $node-port-input-connected-fill-color: $node-body-fill;
 
-$node-port-input-connected-super-binding-stroke-color: $inverse-02;
-$node-port-input-connected-super-binding-fill-color: $ui-02;
+$node-port-input-connected-super-binding-stroke-color: $background-inverse;
+$node-port-input-connected-super-binding-fill-color: $layer-02;
 
-$node-port-input-arrow-connected-stroke-color: $inverse-02;
+$node-port-input-arrow-connected-stroke-color: $background-inverse;
 $node-port-input-arrow-connected-fill-color: transparent;
 
 // Comment colors
-$comment-outline-color: $active-light-ui;
-$comment-outline-hover-color: $inverse-hover-ui;
-$comment-fill-color: $ui-01;
-$comment-text-color: $text-01;
+$comment-outline-color: $layer-active-02;
+$comment-outline-hover-color: $background-inverse-hover;
+$comment-fill-color: $layer-01;
+$comment-text-color: $text-primary;
 
 // Comment properties
 $comment-text-font-size: 12px;
@@ -89,11 +89,11 @@ $comment-text-display-border: 8px;
 $comment-text-entry-border: $comment-text-display-border - 2px; // Remove 2px to allow for focus border
 
 // Link colors
-$comment-link-color: $ui-04;
-$object-link-color: $ui-05; // Used for association links for a regular data flow canvas
-$association-link-color: $ui-04; // Used for association links when config.enableAssocLinkType === ASSOC_RIGHT_SIDE_CURVE.
-$data-link-color: $inverse-link;
-$link-highlight-color: $support-04;
+$comment-link-color: $border-strong-01;
+$object-link-color: $layer-selected-inverse; // Used for association links for a regular data flow canvas
+$association-link-color: $border-strong-01; // Used for association links when config.enableAssocLinkType === ASSOC_RIGHT_SIDE_CURVE.
+$data-link-color: $link-inverse;
+$link-highlight-color: $support-info;
 
 /* Canvas styles */
 
@@ -123,7 +123,7 @@ $link-highlight-color: $support-04;
 	// Supress the default focus highlighting with non-carbon color and round corners.
 	outline: none;
 	// Add our own focus highlighting with our own color and square corners
-	box-shadow: 0 0 0 2px $interactive-03;
+	box-shadow: 0 0 0 2px $focus;
 }
 
 /* Pull-out region rectangle used for object selection */
@@ -141,7 +141,7 @@ $link-highlight-color: $support-04;
 }
 
 .d3-canvas-underlay {
-	fill: $ui-03;
+	fill: $layer-accent-01;
 }
 
 /* Temporary overlay to display altered pointer cursor styles on dynamic drag operations */
@@ -197,9 +197,9 @@ $link-highlight-color: $support-04;
 .d3-node-unavailable .d3-node-body-outline,
 .d3-node-unavailable .d3-node-label,
 .d3-node-unavailable svg path {
-	stroke: $disabled-02;
-	fill: $disabled-03;
-	color: $disabled-02;
+	stroke: $button-disabled;
+	fill: $layer-selected-disabled;
+	color: $button-disabled;
 }
 
 .d3-node-selection-highlight {
@@ -265,10 +265,10 @@ $link-highlight-color: $support-04;
 
 .d3-node-group[data-new-link-over="yes"] {
 	.d3-node-selection-highlight {
-		stroke: $interactive-01;
+		stroke: $button-primary;
 		stroke-dasharray: 4;
 		stroke-width: 2;
-		fill: $ui-01;
+		fill: $layer-01;
 		pointer-events: none;
 	}
 }
@@ -277,21 +277,21 @@ $link-highlight-color: $support-04;
 
 .d3-node-group.d3-branch-highlight {
 	.d3-node-body-outline {
-		stroke: $ui-05;
+		stroke: $layer-selected-inverse;
 		stroke-width: 2px;
 		fill: $highlight;
 	}
 
 	.d3-node-label {
-		color: $text-01;
+		color: $text-primary;
 	}
 }
 
 .d3-node-group.d3-branch-highlight:hover {
 	.d3-node-body-outline {
-		stroke: $ui-05;
+		stroke: $layer-selected-inverse;
 		stroke-width: 2px;
-		fill: $hover-primary;
+		fill: $button-primary-hover;
 	}
 }
 
@@ -362,7 +362,7 @@ $link-highlight-color: $support-04;
 		// These properties will pass the color to icon paths in an SVG icon provided
 		// the icon doesn't have any hard coded fill color set.
 		fill: currentColor;
-		color: $icon-01;
+		color: $icon-primary;
 	}
 }
 
@@ -431,7 +431,7 @@ $link-highlight-color: $support-04;
 	// These properties will pass the color to icon paths in an SVG icon provided
 	// the icon doesn't have any hard coded fill color set.
 	fill: currentColor;
-	color: $icon-01;
+	color: $icon-primary;
 }
 
 // Remove the foreign object outline when the foreign object has focus.
@@ -652,7 +652,7 @@ $link-highlight-color: $support-04;
 // override any color provided by the host app.
 g.bkg-col-white-0 {
 	// In dark-mode, white-0 will be interpreted as black background with white text.
-	@include d3-comment-color-overrides($ui-01, $text-01);
+	@include d3-comment-color-overrides($layer-01, $text-primary);
 }
 g.bkg-col-yellow-20 {
 	@include d3-comment-color-overrides($yellow-20, $gray-100);
@@ -736,21 +736,21 @@ g.bkg-col-cyan-50 {
 		letter-spacing: 0.15px;
 	}
 	hr {
-		border-top-color: $ui-03;
+		border-top-color: $layer-accent-01;
 	}
 	img {
 		max-width: 100%;
 	}
 	blockquote {
 		padding: 0 12px;
-		border-left: 3px solid $ui-03;
+		border-left: 3px solid $layer-accent-01;
 		line-height: 8px;
 	}
 	code {
 		font-size: $comment-text-font-size;
 		font-weight: $comment-text-font-weight;
 		line-height: $comment-text-line-height;
-		background-color: $ui-03;
+		background-color: $layer-accent-01;
 		border-radius: 4px;
 		white-space: pre-wrap;
 	}
@@ -758,13 +758,13 @@ g.bkg-col-cyan-50 {
 		font-size: $comment-text-font-size;
 		font-weight: $comment-text-font-weight;
 		line-height: $comment-text-line-height;
-		background-color: $ui-02;
+		background-color: $layer-02;
 		padding: 4px;
-		border: 1px solid $ui-03;
+		border: 1px solid $layer-accent-01;
 		border-radius: 4px;
 		white-space: pre-wrap;
 		code {
-			background-color: $ui-02;
+			background-color: $layer-02;
 		}
 	}
 	table {
@@ -775,26 +775,26 @@ g.bkg-col-cyan-50 {
 		border-collapse: collapse;
 		box-sizing: border-box;
 		text-indent: initial;
-		color: $text-01;
+		color: $text-primary;
 		thead {
-			@include carbon--type-style("productive-heading-01");
+			@include type-style("productive-heading-01");
 			font-size: 12px;
 			display: table-header-group;
 			vertical-align: middle;
 			border-color: inherit;
-			background-color: $ui-03;
+			background-color: $layer-accent-01;
 			text-align: left;
 			tr th {
 				padding: 8px;
-				border-bottom: 2px solid $ui-03;
+				border-bottom: 2px solid $layer-accent-01;
 			}
 		}
 		tbody {
-			@include carbon--type-style("body-short-01");
+			@include type-style("body-short-01");
 			font-size: 12px;
 			tr {
-				border-bottom: 2px solid $ui-03;
-				background-color: $ui-02;
+				border-bottom: 2px solid $layer-accent-01;
+				background-color: $layer-02;
 				td {
 					padding: 8px;
 				}
@@ -896,13 +896,13 @@ g.bkg-col-cyan-50 {
 
 .d3-link-group.d3-branch-highlight {
 	.d3-link-line {
-		stroke: $inverse-02;
+		stroke: $background-inverse;
 	}
 }
 
 .d3-link-group.d3-branch-highlight:hover {
 	.d3-link-line {
-		stroke: $inverse-02;
+		stroke: $background-inverse;
 		stroke-width: 3px;
 	}
 }

package/src/common-canvas/svg-canvas-utils-external.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 import Logger from "../logging/canvas-logger.js";
 
@@ -25,22 +25,28 @@ export default class SvgCanvasExternal {
 	}
 
 	addNodeExternalObject(node, i, foreignObjects) {
-		ReactDOM.render(
+		const container = foreignObjects[i];
+		const root = createRoot(container);
+
+		root.render(
 			<node.layout.nodeExternalObject
 				nodeData={node}
 				canvasController={this.ren.canvasController}
 				externalUtils={this}
-			/>,
-			foreignObjects[i]
+			/>
 		);
 	}
 
 	addDecExternalObject(dec, i, foreignObjects) {
-		ReactDOM.render(dec.jsx, foreignObjects[i]);
+		const container = foreignObjects[i];
+		const root = createRoot(container);
+		root.render(dec.jsx);
 	}
 
 	removeExternalObject(obj, i, foreignObjects) {
-		ReactDOM.unmountComponentAtNode(foreignObjects[i]);
+		const container = foreignObjects[i];
+		const root = createRoot(container);
+		root.unmount();
 	}
 
 	getActiveNodes() {

package/src/common-canvas/svg-canvas-utils-textarea.js

@@ -137,7 +137,7 @@ export default class SvgCanvasTextArea {
 		if (evt.relatedTarget &&
 				(CanvasUtils.getParentElementWithClass(evt.relatedTarget, "d3-comment-entry") ||
 					CanvasUtils.getParentElementWithClass(evt.relatedTarget, "text-toolbar") ||
-					CanvasUtils.getParentElementWithClass(evt.relatedTarget, "bx--overflow-menu-options__btn"))) {
+					CanvasUtils.getParentElementWithClass(evt.relatedTarget, "cds--overflow-menu-options__btn"))) {
 			return;
 		}
 

package/src/common-properties/actions/button/button.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 { STATES, CARBON_BUTTON_KIND, CARBON_BUTTON_SIZE } from "./../../constants/constants.js";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import classNames from "classnames";
@@ -53,7 +53,7 @@ class ButtonAction extends React.Component {
 		}
 		switch (this.props.action.button.size) {
 		case CARBON_BUTTON_SIZE.SMALL: return CARBON_BUTTON_SIZE.SMALL;
-		case CARBON_BUTTON_SIZE.MEDIUM: return CARBON_BUTTON_SIZE.DEFAULT; // TODO: update this after upgrading to carbon 11.x
+		case CARBON_BUTTON_SIZE.MEDIUM: return CARBON_BUTTON_SIZE.MEDIUM;
 		case CARBON_BUTTON_SIZE.LARGE: return CARBON_BUTTON_SIZE.LARGE;
 		case CARBON_BUTTON_SIZE.EXTRA_LARGE: return CARBON_BUTTON_SIZE.EXTRA_LARGE;
 		default: return CARBON_BUTTON_SIZE.SMALL;

package/src/common-properties/actions/button/button.scss

@@ -14,9 +14,6 @@
  * limitations under the License.
  */
 
-/*
-* Fixed in new versions
-*/
 .properties-action-button  {
 	display: inline-block;
 	&.hide {

package/src/common-properties/actions/image/image.scss

@@ -14,9 +14,6 @@
  * limitations under the License.
  */
 
-/*
-* Fixed in new versions
-*/
 .properties-action-image  {
 	// 8px spacing between action image and the control beside image.
 	padding: 0 0 0 $spacing-03;

package/src/common-properties/components/control-item/control-item.scss

@@ -41,16 +41,16 @@
 	align-items: center;
 	padding-bottom: $spacing-03;
 	label, .properties-indicator {
-		@include carbon--type-style("label-01");
-		color: $text-02;
+		@include type-style("label-01");
+		color: $text-secondary;
 	}
 	.properties-indicator {
 		padding-left: $spacing-02;
 	}
 	&.table-control {
 		label, .properties-indicator {
-			@include carbon--type-style("productive-heading-01");
-			color: $text-01;
+			@include type-style("productive-heading-01");
+			color: $text-primary;
 		}
 	}
 }
@@ -66,14 +66,14 @@
 }
 
 .properties-control-description {
-	@include carbon--type-style("helper-text-01");
-	color: $text-02;
+	@include type-style("helper-text-01");
+	color: $text-secondary;
 	padding-bottom: $spacing-03;
 	white-space: pre-wrap; // Add a line break for \n
 }
 
-// Removed padding in properties-label-container because .bx--label has margin-bottom: $spacing-03
-.bx--label {
+// Removed padding in properties-label-container because .cds--label has margin-bottom: $spacing-03
+.cds--label {
 	.properties-label-container {
 		padding-bottom: 0;
 	}

package/src/common-properties/components/editor-form/editor-form.jsx

@@ -18,7 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { setActiveTab } from "./../../actions";
-import { Tab, Tabs, Link } from "carbon-components-react";
+import { Tab, Tabs, TabList, TabPanel, Link, TabPanels } from "@carbon/react";
 import * as PropertyUtil from "./../../util/property-utils";
 import { MESSAGE_KEYS, CARBON_ICONS, CONDITION_MESSAGE_TYPE, STATES, CATEGORY_VIEW } from "./../../constants/constants";
 import { cloneDeep, isEmpty, sortBy, get, filter } from "lodash";
@@ -134,12 +134,15 @@ class EditorForm extends React.Component {
 
 	genPrimaryTabs(key, tabs, propertyId, indexof) {
 		const tabContent = [];
+		const tabLists = [];
+		const tabPanels = [];
 		let hasAlertsTab = false;
 		let modalSelected = 0;
 		let hiddenTabs = 0;
 		const nonTearsheetTabs = tabs.filter((t) => t.content.itemType !== ItemType.TEARSHEET);
 		const tearsheetTabs = tabs.filter((t) => t.content.itemType === ItemType.TEARSHEET);
 		const totalTabs = tearsheetTabs.concat(nonTearsheetTabs);
+		const tabListAriaLabel = PropertyUtil.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.EDITORFORM_TABLIST_LABEL);
 
 		for (let i = 0; i < totalTabs.length; i++) {
 			const tab = totalTabs[i];
@@ -202,19 +205,24 @@ class EditorForm extends React.Component {
 				if (this.props.activeTab === tab.group) {
 					modalSelected = i - hiddenTabs; // Adjust the Carbon Tabs index to accomodate hidden tabs
 				}
-				tabContent.push(
+				tabLists.push(
 					<Tab
-						id={"tab." + this._getContainerIndex(hasAlertsTab, i) + "-" + key}
-						key={this._getContainerIndex(hasAlertsTab, i) + "-" + key}
-						tabIndex={i}
-						label={filter([tab.text, this._getMessageCountForCategory(tab)]).join("")}
 						title={filter([tab.text, this._getMessageCountForCategory(tab)]).join("")}
 						className={classNames({ "properties-hidden-container": tab.content.itemType === ItemType.TEARSHEET })}
 						onClick={this._modalTabsOnClick.bind(this, tab.group)}
+					>
+						{filter([tab.text, this._getMessageCountForCategory(tab)]).join("")}
+					</Tab>
+				);
+
+				tabPanels.push(
+					<TabPanel className={classNames("properties-primary-tab-panel",
+						{ "tearsheet-container": this.props.controller.isTearsheetContainer() },
+						{ "right-flyout-tabs-view": this.props.rightFlyout && this.props.categoryView === CATEGORY_VIEW.TABS })}
 					>
 						{panelItems}
 						{additionalComponent}
-					</Tab>
+					</TabPanel>
 				);
 			}
 		}
@@ -228,14 +236,15 @@ class EditorForm extends React.Component {
 		}
 		return (
 			<Tabs key={"tab." + key}
-				className="properties-primaryTabs"
-				selected={modalSelected}
+				selectedIndex={modalSelected}
 				light={this.props.controller.getLight()}
-				tabContentClassName={classNames("properties-primary-tab-panel",
-					{ "tearsheet-container": this.props.controller.isTearsheetContainer() },
-					{ "right-flyout-tabs-view": this.props.rightFlyout && this.props.categoryView === CATEGORY_VIEW.TABS })}
 			>
-				{tabContent}
+				<TabList className="properties-primaryTabs" aria-label={tabListAriaLabel}>
+					{tabLists}
+				</TabList>
+				<TabPanels>
+					{tabPanels}
+				</TabPanels>
 			</Tabs>
 		);
 	}

package/src/common-properties/components/editor-form/editor-form.scss

@@ -16,12 +16,6 @@
 
 $primary-tab-height: $spacing-08;
 
-.properties-primaryTabs {
-	.bx--tabs__nav-item {
-		margin-left: 1rem;
-	}
-}
-
 // styling when there is only 1 tab
 .properties-single-category {
 	padding: $spacing-05;
@@ -40,7 +34,7 @@ $primary-tab-height: $spacing-08;
 		.properties-subtabs {
 			position: absolute;
 			height: $primary-tab-height;
-			border-bottom: 1px solid $ui-03;
+			border-bottom: 1px solid $layer-accent-01;
 		}
 		.properties-subtab-panel {
 			height: calc(100% - #{$primary-tab-height});
@@ -62,36 +56,36 @@ $primary-tab-height: $spacing-08;
 }
 
 .properties-category-title {
-	@include carbon--type-style("body-long-01");
-	text-decoration-color: $text-01;
-	color: $text-01;
+	@include type-style("body-long-01");
+	text-decoration-color: $text-primary;
+	color: $text-primary;
 
 	height: 46px;
 	width: 100%;
 
 	display: flex;
-	background-color: $ui-background;
+	background-color: $background;
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 $spacing-05;
 	border: 0; // override for button styling
 	outline: none; // override for button styling
-	border-bottom: 1px solid $ui-03;
+	border-bottom: 1px solid $layer-accent-01;
 	cursor: pointer;
 	&:hover {
-		background-color: $hover-ui;
+		background-color: $layer-hover-01;
 	}
 	> svg {
 		height: 20px;
 		width: 20px;
-		fill: $icon-01;
+		fill: $icon-primary;
 	}
 }
 
 .properties-category-content {
 	height: 100%;
 	padding: $spacing-05;
-	border-bottom: 1px solid $ui-03;
+	border-bottom: 1px solid $layer-accent-01;
 	display: none;
 	&.show {
 		display: inherit;
@@ -99,7 +93,7 @@ $primary-tab-height: $spacing-08;
 }
 
 .properties-subtabs, .properties-primaryTabs {
-	.bx--tabs__nav {
+	.cds--tabs__nav {
 		overflow-x: auto; // override carbon so scrollbar doesn't always show
 	}
 }
@@ -109,11 +103,11 @@ $primary-tab-height: $spacing-08;
 	align-items: center;
 	padding: $spacing-02 0;
 	.properties-static-text {
-		@include carbon--type-style("body-short-01");
-		color: $text-01;
+		@include type-style("body-short-01");
+		color: $text-primary;
 		&.info {
-			@include carbon--type-style("label-01");
-			color: $text-02;
+			@include type-style("label-01");
+			color: $text-secondary;
 		}
 	}
 	svg {
@@ -141,7 +135,7 @@ $primary-tab-height: $spacing-08;
 }
 
 .properties-light-enabled {
-	background-color: $ui-01; // Override theme background-color when light option is true
+	background-color: $layer-01; // Override theme background-color when light option is true
 }
 
 .properties-custom-panel + .properties-control-panel {
@@ -155,7 +149,7 @@ $primary-tab-height: $spacing-08;
 	.properties-primaryTabs {
 		position: absolute;
 		height: $primary-tab-height;
-		border-bottom: 1px solid $ui-03;
+		border-bottom: 1px solid $layer-accent-01;
 	}
 
 	.properties-primary-tab-panel.tearsheet-container, .properties-primary-tab-panel.right-flyout-tabs-view {

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

@@ -19,8 +19,8 @@ import PropTypes from "prop-types";
 import { formatMessage } from "./../../util/property-utils";
 import { MESSAGE_KEYS } from "./../../constants/constants";
 import { ControlType } from "./../../constants/form-constants";
-import { Add16, Edit16 } from "@carbon/icons-react";
-import { Button } from "carbon-components-react";
+import { Add, Edit } from "@carbon/react/icons";
+import { Button } from "@carbon/react";
 
 export default class EmptyTable extends React.Component {
 	constructor(props) {
@@ -54,8 +54,8 @@ export default class EmptyTable extends React.Component {
 				<Button
 					className="properties-empty-table-button"
 					kind="tertiary"
-					size="small"
-					renderIcon={this.isReadonlyTable() ? Edit16 : Add16}
+					size="sm"
+					renderIcon={this.isReadonlyTable() ? Edit : Add}
 					onClick={this.props.emptyTableButtonClickHandler}
 					disabled={this.props.disabled}
 				>

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

@@ -15,7 +15,7 @@
  */
 
 .properties-empty-table {
-	@include carbon--type-style("body-short-01");
+	@include type-style("body-short-01");
 	&[disabled] {
 		opacity: 0.5;
 		pointer-events: none;