fix(ui): align Carbon icons after PatternFly icon migration

Author: shivamG640

packages/ui/src/components/Visualization/Canvas/Canvas.tsx

@@ -1,6 +1,6 @@
 import './Canvas.scss';
 
-import { Catalog, FitToScreen, Network_2, ZoomIn, ZoomOut } from '@carbon/icons-react';
+import { Catalog, FitToScreen, Network_2 as NetworkIcon, ZoomIn, ZoomOut } from '@carbon/icons-react';
 import {
   action,
   createTopologyControlButtons,
@@ -172,7 +172,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({
       customButtons.push(
         {
           id: 'topology-control-bar-h_layout-button',
-          icon: <Network_2 />,
+          icon: <NetworkIcon />,
           tooltip: 'Layout nodes horizontally',
           callback: action(() => {
             localStorage.setItem(LocalStorageKeys.CanvasLayout, LayoutType.DagreHorizontal);
@@ -182,7 +182,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({
         },
         {
           id: 'topology-control-bar-v_layout-button',
-          icon: <Network_2 className="canvas-layout-icon-vertical" />,
+          icon: <NetworkIcon className="canvas-layout-icon-vertical" />,
           tooltip: 'Layout nodes vertically',
           callback: action(() => {
             localStorage.setItem(LocalStorageKeys.CanvasLayout, LayoutType.DagreVertical);

packages/ui/src/components/Visualization/Canvas/CanvasToolbar/StepToolbar.tsx

@@ -145,6 +145,7 @@ export const StepToolbar: FunctionComponent<IStepToolbar> = ({
 
         {canBeDisabled && (
           <Button
+            icon={isDisabled ? <Checkmark /> : <ErrorIcon />}
             className="step-toolbar__button"
             data-testid={`${label}|step-toolbar-button-disable`}
             variant="control"
@@ -153,9 +154,7 @@ export const StepToolbar: FunctionComponent<IStepToolbar> = ({
               event.stopPropagation();
               onToggleDisableNode();
             }}
-          >
-            {isDisabled ? <Checkmark /> : <ErrorIcon />}
-          </Button>
+          />
         )}
 
         {areMultipleStepsDisabled && (
@@ -188,6 +187,7 @@ export const StepToolbar: FunctionComponent<IStepToolbar> = ({
 
         {onCollapseToggle && (
           <Button
+            icon={isCollapsed ? <Maximize /> : <Minimize />}
             className="step-toolbar__button"
             data-testid={`${label}|step-toolbar-button-collapse`}
             variant="control"
@@ -196,9 +196,7 @@ export const StepToolbar: FunctionComponent<IStepToolbar> = ({
               event.stopPropagation();
               onCollapseToggle();
             }}
-          >
-            {isCollapsed ? <Maximize /> : <Minimize />}
-          </Button>
+          />
         )}
 
         {canRemoveStep && (

packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.tsx

@@ -1,7 +1,7 @@
 import './FlowsMenu.scss';
 
 import { List } from '@carbon/icons-react';
-import { Badge, Icon, MenuToggle, MenuToggleElement, Select } from '@patternfly/react-core';
+import { Badge, MenuToggle, MenuToggleElement, Select } from '@patternfly/react-core';
 import { FunctionComponent, Ref, useContext, useState } from 'react';
 
 import { getVisibleFlowsInformation } from '../../../../models/visualization/flows/support/flows-visibility';
@@ -25,14 +25,12 @@ export const FlowsMenu: FunctionComponent = () => {
       className="flows-menu"
       ref={toggleRef}
       onClick={onToggleClick}
+      icon={<List />}
     >
-      <Icon isInline>
-        <List />
-      </Icon>
       <span
         title={singleFlowId ?? 'Routes'}
         data-testid="flows-list-route-id"
-        className="pf-v6-u-m-sm flows-menu-display"
+        className="flows-menu-display"
       >
         {`${singleFlowId ?? 'Routes'}`}
       </span>

packages/ui/src/components/Visualization/ContextToolbar/NewEntity/NewEntity.tsx

@@ -89,9 +89,9 @@ export const NewEntity: FunctionComponent = () => {
             setIsOpen(!isOpen);
           }}
           isExpanded={isOpen}
+          icon={<Add />}
         >
-          <Add />
-          <span className="pf-v6-u-m-sm">New</span>
+          New
         </MenuToggle>
       }
       toggleRef={toggleRef}

packages/ui/src/styles/carbon-overrides.scss

@@ -125,3 +125,39 @@ body {
 .pf-v6-c-form__label-text {
   --pf-v6-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--400);
 }
+
+/*
+  PatternFly components align their children on the text baseline and relied on the
+  PatternFly icons being 1em SVGs with `vertical-align: -0.125em`. Carbon icons are
+  fixed-size SVGs without that offset, so they ride high next to the label.
+  Center the element that holds the icon instead of depending on baselines:
+  - `__icon`: the wrapper Button, MenuToggle, ToggleGroupItem and Label render for their `icon` prop.
+  - the topology control bar passes its icon as a bare child, so it lands in `__text`.
+*/
+/* stylelint-disable selector-class-pattern */
+.pf-v6-c-button .pf-v6-c-button__icon,
+.pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__icon,
+.pf-v6-c-toggle-group .pf-v6-c-toggle-group__icon,
+.pf-v6-c-label .pf-v6-c-label__icon,
+.pf-topology-control-bar__button .pf-v6-c-button__text {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+
+  /*
+    Keep the line box the icon used to occupy so icon-only buttons don't shrink to the 16px glyph.
+    `--pf-v6-c-button--LineHeight` is only defined inside buttons, hence the global fallback.
+  */
+  min-block-size: calc(1em * var(--pf-v6-c-button--LineHeight, var(--pf-t--global--font--line-height--body)));
+}
+
+/*
+  Topology context menu items render `<Icon /> Label` as plain children, so the icon lands inline in
+  `__item-text` instead of in a dedicated icon slot. Restore the baseline offset the PatternFly icons
+  carried; a flex layout is avoided to keep the text ellipsis and the existing spacing untouched.
+*/
+.pf-topology-context-menu__c-dropdown__menu .pf-v6-c-menu__item-text > svg {
+  vertical-align: -0.125em;
+}
+/* stylelint-enable selector-class-pattern */