From 0997110f78a5a22dca3cbe2960cb16080cc9e056 Mon Sep 17 00:00:00 2001
From: "Ricardo M." <lordrip@gmail.com>
Date: Mon, 18 Nov 2024 11:29:22 +0100
Subject: [PATCH] feat(Canvas): Use hover styles upon open toolbar

Currently, when opening the step toolbar upon hovering a node or a
group, the hover style is lost when hovering over the toolbar.

This commit retains the hover styling when the toolbar is open.
---
 .../Visualization/Custom/Group/CustomGroupExpanded.scss          | 1 +
 .../Visualization/Custom/Group/CustomGroupExpanded.tsx           | 1 +
 .../ui/src/components/Visualization/Custom/Node/CustomNode.scss  | 1 +
 .../ui/src/components/Visualization/Custom/Node/CustomNode.tsx   | 1 +
 4 files changed, 4 insertions(+)

diff --git a/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.scss b/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.scss
index 158d075b9..08f40ff69 100644
--- a/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.scss
+++ b/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.scss
@@ -41,6 +41,7 @@
       }
 
       &:hover,
+      [data-toolbar-open='true'] &,
       [data-selected='true'] & {
         border-color: var(--custom-node-hover-BorderColor);
         box-shadow: var(--custom-node-Shadow);
diff --git a/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx b/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx
index 292a6d9df..e46b07c2d 100644
--- a/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx
+++ b/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx
@@ -64,6 +64,7 @@ export const CustomGroupExpanded: FunctionComponent<CustomGroupProps> = observer
           data-grouplabel={label}
           data-selected={isSelected}
           data-disabled={isDisabled}
+          data-toolbar-open={shouldShowToolbar}
           onClick={onSelect}
           onContextMenu={onContextMenu}
         >
diff --git a/packages/ui/src/components/Visualization/Custom/Node/CustomNode.scss b/packages/ui/src/components/Visualization/Custom/Node/CustomNode.scss
index d86f67ed1..6eff7cbd8 100644
--- a/packages/ui/src/components/Visualization/Custom/Node/CustomNode.scss
+++ b/packages/ui/src/components/Visualization/Custom/Node/CustomNode.scss
@@ -28,6 +28,7 @@
       }
 
       &:hover &__image,
+      [data-toolbar-open='true'] & &__image,
       [data-selected='true'] & &__image {
         border-color: var(--custom-node-hover-BorderColor);
         box-shadow: var(--custom-node-Shadow);
diff --git a/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx b/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx
index 31fdf0f25..827c213bc 100644
--- a/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx
+++ b/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx
@@ -79,6 +79,7 @@ const CustomNode: FunctionComponent<CustomNodeProps> = observer(({ element, onCo
         data-nodelabel={label}
         data-selected={isSelected}
         data-disabled={isDisabled}
+        data-toolbar-open={shouldShowToolbar}
         data-warning={doesHaveWarnings}
         onClick={onSelect}
         onContextMenu={onContextMenu}