@elyra/canvas 12.44.0 → 13.0.0-alpha.0

package/src/toolbar/toolbar-button-item.jsx

@@ -22,14 +22,14 @@ import ArrangeHorizontally from "./../../assets/images/arrange_horizontally.svg"
 import ArrangeVertically from "./../../assets/images/arrange_vertically.svg";
 import ToggleNotificationPanel from "./../../assets/images/notification_counter_icon.svg";
 
-import { Button } from "carbon-components-react";
+import { Button } from "@carbon/react";
 import SVG from "react-inlinesvg";
 import classNames from "classnames";
-import { StopFilledAlt16, Play16, Undo16, Redo16, Chat16, ChatOff16, Result16,
-	Cut16, Copy16, Paste16, Edit16,	ColorPalette16, Maximize16, Minimize16,
-	Launch16, AddComment16, TrashCan16, ZoomIn16, ZoomOut16,
-	ChevronRight16, ChevronDown16, ChevronUp16,
-	CenterToFit16, OpenPanelFilledLeft16 } from "@carbon/icons-react";
+import { StopFilledAlt, Play, Undo, Redo, Chat, ChatOff, Result,
+	Cut, Copy, Paste, Edit,	ColorPalette, Maximize, Minimize,
+	Launch, AddComment, TrashCan, ZoomIn, ZoomOut,
+	ChevronRight, ChevronDown, ChevronUp,
+	CenterToFit, OpenPanelFilledLeft } from "@carbon/react/icons";
 import { TOOLBAR_STOP, TOOLBAR_RUN, TOOLBAR_UNDO, TOOLBAR_REDO,
 	TOOLBAR_CUT, TOOLBAR_COPY, TOOLBAR_PASTE, TOOLBAR_CLIPBOARD,
 	TOOLBAR_CREATE_COMMENT, TOOLBAR_CREATE_AUTO_COMMENT, TOOLBAR_COLOR_BACKGROUND,
@@ -71,54 +71,54 @@ class ToolbarButtonItem extends React.Component {
 
 		switch (actionObj.action) {
 		case (TOOLBAR_STOP):
-			return <StopFilledAlt16 disabled={disabled} />;
+			return <StopFilledAlt disabled={disabled} />;
 		case (TOOLBAR_RUN):
-			return <Play16 disabled={disabled} />;
+			return <Play disabled={disabled} />;
 		case (TOOLBAR_EXPAND_SUPERNODE_IN_PLACE):
-			return <Maximize16 disabled={disabled} />;
+			return <Maximize disabled={disabled} />;
 		case (TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE):
-			return <Minimize16 disabled={disabled} />;
+			return <Minimize disabled={disabled} />;
 		case (TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE):
-			return <Launch16 disabled={disabled} />;
+			return <Launch disabled={disabled} />;
 		case (TOOLBAR_UNDO):
-			return <Undo16 disabled={disabled} />;
+			return <Undo disabled={disabled} />;
 		case (TOOLBAR_REDO):
-			return <Redo16 disabled={disabled} />;
+			return <Redo disabled={disabled} />;
 		case (TOOLBAR_CLIPBOARD):
-			return <Result16 disabled={disabled} />;
+			return <Result disabled={disabled} />;
 		case (TOOLBAR_CUT):
-			return <Cut16 disabled={disabled} />;
+			return <Cut disabled={disabled} />;
 		case (TOOLBAR_COPY):
-			return <Copy16 disabled={disabled} />;
+			return <Copy disabled={disabled} />;
 		case (TOOLBAR_PASTE):
-			return <Paste16 disabled={disabled} />;
+			return <Paste disabled={disabled} />;
 		case (TOOLBAR_CREATE_COMMENT):
 		case (TOOLBAR_CREATE_AUTO_COMMENT):
-			return <AddComment16 disabled={disabled} />;
+			return <AddComment disabled={disabled} />;
 		case (TOOLBAR_SHOW_COMMENTS):
-			return <Chat16 disabled={disabled} />;
+			return <Chat disabled={disabled} />;
 		case (TOOLBAR_HIDE_COMMENTS):
-			return <ChatOff16 disabled={disabled} />;
+			return <ChatOff disabled={disabled} />;
 		case (TOOLBAR_COLOR_BACKGROUND):
-			return <ColorPalette16 disabled={disabled} />;
+			return <ColorPalette disabled={disabled} />;
 		case (TOOLBAR_DELETE_LINK):
 		case (TOOLBAR_DELETE_SELECTED_OBJECTS):
-			return <TrashCan16 disabled={disabled} />;
+			return <TrashCan disabled={disabled} />;
 		case (TOOLBAR_SET_COMMENT_EDIT_MODE):
 		case (TOOLBAR_SET_NODE_LABEL_EDIT):
-			return <Edit16 disabled={disabled} />;
+			return <Edit disabled={disabled} />;
 		case (TOOLBAR_ZOOM_IN):
-			return <ZoomIn16 disabled={disabled} />;
+			return <ZoomIn disabled={disabled} />;
 		case (TOOLBAR_ZOOM_OUT):
-			return <ZoomOut16 disabled={disabled} />;
+			return <ZoomOut disabled={disabled} />;
 		case (TOOLBAR_ZOOM_FIT):
-			return <CenterToFit16 disabled={disabled} />;
+			return <CenterToFit disabled={disabled} />;
 		case (TOOLBAR_OPEN_PALETTE):
-			return <OpenPanelFilledLeft16 disabled={disabled} />;
+			return <OpenPanelFilledLeft disabled={disabled} />;
 		case (TOOLBAR_CLOSE_PALETTE):
-			return <OpenPanelFilledLeft16 disabled={disabled} />;
+			return <OpenPanelFilledLeft disabled={disabled} />;
 		case (TOOLBAR_TOGGLE_PALETTE):
-			return <OpenPanelFilledLeft16 disabled={disabled} />;
+			return <OpenPanelFilledLeft disabled={disabled} />;
 
 		// Non-carbon icons
 		case (TOOLBAR_ARRANGE_HORIZONALLY):
@@ -249,11 +249,11 @@ class ToolbarButtonItem extends React.Component {
 	generateChevronIcon(actionObj) {
 		if (actionObj.subMenu || actionObj.subPanel) {
 			if (this.props.isInMenu) {
-				return (<ChevronRight16 />);
+				return <ChevronRight />;
 			}
 			if (actionObj.incLabelWithIcon === "before" ||
 					actionObj.incLabelWithIcon === "after") {
-				const chev = this.props.subAreaDisplayed ? (<ChevronUp16 />) : (<ChevronDown16 />);
+				const chev = this.props.subAreaDisplayed ? (<ChevronUp />) : (<ChevronDown />);
 				return (<div className={"toolbar-up-down-chevron"}>{chev}</div>);
 			}
 			return this.generateChevronMini();

package/src/toolbar/toolbar-overflow-item.jsx

@@ -18,8 +18,8 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import { v4 as uuid4 } from "uuid";
-import { Button } from "carbon-components-react";
-import { OverflowMenuVertical16 } from "@carbon/icons-react";
+import { Button } from "@carbon/react";
+import { OverflowMenuVertical } from "@carbon/react/icons";
 import ToolbarSubMenu from "./toolbar-sub-menu.jsx";
 
 class ToolbarOverflowItem extends React.Component {
@@ -152,7 +152,7 @@ class ToolbarOverflowItem extends React.Component {
 					>
 						<div className="toolbar-item-content default">
 							<div className="toolbar-icon">
-								<OverflowMenuVertical16 />
+								<OverflowMenuVertical />
 							</div>
 						</div>
 					</Button>

package/src/toolbar/toolbar-sub-menu-item.jsx

@@ -214,7 +214,10 @@ ToolbarSubMenuItem.propTypes = {
 		subMenu: PropTypes.array,
 		subPanel: PropTypes.any,
 		subPanelData: PropTypes.object,
-		jsx: PropTypes.object,
+		jsx: PropTypes.oneOfType([
+			PropTypes.object,
+			PropTypes.func
+		]),
 		tooltip: PropTypes.oneOfType([
 			PropTypes.string,
 			PropTypes.object,

package/src/toolbar/toolbar.scss

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-@import "carbon-components/scss/globals/scss/vars";
-
 $toolbar-icon-label-margin: 8px;
 $toolbar-icon-size: 16px;
 $toolbar-button-height: 40px;
@@ -27,7 +25,7 @@ $toolbar-divider-width: 1px;
 .toolbar-div {
 	height: $toolbar-button-height;
 	width: 100%;
-	background-color: $ui-01;
+	background-color: $layer-01;
 	box-sizing: content-box;
 	position: relative;
 	display: flex;
@@ -38,8 +36,8 @@ $toolbar-divider-width: 1px;
 	-webkit-user-drag: none;
 
 	&:focus {
-		border-color: $interactive-03;
-		box-shadow: inset 0 0 0 2px $interactive-03;
+		border-color: $button-tertiary;
+		box-shadow: inset 0 0 0 2px $button-tertiary;
 	}
 
 	/* Small size toolbar  */
@@ -100,48 +98,51 @@ $toolbar-divider-width: 1px;
 }
 
 .toolbar-item {
-	background-color: $ui-01;
+	background-color: $layer-01;
 	display: inline-block;
 
-	& button {
-		padding: 0;
-		min-height: 30px;
-		height: $toolbar-button-height;
+	.toolbar-button-item {
+		& button {
+			padding: 0;
+			min-height: 30px;
+			height: $toolbar-button-height;
+		}
 	}
+	
 
 	&.default,
 	&.ghost {
 		& button {
-			background-color: $ui-01;
+			background-color: $layer-01;
 		}
 
 		& button:hover {
-			background-color: $hover-field;
+			background-color: $skeleton-background;
 		}
 
 		& button:focus {
-			background-color: $hover-field;
+			background-color: $skeleton-background;
 		}
 
 		& button:disabled:hover {
-			background-color: $ui-01;
+			background-color: $layer-01;
 		}
 	}
 
 	&.tertiary {
 		& button {
-			color: $brand-03;
-			background-color: $ui-01;
+			color: $link-primary;
+			background-color: $layer-01;
 		}
 
 		& button:hover {
-			background-color: $hover-field;
+			background-color: $skeleton-background;
 		}
 
 		& button:disabled,
 		& button:disabled:hover {
-			color: $disabled-02;
-			background-color: $ui-01;
+			color: $button-disabled;
+			background-color: $layer-01;
 		}
 	}
 }
@@ -153,23 +154,23 @@ $toolbar-divider-width: 1px;
 
 
 .toolbar-overflow-item {
-	background-color: $ui-01;
+	background-color: $layer-01;
 	display: inline-block;
 
 	& button {
 		padding: 0;
 		height: $toolbar-button-height;
 		min-height: 30px;
-		background-color: $ui-01;
-		border-right: $toolbar-divider-width solid $ui-03;
+		background-color: $layer-01;
+		border-right: $toolbar-divider-width solid $layer-accent-01;
 	}
 
 	& button:hover {
-		background-color: $hover-field;
+		background-color: $skeleton-background;
 	}
 
 	& button:disabled:hover {
-		background-color: $ui-01;
+		background-color: $layer-01;
 	}
 }
 
@@ -196,17 +197,17 @@ $toolbar-divider-width: 1px;
 	}
 
 	&.default {
-		color: $icon-01; // Used by label and pick up as currentColor in icons.
+		color: $icon-primary; // Used by label and pick up as currentColor in icons.
 	}
 
 	&.disabled.default {
-		color: $disabled-02;
-		fill: $disabled-02; // For custom svg images
+		color: $button-disabled;
+		fill: $button-disabled; // For custom svg images
 		& .toolbar-tick-mark {
-			fill: $disabled-02;
+			fill: $button-disabled;
 		}
 		& .toolbar-text-content {
-			stroke: $disabled-02;
+			stroke: $button-disabled;
 		}
 	}
 
@@ -224,7 +225,7 @@ $toolbar-divider-width: 1px;
 		top: 14px;
 		font-size: 9px;
 		line-height: 9px;
-		color: $icon-01;
+		color: $icon-primary;
 	}
 
 	.toolbar-icon-label {
@@ -261,7 +262,7 @@ $toolbar-divider-width: 1px;
 		pointer-events: none;
 
 		& .toolbar-tick-mark {
-			fill: $icon-01;
+			fill: $icon-primary;
 		}
 	}
 }
@@ -272,7 +273,7 @@ $toolbar-divider-width: 1px;
 	align-items: center;
 	vertical-align: top;
 	position: relative;
-	background-color: $ui-01;
+	background-color: $layer-01;
 	padding: 0;
 }
 
@@ -290,15 +291,15 @@ $toolbar-divider-width: 1px;
 	&.default,
 	&.ghost {
 		& button {
-			background-color: $ui-03;
-			border-bottom: 2px solid $interactive-01;
+			background-color: $layer-accent-01;
+			border-bottom: 2px solid $button-primary;
 		}
 	}
 }
 
 .toolbar-divider {
-	border-right: $toolbar-divider-width solid $ui-03;
-	background-color: $ui-01;
+	border-right: $toolbar-divider-width solid $layer-accent-01;
+	background-color: $layer-01;
 	display: inline-block;
 	height: $toolbar-button-height;
 	width: 0;
@@ -306,7 +307,7 @@ $toolbar-divider-width: 1px;
 
 .toolbar-divider-overflow {
 	height: 0;
-	border-bottom: $toolbar-divider-width solid $ui-03;
+	border-bottom: $toolbar-divider-width solid $layer-accent-01;
 }
 
 .toolbar-popover-list {
@@ -316,8 +317,8 @@ $toolbar-divider-width: 1px;
 	position: fixed; // Actual position will be calculated in the code
 	list-style-type: none;
 	padding: 0;
-	border: $toolbar-divider-width solid $ui-03;
-	background-color: $ui-01;
+	border: $toolbar-divider-width solid $layer-accent-01;
+	background-color: $layer-01;
 	opacity: 0;
 	animation: tovisible 0.25s ease-in-out forwards; // Use keyframe to animate panel visibility
 
@@ -327,6 +328,7 @@ $toolbar-divider-width: 1px;
 
 	&.subpanel {
 		width: fit-content;
+		box-sizing: border-box;
 	}
 }
 

package/src/tooltip/tooltip.jsx

@@ -20,7 +20,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Portal } from "react-portal";
-import { Link } from "carbon-components-react";
+import { Link } from "@carbon/react";
 import { v4 as uuid4 } from "uuid";
 
 class ToolTip extends React.Component {

package/src/tooltip/tooltip.scss

@@ -22,11 +22,11 @@
 	font-size: 12px;
 	position: fixed;
 	padding: $spacing-05;
-	background-color: $inverse-02;
-	border: 1px solid $inverse-02;
+	background-color: $background-inverse;
+	border: 1px solid $background-inverse;
 	font-weight: 400;
 	opacity: 90%;
-	color: $inverse-01;
+	color: $text-inverse;
 	line-height: 1.2;
 	text-align: left;
 	z-index: 10000; // Modal layout has z-index 9000. Show tooltip on top of modal.
@@ -35,14 +35,14 @@
 	max-width: 228px;
 	border-radius: 2px;
 	white-space: pre-wrap; // Add a line break for \n in tooltip
-	.bx--link {
+	.cds--link {
 		display: block;
-		color: $inverse-link;
+		color: $link-inverse;
 		margin-top: $spacing-05;
 		pointer-events: auto; // To make link clickable inside tooltip
 		cursor: pointer;
 		&:hover {
-			color: $inverse-link;
+			color: $link-inverse;
 			text-decoration: underline;
 		}
 	}
@@ -92,12 +92,12 @@
 
 
 .common-canvas-tooltip .tipArrow polyline {
-	fill: $inverse-02;
+	fill: $background-inverse;
 	stroke-width: 0;
 }
 
 .common-canvas-tooltip .tipArrow polygon {
-	fill: $inverse-02;
+	fill: $background-inverse;
 }
 
 .common-canvas-tooltip[aria-hidden="false"] {
@@ -120,12 +120,12 @@
 .tip-palette-category {
 	font-size: 10px;
 	padding-bottom: 4px;
-	color: $inverse-01;
+	color: $text-inverse;
 }
 
 .tip-palette-label, .tip-node-label {
 	font-weight: 600;
-	color: $inverse-01;
+	color: $text-inverse;
 }
 
 .tip-palette-desc, .tip-node-desc {
@@ -139,10 +139,10 @@
 	right: $spacing-05;
 	top: $spacing-03;
 	&.warning {
-		fill: $support-03;
+		fill: $support-warning;
 	}
 	&.error {
-		fill: $support-01;
+		fill: $support-error;
 	}
 }
 
@@ -151,11 +151,11 @@
 }
 
 .properties-tooltips {
-	background-color: $inverse-02;
-	color: $inverse-01;
+	background-color: $background-inverse;
+	color: $text-inverse;
 	max-width: 250px;
 }
 
 .properties-tooltips .tipArrow polyline {
-	fill: $inverse-02;
+	fill: $background-inverse;
 }