@elyra/canvas 12.31.1 → 12.32.0

package/src/toolbar/toolbar.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26,20 +26,15 @@ class Toolbar extends React.Component {
 	constructor(props) {
 		super(props);
 
-		this.state = {
-			showExtendedMenuIndex: -1,
-			subAreaDisplayedForAction: ""
-		};
-
 		this.leftBar = [];
 		this.rightBar = [];
 
+		this.resizeHandler = null;
 		this.onFocus = this.onFocus.bind(this);
 		this.onToolbarResize = this.onToolbarResize.bind(this);
-		this.toggleExtendedMenu = this.toggleExtendedMenu.bind(this);
 		this.generateExtensionMenuItems = this.generateExtensionMenuItems.bind(this);
 		this.generateToolbarItems = this.generateToolbarItems.bind(this);
-		this.subMenuActionHandler = this.subMenuActionHandler.bind(this);
+		this.setResizeHandler = this.setResizeHandler.bind(this);
 	}
 
 	// When the toolbar is initially opened the tabindex for each element may not
@@ -64,14 +59,21 @@ class Toolbar extends React.Component {
 	// Close the overflow menu, if it is open, when the toolbar is resized in
 	// case a new menu needs to be displayed with the new toolbar width.
 	onToolbarResize() {
-		if (this.state.showExtendedMenuIndex > -1) {
-			this.setState({ showExtendedMenuIndex: -1 });
+		if (this.resizeHandler) {
+			this.resizeHandler();
 		}
 
 		this.setLeftBarItemsTabIndex();
 		this.setRightBarItemsTabIndex();
 	}
 
+	// Allows the overflow item or action item to set a function that will be
+	// called when the toolbar is resized. This function causes the menu that
+	// is currently open to be closed.
+	setResizeHandler(resizeHandler) {
+		this.resizeHandler = resizeHandler;
+	}
+
 	// Sets the tabindex on all left bar items so tabbing works correctly. This
 	// falls into two parts: 1. Set the tabindex for all overflow items to -1
 	// except the overflow item that is displayed (if there is one). 2. Set the
@@ -176,10 +178,6 @@ class Toolbar extends React.Component {
 		}
 	}
 
-	subMenuActionHandler(action) {
-		this.setState({ subAreaDisplayedForAction: action });
-	}
-
 	generateToolbarItems(actionDefinitions, overflow, withSpacer) {
 		const newItems = [];
 
@@ -206,18 +204,17 @@ class Toolbar extends React.Component {
 					/>
 				);
 			} else {
-				const displaySubArea = overflow && this.state.subAreaDisplayedForAction === actionObj.action;
 				jsx = (
 					<ToolbarActionItem
 						key={"toolbar-item-key-" + i}
 						actionObj={actionObj}
 						tooltipDirection={this.props.tooltipDirection}
 						toolbarActionHandler={this.props.toolbarActionHandler}
-						subMenuActionHandler={this.subMenuActionHandler}
 						generateToolbarItems={this.generateToolbarItems}
-						displaySubArea={displaySubArea}
+						setResizeHandler={this.setResizeHandler}
 						overflow={overflow}
 						instanceId={this.props.instanceId}
+						containingDivId={this.props.containingDivId}
 						onFocus={this.onFocus}
 						size={this.props.size}
 					/>
@@ -233,9 +230,9 @@ class Toolbar extends React.Component {
 			<ToolbarOverflowItem
 				key={"toolbar-overflow-item-key-" + index}
 				index={index}
-				showExtendedMenu={this.state.showExtendedMenuIndex === index}
-				toggleExtendedMenu={this.toggleExtendedMenu}
 				generateExtensionMenuItems={this.generateExtensionMenuItems}
+				setResizeHandler={this.setResizeHandler}
+				containingDivId={this.props.containingDivId}
 				onFocus={this.onFocus}
 				label={label}
 				size={this.props.size}
@@ -280,11 +277,6 @@ class Toolbar extends React.Component {
 		return newDefItems;
 	}
 
-	toggleExtendedMenu(index) {
-		const newIndex = index === this.state.showExtendedMenuIndex ? -1 : index;
-		this.setState({ showExtendedMenuIndex: newIndex });
-	}
-
 	render() {
 		this.leftBar = this.props.config.leftBar || [];
 		this.rightBar = this.props.config.rightBar || [];
@@ -312,7 +304,8 @@ class Toolbar extends React.Component {
 
 Toolbar.propTypes = {
 	config: PropTypes.object.isRequired,
-	instanceId: PropTypes.number,
+	instanceId: PropTypes.number.isRequired,
+	containingDivId: PropTypes.string,
 	toolbarActionHandler: PropTypes.func,
 	tooltipDirection: PropTypes.string,
 	additionalText: PropTypes.object,

package/src/toolbar/toolbar.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -37,26 +37,47 @@ $toolbar-divider-width: 1px;
 	/* Prevent elements from being dragged onto canvas */
 	-webkit-user-drag: none;
 
-	/* Small size toolbar used by common-properties */
+	/* Small size toolbar  */
 	&.toolbar-size-small {
 		height: $toolbar-button-sm-height;
+
 		.toolbar-left-bar {
 			padding: 0;
 		}
+
 		.toolbar-item button,
 		.toolbar-overflow-item > button {
 			padding: 0;
 			height: $toolbar-button-sm-height;
 		}
+
+		.toolbar-overflow-menu-item {
+			height: fit-content;
+		}
+
 		.toolbar-item-content {
 			padding: $spacing-02 $spacing-03;
 			height: $toolbar-button-sm-height;
 			align-items: center;
 			min-width: 32px;
 		}
+
 		.toolbar-popover-list button {
 			padding: 0;
 		}
+
+		.toolbar-popover-list {
+			top: calc(#{$toolbar-button-sm-height} + #{$toolbar-divider-width} - 1px);
+		}
+
+		.toolbar-jsx-item {
+			height: $toolbar-button-sm-height;
+		}
+
+		.toolbar-tick-svg {
+			height: $toolbar-button-sm-height;
+			width: $toolbar-button-sm-height;
+		}
 	}
 }
 
@@ -83,7 +104,6 @@ $toolbar-divider-width: 1px;
 
 	& button {
 		padding: 0;
-		height: $toolbar-button-height;
 		min-height: 30px;
 	}
 
@@ -152,12 +172,12 @@ $toolbar-divider-width: 1px;
 }
 
 .toolbar-overflow-menu-item {
-	height: $toolbar-button-sm-height;
-
 	& button {
 		width: 100%;
-		padding-top: 2px;
-		padding-bottom: 2px;
+		padding-top: 0;
+		padding-bottom: 0;
+		padding-left: 16px;
+		padding-right: 16px;
 		min-height: 20px;
 	}
 }
@@ -219,10 +239,24 @@ $toolbar-divider-width: 1px;
 	}
 }
 
-.toolbar-size-small {
-	.toolbar-jsx-item {
-		height: $toolbar-button-sm-height;
-	}
+.toolbar-up-down-chevron {
+	padding-left: 8px;
+	height: 16px;
+	pointer-events: none;
+}
+
+// Triangular tick mark in bottom right corner of an expandable icon
+.toolbar-tick-svg {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	height: $toolbar-button-height;
+	width: $toolbar-button-height;
+	pointer-events: none;
+}
+
+.toolbar-tick-mark {
+	fill: $interactive-02;
 }
 
 .toolbar-jsx-item {
@@ -270,12 +304,6 @@ $toolbar-divider-width: 1px;
 	border-bottom: $toolbar-divider-width solid $ui-03;
 }
 
-.toolbar-size-small {
-	.toolbar-popover-list {
-		top: calc(#{$toolbar-button-sm-height} + #{$toolbar-divider-width});
-	}
-}
-
 .toolbar-popover-list {
 	width: 200px;
 	z-index: 1;
@@ -287,17 +315,15 @@ $toolbar-divider-width: 1px;
 	border: $toolbar-divider-width solid $ui-03;
 	background-color: $ui-01;
 
-	& .submenu {
-		position: relative;
-		left: 198px; // 200px minus 2px so no gap is left between menu and submenu
-		top: -34px; // 32px minus 2px
+	&.submenu {
+		// Position will be calculated in the code
+		position: fixed;
+		min-width: 100px;
 	}
 
-	& .subpanel {
-		position: relative;
-		left: 198px; // 200px minus 2px so no gap is left between menu and submenu
-		top: -34px; // 32px minus 2px
+	&.subpanel {
+		// Position will be calculated in the code
+		position: fixed;
 		width: fit-content;
 	}
-
 }

package/src/tooltip/tooltip.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/tooltip/tooltip.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.