Skip to content

Commit

Permalink
feat(context menu): add prop to hide the context menu kebab (patternf…
Browse files Browse the repository at this point in the history
…ly#250)

Add demo option to hide kebab context menus (patternfly#14)

add condition to contextSpace to fix label size

add check to TaskPill

remove hideContextMenuKebab from withContextMenuProps

add hideContextMenuKebab to NodeLabelProps to fix error
  • Loading branch information
jenny-s51 committed Dec 4, 2024
1 parent 159a0c1 commit 80013b0
Show file tree
Hide file tree
Showing 7 changed files with 29 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ const DemoNode: React.FunctionComponent<DemoNodeProps> = observer(
showStatusDecorator={detailsLevel === ScaleDetailsLevel.high && options.showStatus}
statusDecoratorTooltip={nodeElement.getNodeStatus()}
onContextMenu={options.contextMenus ? onContextMenu : undefined}
hideContextMenuKebab={options.hideKebabMenu}
onShowCreateConnector={detailsLevel !== ScaleDetailsLevel.low ? onShowCreateConnector : undefined}
onHideCreateConnector={onHideCreateConnector}
labelIcon={options.icons && LabelIcon && <LabelIcon noVerticalAlign />}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,17 @@ const OptionsContextBar: React.FC = observer(() => {
>
Context Menus
</SelectOption>
<SelectOption
hasCheckbox
value="Hide context kebab menu"
isSelected={options.nodeOptions.hideKebabMenu}
isDisabled={!options.nodeOptions.contextMenus}
onClick={() =>
options.setNodeOptions({ ...options.nodeOptions, hideKebabMenu: !options.nodeOptions.hideKebabMenu })
}
>
Hide kebab for context menu
</SelectOption>
<SelectOption
hasCheckbox
value="Rectangle Groups"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export interface GeneratorNodeOptions {
badges?: boolean;
icons?: boolean;
contextMenus?: boolean;
hideKebabMenu?: boolean;
hulledOutline?: boolean;
}

Expand Down
6 changes: 5 additions & 1 deletion packages/module/src/components/nodes/DefaultNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,8 @@ interface DefaultNodeProps {
contextMenuOpen?: boolean;
/** Flag indicating the label should move to the top layer when the node is hovered, set to `false` if you are already using TOP_LAYER on hover */
raiseLabelOnHover?: boolean; // TODO: Update default to be false, assume demo code will be followed
/** Hide context menu kebab for the node */
hideContextMenuKebab?: boolean;
}

const SCALE_UP_TIME = 200;
Expand Down Expand Up @@ -169,7 +171,8 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
onShowCreateConnector,
onContextMenu,
contextMenuOpen,
raiseLabelOnHover = true
raiseLabelOnHover = true,
hideContextMenuKebab
}) => {
const [hovered, hoverRef] = useHover();
const status = nodeStatus || element.getNodeStatus();
Expand Down Expand Up @@ -370,6 +373,7 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
badgeLocation={badgeLocation}
onContextMenu={onContextMenu}
contextMenuOpen={contextMenuOpen}
hideContextMenuKebab={hideContextMenuKebab}
hover={isHover}
labelIconClass={labelIconClass}
labelIcon={labelIcon}
Expand Down
7 changes: 5 additions & 2 deletions packages/module/src/components/nodes/labels/NodeLabel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export type NodeLabelProps = {
badgeBorderColor?: string;
badgeClassName?: string;
badgeLocation?: BadgeLocation;
hideContextMenuKebab?: boolean;
} & Partial<WithContextMenuProps>;

/**
Expand Down Expand Up @@ -77,6 +78,7 @@ const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
dropTarget,
onContextMenu,
contextMenuOpen,
hideContextMenuKebab,
actionIcon,
actionIconClassName,
onActionIconClick,
Expand Down Expand Up @@ -124,7 +126,7 @@ const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
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 contextSpace = onContextMenu && contextSize ? contextSize.width : 0;
const contextSpace = !hideContextMenuKebab && onContextMenu && contextSize ? contextSize.width : 0;
const primaryWidth = iconSpace + badgeSpace + paddingX + textSize.width + actionSpace + contextSpace + paddingX;
const secondaryWidth = secondaryLabel && secondaryTextSize ? secondaryTextSize.width + 2 * paddingX : 0;
const width = Math.max(primaryWidth, secondaryWidth);
Expand Down Expand Up @@ -184,6 +186,7 @@ const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
labelIcon,
actionIcon,
actionSize,
hideContextMenuKebab,
onContextMenu,
contextSize,
secondaryLabel,
Expand Down Expand Up @@ -293,7 +296,7 @@ const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
/>
</>
)}
{textSize && onContextMenu && (
{textSize && onContextMenu && !hideContextMenuKebab && (
<>
<line
className={css(styles.topologyNodeSeparator)}
Expand Down
2 changes: 2 additions & 0 deletions packages/module/src/pipelines/components/nodes/TaskNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@ export interface TaskNodeProps {
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 node */
hideContextMenuKebab?: boolean;
/** Number of shadowed pills to show */
shadowCount?: number;
/** Offset for each shadow */
Expand Down
6 changes: 4 additions & 2 deletions packages/module/src/pipelines/components/nodes/TaskPill.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
onSelect,
onContextMenu,
contextMenuOpen,
hideContextMenuKebab,
actionIcon,
actionIconClassName,
onActionIconClick,
Expand Down Expand Up @@ -147,7 +148,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
const actionSpace = actionIcon && actionSize ? actionSize.width + paddingX : 0;

const contextStartX = actionStartX + actionSpace;
const contextSpace = onContextMenu && contextSize ? contextSize.width + paddingX / 2 : 0;
const contextSpace = !hideContextMenuKebab && onContextMenu && contextSize ? contextSize.width + paddingX / 2 : 0;

const pillWidth = contextStartX + contextSpace + paddingX / 2;

Expand Down Expand Up @@ -185,6 +186,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
badge,
actionIcon,
actionSize,
hideContextMenuKebab,
onContextMenu,
contextSize,
verticalLayout,
Expand Down Expand Up @@ -416,7 +418,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
/>
</>
)}
{textSize && onContextMenu && (
{textSize && onContextMenu && !hideContextMenuKebab && (
<>
<line
className={css(topologyStyles.topologyNodeSeparator)}
Expand Down

0 comments on commit 80013b0

Please sign in to comment.