@patternfly/react-core 6.2.0-prerelease.32 → 6.2.0-prerelease.34

package/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx

@@ -1,6 +1,7 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 export const TabsVerticalExpandableUncontrolled: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/TextArea/examples/TextArea.md

@@ -6,7 +6,7 @@ cssPrefix: pf-v6-c-form-control
 propComponents: ['TextArea']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 
 ## Examples
 

package/src/components/TextArea/examples/TextAreaAutoResizing.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaAutoResizing: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}

package/src/components/TextArea/examples/TextAreaBasic.tsx

@@ -1,6 +1,7 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaBasic: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return <TextArea value={value} onChange={(_event, value) => setValue(value)} aria-label="text area example" />;
 };

package/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaHorizontallyResizable: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}

package/src/components/TextArea/examples/TextAreaInvalid.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaInvalid: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}

package/src/components/TextArea/examples/TextAreaReadOnly.tsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Checkbox, TextArea } from '@patternfly/react-core';
 
 export const TextAreaReadOnly: React.FunctionComponent = () => {
-  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
+  const [isPlainChecked, setIsPlainChecked] = useState(false);
 
   return (
     <Fragment>

package/src/components/TextArea/examples/TextAreaResizableNone.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const TextAreaResizeNone: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}

package/src/components/TextArea/examples/TextAreaValidated.tsx

@@ -1,10 +1,11 @@
+import { useRef, useState } from 'react';
 import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextArea } from '@patternfly/react-core';
 
 export const TextAreaValidated: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
-  const [helperText, setHelperText] = React.useState('Share your thoughts.');
-  const timerRef = React.useRef<number | null>(null);
+  const [value, setValue] = useState('');
+  const [validated, setValidated] = useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
+  const [helperText, setHelperText] = useState('Share your thoughts.');
+  const timerRef = useRef<number | null>(null);
   const simulateNetworkCall = (callback: Function) => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);

package/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextArea } from '@patternfly/react-core';
 
 export const VerticalResizeTextArea: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextArea
       value={value}

package/src/components/TextInput/examples/TextInput.md

@@ -6,6 +6,7 @@ cssPrefix: pf-v6-c-form-control
 propComponents: ['TextInput', 'TextInputExpandedObj']
 ---
 
+import { useRef, useState } from 'react';
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
 import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
 

package/src/components/TextInput/examples/TextInputBasic.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 
 export const TextInputBasic: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextInput
       value={value}

package/src/components/TextInput/examples/TextInputCustomIcon.tsx

