@elyra/canvas 12.44.0 → 13.0.0-alpha.0

package/src/icons/icon.scss

@@ -15,41 +15,41 @@
  */
 
 .canvas-icon .stroke, .canvas-icon.stroke {
-	stroke: $icon-01;
+	stroke: $icon-primary;
 }
 
 .canvas-icon .fill, .canvas-icon.fill {
-	fill: $icon-01;
+	fill: $icon-primary;
 }
 
 .canvas-icon[disabled] {
-	fill: $disabled-02;
+	fill: $button-disabled;
 }
 
 svg.properties-icon, svg.canvas-icon {
-	fill: $icon-01;
+	fill: $icon-primary;
 }
 
 svg.canvas-state-icon-error {
-	fill: $support-01;
+	fill: $support-error;
 }
 
 svg.canvas-state-icon-success {
-	fill: $support-02;
+	fill: $support-success;
 }
 
 svg.canvas-state-icon-warning {
-	fill: $support-03;
+	fill: $support-warning;
 	[data-icon-path="inner-path"] { // exclamation mark
-		fill: $ui-05;
+		fill: $layer-selected-inverse;
 		opacity: 1;
 	}
 }
 
 svg.canvas-state-icon-info {
-	fill: $support-04;
+	fill: $support-info;
 }
 
 svg.canvas-state-icon-information-hollow {
-	fill: $icon-02;
+	fill: $icon-secondary;
 }

package/src/index.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,9 +14,7 @@
  * limitations under the License.
  */
 
-@import "carbon-components/scss/globals/scss/vars";
-@import "carbon-components/scss/globals/scss/typography";
-
+@import "./carbon.scss";
 @import "./common-properties/index.scss";
 @import "./notification-panel/notification-panel.scss";
 @import "./icons/icon.scss";

package/src/notification-panel/notification-panel.jsx

@@ -19,8 +19,8 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { injectIntl } from "react-intl";
 import Icon from "./../icons/icon.jsx";
-import { Button } from "carbon-components-react";
-import { Close16 } from "@carbon/icons-react";
+import { Button } from "@carbon/react";
+import { Close } from "@carbon/react/icons";
 import Logger from "../logging/canvas-logger.js";
 import { DEFAULT_NOTIFICATION_HEADER } from "./../common-canvas/constants/canvas-constants.js";
 import defaultMessages from "../../locales/notification-panel/locales/en.json";
