@elyra/canvas 12.41.0 → 12.43.0

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

@@ -16,14 +16,10 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import PaletteDialogTopbarThreeWayIcon from "./palette-dialog-topbar-three-way-icon.jsx";
-import Close32Icon from "../../assets/images/palette/close_32.svg";
-import PaletteGridSelectedIcon from "../../assets/images/palette/palette_grid_selected.svg";
-import PaletteGridHoverIcon from "../../assets/images/palette/palette_grid_hover.svg";
-import PaletteGridDeSelectedIcon from "../../assets/images/palette/palette_grid_deselected.svg";
-import PaletteListSelectedIcon from "../../assets/images/palette/palette_list_selected.svg";
-import PaletteListHoverIcon from "../../assets/images/palette/palette_list_hover.svg";
-import PaletteListDeSelectedIcon from "../../assets/images/palette/palette_list_deselected.svg";
+
+import { CloseOutline16, Grid16, List16 } from "@carbon/icons-react";
+
+import Toolbar from "../toolbar";
 
 class PaletteDialogTopbar extends React.Component {
 	constructor(props) {
@@ -34,9 +30,7 @@ class PaletteDialogTopbar extends React.Component {
 
 		this.mouseDown = this.mouseDown.bind(this);
 		this.doubleClick = this.doubleClick.bind(this);
-		this.close = this.close.bind(this);
-		this.gridViewSelected = this.gridViewSelected.bind(this);
-		this.listViewSelected = this.listViewSelected.bind(this);
+		this.toolbarActionHandler = this.toolbarActionHandler.bind(this);
 	}
 
 	mouseDown(mouseDownEvent) {
@@ -47,40 +41,35 @@ class PaletteDialogTopbar extends React.Component {
 		this.props.windowMaximizeMethod(doubleClickEvent);
 	}
 
-	close(closeEvent) {
-		this.props.canvasController.closePalette(closeEvent);
-	}
+	toolbarActionHandler(action) {
+		if (action === "close") {
+			this.props.canvasController.closePalette();
 
-	gridViewSelected() {
-		this.props.showGridMethod(true);
-	}
+		} else if (action === "grid") {
+			this.props.showGridMethod(true);
 
-	listViewSelected() {
-		this.props.showGridMethod(false);
+		} else if (action === "list") {
+			this.props.showGridMethod(false);
+		}
 	}
 
 	render() {
+		const config = {
+			leftBar: [
+				{ action: "grid", iconEnabled: (<Grid16 />), enable: true, isSelected: this.props.showGrid },
+				{ action: "list", iconEnabled: (<List16 />), enable: true, isSelected: !this.props.showGrid },
+				{ divider: true }
+			],
+			rightBar: [
+				{ divider: true },
+				{ action: "close", iconEnabled: (<CloseOutline16 />), enable: true }
+			]
+		};
+
+
 		return (
 			<div className="palette-dialog-topbar" onMouseDown={this.mouseDown} onDoubleClick={this.doubleClick}>
-				<span className="left-navbar">
-					<PaletteDialogTopbarThreeWayIcon iconClickedMethod={this.gridViewSelected}
-						isSelected={this.props.showGrid}
-						selectedIconName={PaletteGridSelectedIcon}
-						hoverIconName={PaletteGridHoverIcon}
-						deselectedIconName={PaletteGridDeSelectedIcon}
-					/>
-					<PaletteDialogTopbarThreeWayIcon iconClickedMethod={this.listViewSelected}
-						isSelected={!this.props.showGrid}
-						selectedIconName={PaletteListSelectedIcon}
-						hoverIconName={PaletteListHoverIcon}
-						deselectedIconName={PaletteListDeSelectedIcon}
-					/>
-				</span>
-				<span className="right-navbar">
-					<a className="secondary-action" onClick={this.close}>
-						<img src={Close32Icon} draggable="false" className="close-icon" />
-					</a>
-				</span>
+				<Toolbar instanceId = {0} config={config} toolbarActionHandler={this.toolbarActionHandler} />
 			</div>
 		);
 	}

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

@@ -31,6 +31,8 @@ class PaletteFlyoutContentCategory extends React.Component {
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
 		this.categoryClicked = this.categoryClicked.bind(this);
+		this.categoryKeyPressed = this.categoryKeyPressed.bind(this);
+		this.setPaletteCategory = this.setPaletteCategory.bind(this);
 	}
 
 	onMouseOver(ev) {
@@ -93,12 +95,22 @@ class PaletteFlyoutContentCategory extends React.Component {
 		return content;
 	}
 
+	setPaletteCategory(isOpen) {
+		if (isOpen) {
+			this.props.canvasController.closePaletteCategory(this.props.category.id);
+		} else {
+			this.props.canvasController.openPaletteCategory(this.props.category.id);
+		}
+	}
+
 	// Returns the category object for a regular category.
 	getRenderCategory() {
 		const titleObj = this.getTitleObj();
 		const content = this.getContent();
 		return (
-			<AccordionItem title={titleObj} open={this.props.category.is_open}>
+			<AccordionItem title={titleObj} open={this.props.category.is_open}
+				onKeyDown={this.categoryKeyPressed}
+			>
 				{content}
 			</AccordionItem>
 		);
@@ -116,7 +128,7 @@ class PaletteFlyoutContentCategory extends React.Component {
 				onMouseOver={this.onMouseOver}
 				onMouseLeave={this.onMouseLeave}
 			>
-				<div className="palette-flyout-category-item">
+				<div className="palette-flyout-category-item" tabIndex={-1}>
 					{itemImage}
 					{itemText}
 				</div></div>
@@ -196,10 +208,17 @@ class PaletteFlyoutContentCategory extends React.Component {
 		// a category is opened.
 		evt.stopPropagation();
 
-		if (this.props.category.is_open) {
-			this.props.canvasController.closePaletteCategory(this.props.category.id);
-		} else {
-			this.props.canvasController.openPaletteCategory(this.props.category.id);
+		this.setPaletteCategory(this.props.category.is_open);
+	}
+
+	categoryKeyPressed(evt) {
+		if (evt.target.className === "bx--accordion__heading") {
+			if (evt.code === "Enter" || evt.code === "Space") {
+				evt.preventDefault();
+				evt.stopPropagation();
+
+				this.setPaletteCategory(this.props.category.is_open);
+			}
 		}
 	}
 

package/src/palette/palette.scss

@@ -99,11 +99,17 @@ $palette-search-container-height: 41px;
 		/* This stops it being dragged incorrectly.*/
 		user-select: none;
 		width: 100%;
+		outline: none; // Turn outline off and use carbon style for focus below.
 
 		&:hover {
 			background-color: $ui-03;
 		}
 
+		&:focus {
+			border-color: $interactive-03;
+			box-shadow: inset 0 0 0 2px $interactive-03;
+		}
+
 		.palette-list-item-category-label {
 			@include carbon--type-style("caption-01");
 			width: 100%;
@@ -414,47 +420,9 @@ $palette-search-container-height: 41px;
 }
 
 .palette-dialog-topbar {
-	height: 40px;
-	padding: 10px;
+	height: 41px;
 	background-color: $ui-03;
 	border-bottom: $palette-border-width solid $palette-border-color;
-
-	.left-navbar {
-		height: 20px;
-		float: left;
-		vertical-align: middle;
-		/* Prevent elements from being selectable */
-		/* This stops it being dragged incorrectly.*/
-		user-select: none;
-	}
-
-	.right-navbar {
-		height: 20px;
-		float: right;
-		vertical-align: middle;
-	}
-
-	.secondary-action {
-		margin-left: 10px;
-		display: inline-block;
-		cursor: pointer;
-		width: 20px;
-	}
-
-	.close-icon svg {
-		fill: $interactive-02;
-	}
-
-	.palette-three-way-icon-div {
-		margin-left: 5px;
-		display: inline-block;
-		cursor: pointer;
-		width: 20px;
-		height: 20px;
-		/* Prevent elements from being selectable */
-		/* This stops it being dragged incorrectly.*/
-		user-select: none;
-	}
 }
 
 .palette-dialog-content {
@@ -466,7 +434,7 @@ $palette-search-container-height: 41px;
 }
 
 .palette-dialog-categories {
-	background-color: $ui-03;
+	background-color: $ui-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;

package/src/toolbar/{toolbar-utils.js → index.js}

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 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,20 +14,5 @@
  * limitations under the License.
  */
 
-export const genElementByClass = (className, containingDiv) => {
-	const elements = containingDiv.getElementsByClassName(className);
-
-	if (elements && elements.length > 0) {
-		return elements[0];
-	}
-	return null;
-};
-
-export const genRectByClass = (className, containingDiv) => {
-	const element = genElementByClass(className, containingDiv);
-
-	if (element) {
-		return element.getBoundingClientRect();
-	}
-	return null;
-};
+import Toolbar from "./toolbar.jsx";
+export default Toolbar;