feat(update): cherry pick v5 updates onto main (#265)

* feat(context menu): Add the hideContextMenuKebab option to groups (#261) add feature to topology package demo * feat(group): Add support for custom classname on group labels
patternfly · Jan 6, 2025 · 99f505b · 99f505b
1 parent ccaeee0
commit 99f505b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 8 deletions.
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoGroup.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoGroup.tsx
@@ -51,7 +51,8 @@ const DemoGroup: React.FunctionComponent<DemoGroupProps> = ({ element, onContext
   return (
     <DefaultGroup
       {...rest}
-      onContextMenu={data.showContextMenu ? onContextMenu : undefined}
+      onContextMenu={options.contextMenus ? onContextMenu : undefined}
+      hideContextMenuKebab={options.hideKebabMenu}
       element={element}
       collapsible
       collapsedWidth={DEFAULT_NODE_SIZE}

diff --git a/packages/module/release.config.js b/packages/module/release.config.js
@@ -1,8 +1,5 @@
 module.exports = {
-  branches: [
-    'do-not-delete',
-    { name: 'main', channel: 'prerelease', prerelease: 'prerelease' },
-  ],
+  branches: ['do-not-delete', { name: 'main', channel: 'prerelease', prerelease: 'prerelease' }],
   analyzeCommits: {
     preset: 'angular'
   },

diff --git a/packages/module/src/components/groups/DefaultGroup.tsx b/packages/module/src/components/groups/DefaultGroup.tsx
@@ -32,6 +32,8 @@ interface DefaultGroupProps {
   secondaryLabel?: string;
   /** Flag to show the label */
   showLabel?: boolean; // Defaults to true
+  /** Additional classes to add to the label */
+  labelClassName?: string;
   /** Flag to show the label when hovering (effects expanded only) */
   showLabelOnHover?: boolean;
   /** Position of the label, top or bottom. Defaults to element.getLabelPosition() or bottom */
@@ -82,6 +84,8 @@ interface DefaultGroupProps {
   onContextMenu?: (e: React.MouseEvent) => void;
   /** Flag indicating that the context menu for the node is currently open  */
   contextMenuOpen?: boolean;
+  /** Hide context menu kebab for the group  */
+  hideContextMenuKebab?: boolean;
   /** Flag indicating whether to use hull layout or rect layout for expanded groups. Defaults to hull (true) */
   hulledOutline?: boolean;
   /** Border radius for rectangular groups when expanded. Defaults to 16px */

diff --git a/packages/module/src/components/groups/DefaultGroupCollapsed.tsx b/packages/module/src/components/groups/DefaultGroupCollapsed.tsx
@@ -32,6 +32,7 @@ type DefaultGroupCollapsedProps = {
   label?: string; // Defaults to element.getLabel()
   secondaryLabel?: string;
   showLabel?: boolean; // Defaults to true
+  hideContextMenuKebab?: boolean;
   labelPosition?: LabelPosition; // Defaults to bottom
   truncateLength?: number; // Defaults to 13
   labelIconClass?: string; // Icon to show in label
@@ -43,6 +44,7 @@ type DefaultGroupCollapsedProps = {
   badgeBorderColor?: string;
   badgeClassName?: string;
   badgeLocation?: BadgeLocation;
+  labelClassName?: string;
 } & CollapsibleGroupProps &
   WithDragNodeProps &
   WithSelectionProps &
@@ -72,6 +74,7 @@ const DefaultGroupCollapsed: React.FunctionComponent<DefaultGroupCollapsedProps>
   dropTarget,
   onContextMenu,
   contextMenuOpen,
+  hideContextMenuKebab,
   dragging,
   labelPosition,
   badge,
@@ -82,7 +85,8 @@ const DefaultGroupCollapsed: React.FunctionComponent<DefaultGroupCollapsedProps>
   badgeLocation,
   labelIconClass,
   labelIcon,
-  labelIconPadding
+  labelIconPadding,
+  labelClassName
 }) => {
   const [hovered, hoverRef] = useHover();
   const [labelHover, labelHoverRef] = useHover();
@@ -154,7 +158,7 @@ const DefaultGroupCollapsed: React.FunctionComponent<DefaultGroupCollapsedProps>
       )}
       {showLabel && (
         <NodeLabel
-          className={styles.topologyGroupLabel}
+          className={css(styles.topologyGroupLabel, labelClassName)}
           x={collapsedWidth / 2}
           y={labelPosition === LabelPosition.top ? collapsedHeight / 2 - collapsedHeight : collapsedHeight + 6}
           paddingX={8}
@@ -174,6 +178,7 @@ const DefaultGroupCollapsed: React.FunctionComponent<DefaultGroupCollapsedProps>
           labelIconPadding={labelIconPadding}
           onContextMenu={onContextMenu}
           contextMenuOpen={contextMenuOpen}
+          hideContextMenuKebab={hideContextMenuKebab}
           hover={isHover || labelHover}
           actionIcon={collapsible ? <ExpandIcon /> : undefined}
           onActionIconClick={() => onCollapseChange(element, false)}

diff --git a/packages/module/src/components/groups/DefaultGroupExpanded.tsx b/packages/module/src/components/groups/DefaultGroupExpanded.tsx
@@ -32,13 +32,15 @@ type DefaultGroupExpandedProps = {
   secondaryLabel?: string;
   showLabel?: boolean; // Defaults to true
   showLabelOnHover?: boolean;
+  hideContextMenuKebab?: boolean;
   truncateLength?: number; // Defaults to 13
   badge?: string;
   badgeColor?: string;
   badgeTextColor?: string;
   badgeBorderColor?: string;
   badgeClassName?: string;
   badgeLocation?: BadgeLocation;
+  labelClassName?: string;
   labelIconClass?: string; // Icon to show in label
   labelIcon?: string;
   labelPosition?: LabelPosition;
@@ -129,6 +131,7 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> =
   dropTarget,
   onContextMenu,
   contextMenuOpen,
+  hideContextMenuKebab,
   dragging,
   dragNodeRef,
   badge,
@@ -137,6 +140,7 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> =
   badgeBorderColor,
   badgeClassName,
   badgeLocation,
+  labelClassName,
   labelIconClass,
   labelIcon,
   labelPosition,
@@ -252,7 +256,7 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> =
     (showLabel || (showLabelOnHover && isHover)) && (label || element.getLabel()) ? (
       <g ref={labelHoverRef} transform={isHover ? `scale(${labelScale})` : undefined}>
         <NodeLabel
-          className={styles.topologyGroupLabel}
+          className={css(styles.topologyGroupLabel, labelClassName)}
           x={startX * labelPositionScale}
           y={startY * labelPositionScale}
           paddingX={8}
@@ -272,6 +276,7 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> =
           labelIconPadding={labelIconPadding}
           onContextMenu={onContextMenu}
           contextMenuOpen={contextMenuOpen}
+          hideContextMenuKebab={hideContextMenuKebab}
           hover={isHover || labelHover}
           actionIcon={collapsible ? <CollapseIcon /> : undefined}
           onActionIconClick={() => onCollapseChange(element, true)}