@patternfly/react-core 5.0.0-prerelease.1 → 5.0.0-prerelease.3

package/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap

@@ -124,14 +124,21 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="2"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-45"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="2"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-pagination__nav-control"
@@ -315,14 +322,21 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="2"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-43"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="2"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-pagination__nav-control"
@@ -506,14 +520,21 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="2"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-42"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="2"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-pagination__nav-control"
@@ -697,14 +718,21 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="2"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-40"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="2"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-pagination__nav-control"
@@ -888,14 +916,21 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="2"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-41"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="2"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-pagination__nav-control"
@@ -1079,14 +1114,21 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="2"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-44"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="2"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-pagination__nav-control"
@@ -1256,14 +1298,21 @@ exports[`Pagination component render custom pagination toggle 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="4"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-13"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="4"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -1451,14 +1500,21 @@ exports[`Pagination component render custom perPageOptions 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="4"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-9"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="4"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -1644,14 +1700,21 @@ exports[`Pagination component render custom start end 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="4"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-11"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="4"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -1798,14 +1861,21 @@ exports[`Pagination component render empty per page options 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="4"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="4"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -1991,14 +2061,21 @@ exports[`Pagination component render last page 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="2"
-          min="1"
-          type="number"
-          value="2"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-8"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="2"
+            min="1"
+            type="number"
+            value="2"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -2188,15 +2265,22 @@ exports[`Pagination component render limited number of pages 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
-          class="pf-v5-c-form-control"
-          disabled=""
-          max="1"
-          min="1"
-          type="number"
-          value="1"
-        />
+        <div
+          class="pf-v5-c-form-control pf-m-disabled"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            disabled=""
+            max="1"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -2374,14 +2458,21 @@ exports[`Pagination component render should render correctly bottom 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="2"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="2"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -2557,14 +2648,21 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="2"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="2"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -2878,15 +2976,22 @@ exports[`Pagination component render should render correctly disabled 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
-          class="pf-v5-c-form-control"
-          disabled=""
-          max="2"
-          min="1"
-          type="number"
-          value="1"
-        />
+        <div
+          class="pf-v5-c-form-control pf-m-disabled"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            disabled=""
+            max="2"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -3076,14 +3181,21 @@ exports[`Pagination component render should render correctly sticky 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="2"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="2"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -3271,14 +3383,21 @@ exports[`Pagination component render should render correctly top 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="2"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="2"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -3466,14 +3585,21 @@ exports[`Pagination component render titles 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="4"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-12"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="4"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -3661,14 +3787,21 @@ exports[`Pagination component render up drop direction 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
+        <div
           class="pf-v5-c-form-control"
-          max="4"
-          min="1"
-          type="number"
-          value="1"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-14"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            max="4"
+            min="1"
+            type="number"
+            value="1"
+          />
+        </div>
         <span
           aria-hidden="true"
         >
@@ -3856,15 +3989,22 @@ exports[`Pagination component render zero results 1`] = `
       <div
         class="pf-v5-c-pagination__nav-page-select"
       >
-        <input
-          aria-label="Current page"
-          class="pf-v5-c-form-control"
-          disabled=""
-          max="0"
-          min="1"
-          type="number"
-          value="0"
-        />
+        <div
+          class="pf-v5-c-form-control pf-m-disabled"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Current page"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            disabled=""
+            max="0"
+            min="1"
+            type="number"
+            value="0"
+          />
+        </div>
         <span
           aria-hidden="true"
         >

package/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}

package/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)),

package/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');
+  });
+});

package/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');
+  });
 });