@elyra/canvas 12.12.3 → 12.15.0

package/src/palette/palette.scss

@@ -16,6 +16,7 @@
 
 $palette-border-width: 1px;
 $palette-border-color: $ui-03;
+$palette-search-container-height: 41px;
 
 //--------------------------------------------------------
 // Classes used by Flyout palette
@@ -53,14 +54,12 @@ $palette-border-color: $ui-03;
 }
 
 .palette-flyout-content {
-	height: 41px;
-
 	.palette-scroll {
 		overflow-y: hidden; /*prevents multiple scroll bars in flyout*/
 	}
 
 	.palette-content-list {
-		border-bottom: $palette-border-width solid $palette-border-color;
+		border-bottom: 0;
 	}
 
 	.palette-no-results-title {
@@ -95,9 +94,11 @@ $palette-border-color: $ui-03;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
+		padding: 9px 10px;
 		/* Prevent elements from being selectable */
 		/* This stops it being dragged incorrectly.*/
 		user-select: none;
+		width: 100%;
 
 		&:hover {
 			background-color: $ui-03;
@@ -119,13 +120,13 @@ $palette-border-color: $ui-03;
 			display: flex;
 			flex-direction: row;
 			width: 100%;
-			min-height: 46px;
 			align-items: center;
+			height: 100%;
+			margin-left: 20px;
 		}
 
 		.palette-list-item-icon {
 			width: 28px; /* Not specifying height preserves the image's aspect ratio. */
-			margin-left: 20px;
 			color: $text-02;
 		}
 
@@ -134,7 +135,7 @@ $palette-border-color: $ui-03;
 			font-weight: 400;
 			padding: 0 10px;
 			width: calc(100% - 68px);
-
+			line-height: 1;
 			& mark {
 				color: $interactive-01;
 				background-color: $highlight;
@@ -168,57 +169,88 @@ $palette-border-color: $ui-03;
 			min-height: 46px;
 			height: fit-content;
 			padding-bottom: $spacing-05;
+			padding-top: 0px;
+			padding-left: 0px;
 			border-bottom: $palette-border-width solid $palette-border-color;
-
+			padding-right: 6px;
 			.palette-list-item-icon-and-text {
 				min-height: 30px;
+				padding-left: 10px;
 			}
 		}
 	}
+}
 