@@ -200,7 +200,7 @@ class NotificationPanel extends React.Component {
 					ref={(ref) => (!ref || this.allRefs.push(ref))}
 					size="sm"
 					kind="ghost"
-					renderIcon={Close16}
+					renderIcon={Close}
 					hasIconOnly
 					iconDescription={this.props.intl.formatMessage({
 						id: "notification.panel.close.button.description",
@@ -228,7 +228,7 @@ class NotificationPanel extends React.Component {
 					className="notification-panel-clear-all"
 					onClick={this.clearNotificationMessages.bind(this)}
 					kind="ghost"
-					size="small"
+					size="sm"
 					disabled={this.props.messages.length === 0}
 				>
 					{this.props.notificationConfig.clearAllMessage}
@@ -245,7 +245,7 @@ class NotificationPanel extends React.Component {
 					className="notification-panel-secondary-button"
 					onClick={this.props.notificationConfig.secondaryButtonCallback.bind(this)}
 					kind="ghost"
-					size="small"
+					size="sm"
 					disabled={this.props.secondaryButtonDisabled}
 				>
 					{this.props.notificationConfig.secondaryButtonLabel}

package/src/notification-panel/notification-panel.scss

@@ -34,7 +34,7 @@ $notification-panel-button-container-height: 49px;
 	min-height: $notification-panel-header-height;
 	height: fit-content;
 	width: inherit;
-	background-color: $ui-01;
+	background-color: $layer-01;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -43,20 +43,20 @@ $notification-panel-button-container-height: 49px;
 	outline: none; // Turn outline off and use carbon style for focus below.
 
 	&:focus {
-		border-color: $interactive-03;
-		box-shadow: inset 0 0 0 2px $interactive-03;
+		border-color: $focus;
+		box-shadow: inset 0 0 0 2px $focus;
 	}
 
 	.notification-panel-header {
-		@include carbon--type-style("productive-heading-02");
+		@include type-style("productive-heading-02");
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 	}
 
 	.notification-panel-subtitle {
-		@include carbon--type-style("helper-text-01");
-		color: $text-02;
+		@include type-style("helper-text-01");
+		color: $text-secondary;
 		padding-top: $spacing-02;
 	}
 }
@@ -70,7 +70,7 @@ $notification-panel-button-container-height: 49px;
 .notification-panel-button-container {
 	width: 100%;
 	height: $notification-panel-button-container-height;
-	background-color: $ui-01;
+	background-color: $layer-01;
 	display: flex;
 	justify-content: space-between;
 	border-top: 0;
@@ -81,13 +81,13 @@ $notification-panel-button-container-height: 49px;
 .notification-panel-messages {
 	overflow-y: auto;
 	line-height: normal;
-	background-color: $ui-01;
-	border-top: 1px solid $ui-03;
-	border-bottom: 1px solid $ui-03;
+	background-color: $layer-01;
+	border-top: 1px solid $layer-accent-01;
+	border-bottom: 1px solid $layer-accent-01;
 	max-height: 448px;
 
 	.notifications-button-container {
-		border-bottom: 1px solid $ui-03;
+		border-bottom: 1px solid $layer-accent-01;
 		min-height: $notification-message-height;
 	}
 
@@ -99,12 +99,12 @@ $notification-panel-button-container-height: 49px;
 		outline: none; // Turn outline off and use carbon style for focus below.
 
 		&:focus {
-			border-color: $interactive-03;
-			box-shadow: inset 0 0 0 2px $interactive-03;
+			border-color: $focus;
+			box-shadow: inset 0 0 0 2px $focus;
 		}
 
 		.notification-panel-empty-message {
-			@include carbon--type-style("body-short-01");
+			@include type-style("body-short-01");
 			text-align: center;
 			padding-right: 30px;
 			padding-left: 30px;
@@ -120,21 +120,21 @@ $notification-panel-button-container-height: 49px;
 		display: inline-flex;
 		width: 100%;
 		min-height: $notification-message-height;
-		background-color: $ui-01;
+		background-color: $layer-01;
 		border-style: none;
-		border-left: $notification-left-border-color-width solid $ui-01;
+		border-left: $notification-left-border-color-width solid $layer-01;
 		cursor: default;
 		margin-top: 0; // Required for Safari
 		margin-bottom: 0; // Required for Safari
 		outline: none; // Turn outline off and use carbon style for focus below.
 
 		&:focus {
-			border-color: $interactive-03;
-			box-shadow: inset 0 0 0 2px $interactive-03;
+			border-color: $focus;
+			box-shadow: inset 0 0 0 2px $focus;
 		}
 
 		&:hover {
-			background-color: $hover-ui;
+			background-color: $layer-hover-01;
 		}
 
 		&:focus,
@@ -143,16 +143,16 @@ $notification-panel-button-container-height: 49px;
 				border-left: $notification-left-border-color-width solid $field-01;
 			}
 			&.error {
-				border-left: $notification-left-border-color-width solid $support-01;
+				border-left: $notification-left-border-color-width solid $support-error;
 			}
 			&.warning {
-				border-left: $notification-left-border-color-width solid $support-03;
+				border-left: $notification-left-border-color-width solid $support-warning;
 			}
 			&.success {
-				border-left: $notification-left-border-color-width solid $support-02;
+				border-left: $notification-left-border-color-width solid $support-success;
 			}
 			&.info {
-				border-left: $notification-left-border-color-width solid $support-04;
+				border-left: $notification-left-border-color-width solid $support-info;
 			}
 		}
 
@@ -181,24 +181,24 @@ $notification-panel-button-container-height: 49px;
 			width: 266px;
 
 			.notification-message-title {
-				@include carbon--type-style("productive-heading-01");
-				color: $text-02;
+				@include type-style("productive-heading-01");
+				color: $text-primary;
 				padding-bottom: $spacing-02;
 			}
 
 			.notification-message-subtitle {
-				@include carbon--type-style("label-01");
-				color: $text-01;
+				@include type-style("label-01");
+				color: $text-secondary;
 				hr {
 					margin-bottom: $spacing-03;
 					border-bottom: 0;
-					border-top: solid 1px $ui-03;
+					border-top: solid 1px $layer-accent-01;
 				}
 			}
 
 			.notification-message-content {
-				@include carbon--type-style("label-01");
-				color: $text-02;
+				@include type-style("label-01");
+				color: $text-secondary;
 			}
 		}
 	}
@@ -210,7 +210,7 @@ $notification-panel-button-container-height: 49px;
 
 .notification-message-timestamp {
 	display: inline-flex;
-	color: $text-02;
+	color: $text-secondary;
 	svg {
 		width: 10px;
 		height: 10px;

package/src/palette/palette-dialog-topbar.jsx

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { CloseOutline16, Grid16, List16 } from "@carbon/icons-react";
+import { CloseOutline, Grid, List } from "@carbon/react/icons";
 
 import Toolbar from "../toolbar";
 
@@ -56,13 +56,13 @@ class PaletteDialogTopbar extends React.Component {
 	render() {
 		const config = {
 			leftBar: [
-				{ action: "grid", iconEnabled: (<Grid16 />), enable: true, isSelected: this.props.showGrid },
-				{ action: "list", iconEnabled: (<List16 />), enable: true, isSelected: !this.props.showGrid },
+				{ action: "grid", iconEnabled: (<Grid />), enable: true, isSelected: this.props.showGrid },
+				{ action: "list", iconEnabled: (<List />), enable: true, isSelected: !this.props.showGrid },
 				{ divider: true }
 			],
 			rightBar: [
 				{ divider: true },
-				{ action: "close", iconEnabled: (<CloseOutline16 />), enable: true }
+				{ action: "close", iconEnabled: (<CloseOutline />), enable: true }
 			]
 		};
 

package/src/palette/palette-flyout-content-category.jsx

@@ -16,11 +16,11 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { InlineLoading } from "carbon-components-react";
+import { InlineLoading } from "@carbon/react";
 import SVG from "react-inlinesvg";
 import { TIP_TYPE_PALETTE_CATEGORY } from "../common-canvas/constants/canvas-constants.js";
 import { get } from "lodash";
-import { AccordionItem } from "carbon-components-react";
+import { AccordionItem } from "@carbon/react";
 import PaletteContentList from "./palette-content-list.jsx";
 
 
@@ -212,7 +212,7 @@ class PaletteFlyoutContentCategory extends React.Component {
 	}
 
 	categoryKeyPressed(evt) {
-		if (evt.target.className === "bx--accordion__heading") {
+		if (evt.target.className === "cds--accordion__heading") {
 			if (evt.code === "Enter" || evt.code === "Space") {
 				evt.preventDefault();
 				evt.stopPropagation();

package/src/palette/palette-flyout-content-search.jsx

@@ -18,7 +18,7 @@ import React from "react";
 import { injectIntl } from "react-intl";
 import PropTypes from "prop-types";
 import defaultMessages from "../../locales/palette/locales/en.json";
-import { Search } from "carbon-components-react";
+import { Search } from "@carbon/react";
 
 class PaletteFlyoutContentSearch extends React.Component {
 
@@ -52,7 +52,7 @@ class PaletteFlyoutContentSearch extends React.Component {
 			// palette-flyout-search id added for hopscotch tours
 			<div className="palette-flyout-search-container" id="palette-flyout-search">
 				<Search
-					key="palette-flyout-search"
+					id="palette-flyout-search"
 					className="palette-flyout-search"
 					placeholder={placeHolder}
 					onChange={this.handleSearchStringChange}

package/src/palette/palette-flyout-content.jsx

@@ -22,7 +22,7 @@ import PaletteFlyoutContentCategory from "./palette-flyout-content-category.jsx"
 import PaletteFlyoutContentSearch from "./palette-flyout-content-search.jsx";
 import PaletteFlyoutContentFilteredList from "./palette-flyout-content-filtered-list.jsx";
 import Logger from "../logging/canvas-logger.js";
-import { Accordion } from "carbon-components-react";
+import { Accordion } from "@carbon/react";
 
 
 const logger = new Logger("PaletteFlyoutContent");

package/src/palette/palette.scss

@@ -15,7 +15,7 @@
  */
 
 $palette-border-width: 1px;
-$palette-border-color: $ui-03;
+$palette-border-color: $layer-accent-01;
 $palette-search-container-height: 41px;
 
 //--------------------------------------------------------
@@ -27,7 +27,7 @@ $palette-search-container-height: 41px;
 	position: relative;
 	height: 100%;
 	padding-bottom: 5px;
-	background-color: $ui-01;
+	background-color: $layer-01;
 	-webkit-transition: 0.2s;
 	transition: 0.2s;
 	cursor: default; /* This stops Chrome displaying an I-beam cursor when dragging in the canvas. */
@@ -63,27 +63,27 @@ $palette-search-container-height: 41px;
 	}
 
 	.palette-no-results-title {
-		@include carbon--type-style("body-short-01");
+		@include type-style("body-short-01");
 		width: 100%;
 		padding: 20px 20px 0;
 		text-align: center;
 	}
 
 	.palette-no-results-desc {
-		@include carbon--type-style("caption-01");
+		@include type-style("caption-01");
 		width: 100%;
 		padding: 0 20px;
 		text-align: center;
 	}
 
 	.palette-flyout-restrict-item {
-		@include carbon--type-style("helper-text-01");
+		@include type-style("helper-text-01");
 		width: 100%;
 		padding: $spacing-08 20px;
 	}
 
 	.palette-list-item-desc-button {
-		color: $link-01;
+		color: $link-primary;
 		cursor: pointer;
 		padding: 5px 0 0;
 	}
@@ -102,21 +102,21 @@ $palette-search-container-height: 41px;
 		outline: none; // Turn outline off and use carbon style for focus below.
 
 		&:hover {
-			background-color: $ui-03;
+			background-color: $layer-accent-01;
 		}
 
 		&:focus {
-			border-color: $interactive-03;
-			box-shadow: inset 0 0 0 2px $interactive-03;
+			border-color: $focus;
+			box-shadow: inset 0 0 0 2px $focus;
 		}
 
 		.palette-list-item-category-label {
-			@include carbon--type-style("caption-01");
+			@include type-style("caption-01");
 			width: 100%;
 			padding: $spacing-05 10px 0 58px;
 
 			& mark {
-				color: $interactive-01;
+				color: $button-primary;
 				background-color: $highlight;
 				font-weight: 500;
 			}
@@ -133,17 +133,17 @@ $palette-search-container-height: 41px;
 
 		.palette-list-item-icon {
 			width: 28px; /* Not specifying height preserves the image's aspect ratio. */
-			color: $text-02;
+			color: $text-secondary;
 		}
 
 		.palette-list-item-text-div {
-			@include carbon--type-style("productive-heading-01");
+			@include type-style("productive-heading-01");
 			font-weight: 400;
 			padding: 0 10px;
 			width: calc(100% - 68px);
 			line-height: 1;
 			& mark {
-				color: $interactive-01;
+				color: $button-primary;
 				background-color: $highlight;
 				font-weight: 500;
 			}
@@ -153,25 +153,25 @@ $palette-search-container-height: 41px;
 			transform: scale(1.5);
 			width: 28px; /* Not specifying height preserves the image's aspect ratio. */
 			line-height: 46px;  /* Must be same as containing div height */
-			color: $text-02;
+			color: $text-secondary;
 			margin-left: 0;
 		}
 
 		.palette-list-item-description {
-			@include carbon--type-style("caption-01");
+			@include type-style("caption-01");
 			padding: 0 10px 0 58px;
 			word-break: break-word;
 			width: 100%; // Needed when the description is only one line long
 
 			& mark {
-				color: $interactive-01;
+				color: $button-primary;
 				background-color: $highlight;
 				font-weight: 500;
 			}
 		}
 
 		& .highlight {
-			background-color: $interactive-01;
+			background-color: $button-primary;
 		}
 
 		&.search-result {
@@ -196,27 +196,29 @@ $palette-search-container-height: 41px;
 	position: absolute;
 	overflow-x: hidden;
 	overflow-y: overlay;
-	li .bx--accordion__arrow {
-		margin-top: 15px;
+	li .cds--accordion__arrow {
+		margin: 15px;
 	}
-	.bx--accordion__item--active {
-		button {
-			border-bottom: $palette-border-width solid $palette-border-color;
-		}
-	}
-	.bx--accordion__item {
+	.cds--accordion__item {
 		border-top: 0;
+		&:last-child {
+			border-block-end: 1px solid $border-subtle-01;
+		}
 
-		.bx--accordion__heading {
+		.cds--accordion__heading {
 			padding: 0;
-			.bx--accordion__title {
+			.cds--accordion__title {
 				margin: 0;
 				padding: 0 0 0 11px;
 				height: 45px;
 			}
 		}
+
+		.cds--accordion__wrapper {
+			padding: 0;
+		}
 	}
-	li .bx--accordion__content {
+	li .cds--accordion__content {
 		padding: 0;
 	}
 }
@@ -258,7 +260,7 @@ $palette-search-container-height: 41px;
 .palette-flyout-category-item-icon {
 	width: 20px;  /* Not specifying height preserves the image's aspect ratio. */
 	margin-left: 5px;
-	fill: $icon-01;
+	fill: $icon-primary;
 	padding-top: 4px;
 }
 
@@ -303,12 +305,12 @@ $palette-search-container-height: 41px;
 		overflow: hidden;
 		// Move the magnifying glass icon to be positioned over the category icons
 		// in the palette, as required from DUX review.
-		.bx--search-magnifier svg {
+		.cds--search-magnifier svg {
 			margin-left: 10px;
 		}
 
 		svg {
-			fill: $icon-01;
+			fill: $icon-primary;
 		}
 
 		// Position the search text to be directly over the category text in the
@@ -331,14 +333,14 @@ $palette-search-container-height: 41px;
 			margin-top: 4px;
 			border-bottom-width: 0;
 
-			&.bx--search-close::before {
+			&.cds--search-close::before {
 				content: none;
 			}
 		}
 	}
 }
 
-.palette-loading-category .bx--accordion__arrow {
+.palette-loading-category .cds--accordion__arrow {
 	display: none;
 }
 
@@ -376,7 +378,7 @@ $palette-search-container-height: 41px;
 		padding-left: 19px;
 
 		&:hover {
-			background-color: $ui-03;
+			background-color: $layer-accent-01;
 		}
 
 		.palette-list-item-icon-and-text {
@@ -390,7 +392,7 @@ $palette-search-container-height: 41px;
 		.palette-list-item-icon {
 			width: 28px; /* Not specifying height preserves the image's aspect ratio. */
 			line-height: 46px;  /* Must be same as containing div height */
-			color: $text-02;
+			color: $text-secondary;
 			margin-left: 0;
 			margin-right: 10px;
 		}
@@ -412,7 +414,7 @@ $palette-search-container-height: 41px;
 			transform: scale(1.5);
 			width: 28px; /* Not specifying height preserves the image's aspect ratio. */
 			line-height: 46px;  /* Must be same as containing div height */
-			color: $text-02;
+			color: $text-secondary;
 			margin-left: 0;
 			margin-right: 10px;
 		}
@@ -421,20 +423,20 @@ $palette-search-container-height: 41px;
 
 .palette-dialog-topbar {
 	height: 41px;
-	background-color: $ui-03;
+	background-color: $layer-accent-01;
 	border-bottom: $palette-border-width solid $palette-border-color;
 }
 
 .palette-dialog-content {
 	height: 404px;  /* palette-div height - topbar height - 6 pixels (for hover zone to aid drag sizing)*/
 	display: flex;
-	background-color: $ui-01;
+	background-color: $layer-01;
 	border-bottom: $palette-border-width solid $palette-border-color;
 	border-right: $palette-border-width solid $palette-border-color;
 }
 
 .palette-dialog-categories {
-	background-color: $ui-01;
+	background-color: $layer-01;
 	width: 130px;
 	min-width: 130px; /* Set a min-width to ensure space for the scroll bar when it is displayed */
 	border-right: $palette-border-width solid $palette-border-color;
@@ -456,7 +458,7 @@ $palette-search-container-height: 41px;
 
 .palette-dialog-category-selected {
 	font-weight: 600;
-	border-color: $interactive-02;
+	border-color: $button-secondary;
 	border-width: 0 0 0 $palette-border-width;
 	border-style: solid;
 	width: 130px;
@@ -485,8 +487,8 @@ $palette-search-container-height: 41px;
 }
 
 .palette-dialog-grid-node-outer:hover {
-	border-color: $interactive-02;
-	color: $interactive-02;
+	border-color: $button-secondary;
+	color: $button-secondary;
 }
 
 .palette-dialog-grid-node-inner {

package/src/themes/light.scss

@@ -14,11 +14,15 @@
  * limitations under the License.
  */
 
-@import "@carbon/themes/scss/themes";
+@use "@carbon/react/scss/themes" as *;
+@use "../carbon.scss" as *;
 
 // Switch the themes below to get light or dark.
+$theme: $g10; // The light (gray 10) theme
+// $theme: $g90; // The dark theme
 
-$carbon--theme: $carbon--theme--g10; // The light (gray 10) theme
-// $carbon--theme: $carbon--theme--g90; // The dark theme
+:root {
+	@include theme();
+}
 
 @import "../index.scss";

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

@@ -201,7 +201,7 @@ class ToolbarActionItem extends React.Component {
 			<div ref={this.divRef} className={itemClassName} data-toolbar-action={actionObj.action} data-toolbar-item
 				onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onKeyDown={this.onKeyDown}
 			>
-				<div>
+				<div className="toolbar-button-item">
 					<ToolbarButtonItem
 						actionObj={actionObj}
 						actionName={this.generateActionName()}