PR feedback from Jeff, apply pill styling to collapsed group

patternfly · Mar 18, 2024 · 6a9f246 · 6a9f246
1 parent afff590
commit 6a9f246
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 33 deletions.
diff --git a/packages/module/src/components/nodes/labels/LabelActionIcon.tsx b/packages/module/src/components/nodes/labels/LabelActionIcon.tsx
@@ -2,13 +2,10 @@ import * as React from 'react';
 import { useSize } from '../../../utils';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-components';
-import pipelineStyles from '../../../css/topology-pipelines';
 
 interface LabelActionIconProps {
   className?: string;
   icon: React.ReactElement;
-  isIconExternal?: boolean;
-  hover?: boolean;
   onClick: (e: React.MouseEvent) => void;
   iconOffsetX?: number;
   iconOffsetY?: number;
@@ -20,15 +17,12 @@ interface LabelActionIconProps {
 }
 
 const LabelActionIcon = React.forwardRef<SVGRectElement, LabelActionIconProps>(
-  ({ icon, isIconExternal, onClick, className, x, y, paddingX, height, iconOffsetX = 0, iconOffsetY = 0 }, actionRef) => {
+  ({ icon, onClick, className, x, y, paddingX, height, iconOffsetX = 0, iconOffsetY = 0 }, actionRef) => {
     const [iconSize, iconRef] = useSize([icon, paddingX]);
     const iconWidth = iconSize?.width ?? 0;
-    const iconHeight = iconSize?.height ?? 0; 
+    const iconHeight = iconSize?.height ?? 0;
     const iconY = (height - iconHeight) / 2;
 
-    const centerX = x + height / 2 - iconWidth / 2;
-    const centerY = y + height / 2 - iconHeight / 2;
-
     const classes = css(styles.topologyNodeActionIcon, className);
 
     const handleClick = (e: React.MouseEvent) => {
@@ -43,16 +37,16 @@ const LabelActionIcon = React.forwardRef<SVGRectElement, LabelActionIconProps>(
         {iconSize && (
           <rect
             ref={actionRef}
-            className={isIconExternal ? css(pipelineStyles.topologyPipelinesNodeActionIconBackground) : css(styles.topologyNodeActionIconBackground)}
+            className={css(styles.topologyNodeActionIconBackground)}
             x={x}
             y={y}
-            width={isIconExternal ? height :iconWidth + paddingX * 2}
+            width={iconWidth + paddingX * 2}
             height={height}
           />
         )}
         <g
-          className={isIconExternal ? css(pipelineStyles.topologyPipelinesNodeActionIconIcon) : css(styles.topologyNodeActionIconIcon)}
-          transform={isIconExternal ? `translate(${centerX}, ${centerY})` : `translate(${x + paddingX + iconOffsetX}, ${y + iconY + iconOffsetY})`}
+          className={css(styles.topologyNodeActionIconIcon)}
+          transform={`translate(${x + paddingX + iconOffsetX}, ${y + iconY + iconOffsetY})`}
           ref={iconRef}
         >
           {icon}

diff --git a/packages/module/src/components/nodes/labels/PipelinesNodeLabel.tsx b/packages/module/src/components/nodes/labels/PipelinesNodeLabel.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-// import styles from '../../../css/topology-components';
+import styles from '../../../css/topology-components';
 import pipelineStyles from '../../../css/topology-pipelines';
 import { truncateMiddle } from '../../../utils/truncate-middle';
 import { createSvgIdUrl, useCombineRefs, useHover, useSize } from '../../../utils';
@@ -30,7 +30,6 @@ type PipelinesNodeLabelProps = {
   dragging?: boolean;
   edgeDragging?: boolean;
   dropTarget?: boolean;
-  isExpanded?: boolean;
   actionIcon?: React.ReactElement;
   actionIconClassName?: string;
   onActionIconClick?: (e: React.MouseEvent) => void;
@@ -64,14 +63,14 @@ const PipelinesNodeLabel: React.FunctionComponent<PipelinesNodeLabelProps> = ({
   labelIconClass,
   labelIcon,
   labelIconPadding = 4,
-  isExpanded = false,
   truncateLength,
   dragRef,
   hover,
   dragging,
   edgeDragging,
   dropTarget,
   actionIcon,
+  actionIconClassName,
   onActionIconClick,
   ...other
 }) => {
@@ -92,6 +91,7 @@ const PipelinesNodeLabel: React.FunctionComponent<PipelinesNodeLabelProps> = ({
     badgeStartY,
     actionStartX,
     iconSpace,
+    badgeSpace
   } = React.useMemo(() => {
     if (!textSize) {
       return {
@@ -112,7 +112,7 @@ const PipelinesNodeLabel: React.FunctionComponent<PipelinesNodeLabelProps> = ({
     const height = Math.max(textSize.height, badgeSize?.height ?? 0) + paddingY * 2;
     const iconSpace = labelIconClass || labelIcon ? (height + paddingY * 0.5) / 2 : 0;
     const actionSpace = actionIcon && actionSize ? actionSize.width : 0;
-    const primaryWidth = iconSpace + badgeSpace + paddingX + textSize.width + paddingX;
+    const primaryWidth = iconSpace + badgeSpace + paddingX + textSize.width + actionSpace + paddingX;
     const width = primaryWidth;
 
     let startX: number;
@@ -124,7 +124,7 @@ const PipelinesNodeLabel: React.FunctionComponent<PipelinesNodeLabelProps> = ({
       startX = x + iconSpace;
       startY = y - height / 2;
     } else if (position === LabelPosition.left) {
-      startX = -width - paddingX;
+      startX = - width - paddingX;
       startY = y - height / 2 + paddingY;
     } else {
       startX = x - width / 2 + iconSpace / 2;
@@ -140,7 +140,7 @@ const PipelinesNodeLabel: React.FunctionComponent<PipelinesNodeLabelProps> = ({
         badgeStartX = (width - badgeSize.width) / 2;
         badgeStartY = height + paddingY;
       } else {
-        badgeStartX = iconSpace + textSize.width + paddingX * 2;
+        badgeStartX = iconSpace + paddingX;
         badgeStartY = (height - badgeSize.height) / 2;
       }
     }
@@ -220,22 +220,31 @@ const PipelinesNodeLabel: React.FunctionComponent<PipelinesNodeLabelProps> = ({
           padding={labelIconPadding}
         />
       )}
-      <text {...other} ref={textRef} x={iconSpace + paddingX} y={height / 2} dy="0.35em">
+      <text {...other} ref={textRef} x={iconSpace + badgeSpace + paddingX} y={height / 2} dy="0.35em">
         {truncateLength > 0 && !labelHover ? truncateMiddle(children, { length: truncateLength }) : children}
       </text>
       {textSize && actionIcon && (
-        <LabelActionIcon
-          ref={actionRef}
-          x={actionStartX + paddingX}
-          y={0}
-          height={height}
-          paddingX={paddingX}
-          paddingY={paddingY}
-          icon={actionIcon}
-          isIconExternal
-          className={isExpanded ? 'action-icon-expanded' : 'action-icon-collapsed'}
-          onClick={onActionIconClick}
-        />
+        <>
+          <line
+            className={css(styles.topologyNodeSeparator)}
+            x1={actionStartX}
+            y1={0}
+            x2={actionStartX}
+            y2={height}
+            shapeRendering="crispEdges"
+          />
+          <LabelActionIcon
+            ref={actionRef}
+            x={actionStartX - paddingX / 2}
+            y={0}
+            height={height}
+            paddingX={paddingX}
+            paddingY={paddingY}
+            icon={actionIcon}
+            className={actionIconClassName}
+            onClick={onActionIconClick}
+          />
+        </>
       )}
     </g>
   );

diff --git a/packages/module/src/css/topology-components.css b/packages/module/src/css/topology-components.css
@@ -601,7 +601,7 @@
 }
 
 .pf-topology__group__label > text {
-  fill: var(--pf-v5-global--Color--light-100);
+  fill: var(--pf-topology__group__label__text--Fill);
   font-size: var(--pf-v5-global--FontSize--sm);
   pointer-events: none;
 }
@@ -843,4 +843,5 @@
 
 .pf-topology-default-create-connector__create__cursor {
   fill: var(--pf-topology__create-connector-color--Fill);
-}
+}
+
diff --git a/packages/module/src/css/topology-pipelines.css b/packages/module/src/css/topology-pipelines.css
@@ -558,3 +558,48 @@
 .pf-topology-pipelines__status-icon-background.pf-m-idle.pf-m-selected {
   --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-idle--Stroke);
 }
+
+.pf-topology-pipelines__group__label > text {
+  fill: var(--pf-topology-pipelines__pill-text--Color);
+  font-size: var(--pf-v5-global--FontSize--sm);
+  pointer-events: none;
+}
+
+.pf-topology-pipelines__group.pf-m-selected .pf-topology-pipelines__group__label>text {
+  fill: var(--pf-v5-global--Color--light-100);
+  font-size: var(--pf-v5-global--FontSize--sm);
+  pointer-events: none;
+}
+
+.pf-topology-pipelines__node__label__background {
+  fill: var(--pf-topology-pipelines__node__label__background--fill);
+}
+
+.pf-topology-pipelines__group-inner.pf-m-selected .pf-topology__group__background {
+  --pf-topology__group__background--Fill: var(--pf-topology__group--m-selected--topology__group__background--Fill);
+  --pf-topology__group__background--Stroke: var(--pf-topology__group--m-selected--topology__group__background--Stroke);
+}
+
+.pf-topology-pipelines__group-inner.pf-m-hover .pf-topology__group__background {
+  --pf-topology__group__background--Stroke: var(--pf-topology__group--m-hover--topology__group__background--Stroke);
+  --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--label__node__label__background--Stroke);
+}
+
+.pf-topology-pipelines__group-inner.pf-m-hover.pf-m-selected .pf-topology__group__background {
+  --pf-topology__group__background--Fill: var(--pf-topology__group--m-selected--topology__group__background--Fill);
+  --pf-topology__group__background--Stroke: var(--pf-topology__group--m-selected--m-hover--topology__group__background--Stroke);
+  --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--label__node__label__background--Stroke);
+}
+
+.pf-topology__node__action-icon {
+  fill: var(--pf-v5-global--Color--light-100);
+  stroke: var(--pf-v5-global--active-color--100);
+}
+
+.pf-topology-pipelines__group.pf-m-selected .pf-topology-pipelines__node__label__background {
+  fill: var(--pf-v5-global--active-color--100);
+}
+
+.pf-topology-pipelines__group.pf-m-selected .pf-topology-pipelines__group__label .pf-topology__node__action-icon .pf-topology__node__action-icon__icon {
+  color: white;
+}