@elyra/canvas 12.44.0 → 13.0.0-alpha.0

package/src/common-properties/components/field-picker/field-picker.jsx

@@ -23,11 +23,11 @@ import TruncatedContentTooltip from "./../truncated-content-tooltip";
 import PropertiesButtons from "./../properties-buttons";
 import * as PropertyUtils from "./../../util/property-utils";
 
-import { Button } from "carbon-components-react";
+import { Button } from "@carbon/react";
 
 import { MESSAGE_KEYS, DATA_TYPE, SORT_DIRECTION, ROW_SELECTION } from "./../../constants/constants";
 import Icon from "./../../../icons/icon.jsx";
-import { Reset24 } from "@carbon/icons-react";
+import { Reset } from "@carbon/react/icons";
 
 import { has, isEmpty, sortBy, isEqual } from "lodash";
 
@@ -315,6 +315,7 @@ export default class FieldPicker extends React.Component {
 	_genResetButton() {
 		const resetLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(),
 			MESSAGE_KEYS.FIELDPICKER_RESETBUTTON_LABEL);
+		const Reset24 = React.forwardRef((props, ref) => <Reset ref={ref} size={24} {...props} />);
 		const defaultSelections = this.props.currentFields;
 		const selectedFields = this.state.selectedFields;
 		const isSelectionEqual = defaultSelections.length === selectedFields.length && defaultSelections.every((field) => selectedFields.indexOf(field) > -1);
@@ -325,7 +326,7 @@ export default class FieldPicker extends React.Component {
 				onClick={this.handleReset}
 				renderIcon={Reset24}
 				iconDescription={resetLabel}
-				size="small"
+				size="sm"
 				kind="ghost"
 			>
 				<span>{resetLabel}</span>

package/src/common-properties/components/field-picker/field-picker.scss

@@ -69,7 +69,7 @@
 			margin: $spacing-01;
 
 			&[disabled] {
-				fill: $disabled-02;
+				fill: $button-disabled;
 			}
 		}
 	}
@@ -110,9 +110,9 @@
 }
 
 // This is for field-picker in tearsheet, containerType="Tearsheet"
