chore(docs): Updated the Navigation demos to use the masthead instead of the page header

packages/react-core/src/components/Page/examples/Page.md

@@ -16,10 +16,6 @@ propComponents:
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import {
-PageHeader,
-PageHeaderTools
-} from '@patternfly/react-core/deprecated';
 import './page.css';
 
 ## Examples

packages/react-core/src/components/Toolbar/ToolbarGroup.tsx

@@ -53,6 +53,8 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   };
   /** Content to be rendered inside the data toolbar group */
   children?: React.ReactNode;
+  /** Flag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation. */
+  isOverflowContainer?: boolean;
   /** @hide Reference to pass to this group if it has .pf-m-chip-container modifier */
   innerRef?: React.RefObject<any>;
 }
@@ -69,6 +71,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
       className,
       variant,
       children,
+      isOverflowContainer,
       innerRef,
       ...props
     } = this.props;
@@ -88,6 +91,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
               alignSelf === 'center' && styles.modifiers.alignSelfCenter,
               alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
+              isOverflowContainer && styles.modifiers.overflowContainer,
               className
             )}
             {...props}

packages/react-core/src/components/Toolbar/ToolbarItem.tsx

@@ -70,6 +70,8 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   id?: string;
   /** Flag indicating if the expand-all variant is expanded or not */
   isAllExpanded?: boolean;
+  /** Flag that modifies the toolbar item to hide overflow and respond to available space. Used for horizontal navigation. */
+  isOverflowContainer?: boolean;
   /** Content to be rendered inside the data toolbar item */
   children?: React.ReactNode;
 }
@@ -85,6 +87,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   id,
   children,
   isAllExpanded,
+  isOverflowContainer,
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
@@ -116,6 +119,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
                   | 'chipGroup'
               ],
             isAllExpanded && styles.modifiers.expanded,
+            isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
             formatBreakpointMods(align, styles, '', getBreakpoint(width)),
             formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),

packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ToolbarGroup } from '../ToolbarGroup';
+
+describe('ToolbarItem', () => {
+  it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
+    render(<ToolbarGroup data-testid="toolbargroup" isOverflowContainer>Test</ToolbarGroup>);
+    expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container');
+  });
+});

packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { ToolbarItem } from '../ToolbarItem';
 
 describe('ToolbarItem', () => {
@@ -16,4 +16,9 @@ describe('ToolbarItem', () => {
     const { asFragment } = render(<ToolbarItem widths={widths}>Test</ToolbarItem>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
+    render(<ToolbarItem data-testid="toolbaritem" isOverflowContainer>Test</ToolbarItem>);
+    expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-overflow-container');
+  });
 });