@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
 import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
 
 export const TextInputCustomIcon: React.FunctionComponent = () => {
-  const [calendar, setCalendar] = React.useState('');
-  const [clock, setClock] = React.useState('');
+  const [calendar, setCalendar] = useState('');
+  const [clock, setClock] = useState('');
 
   return (
     <>

package/src/components/TextInput/examples/TextInputCustomIconInvalid.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { TextInput, ValidatedOptions } from '@patternfly/react-core';
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
 
 export const TextInputCustomIconInvalid: React.FunctionComponent = () => {
-  const [calendar, setCalendar] = React.useState('');
+  const [calendar, setCalendar] = useState('');
 
   return (
     <>

package/src/components/TextInput/examples/TextInputInvalid.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextInput, ValidatedOptions } from '@patternfly/react-core';
 
 export const TextInputInvalid: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextInput
       value={value}

package/src/components/TextInput/examples/TextInputReadOnly.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Checkbox, TextInput } from '@patternfly/react-core';
 
 export const TextInputReadOnly: React.FunctionComponent = () => {
-  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
+  const [isPlainChecked, setIsPlainChecked] = useState(false);
   return (
     <>
       <div style={{ marginBottom: '12px' }}>

package/src/components/TextInput/examples/TextInputSelectUsingRef.tsx

@@ -1,8 +1,9 @@
+import { useRef, useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 
 export const TextInputSelectUsingRef: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('select all on click');
-  const ref = React.useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState('select all on click');
+  const ref = useRef<HTMLInputElement>(null);
   return (
     <TextInput
       ref={ref}

package/src/components/TextInput/examples/TextInputStartTruncated.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 
 export const StartTruncatedTextInput: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(
+  const [value, setValue] = useState(
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
   );
   return (

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-text-input-group
 propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilities']
 ---
 
+import { useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 

package/src/components/TextInputGroup/examples/TextInputGroupBasic.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
 
 export const TextInputGroupBasic: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   return (
     <TextInputGroup>
       <TextInputGroupMain value={value} onChange={(_event, value) => setValue(value)} />

package/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   TextInputGroup,
   TextInputGroupMain,
@@ -10,8 +11,8 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const TextInputGroupFilters: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [currentChips, setCurrentChips] = React.useState([
+  const [inputValue, setInputValue] = useState('');
+  const [currentChips, setCurrentChips] = useState([
     'chip one',
     'chip two',
     'chip three',

package/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
+  const [inputValue, setInputValue] = useState('');
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
   const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {

package/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   TextInputGroup,
   TextInputGroupMain,
@@ -11,11 +12,9 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const TextInputGroupWithStatus: React.FunctionComponent = () => {
-  const [successValue, setSuccessValue] = React.useState('Success validation');
-  const [warningValue, setWarningValue] = React.useState('Warning validation with custom non-status icon at start');
-  const [errorValue, setErrorValue] = React.useState(
-    'Error validation with custom non-status icon at start and utilities'
-  );
+  const [successValue, setSuccessValue] = useState('Success validation');
+  const [warningValue, setWarningValue] = useState('Warning validation with custom non-status icon at start');
+  const [errorValue, setErrorValue] = useState('Error validation with custom non-status icon at start and utilities');
 
   /** show the input clearing button only when the input is not empty */
   const showClearButton = !!errorValue;

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -6,6 +6,7 @@ propComponents: ['ToggleGroup', 'ToggleGroupItem']
 ---
 import './toggleGroup.css';
 
+import { useRef, useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';

package/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 export const ToggleGroupCompact: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'toggle-group-compact-1': false,
     'toggle-group-compact-2': false
   });

package/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx

@@ -1,11 +1,12 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
 
 export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'toggle-group-multiple-1': false,
     'toggle-group-multiple-2': false
   });
-  const [disableAll, setDisableAll] = React.useState(false);
+  const [disableAll, setDisableAll] = useState(false);
   const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));

package/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 export const ToggleGroupDefaultSingle: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState('');
+  const [isSelected, setIsSelected] = useState('');
   const handleItemClick = (event, _isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected(id);

package/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx

@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 export const ToggleGroupIcon: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'toggle-group-icons-1': false,
     'toggle-group-icons-2': false,
     'toggle-group-icons-3': true

package/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx

@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 export const ToggleGroupIcon: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'text-icons-1': false,
     'text-icons-2': false,
     'text-icons-3': true

package/src/components/Toolbar/Toolbar.tsx

@@ -57,6 +57,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   ouiaSafe?: boolean;
   /** Background color variant of the toolbar */
   colorVariant?: ToolbarColorVariant | 'default' | 'no-background' | 'primary' | 'secondary';
+  /** Flag indicating the toolbar padding is removed */
+  hasNoPadding?: boolean;
 }
 
 export interface ToolbarState {
@@ -78,6 +80,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   static displayName = 'Toolbar';
   labelGroupContentRef = createRef<HTMLDivElement>();
   staticFilterInfo = {};
+  hasNoPadding = false;
   state = {
     isManagedToggleExpanded: false,
     filterInfo: {},
@@ -128,6 +131,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
 
   renderToolbar = (randomId: string) => {
     const {
+      hasNoPadding,
       clearAllFilters,
       clearFiltersButtonText,
       collapseListedFiltersBreakpoint,
@@ -159,6 +163,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
           <div
             className={css(
               styles.toolbar,
+              hasNoPadding && styles.modifiers.noPadding,
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
               isSticky && styles.modifiers.sticky,

package/src/components/Toolbar/ToolbarContent.tsx

@@ -16,6 +16,15 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
+  /** Value to set for content wrapping at various breakpoints */
+  rowWrap?: {
+    default?: 'wrap' | 'nowrap';
+    sm?: 'wrap' | 'nowrap';
+    md?: 'wrap' | 'nowrap';
+    lg?: 'wrap' | 'nowrap';
+    xl?: 'wrap' | 'nowrap';
+    '2xl'?: 'wrap' | 'nowrap';
+  };
   /** Vertical alignment of children */
   alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Content to be rendered as children of the content row */
@@ -50,6 +59,7 @@ class ToolbarContent extends Component<ToolbarContentProps> {
       isExpanded,
       toolbarId,
       visibility,
+      rowWrap,
       alignItems,
       clearAllFilters,
       showClearFiltersButton,
@@ -95,6 +105,7 @@ class ToolbarContent extends Component<ToolbarContentProps> {
                     <div
                       className={css(
                         styles.toolbarContentSection,
+                        formatBreakpointMods(rowWrap, styles, '', getBreakpoint(width)),
                         alignItems === 'center' && styles.modifiers.alignItemsCenter,
                         alignItems === 'start' && styles.modifiers.alignItemsStart,
                         alignItems === 'baseline' && styles.modifiers.alignItemsBaseline

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -157,6 +157,15 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
       | 'rowGap_3xl'
       | 'rowGap_4xl';
   };
+  /** Value to set for row wrapping at various breakpoints */
+  rowWrap?: {
+    default?: 'wrap' | 'nowrap';
+    sm?: 'wrap' | 'nowrap';
+    md?: 'wrap' | 'nowrap';
+    lg?: 'wrap' | 'nowrap';
+    xl?: 'wrap' | 'nowrap';
+    '2xl'?: 'wrap' | 'nowrap';
+  };
   /** 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. */
@@ -175,6 +184,7 @@ class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
       gap,
       columnGap,
       rowGap,
+      rowWrap,
       className,
       variant,
       children,
@@ -203,6 +213,7 @@ class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
               formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
               formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
               formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(rowWrap, styles, '', getBreakpoint(width)),
               alignItems === 'start' && styles.modifiers.alignItemsStart,
               alignItems === 'center' && styles.modifiers.alignItemsCenter,
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,

package/src/components/Toolbar/ToolbarItem.tsx

@@ -151,6 +151,15 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
       | 'rowGap_3xl'
       | 'rowGap_4xl';
   };
+  /** Value to set for row wrapping at various breakpoints */
+  rowWrap?: {
+    default?: 'wrap' | 'nowrap';
+    sm?: 'wrap' | 'nowrap';
+    md?: 'wrap' | 'nowrap';
+    lg?: 'wrap' | 'nowrap';
+    xl?: 'wrap' | 'nowrap';
+    '2xl'?: 'wrap' | 'nowrap';
+  };
   /** id for this data toolbar item */
   id?: string;
   /** Flag indicating if the expand-all variant is expanded or not */
@@ -168,6 +177,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   gap,
   columnGap,
   rowGap,
+  rowWrap,
   align,
   alignSelf,
   alignItems,
@@ -196,6 +206,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
             formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(rowWrap, styles, '', getBreakpoint(width)),
             alignItems === 'start' && styles.modifiers.alignItemsStart,
             alignItems === 'center' && styles.modifiers.alignItemsCenter,
             alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,

package/src/components/Toolbar/__tests__/Toolbar.test.tsx

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
 import { Toolbar } from '../Toolbar';
@@ -42,6 +43,34 @@ describe('Toolbar', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  it(`should render toolbar without ${styles.modifiers.noPadding} by default`, () => {
+    render(
+      <Toolbar data-testid="toolbar">
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+          <ToolbarItem>Test 2</ToolbarItem>
+          <ToolbarItem variant="separator" />
+          <ToolbarItem>Test 3 </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('toolbar')).not.toHaveClass('pf-m-no-padding');
+  });
+
+  it(`should render toolbar with ${styles.modifiers.noPadding} class when hasNoPadding is true`, () => {
+    render(
+      <Toolbar data-testid="toolbar-no-padding" hasNoPadding>
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+          <ToolbarItem>Test 2</ToolbarItem>
+          <ToolbarItem variant="separator" />
+          <ToolbarItem>Test 3 </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('toolbar-no-padding')).toHaveClass(styles.modifiers.noPadding);
+  });
+
   it('should render with custom label content', () => {
     const items = (
       <Fragment>
@@ -147,4 +176,33 @@ describe('Toolbar', () => {
 
     expect(screen.getByTestId('Toolbar-test-secondary-id')).toHaveClass(styles.modifiers.secondary);
   });
+
+  describe('ToobarContent rowWrap', () => {
+    const bps = ['default', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+    describe.each(bps)(`rowWrap at various breakpoints`, (bp) => {
+      it(`should render with pf-m-wrap when rowWrap is set to wrap at ${bp}`, () => {
+        render(
+          <Toolbar>
+            <ToolbarContent data-testid="toolbarconent" rowWrap={{ [bp]: 'wrap' }}>
+              Test
+            </ToolbarContent>
+          </Toolbar>
+        );
+        const bpWrapClass = bp === 'default' ? 'pf-m-wrap' : `pf-m-wrap-on-${bp}`;
+
+        expect(screen.getByTestId('toolbarconent').querySelector('div')).toHaveClass(bpWrapClass);
+      });
+
+      it(`should render with pf-m-nowrap when rowWrap is set to nowrap at ${bp}`, () => {
+        render(
+          <ToolbarContent data-testid="toolbarconent" rowWrap={{ [bp]: 'nowrap' }}>
+            Test
+          </ToolbarContent>
+        );
+        const bpNoWrapClass = bp === 'default' ? 'pf-m-nowrap' : `pf-m-nowrap-on-${bp}`;
+        expect(screen.getByTestId('toolbarconent').querySelector('div')).toHaveClass(bpNoWrapClass);
+      });
+    });
+  });
 });

package/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { ToolbarGroup } from '../ToolbarGroup';
 
-describe('ToolbarItem', () => {
+describe('ToolbarGroup', () => {
   it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
     render(
       <ToolbarGroup data-testid="toolbargroup" isOverflowContainer>
@@ -10,4 +10,31 @@ describe('ToolbarItem', () => {
     );
     expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container');
   });
+
+  describe('ToobarGroup rowWrap', () => {
+    const bps = ['default', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+    describe.each(bps)(`rowWrap at various breakpoints`, (bp) => {
+      it(`should render with pf-m-wrap when rowWrap is set to wrap at ${bp}`, () => {
+        render(
+          <ToolbarGroup data-testid="toolbargroup" rowWrap={{ [bp]: 'wrap' }}>
+            Test
+          </ToolbarGroup>
+        );
+        const bpWrapClass = bp === 'default' ? 'pf-m-wrap' : `pf-m-wrap-on-${bp}`;
+
+        expect(screen.getByTestId('toolbargroup')).toHaveClass(bpWrapClass);
+      });
+
+      it(`should render with pf-m-nowrap when rowWrap is set to nowrap at ${bp}`, () => {
+        render(
+          <ToolbarGroup data-testid="toolbargroup" rowWrap={{ [bp]: 'nowrap' }}>
+            Test
+          </ToolbarGroup>
+        );
+        const bpNoWrapClass = bp === 'default' ? 'pf-m-nowrap' : `pf-m-nowrap-on-${bp}`;
+        expect(screen.getByTestId('toolbargroup')).toHaveClass(bpNoWrapClass);
+      });
+    });
+  });
 });

package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -10,4 +10,31 @@ describe('ToolbarItem', () => {
     );
     expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-overflow-container');
   });
+
+  describe('ToobarItem rowWrap', () => {
+    const bps = ['default', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+    describe.each(bps)(`rowWrap at various breakpoints`, (bp) => {
+      it(`should render with pf-m-wrap when rowWrap is set to wrap at ${bp}`, () => {
+        render(
+          <ToolbarItem data-testid="toolbaritem" rowWrap={{ [bp]: 'wrap' }}>
+            Test
+          </ToolbarItem>
+        );
+        const bpWrapClass = bp === 'default' ? 'pf-m-wrap' : `pf-m-wrap-on-${bp}`;
+
+        expect(screen.getByTestId('toolbaritem')).toHaveClass(bpWrapClass);
+      });
+
+      it(`should render with pf-m-nowrap when rowWrap is set to nowrap at ${bp}`, () => {
+        render(
+          <ToolbarItem data-testid="toolbaritem" rowWrap={{ [bp]: 'nowrap' }}>
+            Test
+          </ToolbarItem>
+        );
+        const bpNoWrapClass = bp === 'default' ? 'pf-m-nowrap' : `pf-m-nowrap-on-${bp}`;
+        expect(screen.getByTestId('toolbaritem')).toHaveClass(bpNoWrapClass);
+      });
+    });
+  });
 });

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

@@ -51,7 +51,7 @@ exports[`Toolbar should render with custom label content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar pf-m-toggle-group-container"
-    data-ouia-component-id="OUIA-Generated-Toolbar-2"
+    data-ouia-component-id="OUIA-Generated-Toolbar-4"
     data-ouia-component-type="PF6/Toolbar"
     data-ouia-safe="true"
     id="toolbar-with-filter"