+.palette-flyout-categories {
+	height: calc(100% - $palette-search-container-height);
+	width: 100%;
+	position: absolute;
+	overflow-x: hidden;
+	overflow-y: overlay;
+	li .bx--accordion__arrow {
+		margin-top: 15px;
+	}
+	.bx--accordion__item--active {
+		button {
+			border-bottom: $palette-border-width solid $palette-border-color;
+		}
+	}
+	.bx--accordion__item {
+		border-top: 0;
+
+		.bx--accordion__heading {
+			padding: 0;
+			.bx--accordion__title {
+				margin: 0;
+				padding: 0 0 0 11px;
+				height: 45px;
+			}
+		}
+	}
+	li .bx--accordion__content {
+		padding: 0;
+	}
 }
 
 .palette-flyout-category {
 	cursor: pointer;
 	border-width: 0 0 0 $palette-border-width;
-	height: fit-content;
-	min-height: 46px;
+	height: 100%;
 	align-items: center;
 	justify-content: space-between;
 	display: flex;
-	border-bottom: $palette-border-width solid $palette-border-color;
-}
-
-.palette-flyout-category-caret {
-	height: 16px;
-	width: 16px;
-	position: relative;
-	right: 16px;
-	background-color: $ui-01;
-	fill: $icon-01;
-}
-
-.palette-flyout-category-caret-closed {
+	// Absolute position is needed to get the category tooltip to display correctly.
+	position: absolute;
 	top: 0;
-	right: 16px;
+	left: 0;
+	right: 0;
+	bottom: 0;
 }
 
 .palette-flyout-category-item {
 	display: flex;
 	align-items: center;
+	min-height: 44px;
+	padding-left: 11px;
 	/* Prevent elements from being selectable */
 	/* This stops it being dragged incorrectly.*/
 	user-select: none;
 }
 
 .palette-flyout-category-item-loading {
+	display: flex;
 	margin-left: 16px;
+	width: 100%;
+	height: 100%;
+	justify-content: center;
+	max-height: 60px;
 }
 
 .palette-flyout-category-item-icon {
 	width: 20px;  /* Not specifying height preserves the image's aspect ratio. */
-	margin-left: 16px;
+	margin-left: 5px;
 	fill: $icon-01;
+	padding-top: 4px;
 }
 
 .palette-flyout-text-container {
@@ -232,14 +264,16 @@ $palette-border-color: $ui-03;
 .palette-flyout-category-text {
 	width: 165px;
 	overflow-wrap: break-word;
-	line-height: 1.3;
-	margin-left: 16px;
+	line-height: 1.2;
+	padding-left: 16px;
+	align-items: center;
+	height: 100%;
+	max-height: 59px;
 }
 
 .palette-flyout-category-text-abbr {
 	line-height: 46px;  /* Must be same as containing div height */
-	margin-left: 16px;
-	width: 35px;
+	margin-left: 0;
 }
 
 .palette-flyout-category-text-no-image {
@@ -253,16 +287,11 @@ $palette-border-color: $ui-03;
 	padding-left: 5px;
 }
 
-.palette-flyout-category:hover {
-	font-weight: 600;
-}
-
 .palette-flyout-search-container {
-	height: 100%;
+	height: $palette-search-container-height;
 	.palette-flyout-search {
 		height: 100%;
 		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 {
@@ -300,12 +329,8 @@ $palette-border-color: $ui-03;
 	}
 }
 
-.palette-flyout-categories {
-	height: calc(100% - 48px);
-	width: 100%;
-	position: absolute;
-	overflow-x: hidden;
-	overflow-y: overlay;
+.palette-loading-category .bx--accordion__arrow {
+	display: none;
 }
 
 //--------------------------------------------------------
@@ -326,7 +351,7 @@ $palette-border-color: $ui-03;
 	/* Prevent elements from being selectable */
 	/* This stops it being dragged incorrectly.*/
 	user-select: none;
-
+	display: block;
 
 	.palette-list-item {
 		height: 46px;
@@ -339,6 +364,7 @@ $palette-border-color: $ui-03;
 		/* Prevent elements from being selectable */
 		/* This stops it being dragged incorrectly.*/
 		user-select: none;
+		padding-left: 19px;
 
 		&:hover {
 			background-color: $ui-03;
@@ -354,13 +380,15 @@ $palette-border-color: $ui-03;
 
 		.palette-list-item-icon {
 			width: 28px; /* Not specifying height preserves the image's aspect ratio. */
-			margin-left: 20px;
 			line-height: 46px;  /* Must be same as containing div height */
 			color: $text-02;
+			margin-left: 0;
+			margin-right: 10px;
 		}
 
 		.palette-list-item-text-div {
-			margin-left: 10px;
+			width: 100%;
+			display: block;
 		}
 
 		.palette-list-item-text-span {
@@ -515,7 +543,7 @@ $palette-border-color: $ui-03;
 }
 
 //--------------------------------------------------------
-// Common calsses used by Flyout and Dialog palette
+// Common classes used by Flyout and Dialog palette
 //--------------------------------------------------------
 .palette-scroll {
 	overflow-y: auto;

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

@@ -138,8 +138,8 @@ class ToolbarActionItem extends React.Component {
 		return null;
 	}
 
-	actionClickHandler() {
-		this.props.toolbarActionHandler(this.props.actionObj.action);
+	actionClickHandler(evt) {
+		this.props.toolbarActionHandler(this.props.actionObj.action, evt);
 	}
 
 	generateButton(actionObj) {
@@ -199,12 +199,13 @@ class ToolbarActionItem extends React.Component {
 	wrapInTooltip(content) {
 		if (!this.props.overflow && (this.showLabelAsTip(this.props.actionObj) || this.props.actionObj.tooltip)) {
 			const actionName = this.generateActionName();
-			const tipText = this.props.actionObj.tooltip ? this.props.actionObj.tooltip : this.props.actionObj.label;
+			const tip = this.props.actionObj.tooltip ? this.props.actionObj.tooltip : this.props.actionObj.label;
 			const tooltipId = actionName + "-" + this.props.instanceId + "-tooltip";
-			const enableTooltip = this.props.actionObj.enable ? this.props.actionObj.enable : false;
+			const enableTooltip = this.props.actionObj.enable || this.props.actionObj.jsx; // JSX 'tools' don't have enable attr so always display a tooltip for them.
+			const direction = this.props.tooltipDirection ? this.props.tooltipDirection : "bottom";
 
 			return (
-				<Tooltip id={tooltipId} tip={tipText} disable={!enableTooltip} className="icon-tooltip" >
+				<Tooltip id={tooltipId} tip={tip} disable={!enableTooltip} className="icon-tooltip" direction={direction}>
 					{content}
 				</Tooltip>
 			);
@@ -282,9 +283,11 @@ ToolbarActionItem.propTypes = {
 		jsx: PropTypes.object,
 		tooltip: PropTypes.oneOfType([
 			PropTypes.string,
-			PropTypes.object
+			PropTypes.object,
+			PropTypes.func
 		])
 	}),
+	tooltipDirection: PropTypes.oneOf(["top", "bottom"]),
 	toolbarActionHandler: PropTypes.func.isRequired,
 	instanceId: PropTypes.number.isRequired,
 	overflow: PropTypes.bool,

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

@@ -49,6 +49,7 @@ class ToolbarOverflowItem extends React.Component {
 			<div className={className} >
 				<div className={"toolbar-overflow-item"}>
 					<Button kind="ghost"
+						tabIndex={-1}
 						onClick={this.toggleExtendedMenu}
 						onFocus={this.props.onFocus}
 						aria-label={this.props.label}

package/src/toolbar/toolbar.jsx

@@ -15,9 +15,7 @@
  */
 
 import React from "react";
-import { injectIntl } from "react-intl";
 import PropTypes from "prop-types";
-import defaultMessages from "../../locales/toolbar/locales/en.json";
 import ReactResizeDetector from "react-resize-detector";
 
 import ToolbarActionItem from "./toolbar-action-item.jsx";
@@ -205,6 +203,7 @@ class Toolbar extends React.Component {
 					<ToolbarActionItem
 						key={"toolbar-item-key-" + i}
 						actionObj={actionObj}
+						tooltipDirection={this.props.tooltipDirection}
 						toolbarActionHandler={this.props.toolbarActionHandler}
 						overflow={overflow}
 						instanceId={this.props.instanceId}
@@ -282,29 +281,27 @@ class Toolbar extends React.Component {
 		const rightItems = this.generateToolbarItems(this.rightBar, false, false);
 
 		const canvasToolbar = (
-			<section aria-label={this.props.intl.formatMessage({ id: "toolbar.label", defaultMessage: defaultMessages["toolbar.label"] })} role="toolbar">
-				<ReactResizeDetector handleWidth onResize={this.onToolbarResize}>
-					<div className="toolbar-div" instanceid={this.props.instanceId}>
-						<div className="toolbar-left-bar" onScroll={this.onScroll}>
-							{leftItems}
-						</div>
-						<div className="toolbar-right-bar">
-							{rightItems}
-						</div>
+			<ReactResizeDetector handleWidth onResize={this.onToolbarResize}>
+				<div className="toolbar-div" instanceid={this.props.instanceId}>
+					<div className="toolbar-left-bar" onScroll={this.onScroll}>
+						{leftItems}
 					</div>
-				</ReactResizeDetector>
-			</section>
+					<div className="toolbar-right-bar">
+						{rightItems}
+					</div>
+				</div>
+			</ReactResizeDetector>
 		);
 		return canvasToolbar;
 	}
 }
 
 Toolbar.propTypes = {
-	intl: PropTypes.object.isRequired,
 	config: PropTypes.object.isRequired,
 	instanceId: PropTypes.number,
 	toolbarActionHandler: PropTypes.func,
+	tooltipDirection: PropTypes.string,
 	additionalText: PropTypes.object
 };
 
-export default injectIntl(Toolbar);
+export default Toolbar;

package/src/tooltip/tooltip.jsx

@@ -177,7 +177,7 @@ class ToolTip extends React.Component {
 				}
 			} else if (tooltipDirection === "left") {
 				// For long tooltips, tooltip.offsetWidth is updated after setting tooltip.style.left. Ensure tooltip doesn't overlap tooltipTrigger element.
-				while ((tooltip.offsetLeft + tooltip.offsetWidth + pointerLayout.width) > triggerLayout.left) {
+				while ((tooltip.offsetLeft + tooltip.offsetWidth + pointerLayout.width) > Math.round(triggerLayout.left)) {
 					tooltip.style.left = this.getStyleValue(triggerLayout.left - tooltip.offsetWidth - pointerLayout.width);
 				}
 			} else if (tooltipDirection === "right") {
@@ -378,6 +378,8 @@ class ToolTip extends React.Component {
 					{this.props.tip}
 				</div>
 			);
+		} else if ((typeof this.props.tip) === "function") {
+			tooltipContent = this.props.tip();
 		}
 
 		let tipClass = "common-canvas-tooltip";
@@ -400,9 +402,9 @@ class ToolTip extends React.Component {
 			}
 		}
 
-		return (
-			<div className="tooltip-container">
-				{triggerContent}
+		let tooltip = null;
+		if (tooltipContent || link) {
+			tooltip = (
 				<Portal>
 					<div data-id={this.props.id} className={tipClass} aria-hidden={!this.state.isTooltipVisible} direction={this.props.direction}>
 						<svg id="tipArrow" x="0px" y="0px" viewBox="0 0 9.1 16.1">
@@ -413,13 +415,20 @@ class ToolTip extends React.Component {
 						{link}
 					</div>
 				</Portal>
+			);
+		}
+
+		return (
+			<div className="tooltip-container">
+				{triggerContent}
+				{tooltip}
 			</div>
 		);
 	}
 }
 
 ToolTip.propTypes = {
-	tip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+	tip: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
 	link: PropTypes.object,
 	tooltipLinkHandler: PropTypes.func,
 	direction: PropTypes.oneOf(["left", "right", "top", "bottom"]),