fix(edges): Fix colors for selected/hovered edges for light and dark …

…themes (#258)
patternfly · Dec 4, 2024 · c6dd2c4 · c6dd2c4
1 parent b88e9eb
commit c6dd2c4
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/packages/module/src/components/nodes/labels/LabelBadge.tsx b/packages/module/src/components/nodes/labels/LabelBadge.tsx
@@ -39,8 +39,10 @@ const LabelBadge = React.forwardRef<SVGRectElement, LabelBadgeProps>(
       height += paddingY * 2;
       rect = (
         <rect
-          fill={badgeColor || (badgeClassName ? undefined : defaultBadgeFill.value)}
-          stroke={badgeBorderColor || (badgeClassName ? undefined : defaultBadgeBorder.value)}
+          style={{
+            fill: badgeColor || (badgeClassName ? undefined : defaultBadgeFill.value),
+            stroke: badgeBorderColor || (badgeClassName ? undefined : defaultBadgeBorder.value)
+          }}
           ref={iconRef}
           x={0}
           width={width + paddingX * 2}
@@ -55,7 +57,7 @@ const LabelBadge = React.forwardRef<SVGRectElement, LabelBadgeProps>(
       <g className={classes} transform={`translate(${x}, ${y})`} ref={innerRef}>
         {rect}
         <text
-          fill={badgeTextColor || badgeClassName ? badgeTextColor : defaultBadgeTextColor.value}
+          style={{ fill: badgeTextColor || badgeClassName ? badgeTextColor : defaultBadgeTextColor.value }}
           ref={textRef}
           x={width / 2 + paddingX}
           y={height / 2}

diff --git a/packages/module/src/css/topology-components.css b/packages/module/src/css/topology-components.css
@@ -149,10 +149,12 @@
   /* edge */
   --pf-topology__edge--Stroke: #707070;
   --pf-topology__edge--StrokeWidth: var(--pf-t--global--border--width--regular);
-  --pf-topology__edge--HoverStroke: var(--pf-t--global--border--color--hover);
+  --pf-topology__edge--HoverStroke: var(--pf-topology__edge--Stroke);
   --pf-topology__edge--ActiveStroke: var(--pf-t--global--border--color--clicked);
   --pf-topology__edge--ActiveStrokeWidth: var(--pf-t--global--border--width--strong);
   --pf-topology__edge--InteractiveStroke: var(--pf-t--global--border--color--brand--default);
+  --pf-topology__edge--m-selected--background--Stroke: var(--pf-topology__edge--ActiveStroke);
+  --pf-topology__edge--m-selected--background--Opacity: 0.3;
 
   --pf-topology__edge--m-info--EdgeStroke: var(--pf-t--global--border--color--brand--default);
   --pf-topology__edge--m-success--EdgeStroke: var(--pf-t--global--border--color--status--success--default);
@@ -164,8 +166,7 @@
   --pf-topology__edge--m-warning--EdgeFill: var(--pf-t--global--border--color--status--warning--default);
   --pf-topology__edge--m-danger--EdgeFill: var(--pf-t--global--border--color--status--danger--default);
 
-  --pf-topology__edge--m-selected--background--Stroke: var(--pf-t--global--border--color--default);
-  --pf-topology__edge--m-hover--background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--default);
+  --pf-topology__edge--m-hover--background--Stroke: var(--pf-t--global--border--color--default);
 
   --pf-topology__edge__tag__text--Fill: var(--pf-t--global--text--color--inverse);
   --pf-topology__edge__tag__text--Stroke: var(--pf-t--global--text--color--inverse);
@@ -667,6 +668,7 @@
 }
 .pf-topology__edge.pf-m-selected .pf-topology__edge__background {
   stroke: var(--pf-topology__edge--m-selected--background--Stroke);
+  opacity: var(--pf-topology__edge--m-selected--background--Opacity);
 }
 .pf-topology__edge.pf-m-hover .pf-topology__edge__background {
   stroke: var(--pf-topology__edge--m-hover--background--Stroke);

diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx
@@ -22,7 +22,6 @@ const DefaultTaskGroupCollapsed: React.FunctionComponent<DefaultTaskGroupCollaps
   return (
     <TaskNode
       element={element}
-      {...rest}
       actionIcon={collapsible ? <ExpandIcon /> : undefined}
       onActionIconClick={() => onCollapseChange(element, false)}
       shadowCount={shadowCount}

diff --git a/packages/module/src/pipelines/components/nodes/TaskBadge.tsx b/packages/module/src/pipelines/components/nodes/TaskBadge.tsx
@@ -38,8 +38,10 @@ const TaskBadge = React.forwardRef<SVGRectElement, LabelBadgeProps>(
       height += paddingY * 2;
       rect = (
         <rect
-          fill={badgeColor || (badgeClassName ? undefined : defaultBadgeFill.value)}
-          stroke={badgeBorderColor || (badgeClassName ? undefined : defaultBadgeBorder.value)}
+          style={{
+            fill: badgeColor || (badgeClassName ? undefined : defaultBadgeFill.value),
+            stroke: badgeBorderColor || (badgeClassName ? undefined : defaultBadgeBorder.value)
+          }}
           ref={iconRef}
           x={0}
           width={width + paddingX * 2}
@@ -55,7 +57,9 @@ const TaskBadge = React.forwardRef<SVGRectElement, LabelBadgeProps>(
         {rect}
         {typeof badge === 'string' ? (
           <text
-            fill={badgeTextColor || badgeClassName ? undefined : defaultBadgeTextColor.value}
+            style={{
+              fill: badgeTextColor || badgeClassName ? undefined : defaultBadgeTextColor.value
+            }}
             ref={textRef}
             x={width / 2 + paddingX}
             y={height / 2}