-.properties-tearsheet-panel.bx--modal {
+.properties-tearsheet-panel.cds--modal {
 	.properties-fp-table {
-		border-top: 1px solid $ui-03;
+		border-top: 1px solid $layer-accent-01;
 		padding: $spacing-05;
 
 		.properties-fp-top-row {

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

@@ -20,7 +20,7 @@ import React from "react";
 import { injectIntl } from "react-intl";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
-import { Search } from "carbon-components-react";
+import { Search, Layer } from "@carbon/react";
 import VirtualizedTable from "./../virtualized-table/virtualized-table.jsx";
 import { REM_ROW_HEIGHT, REM_HEADER_HEIGHT, ONE_REM_HEIGHT, SORT_DIRECTION, STATES, ROW_HEIGHT, ROW_SELECTION } from "./../../constants/constants";
 import ReactResizeDetector from "react-resize-detector";
@@ -494,15 +494,16 @@ class FlexibleTable extends React.Component {
 
 			searchBar = (
 				<div className={classNames("properties-ft-search-container", { "disabled": disabled })}>
-					<Search
-						className="properties-ft-search-text"
-						placeholder={placeHolder}
-						onChange={this.handleFilterChange}
-						disabled={disabled}
-						size="sm"
-						labelText={searchBarLabel}
-						light={this.props.light}
-					/>
+					<Layer level={this.props.light ? 1 : 0}>
+						<Search
+							className="properties-ft-search-text"
+							placeholder={placeHolder}
+							onChange={this.handleFilterChange}
+							disabled={disabled}
+							size="sm"
+							labelText={searchBarLabel}
+						/>
+					</Layer>
 				</div>
 			);
 		}

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

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 $flexible-table-header-row-height: $spacing-07;
 $row-left-padding: $spacing-02;
 
@@ -27,7 +28,7 @@ $row-left-padding: $spacing-02;
 
 		.properties-ft-search-text {
 			svg {
-				fill: $icon-01;
+				fill: $icon-primary;
 			}
 		}
 		&.disabled {
@@ -50,10 +51,10 @@ $row-left-padding: $spacing-02;
 	position: relative;
 	overflow: hidden;
 	&.error {
-		border: 1px solid $support-01;
+		border: 1px solid $support-error;
 	}
 	&.warning {
-		border: 1px solid $support-03;
+		border: 1px solid $support-warning;
 	}
 }
 
@@ -64,7 +65,7 @@ $row-left-padding: $spacing-02;
 	width: 100%;
 	overflow-y: auto;
 	overflow-x: hidden;
-	background-color: $ui-01;
+	background-color: $layer-01;
 	display: flex; // address scrollbar with mouse issue
 	flex-direction: column; // address scrollbar with mouse issue
 }
@@ -72,7 +73,7 @@ $row-left-padding: $spacing-02;
 .properties-ft-container-absolute {
 	height: 100%;
 	width: 100%;
-	background-color: $ui-01;
+	background-color: $layer-01;
 	.properties-ft-container {
 		height: 100%;
 	}
@@ -126,17 +127,17 @@ $row-left-padding: $spacing-02;
 	justify-content: center;
 	align-items: center;
 	padding: 0 $spacing-05;
-	@include carbon--type-style("body-long-01");
+	@include type-style("body-long-01");
 }
 
 .properties-light-enabled {
 	.properties-ft-empty-table {
-		background-color: $ui-background;
+		background-color: $background;
 	}
 }
 
 .properties-light-disabled {
 	.properties-ft-empty-table {
-		background-color: $ui-01;
+		background-color: $layer-01;
 	}
 }

package/src/common-properties/components/moveable-table-rows/moveable-table-rows.jsx

@@ -17,9 +17,9 @@
 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 { formatMessage } from "./../../util/property-utils";
-import { ArrowUp24, ArrowDown24, UpToTop24, DownToBottom24 } from "@carbon/icons-react";
+import { ArrowUp, ArrowDown, UpToTop, DownToBottom } from "@carbon/react/icons";
 import classNames from "classnames";
 import EmptyTable from "./../empty-table";
 import { MESSAGE_KEYS } from "./../../constants/constants";
@@ -105,6 +105,8 @@ class MoveableTableRows extends React.Component {
 
 		const topLabel = formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.MOVEABLE_TABLE_BUTTON_TOP_DESCRIPTION);
 		const upLabel = formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.MOVEABLE_TABLE_BUTTON_UP_DESCRIPTION);
+		const UpToTop24 = React.forwardRef((props, ref) => <UpToTop ref={ref} size={24} {...props} />);
+		const ArrowUp24 = React.forwardRef((props, ref) => <ArrowUp ref={ref} size={24} {...props} />);
 		const topImages = (
 			<div key="topImages">
 				<Button
@@ -115,6 +117,7 @@ class MoveableTableRows extends React.Component {
 					renderIcon={UpToTop24}
 					iconDescription={topLabel}
 					tooltipPosition="left"
+					size="sm"
 					hasIconOnly
 				/>
 				<Button
@@ -125,12 +128,15 @@ class MoveableTableRows extends React.Component {
 					renderIcon={ArrowUp24}
 					iconDescription={upLabel}
 					tooltipPosition="left"
+					size="sm"
 					hasIconOnly
 				/>
 			</div>
 		);
 		const bottomLabel = formatMessage(this.props.controller.getReactIntl(),	MESSAGE_KEYS.MOVEABLE_TABLE_BUTTON_DOWN_DESCRIPTION);
 		const downLabel = formatMessage(this.props.controller.getReactIntl(),	MESSAGE_KEYS.MOVEABLE_TABLE_BUTTON_BOTTOM_DESCRIPTION);
+		const ArrowDown24 = React.forwardRef((props, ref) => <ArrowDown ref={ref} size={24} {...props} />);
+		const DownToBottom24 = React.forwardRef((props, ref) => <DownToBottom ref={ref} size={24} {...props} />);
 		const bottomImages = (
 			<div key="bottomImages">
 				<Button
@@ -141,6 +147,7 @@ class MoveableTableRows extends React.Component {
 					renderIcon={ArrowDown24}
 					iconDescription={bottomLabel}
 					tooltipPosition="left"
+					size="sm"
 					hasIconOnly
 				/>
 				<Button
@@ -151,6 +158,7 @@ class MoveableTableRows extends React.Component {
 					renderIcon={DownToBottom24}
 					iconDescription={downLabel}
 					tooltipPosition="left"
+					size="sm"
 					hasIconOnly
 				/>
 			</div>

package/src/common-properties/components/moveable-table-rows/moveable-table-rows.scss

@@ -24,15 +24,12 @@
 	justify-content: center;
 }
 
-.table-row-move-button.bx--btn--ghost {
-	padding: 0;
-	min-height: 24px;
-	margin-bottom: 8px;
+.table-row-move-button.cds--btn--ghost {
+	width: calc(#{$spacing-05} + #{$spacing-01});
 
 	> svg {
-		height: 16px;
-		width: 16px;
-		margin-left: 0;
+		height: $spacing-05;
+		width: $spacing-05;
 	}
 }
 
@@ -46,7 +43,6 @@
 		.properties-mr-table-content {
 			width: 100%;
 			display: flex;
-			border-bottom: 0;
 			&.disabled {
 				pointer-events: none;
 				opacity: 0.5;

package/src/common-properties/components/properties-buttons/properties-buttons.jsx

@@ -17,7 +17,7 @@
 import React, { Component } from "react";
 import { injectIntl } from "react-intl";
 import PropTypes from "prop-types";
-import { Button } from "carbon-components-react";
+import { Button, ButtonSet } from "@carbon/react";
 import classNames from "classnames";
 import defaultMessages from "../../../../locales/common-properties/locales/en.json";
 
@@ -39,7 +39,7 @@ class PropertiesButtons extends Component {
 					data-id="properties-cancel-button"
 					className="properties-cancel-button"
 					type="button"
-					size="small"
+					size="xl"
 					kind="secondary"
 					onClick={this.props.cancelHandler}
 				>
@@ -54,7 +54,7 @@ class PropertiesButtons extends Component {
 					data-id="properties-apply-button"
 					className="properties-apply-button"
 					type="button"
-					size="small"
+					size="xl"
 					onClick={this.props.okHandler}
 					disabled={!this.props.applyButtonEnabled}
 				>
@@ -65,13 +65,12 @@ class PropertiesButtons extends Component {
 
 		const propertiesModalButtons = this.props.okHandler || this.props.cancelHandler
 			? (
-				<div
-					className={classNames("properties-modal-buttons", { "hide": (typeof (this.props.showPropertiesButtons) !== "undefined" &&
-						!this.props.showPropertiesButtons) })}
+				<ButtonSet className={classNames("properties-modal-buttons", { "hide": (typeof (this.props.showPropertiesButtons) !== "undefined" &&
+					!this.props.showPropertiesButtons) })}
 				>
 					{rejectButton}
 					{applyButton}
-				</div>
+				</ButtonSet>
 			)
 			: null;
 

package/src/common-properties/components/properties-buttons/properties-buttons.scss

@@ -15,13 +15,7 @@
  */
 
 .properties-modal-buttons {
-	justify-content: flex-end;
-	display: flex;
-	height: $spacing-10;
-	bottom: 0;
-	position: absolute;
 	width: 100%;
-	left: 0;
 	&.hide {
 		display: none;
 	}
@@ -29,6 +23,13 @@
 	.properties-apply-button, .properties-cancel-button {
 		width: 50%;
 		max-width: unset;
-		padding: 0 0 $spacing-05 $spacing-05;
+	}
+}
+
+.properties-tearsheet-panel, .properties-fp-table {
+	.properties-modal-buttons {
+		position: absolute;
+		bottom: 0;
+		left: 0;
 	}
 }

package/src/common-properties/components/properties-modal/properties-modal.jsx

@@ -16,7 +16,7 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Modal } from "carbon-components-react";
+import { Modal } from "@carbon/react";
 import classNames from "classnames";
 import { Portal } from "react-portal";
 import { Size } from "./../../constants/form-constants";

package/src/common-properties/components/properties-modal/properties-modal.scss

@@ -15,18 +15,18 @@
  */
 
 .properties-modal {
-	.bx--modal-close {
+	.cds--modal-close {
 		display: none;
 	}
-	.bx--modal-container {
+	.cds--modal-container {
 		padding: 0;
 	}
-	.bx--modal-content {
+	.cds--modal-content {
 		margin-bottom: $spacing-05;
 		padding: 0;
 	}
 	&.noButtons {
-		.bx--modal-footer {
+		.cds--modal-footer {
 			opacity: 0;
 			pointer-events: none;
 			display: none;

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

@@ -20,11 +20,11 @@ import { connect } from "react-redux";
 import { setTitle } from "./../../actions";
 import Isvg from "react-inlinesvg";
 import { get } from "lodash";
-import { TextInput, Button } from "carbon-components-react";
+import { TextInput, Button } from "@carbon/react";
 import { MESSAGE_KEYS, CONDITION_MESSAGE_TYPE } from "./../../constants/constants";
 import * as PropertyUtils from "./../../util/property-utils";
 import classNames from "classnames";
-import { Help16, Edit16, Close16 } from "@carbon/icons-react";
+import { Help, Edit, Close } from "@carbon/react/icons";
 
 
 class TitleEditor extends Component {
@@ -111,8 +111,8 @@ class TitleEditor extends Component {
 				onClick={this.editTitleClickHandler}
 				tooltipPosition="bottom"
 				tooltipAlignment="end"
-				renderIcon={Edit16}
-				size="small"
+				renderIcon={Edit}
+				size="sm"
 				iconDescription={propertiesTitleEditButtonLabel}
 				hasIconOnly
 			/>);
@@ -124,8 +124,8 @@ class TitleEditor extends Component {
 				data-id="help"
 				onClick={this.helpClickHandler}
 				tooltipPosition="bottom"
-				renderIcon={Help16}
-				size="small"
+				renderIcon={Help}
+				size="sm"
 				iconDescription={helpButtonLabel}
 				hasIconOnly
 			/>)
@@ -135,11 +135,11 @@ class TitleEditor extends Component {
 			? (<div className="properties-close-button">
 				<Button
 					kind="ghost"
-					size="small"
+					size="sm"
 					data-id="close"
 					onClick={this.props.closeHandler}
 					tooltipPosition="left"
-					renderIcon={Close16}
+					renderIcon={Close}
 					iconDescription={closeButtonLabel}
 					hasIconOnly
 				/>
@@ -186,7 +186,7 @@ class TitleEditor extends Component {
 						ref={this.textInputRef}
 						value={this.props.title}
 						onChange={this.handleTitleChange}
-						onKeyPress={(e) => this._handleKeyPress(e)}
+						onKeyDown={(e) => this._handleKeyPress(e)}
 						readOnly={this.props.labelEditable === false} // shows a non editable icon
 						labelText={this.labelText}
 						hideLabel

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

@@ -15,8 +15,9 @@
  */
 
 .properties-title-editor {
+	font-size: 0;
 	padding: $spacing-05 0;
-	border-bottom: 1px $ui-03 solid;
+	border-bottom: 1px $layer-accent-01 solid;
 }
 
 .properties-title-right-flyout-tabs-view {
@@ -34,7 +35,7 @@
 		margin-right: $spacing-03;
 	}
 	.properties-title-heading-label {
-		@include carbon--type-style("label-01");
+		@include type-style("label-01");
 	}
 	.properties-title-editor-btn.help {
 		&.help {
@@ -52,13 +53,13 @@
 	&.properties-title-editor-with-help {
 		width: calc(100% - #{$spacing-07} - #{$spacing-03}); // subtract the size of the help button and 8px to align with Close icon when applyOnBlur is set
 	}
-	.bx--form-item.bx--text-input-wrapper {
+	.cds--form-item.cds--text-input-wrapper {
 		// allow edit icon to be at the end of text input
 		width: 100%;
 
 		input { //override styling from carbon
-			@include carbon--type-style("productive-heading-02");
-			color: $text-01;
+			@include type-style("productive-heading-02");
+			color: $text-primary;
 			min-width: unset;
 			background: unset;
 			text-overflow: ellipsis;
@@ -68,17 +69,16 @@
 				cursor: default;
 			}
 		}
-		.bx--form-requirement {
+		.cds--form-requirement {
 			margin: $spacing-02 0 0 $spacing-05; // 4px top padding for error/warning message
 		}
-		.bx--text-input__field-wrapper--warning input {
-			border-bottom: 1px solid $ui-04;
+		.cds--text-input__field-wrapper--warning input {
+			border-bottom: 1px solid $border-strong-01;
 		}
 	}
 
 	// Edit button should be inside the title input box
 	.properties-title-editor-btn {
-		position: absolute;
 		right: $spacing-01;
 	}
 }

package/src/common-properties/components/truncated-content-tooltip/truncated-content-tooltip.jsx

@@ -18,7 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import { has } from "lodash";
-import { Checkbox } from "carbon-components-react";
+import { Checkbox } from "@carbon/react";
 
 // Reusable component to show tooltip if the content is truncated
 export default class TruncatedContentTooltip extends React.Component {

package/src/common-properties/components/validation-message/validation-message.scss

@@ -20,25 +20,25 @@
 	.icon {
 		margin: 0 $spacing-01;
 		.properties-validation-icon-warning {
-			fill: $support-03;
+			fill: $support-warning;
 			[data-icon-path="inner-path"] { // exclamation mark
-				fill: $ui-05;
+				fill: $layer-selected-inverse;
 				opacity: 1;
 			}
 		}
 		.properties-validation-icon-error {
-			fill: $support-01;
+			fill: $support-error;
 		}
 		.properties-validation-icon-info {
-			fill: $support-04;
+			fill: $support-info;
 		}
 		.properties-validation-icon-success {
-			fill: $support-02;
+			fill: $support-success;
 		}
 	}
 	span {
-		@include carbon--type-style("caption-01");
-		color: $text-01;
+		@include type-style("caption-01");
+		color: $text-primary;
 	}
 	&.error {
 		span {

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

@@ -16,8 +16,8 @@
 
 import { Column, Table, AutoSizer } from "react-virtualized";
 import Draggable from "react-draggable";
-import { Checkbox, Loading } from "carbon-components-react";
-import { ArrowUp16, ArrowDown16, ArrowsVertical16, Information16 } from "@carbon/icons-react";
+import { Checkbox, Loading } from "@carbon/react";
+import { ArrowUp, ArrowDown, ArrowsVertical, Information } from "@carbon/react/icons";
 import Tooltip from "./../../../tooltip/tooltip.jsx";
 import TruncatedContentTooltip from "./../truncated-content-tooltip";
 import { SORT_DIRECTION, STATES, ROW_SELECTION, MINIMUM_COLUMN_WIDTH, MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL } from "./../../constants/constants";
@@ -87,7 +87,7 @@ class VirtualizedTable extends React.Component {
 
 	// This is also triggered when clicking on a checkbox
 	onRowClick(evt, rowData, index) {
-		if (evt.target.className === "bx--select-option") {
+		if (evt.target.className === "cds--select-option") {
 			evt.stopPropagation(); // stop propagation when selecting dropdown select options within table rows
 		} else {
 			// Set selections
@@ -173,8 +173,8 @@ class VirtualizedTable extends React.Component {
 		return isLastColumn;
 	}
 
-	selectAll(selected) {
-		this.props.setAllRowsSelected(selected);
+	selectAll(evt, { checked, id }) {
+		this.props.setAllRowsSelected(checked);
 	}
 
 	// Callback responsible for rendering a cell's contents.
@@ -230,13 +230,13 @@ class VirtualizedTable extends React.Component {
 			let type = null;
 			switch (this.props.sortColumns[dataKey]) {
 			case SORT_DIRECTION.ASC:
-				type = <ArrowUp16 disabled={this.props.tableState === STATES.DISABLED} />;
+				type = <ArrowUp disabled={this.props.tableState === STATES.DISABLED} />;
 				break;
 			case SORT_DIRECTION.DESC:
-				type = <ArrowDown16 disabled={this.props.tableState === STATES.DISABLED} />;
+				type = <ArrowDown disabled={this.props.tableState === STATES.DISABLED} />;
 				break;
 			default:
-				type = <ArrowsVertical16 disabled={this.props.tableState === STATES.DISABLED} />;
+				type = <ArrowsVertical disabled={this.props.tableState === STATES.DISABLED} />;
 			}
 			sortIcon = (<span className="properties-ft-column-sort-icon">
 				{type}
@@ -253,7 +253,7 @@ class VirtualizedTable extends React.Component {
 					className="properties-tooltips"
 					showToolTipOnClick
 				>
-					<Information16 className="properties-vt-info-icon" />
+					<Information className="properties-vt-info-icon" />
 				</Tooltip>
 			</div>);