From b43133d5a1e5475313bfc9f3297e2b5b277f7052 Mon Sep 17 00:00:00 2001 From: mfrances Date: Mon, 24 Feb 2025 17:50:18 -0500 Subject: [PATCH 1/5] feat(Toolbar): Add row wrap prop to ToolbarGroup and ToolbarItem --- .../src/components/Toolbar/ToolbarGroup.tsx | 11 +++++++++++ .../react-core/src/components/Toolbar/ToolbarItem.tsx | 11 +++++++++++ .../Toolbar/__tests__/ToolbarGroup.test.tsx | 8 ++++++++ .../components/Toolbar/__tests__/ToolbarItem.test.tsx | 8 ++++++++ .../Toolbar/examples/ToolbarGroupSpacers.tsx | 6 +++--- .../Toolbar/examples/ToolbarItemSpacers.tsx | 10 +++++----- 6 files changed, 46 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx index ca5454a888b..d8a426496f7 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx @@ -157,6 +157,15 @@ export interface ToolbarGroupProps extends Omit, | 'rowGap_3xl' | 'rowGap_4xl'; }; + /** Value to set for row wrapping at various breakpoints */ + rowWrap?: { + default?: 'wrap' | 'wrapReverse' | 'nowrap'; + sm?: 'wrap' | 'wrapReverse' | 'nowrap'; + md?: 'wrap' | 'wrapReverse' | 'nowrap'; + lg?: 'wrap' | 'wrapReverse' | 'nowrap'; + xl?: 'wrap' | 'wrapReverse' | 'nowrap'; + '2xl'?: 'wrap' | 'wrapReverse' | '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 { gap, columnGap, rowGap, + rowWrap, className, variant, children, @@ -203,6 +213,7 @@ class ToolbarGroupWithRef extends Component { 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, diff --git a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx index 315df000323..33517120bbd 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx @@ -151,6 +151,15 @@ export interface ToolbarItemProps extends React.HTMLProps { | 'rowGap_3xl' | 'rowGap_4xl'; }; + /** Value to set for row wrapping at various breakpoints */ + rowWrap?: { + default?: 'wrap' | 'wrapReverse' | 'nowrap'; + sm?: 'wrap' | 'wrapReverse' | 'nowrap'; + md?: 'wrap' | 'wrapReverse' | 'nowrap'; + lg?: 'wrap' | 'wrapReverse' | 'nowrap'; + xl?: 'wrap' | 'wrapReverse' | 'nowrap'; + '2xl'?: 'wrap' | 'wrapReverse' | '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 = ({ gap, columnGap, rowGap, + rowWrap, align, alignSelf, alignItems, @@ -196,6 +206,7 @@ export const ToolbarItem: React.FunctionComponent = ({ 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, diff --git a/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx index f278800d97a..1af80f0f8c7 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx +++ b/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx @@ -10,4 +10,12 @@ describe('ToolbarItem', () => { ); expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container'); }); + it('should render with pf-m-wrap when rowWrap is set', () => { + render( + + Test + + ); + expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-wrap'); + }); }); diff --git a/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx index 707ba5920c8..2945d7d8984 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx +++ b/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx @@ -10,4 +10,12 @@ describe('ToolbarItem', () => { ); expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-overflow-container'); }); + it('should render with pf-m-wrap when rowWrap is set', () => { + render( + + Test + + ); + expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-wrap'); + }); }); diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx index dc413856b0f..9096a55d21c 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx @@ -76,7 +76,7 @@ export const ToolbarGroupSpacers: React.FunctionComponent = () => { const groupRowGapItems = ( - + @@ -103,7 +103,7 @@ export const ToolbarGroupSpacers: React.FunctionComponent = () => { - + @@ -130,7 +130,7 @@ export const ToolbarGroupSpacers: React.FunctionComponent = () => { - + diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx index 8ac72d23389..3f051a8972a 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx @@ -5,7 +5,7 @@ import { Button } from '@patternfly/react-core'; export const ToolbarItemSpacers: React.FunctionComponent = () => { const itemGapItems = ( - + @@ -26,7 +26,7 @@ export const ToolbarItemSpacers: React.FunctionComponent = () => { const itemColumnGapItems = ( - + @@ -48,17 +48,17 @@ export const ToolbarItemSpacers: React.FunctionComponent = () => { const itemRowGapItems = ( - + - + - + From 555a6110286fdee631a2048764f4d06342e147e8 Mon Sep 17 00:00:00 2001 From: mfrances Date: Tue, 25 Feb 2025 07:57:42 -0500 Subject: [PATCH 2/5] rm unsupported wrap reverse --- .../src/components/Toolbar/ToolbarGroup.tsx | 12 ++++++------ .../src/components/Toolbar/ToolbarItem.tsx | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx index d8a426496f7..124fdcfa59b 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx @@ -159,12 +159,12 @@ export interface ToolbarGroupProps extends Omit, }; /** Value to set for row wrapping at various breakpoints */ rowWrap?: { - default?: 'wrap' | 'wrapReverse' | 'nowrap'; - sm?: 'wrap' | 'wrapReverse' | 'nowrap'; - md?: 'wrap' | 'wrapReverse' | 'nowrap'; - lg?: 'wrap' | 'wrapReverse' | 'nowrap'; - xl?: 'wrap' | 'wrapReverse' | 'nowrap'; - '2xl'?: 'wrap' | 'wrapReverse' | 'nowrap'; + 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; diff --git a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx index 33517120bbd..028e899d645 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx @@ -153,12 +153,12 @@ export interface ToolbarItemProps extends React.HTMLProps { }; /** Value to set for row wrapping at various breakpoints */ rowWrap?: { - default?: 'wrap' | 'wrapReverse' | 'nowrap'; - sm?: 'wrap' | 'wrapReverse' | 'nowrap'; - md?: 'wrap' | 'wrapReverse' | 'nowrap'; - lg?: 'wrap' | 'wrapReverse' | 'nowrap'; - xl?: 'wrap' | 'wrapReverse' | 'nowrap'; - '2xl'?: 'wrap' | 'wrapReverse' | 'nowrap'; + 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; From 31b9795cbd0358d843a62384f4fd1e2263a97d07 Mon Sep 17 00:00:00 2001 From: mfrances Date: Wed, 26 Feb 2025 18:25:59 -0500 Subject: [PATCH 3/5] add wrap to toolbar content --- .../src/components/Toolbar/ToolbarContent.tsx | 11 ++++++ .../Toolbar/__tests__/Toolbar.test.tsx | 24 +++++++++++++ .../Toolbar/__tests__/ToolbarGroup.test.tsx | 10 +++++- .../Toolbar/__tests__/ToolbarItem.test.tsx | 10 +++++- .../components/Toolbar/examples/Toolbar.md | 9 ++++- .../Toolbar/examples/ToolbarContentWrap.tsx | 35 +++++++++++++++++++ 6 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 packages/react-core/src/components/Toolbar/examples/ToolbarContentWrap.tsx diff --git a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx index 2f4839219fd..ec722df5a42 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx @@ -16,6 +16,15 @@ export interface ToolbarContentProps extends React.HTMLProps { 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 { isExpanded, toolbarId, visibility, + rowWrap, alignItems, clearAllFilters, showClearFiltersButton, @@ -95,6 +105,7 @@ class ToolbarContent extends Component {
{ expect(screen.getByTestId('Toolbar-test-secondary-id')).toHaveClass(styles.modifiers.secondary); }); + + it('should render ToolbarContent with pf-m-wrap when rowWrap is set to wrap', () => { + render( + + + Test + + + ); + + expect(screen.getByTestId('toolbarcontent').querySelector('div')).toHaveClass('pf-m-wrap'); + }); + + it('should render ToolbarContent with pf-m-nowrap when rowWrap is set to nowrap', () => { + render( + + + Test + + + ); + + expect(screen.getByTestId('toolbarcontent').querySelector('div')).toHaveClass('pf-m-nowrap'); + }); }); diff --git a/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx index 1af80f0f8c7..d9b9829df54 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx +++ b/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx @@ -10,7 +10,7 @@ describe('ToolbarItem', () => { ); expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container'); }); - it('should render with pf-m-wrap when rowWrap is set', () => { + it('should render with pf-m-wrap when rowWrap is set to wrap', () => { render( Test @@ -18,4 +18,12 @@ describe('ToolbarItem', () => { ); expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-wrap'); }); + it('should render with pf-m-nowrap when rowWrap is set to nowrap', () => { + render( + + Test + + ); + expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-nowrap'); + }); }); diff --git a/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx index 2945d7d8984..a963267ed4e 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx +++ b/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx @@ -10,7 +10,7 @@ describe('ToolbarItem', () => { ); expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-overflow-container'); }); - it('should render with pf-m-wrap when rowWrap is set', () => { + it('should render with pf-m-wrap when rowWrap is set to wrap', () => { render( Test @@ -18,4 +18,12 @@ describe('ToolbarItem', () => { ); expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-wrap'); }); + it('should render with pf-m-nowrap when rowWrap is set to nowrap', () => { + render( + + Test + + ); + expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-nowrap'); + }); }); diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md index 9e1840ed83d..2a0f85e197e 100644 --- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md +++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md @@ -113,11 +113,18 @@ When all of a toolbar's required elements cannot fit in a single line, you can s ``` -## Examples with toolbar spacers +## Examples with spacers and wrapping You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers. Items are spaced “16px” apart by default and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl". +### Toolbar content wrapping +The toolbar content section will wrap by default, but you can set the `rowRap` property to `noWrap` to make it not wrap. + +```ts file="./ToolbarContentWrap.tsx" + +``` + ### Toolbar group spacers ```ts file="./ToolbarGroupSpacers.tsx" diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarContentWrap.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarContentWrap.tsx new file mode 100644 index 00000000000..45dbc55c6bb --- /dev/null +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarContentWrap.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core'; +import { Button, SearchInput } from '@patternfly/react-core'; + +export const ToolbarItems: React.FunctionComponent = () => { + const items = ( + + + + + + + + + + + + + + + + + + + + + + ); + + return ( + + {items} + + ); +}; From e6ecd2e8c1cf85807a51da5c92192800029d503f Mon Sep 17 00:00:00 2001 From: mfrances Date: Mon, 10 Mar 2025 17:10:50 -0400 Subject: [PATCH 4/5] test rowWrap for all breakpoints --- .../Toolbar/__tests__/Toolbar.test.tsx | 49 ++++++++++--------- .../Toolbar/__tests__/ToolbarGroup.test.tsx | 43 ++++++++++------ .../Toolbar/__tests__/ToolbarItem.test.tsx | 41 ++++++++++------ 3 files changed, 80 insertions(+), 53 deletions(-) diff --git a/packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx index a9a5ae45458..0b23a45fe36 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx +++ b/packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx @@ -148,27 +148,32 @@ describe('Toolbar', () => { expect(screen.getByTestId('Toolbar-test-secondary-id')).toHaveClass(styles.modifiers.secondary); }); - it('should render ToolbarContent with pf-m-wrap when rowWrap is set to wrap', () => { - render( - - - Test - - - ); - - expect(screen.getByTestId('toolbarcontent').querySelector('div')).toHaveClass('pf-m-wrap'); - }); - - it('should render ToolbarContent with pf-m-nowrap when rowWrap is set to nowrap', () => { - render( - - - Test - - - ); - - expect(screen.getByTestId('toolbarcontent').querySelector('div')).toHaveClass('pf-m-nowrap'); + 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( + + + Test + + + ); + 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( + + Test + + ); + const bpNoWrapClass = bp === 'default' ? 'pf-m-nowrap' : `pf-m-nowrap-on-${bp}`; + expect(screen.getByTestId('toolbarconent').querySelector('div')).toHaveClass(bpNoWrapClass); + }); + }); }); }); diff --git a/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx index d9b9829df54..935a5480ee1 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx +++ b/packages/react-core/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( @@ -10,20 +10,31 @@ describe('ToolbarItem', () => { ); expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container'); }); - it('should render with pf-m-wrap when rowWrap is set to wrap', () => { - render( - - Test - - ); - expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-wrap'); - }); - it('should render with pf-m-nowrap when rowWrap is set to nowrap', () => { - render( - - Test - - ); - expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-nowrap'); + + 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( + + Test + + ); + 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( + + Test + + ); + const bpNoWrapClass = bp === 'default' ? 'pf-m-nowrap' : `pf-m-nowrap-on-${bp}`; + expect(screen.getByTestId('toolbargroup')).toHaveClass(bpNoWrapClass); + }); + }); }); }); diff --git a/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx index a963267ed4e..5fbd364a87a 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx +++ b/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx @@ -10,20 +10,31 @@ describe('ToolbarItem', () => { ); expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-overflow-container'); }); - it('should render with pf-m-wrap when rowWrap is set to wrap', () => { - render( - - Test - - ); - expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-wrap'); - }); - it('should render with pf-m-nowrap when rowWrap is set to nowrap', () => { - render( - - Test - - ); - expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-nowrap'); + + 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( + + Test + + ); + 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( + + Test + + ); + const bpNoWrapClass = bp === 'default' ? 'pf-m-nowrap' : `pf-m-nowrap-on-${bp}`; + expect(screen.getByTestId('toolbaritem')).toHaveClass(bpNoWrapClass); + }); + }); }); }); From 994fe51c8f81d1d94de6a550a9ab739e589d53f5 Mon Sep 17 00:00:00 2001 From: mfrances Date: Tue, 11 Mar 2025 16:39:00 -0400 Subject: [PATCH 5/5] fixed test after bad merge --- .../src/components/Toolbar/examples/ToolbarContentWrap.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarContentWrap.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarContentWrap.tsx index 45dbc55c6bb..466de5c1cdb 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarContentWrap.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarContentWrap.tsx @@ -1,10 +1,10 @@ -import React from 'react'; +import { Fragment } from 'react'; import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core'; import { Button, SearchInput } from '@patternfly/react-core'; export const ToolbarItems: React.FunctionComponent = () => { const items = ( - + @@ -24,7 +24,7 @@ export const ToolbarItems: React.FunctionComponent = () => { - + ); return (