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.
KaotoIO · Nov 18, 2024 · 0997110 · 0997110
1 parent 9ee3368
commit 0997110
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}