fix(PageHeader): reduce margins in breadcrumb

Author: logonoff

packages/module/src/PageHeader/PageHeader.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import {
+  Button,
+  ButtonProps,
+  ButtonVariant,
+  Content,
+  Divider,
   Flex,
   FlexItem,
+  PageBreadcrumb,
+  PageSection,
   Split,
   SplitItem,
-  Content,
-  PageSection,
-  Button,
-  ButtonVariant,
-  ButtonProps,
-  Divider,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { createUseStyles } from 'react-jss';
@@ -64,54 +65,61 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   const { isExternal = false, ...linkRestProps } = linkProps ?? {};
 
   return (
-    <PageSection hasBodyWrapper={false}>
-      { breadcrumbs && (
-        <div className="pf-v6-u-mb-md">
+    <>
+      {breadcrumbs && (
+        <PageBreadcrumb>
           {breadcrumbs}
-        </div>
+        </PageBreadcrumb>
       )}
-      <Flex>
-        {icon && (
-          <>
-            <FlexItem alignSelf={{ default: 'alignSelfCenter' }} className={`${classes.iconMinWidth}`}>
-              {icon}
-            </FlexItem>
-            <Divider orientation={{
-              default: 'vertical',
-            }} />
-          </>
-        )}
-        <FlexItem flex={{ default: 'flex_1' }}>
-          <Split hasGutter>
-            <SplitItem>
-              <Content className="pf-v6-u-mb-sm" component="h1" ouiaId={`${ouiaId}-title`}>
-                {title}
+      <PageSection hasBodyWrapper={false}>
+        <Flex>
+          {icon && (
+            <>
+              <FlexItem alignSelf={{ default: 'alignSelfCenter' }} className={classes.iconMinWidth}>
+                {icon}
+              </FlexItem>
+              <Divider orientation={{
+                default: 'vertical',
+              }} />
+            </>
+          )}
+          <FlexItem flex={{ default: 'flex_1' }}>
+            <Split hasGutter>
+              {title && (
+                <SplitItem>
+                  <Content className="pf-v6-u-mb-sm" component="h1" ouiaId={`${ouiaId}-title`}>
+                    {title}
+                  </Content>
+                </SplitItem>
+              )}
+              {label && (
+                <SplitItem>
+                  {label}
+                </SplitItem>
+              )}
+              <SplitItem isFilled />
+              {actionMenu && (
+                <SplitItem>
+                  {actionMenu}
+                </SplitItem>
+              )}
+            </Split>
+            {subtitle && (
+              <Content component="p" ouiaId={`${ouiaId}-subtitle`}>
+                {subtitle}
               </Content>
-            </SplitItem>
-            {label && (
-              <SplitItem>
-                {label}
-              </SplitItem>
             )}
-            <SplitItem isFilled />
-            {actionMenu && (
-              <SplitItem>
-                {actionMenu}
-              </SplitItem>
+            {linkProps && (
+              <Button variant={ButtonVariant.link} component="a" ouiaId={`${ouiaId}-link-button`} isInline icon={isExternal ? <ExternalLinkAltIcon className='pf-v6-u-ml-sm' /> : null} iconPosition="end" {...linkRestProps}>
+                {linkProps.label}
+              </Button>
             )}
-          </Split>
-          <Content component="p" ouiaId={`${ouiaId}-subtitle`}>
-            {subtitle}
-          </Content>
-          {linkProps && (
-            <Button variant={ButtonVariant.link} component="a" ouiaId={`${ouiaId}-link-button`} isInline icon={isExternal ? <ExternalLinkAltIcon className='pf-v6-u-ml-sm' /> : null} iconPosition="end" {...linkRestProps}>
-              {linkProps.label}
-            </Button>
-          )}
-        </FlexItem>
-      </Flex>
-      {children}
-    </PageSection>
-  )};
+          </FlexItem>
+        </Flex>
+        {children}
+      </PageSection>
+    </>
+  )
+};
 
 export default PageHeader;